版權(quán)聲明：本文為博主原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接和本聲明。
歡迎大家去我的個人技術(shù)博客看看，點贊收藏注冊的都是好人哦~
一、數(shù)組的拓展方法
關(guān)于數(shù)組的拓展方法，我們需要關(guān)心兩個地方。
1.?方法的返回值
2.?是否改變原數(shù)組??(有的是直接改變原數(shù)組??有的是形成新的數(shù)組)
數(shù)組中?元素的?增刪改???查
push()?在數(shù)組尾部添加一個或多個元素
????返回值??????新增元素后數(shù)組的長度
????是否改變原數(shù)組???改變
????var?list?=?[54,?68,?46,?75,?36,?20,?65,?11,?79,?45];
????console.log(list);? ? ????//?[54, 68, 46, 75, 36, 20, 65, 11, 79, 45]
????var?result?=?list.push("x",?"y",?"z");??// 可以使用數(shù)組的遞增賦值來實現(xiàn)list[list.length]
????console.log(result);? ?// ????13
????console.log(list); // ????[54, 68, 46, 75, 36, 20, 65, 11, 79, 45, "x", "y", "z"]
unshift()???在數(shù)組頭部添加一個或多個元素
????返回值??????新增元素后數(shù)組的長度
????是否改變原數(shù)組???改變
????var?list?=?[54,?68,?46,?75,?36,?20,?65,?11,?79,?45];
????console.log(list);
????var?result?=?list.unshift("x",?"y",?"z");
????console.log(result);? ? ?// 13
????console.log(list);? ? ? ?//????["x", "y", "z", 54, 68, 46, 75, 36, 20, 65, 11, 79, 45]
????pop()???刪除數(shù)組尾部的元素
????返回值??被刪除的元素
????是否改變原數(shù)組???改變
????var?list?=?[54,?68,?46,?75,?36,?20,?65,?11,?79,?45];
????console.log(list);
????var?result?=?list.pop();
????console.log(result);? ? //????45
????console.log(list);? ? //????[54, 68, 46, 75, 36, 20, 65, 11, 79]
?shift()???刪除數(shù)組首部的元素
????返回值??被刪除的元素
????是否改變原數(shù)組???改變?
????var?list?=?[54,?68,?46,?75,?36,?20,?65,?11,?79,?45];
????console.log(list);
????var?result?=?list.shift();
????console.log(result);? ? ?//????54
????console.log(list);? ? //????[68, 46, 75, 36, 20, 65, 11, 79, 45]
?splice()???增刪改
?刪除
????splice(startIndex,n)??從下標(biāo)為?startIndex的位置開始?刪除n?個元素
????返回值??被刪除的元素?形成新的的數(shù)組
????是否改變原數(shù)組???改變?
????var?list?=?[54,?68,?46,?75,?36,?20,?65,?11,?79,?45];
?????console.log(list);
????var?result?=?list.splice(5,?2);
????console.log(result);? ? //????54
????console.log(list);? ? //????[68, 46, 75, 36, 20, 65, 11, 79, 45]
新增
splice(startIndex,0,item1,item2,item3?...?itemN)??從下標(biāo)為?startIndex的位置開始?刪除0?個元素,再增加一個或多個元素
????返回值??[]
????是否改變原數(shù)組???改變?
????var?list?=?[54,?68,?46,?75,?36,?20,?65,?11,?79,?45];
????console.log(list);
????var?result?=?list.splice(5,?0,?"x",?"y");
????console.log(result);? ????//????[]
????console.log(list);? ? //????[54, 68, 46, 75, 36, "x", "y", 20, 65, 11, 79, 45]
修改
??splice(startIndex,n,item1,item2,item3?...?itemN)??從下標(biāo)為?startIndex的位置開始?刪除n?個元素,再增加一個或多個元素
????返回值??被刪除的元素?形成新的的數(shù)組
????是否改變原數(shù)組???改變?
????var?list?=?[54,?68,?46,?75,?36,?20,?65,?11,?79,?45];
????console.log(list);
????var?result?=?list.splice(5,?1,?50);
????console.log(result);? ? //?[20]
????console.log(list);? ? //?????[54, 68, 46, 75, 36, 50, 65, 11, 79, 45]
slice(startIndex,endIndex)?????[startIndex,endIndex)???數(shù)組的裁切?(將數(shù)組中的某一段??拿出來)
????startIndex??起始下標(biāo)??startIndex默認(rèn)為0
????endIndex????結(jié)束下標(biāo)??endIndex?默認(rèn)值是length
????返回值??被裁切的元素形成的新數(shù)組
????是否改變原數(shù)組???不改變?
????var?list?=?[54,?68,?46,?75,?36,?20,?65,?11,?79,?45];
????console.log(list);
? ? ?var?result?=?list.slice(3,?6);? ??
? ? console.log(list.slice()); ????//????[54, 68, 46, 75, 36, 20, 65, 11, 79, 45]
????console.log(result);? ? //?????[75, 36, 20]
????console.log(list);? ? ? ?//?[54, 68, 46, 75, 36, 20, 65, 11, 79, 45]
?concat()???數(shù)組的拼接/合并??(如果參數(shù)是單個元素?直接拼接到新數(shù)組中去??如果參數(shù)是數(shù)組的話,會把數(shù)組的元素合并到新數(shù)組中)
????返回值??拼接后形成的新數(shù)組
????是否改變原數(shù)組???不改變?
????var?list?=?[54,?68,?46,?75,?36,?20,?65,?11,?79,?45];
????console.log(list);
????var?arr?=?["a",?"b",?"c"];
????var?result?=?list.concat("x",?"y",?arr);?????
????console.log(result);? ? //?????[54, 68, 46, 75, 36, 20, 65, 11, 79, 45, "x", "y", "a", "b", "c"]
????console.log(list);? ? //????[54, 68, 46, 75, 36, 20, 65, 11, 79, 45]
???reverse()?數(shù)組的翻轉(zhuǎn)/反轉(zhuǎn)
????返回值??反轉(zhuǎn)后的原數(shù)組
????是否改變原數(shù)組???改變?
????var?list?=?["a",?"b",?"c",?"d",?"e",?"f"];?
????console.log(list);
????var?result?=?list.reverse();????
????console.log(result);? ??//? ["f","e","d","c","b","a"];
????console.log(list);? ? //????["f", "e", "d", "c", "b", "a"]
?includes()????包含?判斷數(shù)組中是否包含某個元素??包含返回?true???不包含返回?false
????var?list?=?["a",?"b",?"c",?"d",?"e",?"f"];
????var?result?=?list.includes("f1");? ? //????false
????console.log(result);
????console.log(list);
?indexOf()????包含?判斷數(shù)組中是否包含某個元素??包含就返回該元素的下標(biāo)????不包含返回?-1
????var?list?=?["a",?"b",?"c",?"d",?"e",?"f"];
????var?result?=?list.indexOf("f1");? ? //? ? -1
????console.log(result);
????console.log(list);
join() 方法用于把數(shù)組中的所有元素放入一個字符串。元素是通過指定的分隔符進(jìn)行分隔的。
返回值? 拼接后的字符串
是否改變原數(shù)組? ?不改變?
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
console.log(arr.join(','))? ? //George,John,Thomas
數(shù)組的方法進(jìn)階：
sort()??數(shù)組的排序
1.?字符排序
2.??純數(shù)字排序
var?list?=?[5,?1,?8,?3,?"a",?11,?"B",?22,?"?",?0,?"今天",?12,?36,?"A",?44,?4];
console.log(list);? ? ? ?//?????[5, 1, 8, 3, "a", 11, "B", 22, " ", 0, "今天", 12, 36, "A", 44, 4]
1.?字符/字母?排序???跟數(shù)字的大小沒有關(guān)系??跟?ASCII碼表有關(guān)
????"?"???32
????0?????48
????A?????65
????a?????97
????var?list?=?[5,?1,?8,?3,?"a",?11,?"B",?22,?"?",?0,?"今天",?12,?36,?"A",?44,?4];
????var?result?=?list.sort();
????console.log(result);? ? //?????[" ", 0, 1, 11, 12, 22, 3, 36, 4, 44, 5, 8, "A", "B", "a", "今天"]
????console.log(list);? ? //?????[" ", 0, 1, 11, 12, 22, 3, 36, 4, 44, 5, 8, "A", "B", "a", "今天"]
2.純數(shù)字排序
????var?list?=?[5,?1,?8,?3,?11,?22,?12,?36,?44,?4];
????var?result?=?list.sort(function?(a,?b)?{
????????//?console.log(a,?b);
????????return?b?-?a;
????????//??return?a-b;???從小到大排
????????//?return?b-a;???從大到小排
????})
? ? console.log(result);? //??[44, 36, 22, 12, 11, 8, 5, 4, 3, 1]
forEach???遍歷數(shù)組
????var?list?=?[5,?9,?26,?3,?86,?52,?7,?5,?15,?48];
????list.forEach(function?(item,?index,?array)?{
????????//?item????每次循環(huán)的當(dāng)前元素
????????//?index???每次循環(huán)的下標(biāo)
????????//?array???原數(shù)組
????????console.log(index,?item,?array);
????})
map????遍歷數(shù)組???回調(diào)函數(shù)可以設(shè)置一個返回值???map?會將?回調(diào)函數(shù)的返回值?存到一個新的數(shù)組中?返回出來
返回一個新數(shù)組?
????var?list?=?[5,?9,?26,?3,?86,?52,?7,?5,?15,?48];
????var?result?=?list.map(function?(item,?index,?array)?{
????????console.log(index,?item,?array);
????????return?item?+?index;
????});
????console.log(result);? ? //?[5, 10, 28, 6, 90, 57, 13, 12, 23, 57]
篩選
????filter??遍歷數(shù)組??回調(diào)函數(shù)可以返回一個條件??把滿足條件的數(shù)據(jù)?篩選出來?放到一個新數(shù)組中
????var?list?=?[5,?9,?26,?3,?86,?52,?7,?5,?15,?48,?0];
????var?result?=?list.filter(function?(item,?index,?array)?{
????????return?item?<?50;
????})
????console.log(result);? ? ? ?//????[5, 9, 26, 3, 7, 5, 15, 48, 0]
some??遍歷數(shù)組???回調(diào)函數(shù)可以返回一個條件??只要有一個元素滿足該條件??則返回true??都不滿足返回false
????var?list?=?[5,?9,?26,?3,?86,?52,?7,?5,?15,?48,?0];
????var?result?=?list.some(function?(item,?index)?{
????????return?item?>=?60;
????})
????console.log(result);? ? ? //????true
every??遍歷數(shù)組???回調(diào)函數(shù)可以返回一個條件?所有的條件都滿足才會返回true??只要有一個不滿足則返回false
var?list?=?[5,?9,?26,?3,?86,?52,?7,?5,?15,?48,?0];
var?result?=?list.every(function?(item,?index)?{
????????return?item?>=?1;
})
??console.log(result);?? ? ? //?false
判斷數(shù)組是否是數(shù)組
1、instanceof??????判斷對應(yīng)數(shù)據(jù)是否是通過?構(gòu)造函數(shù)?Array?創(chuàng)造出來的?(說法不準(zhǔn)確)??是?返回?true??不是??返回false
?console.log(arr?instanceof?Array);? ? ? ? //????true
console.log(document?instanceof?Array);? ? //????false
console.log(""?instanceof?Array);? ? //????false
console.log([]?instanceof?Array);? ? //????true
2.?Array.isArray()???構(gòu)造函數(shù)的靜態(tài)方法??(構(gòu)造函數(shù)本身?Array?自己調(diào)用)???是?返回?true??不是??返回false
console.log(Array.isArray(arr));??//????true
console.log(Array.isArray(1));??//????false
console.log(Array.isArray(document));??//????false
