使用for...in：
let arr = ["pingan", "leo", "robin"];
for(let i in arr){
console.log(`第${i}個(gè)元素是：${arr[i]}；`)
}
// 第0個(gè)元素是：pingan；
// 第1個(gè)元素是：leo；
// 第2個(gè)元素是：robin；
使用forEach：
arr.forEach(callback) 接收一個(gè)回調(diào)方法。
callback(val, index, array) : 接收三個(gè)參數(shù)：
* `val` : 當(dāng)前處理的元素；
* `index` : 當(dāng)前處理的元素的索引；
* `array` : 正在處理的數(shù)組；
可參考MDN Array.prototype.forEach 的詳細(xì)介紹。
let arr = ["pingan", "leo", "robin"];
arr.forEach(function(val, i, array){
console.log(`第${i}個(gè)元素是：${val}；`)
})
3. 數(shù)組方法（訪問和修改）
| 方法名稱 |
方法介紹 |
| concat() |
連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。 |
| join() |
把數(shù)組的所有元素放入一個(gè)字符串。元素通過指定的分隔符進(jìn)行分隔。 |
| pop() |
刪除并返回?cái)?shù)組的最后一個(gè)元素 |
| push() |
向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度。 |
| reverse() |
顛倒數(shù)組中元素的順序。 |
| shift() |
刪除并返回?cái)?shù)組的第一個(gè)元素 |
| slice() |
從某個(gè)已有的數(shù)組返回選定的元素 |
| sort() |
對(duì)數(shù)組的元素進(jìn)行排序 |
| splice() |
刪除元素，并向數(shù)組添加新元素。 |
| toSource() |
返回該對(duì)象的源代碼。 |
| toString() |
把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。 |
| toLocaleString() |
把數(shù)組轉(zhuǎn)換為本地?cái)?shù)組，并返回結(jié)果。 |
| unshift() |
向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。 |
| valueOf() |
返回?cái)?shù)組對(duì)象的原始值 |
| indexOf() |
在數(shù)組中搜索指定元素并返回第一個(gè)匹配的索引 |
| lastIndexOf() |
在數(shù)組中搜索指定元素并返回最后一個(gè)匹配的索引 |
可參考W3school JavaScript Array 對(duì)象 的詳細(xì)介紹。
3.1 concat()
連接兩個(gè)或更多的數(shù)組，并返回一個(gè)新數(shù)組。
語法:
arr.concat(a1, a2, ..., an);
參數(shù):
arr：目標(biāo)數(shù)組；
a1,a2,...,an：需要合并的元素；
let a1 = [1,2,3];
let a2 = [9,99,999];
let a = a1.concat(a2);
// [1, 2, 3, 9, 99, 999]
3.2 join()
使用指定分隔符，連接兩個(gè)或多個(gè)數(shù)組的元素，返回一個(gè)字符串。
語法:
arr.join(sep);
參數(shù):
arr：目標(biāo)數(shù)組；
sep：連接的分隔符，默認(rèn)值為“,”；
let arr = ["pingan", "leo", "robin"];
arr.join(); // "pingan,leo,robin"
arr.join(""); // "pinganleorobin"
arr.join(","); // "pingan,leo,robin"
3.3 pop()和push()
pop(): 刪除并返回?cái)?shù)組最后一個(gè)元素，改變?cè)瓟?shù)組。
push(item): 向數(shù)組末尾添加一個(gè)或多個(gè)元素，改變?cè)瓟?shù)組，返回新的數(shù)組長(zhǎng)度。
方便記憶和理解：兩個(gè)都是從數(shù)組末尾操作，pop()是刪除最后一個(gè)元素，push()是向最后一位添加新的元素。
let arr = ["pingan", "leo"];
let a1 = arr.pop(); // "leo"
let a2 = arr.push("robin","hi"); // 3
arr; // ["pingan", "robin", "hi"]
3.4 shift()和unshift()
shift(): 刪除并返回?cái)?shù)組第一個(gè)元素，改變?cè)瓟?shù)組。
unshift(item): 向數(shù)組頭部添加一個(gè)或多個(gè)元素，改變?cè)瓟?shù)組，返回新的數(shù)組長(zhǎng)度。
方便記憶和理解：兩個(gè)都是從數(shù)組頭部操作，shift()是刪除第一個(gè)元素，unshift()是向第一位添加新的元素。
let arr = ["pingan", "leo"];
let a1 = arr.shift(); // "pingan"
let a2 = arr.unshift("robin","hi"); // 3
arr; // ["robin", "hi", "leo"]
3.5 reverse()
顛倒數(shù)組中元素的順序，改變?cè)瓟?shù)組。
let arr = [1, 2, 3, 4];
arr.reverse(); //?[4, 3, 2, 1]
3.6 slice()
用于提取數(shù)組中一個(gè)片段，作為新數(shù)組返回。
slice(start[,end]): 接收2個(gè)參數(shù)：
start: 必需，指定起始索引，若負(fù)數(shù)則從數(shù)組最后開始算起，-1為倒數(shù)第一位，-2為倒數(shù)第二位，以此類推。
end： 可選，指定結(jié)束索引，若沒傳則表示到數(shù)組結(jié)束。
注意：
end若有指定的話，是不包含end索引上的值。
let arr = [1, 2, 3, 5, 6];
let a1 = arr.slice(2); // [3, 5, 6]
let a2 = arr.slice(2,3); // [3]
3.7 splice()
從數(shù)組中刪除指定索引開始的項(xiàng)目，然后返回被刪除的項(xiàng)目。
語法：
arr.splice(index, num, a1, a2,...,an);
參數(shù)：
index: 必需，起始位置的索引，若負(fù)數(shù)則從數(shù)組最后開始算起；
num：必需，刪除的數(shù)量，若為0則不刪除；
a1,a2,...an：可選，為數(shù)組添加的元素；
let arr = [1, 2, 3, 4];
let a = arr.splice(1, 2, "hi", "leo");
// a => ?[2, 3]
// arr => [1, "hi", "leo", 4]
3.8 sort()
對(duì)數(shù)組的元素進(jìn)行排序，改變?cè)瓟?shù)組。
可接受一個(gè)回調(diào)方法作為比較函數(shù)，來決定排序方式。
比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b，返回值如下：
若 a 小于 b，在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前，則返回一個(gè)小于 0 的值。
若 a 等于 b，則返回 0。
若 a 大于 b，則返回一個(gè)大于 0 的值。
let a1 = [1,3,6,9,10];
a1.sort(); // [1, 10, 3, 6, 9]
a1.sort(function(a,b){
return a > b ? 1 : a < b ? -1 : 0;
}) // [1, 3, 6, 9, 10]
3.9 indexOf()和lastIndexOf()
兩者都是在數(shù)組搜索指定元素，只是indexOf()返回的是搜索到的第一個(gè)元素的索引，而lastIndexOf()返回的是搜索到的最后一個(gè)元素的索引。
語法：
indexOf(ele[,start])和lastIndexOf(ele[,start]);
參數(shù)：
ele: 需要搜索的元素。
start: 開始搜索的索引。
let arr = ["hh1", "hh2", "hh2", "hh2", "hh3", "hh4"];
let a1 = arr.indexOf("hh2"); // 1
let a2 = arr.lastIndexOf("hh2"); // 3
let a3 = arr.indexOf("hh2",2); // 2
4. 數(shù)組方法（迭代）
| 方法名稱 |
方法介紹 |
| forEach() |
為數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù)。 |
| every() |
如果數(shù)組中的每個(gè)元素都滿足測(cè)試函數(shù)，則返回 true，否則返回 false。 |
| some() |
如果數(shù)組中至少有一個(gè)元素滿足測(cè)試函數(shù)，則返回 true，否則返回 false。 |
| filter() |
將所有在過濾函數(shù)中返回 true 的數(shù)組元素放進(jìn)一個(gè)新數(shù)組中并返回。 |
| map() |
返回一個(gè)由回調(diào)函數(shù)的返回值組成的新數(shù)組。 |
| reduce() |
從左到右為每個(gè)數(shù)組元素執(zhí)行一次回調(diào)函數(shù)，并把上次回調(diào)函數(shù)的返回值放在一個(gè)暫存器中傳給下次回調(diào)函數(shù)，并返回最后一次回調(diào)函數(shù)的返回值。 |
| reduceRight() |
從右到左為每個(gè)數(shù)組元素執(zhí)行一次回調(diào)函數(shù)，并把上次回調(diào)函數(shù)的返回值放在一個(gè)暫存器中傳給下次回調(diào)函數(shù)，并返回最后一次回調(diào)函數(shù)的返回值。 |
以下是ES6規(guī)范新增的數(shù)組方法：
| 方法名稱 |
方法介紹 |
| keys() |
返回一個(gè)數(shù)組迭代器對(duì)象，該迭代器會(huì)包含所有數(shù)組元素的鍵。 |
| values() |
返回一個(gè)數(shù)組迭代器對(duì)象，該迭代器會(huì)包含所有數(shù)組元素的值。 |
| entries() |
返回一個(gè)數(shù)組迭代器對(duì)象，該迭代器會(huì)包含所有數(shù)組元素的鍵值對(duì)。 |
| find() |
找到第一個(gè)滿足測(cè)試函數(shù)的元素并返回那個(gè)元素的值，如果找不到，則返回 undefined。 |
| findIndex() |
找到第一個(gè)滿足測(cè)試函數(shù)的元素并返回那個(gè)元素的索引，如果找不到，則返回 -1。 |
可參考MDN Array 的詳細(xì)介紹。
4.1 forEach()
對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)。
語法：
arr.forEach(callback)。
參數(shù)：
callback(val, index, arr) : 需要執(zhí)行的函數(shù)，接收三個(gè)參數(shù)：
val : 正在處理的當(dāng)前元素;
index : 可選，正在處理的當(dāng)前元素的索引;
arr : 可選，正在操作的數(shù)組;
let a = [1,3,5,7];
a.forEach(function(val, index, arr){
arr[index] = val * 2
})
a ; // [2, 6, 10, 14]
4.2 every()
測(cè)試數(shù)組的所有元素是否都通過了指定函數(shù)的測(cè)試。
語法：
arr.every(callback)。
參數(shù)：
callback(val, index, arr) : 需要執(zhí)行的函數(shù)，接收三個(gè)參數(shù)：
val : 正在處理的當(dāng)前元素;
index : 可選，正在處理的當(dāng)前元素的索引;
arr : 可選，正在操作的數(shù)組;
返回值：
若都通過返回true，否則返回false。
let a = [1, "", "aa", 13, 6];
let res = a.every(function(val, index, arr){
return typeof val == "number";
})
res;// false
let b = [1, 2, 3];
let r = b.every(function(val, index, arr){
return typeof val == "number";
})
r; // true
4.3 some()
測(cè)試數(shù)組中的某些元素是否通過由提供的函數(shù)實(shí)現(xiàn)的測(cè)試。
語法：
arr.some(callback)。
參數(shù)：
callback(val, index, arr) : 需要執(zhí)行的函數(shù)，接收三個(gè)參數(shù)：
val : 正在處理的當(dāng)前元素;
index : 可選，正在處理的當(dāng)前元素的索引;
arr : 可選，正在操作的數(shù)組;
返回值：
若有一個(gè)通過返回true，否則返回false。
let a = [1, "", "aa", 13, 6];
let res = a.some(function(val, index, arr){
return typeof val == "number";
})
res;// true
let b = [1, 2, 3];
let r = b.some(function(val, index, arr){
return typeof val == "number";
})
r; // true
4.4 filter()
將所有在過濾函數(shù)中返回 true 的數(shù)組元素放進(jìn)一個(gè)新數(shù)組中并返回。
語法：
arr.filter(callback)。
參數(shù)：
callback(val, index, arr) : 需要執(zhí)行的函數(shù)，接收三個(gè)參數(shù)：
val : 正在處理的當(dāng)前元素;
index : 可選，正在處理的當(dāng)前元素的索引;
arr : 可選，正在操作的數(shù)組;
返回值：
一個(gè)返回通過測(cè)試的元素的數(shù)組，若都沒有則返回空數(shù)組。
let a = [1, "", "aa", 13, 6];
let res = a.filter(function(val, index, arr){
return typeof val == "number";
})
res;//[1, 13, 6]
4.5 map()
傳入一個(gè)操作函數(shù)，對(duì)每個(gè)元素執(zhí)行此方法，并返回一個(gè)執(zhí)行后的數(shù)組。
語法：
arr.map(callback)。
參數(shù)：
callback(val, index, arr) : 需要執(zhí)行的函數(shù)，接收三個(gè)參數(shù)：
val : 正在處理的當(dāng)前元素;
index : 可選，正在處理的當(dāng)前元素的索引;
arr : 可選，正在操作的數(shù)組;
返回值：
一個(gè)新數(shù)組，每個(gè)元素都是回調(diào)函數(shù)的結(jié)果。
let a = [1, 3, 5];
let b = a.map(function(val, index, arr){
return val + 2;
})
b; //[3, 5, 7]
5. 數(shù)組的拓展(ES6)
5.1 拓展運(yùn)算符
拓展運(yùn)算符使用(...)，類似rest參數(shù)的逆運(yùn)算，將數(shù)組轉(zhuǎn)為用(,)分隔的參數(shù)序列。
console.log(...[1, 2, 3]); // 1 2 3
console.log(1, ...[2,3], 4); // 1 2 3 4
拓展運(yùn)算符主要使用在函數(shù)調(diào)用。
function f (a, b){
console.log(a, b);
}
f(...[1, 2]); // 1 2
function g (a, b, c, d, e){
console.log(a, b, c, d, e);
}
g(0, ...[1, 2], 3, ...[4]); // 0 1 2 3 4
若拓展運(yùn)算符后面是個(gè)空數(shù)組，則不產(chǎn)生效果。
[...[], 1]; // [1]
替代apply方法
// ES6之前
function f(a, b, c){...};
var a = [1, 2, 3];
f.apply(null, a);
// ES6之后
function f(a, b, c){...};
let a = [1, 2, 3];
f(...a);
// ES6之前
Math.max.apply(null, [3,2,6]);
// ES6之后
Math.max(...[3,2,6]);
拓展運(yùn)算符的運(yùn)用
(1)復(fù)制數(shù)組：
通常我們直接復(fù)制數(shù)組時(shí)，只是淺拷貝，如果要實(shí)現(xiàn)深拷貝，可以使用拓展運(yùn)算符。
// 通常情況 淺拷貝
let a1 = [1, 2];
let a2 = a1;
a2[0] = 3;
console.log(a1,a2); // [3,2] [3,2]
// 拓展運(yùn)算符 深拷貝
let a1 = [1, 2];
let a2 = [...a1];
// let [...a2] = a1; // 作用相同
a2[0] = 3;
console.log(a1,a2); // [1,2] [3,2]
(2)合并數(shù)組：
注意，這里合并數(shù)組，只是淺拷貝。
let a1 = [1,2];
let a2 = [3];
let a3 = [4,5];
// ES5
let a4 = a1.concat(a2, a3);
// ES6
let a5 = [...a1, ...a2, ...a3];
a4[0] === a1[0]; // true
a5[0] === a1[0]; // true
(3)與解構(gòu)賦值結(jié)合：
與解構(gòu)賦值結(jié)合生成數(shù)組，但是使用拓展運(yùn)算符需要放到參數(shù)最后一個(gè)，否則報(bào)錯(cuò)。
let [a, ...b] = [1, 2, 3, 4];
// a => 1 b => [2,3,4]
let [a, ...b] = [];
// a => undefined b => []
let [a, ...b] = ["abc"];
// a => "abc" b => []
5.2 Array.from()
將 類數(shù)組對(duì)象 和 可遍歷的對(duì)象，轉(zhuǎn)換成真正的數(shù)組。
// 類數(shù)組對(duì)象
let a = {
"0":"a",
"1":"b",
length:2
}
let arr = Array.from(a);
// 可遍歷的對(duì)象
let a = Array.from([1,2,3]);
let b = Array.from({length: 3});
let c = Array.from([1,2,3]).map(x => x * x);
let d = Array.from([1,2,3].map(x => x * x));
5.3 Array.of()
將一組數(shù)值，轉(zhuǎn)換成數(shù)組，彌補(bǔ)Array方法參數(shù)不同導(dǎo)致的差異。
Array.of(1,2,3); // [1,2,3]
Array.of(1).length; // 1
Array(); // []
Array(2); // [,] 1個(gè)參數(shù)時(shí)，為指定數(shù)組長(zhǎng)度
Array(1,2,3); // [1,2,3] 多于2個(gè)參數(shù)，組成新數(shù)組
5.4 find()和findIndex()
find()方法用于找出第一個(gè)符合條件的數(shù)組成員，參數(shù)為一個(gè)回調(diào)函數(shù)，所有成員依次執(zhí)行該回調(diào)函數(shù)，返回第一個(gè)返回值為true的成員，如果沒有一個(gè)符合則返回undefined。
[1,2,3,4,5].find( a => a < 3 ); // 1
回調(diào)函數(shù)接收三個(gè)參數(shù)，當(dāng)前值、當(dāng)前位置和原數(shù)組。
[1,2,3,4,5].find((value, index, arr) => {
// ...
});
findIndex()方法與find()類似，返回第一個(gè)符合條件的數(shù)組成員的位置，如果都不符合則返回-1。
[1,2,3,4].findIndex((v,i,a)=>{
return v>2;
}); // 2
5.5 fill()
用于用指定值填充一個(gè)數(shù)組，通常用來初始化空數(shù)組，并抹去數(shù)組中已有的元素。
new Array(3).fill("a"); // ["a","a","a"]
[1,2,3].fill("a"); // ["a","a","a"]
并且fill()的第二個(gè)和第三個(gè)參數(shù)指定填充的起始位置和結(jié)束位置。
[1,2,3].fill("a",1,2);// [1, "a", 3]
5.6 entries(),keys(),values()
主要用于遍歷數(shù)組，entries()對(duì)鍵值對(duì)遍歷，keys()對(duì)鍵名遍歷，values()對(duì)鍵值遍歷。
for (let i of ["a", "b"].keys()){
console.log(i)
}
// 0
// 1
for (let e of ["a", "b"].values()){
console.log(e)
}
// "a"
// "b"
for (let e of ["a", "b"].entries()){
console.log(e)
}
// 0 "a"
// 1 "b"
5.7 includes()
用于表示數(shù)組是否包含給定的值，與字符串的includes方法類似。
[1,2,3].includes(2); // true
[1,2,3].includes(4); // false
[1,2,NaN].includes(NaN); // true
第二個(gè)參數(shù)為起始位置，默認(rèn)為0，如果負(fù)數(shù)，則表示倒數(shù)的位置，如果大于數(shù)組長(zhǎng)度，則重置為0開始。
[1,2,3].includes(3,3); // false
[1,2,3].includes(3,4); // false
[1,2,3].includes(3,-1); // true
[1,2,3].includes(3,-4); // true
5.8 flat(),flatMap()
flat()用于將數(shù)組一維化，返回一個(gè)新數(shù)組，不影響原數(shù)組。
默認(rèn)一次只一維化一層數(shù)組，若需多層，則傳入一個(gè)整數(shù)參數(shù)指定層數(shù)。
若要一維化所有層的數(shù)組，則傳入Infinity作為參數(shù)。
[1, 2, [2,3]].flat(); // [1,2,2,3]
[1,2,[3,[4,[5,6]]]].flat(3); // [1,2,3,4,5,6]
[1,2,[3,[4,[5,6]]]].flat("Infinity"); // [1,2,3,4,5,6]
flatMap()是將原數(shù)組每個(gè)對(duì)象先執(zhí)行一個(gè)函數(shù)，在對(duì)返回值組成的數(shù)組執(zhí)行flat()方法，返回一個(gè)新數(shù)組，不改變?cè)瓟?shù)組。
flatMap()只能展開一層。
[2, 3, 4].flatMap((x) => [x, x * 2]);
// [2, 4, 3, 6, 4, 8]
6. 數(shù)組的拓展(ES7)
6.1 Array.prototype.includes()方法
includes()用于查找一個(gè)值是否在數(shù)組中，如果在返回true，否則返回false。
["a", "b", "c"].includes("a"); // true
["a", "b", "c"].includes("d"); // false
includes()方法接收兩個(gè)參數(shù)，搜索的內(nèi)容和開始搜索的索引，默認(rèn)值為0，若搜索值在數(shù)組中則返回true否則返回false。
["a", "b", "c", "d"].includes("b"); // true
["a", "b", "c", "d"].includes("b", 1); // true
["a", "b", "c", "d"].includes("b", 2); // false
與indexOf方法對(duì)比，下面方法效果相同：
["a", "b", "c", "d"].indexOf("b") > -1; // true
["a", "b", "c", "d"].includes("b"); // true
includes()與indexOf對(duì)比：
includes相比indexOf更具語義化，includes返回的是是否存在的具體結(jié)果，值為布爾值，而indexOf返回的是搜索值的下標(biāo)。
includes相比indexOf更準(zhǔn)確，includes認(rèn)為兩個(gè)NaN相等，而indexOf不會(huì)。
let a = [1, NaN, 3];
a.indexOf(NaN); // -1
a.includes(NaN); // true
另外在判斷+0與-0時(shí)，includes和indexOf的返回相同。
[1, +0, 3, 4].includes(-0); // true
[1, +0, 3, 4].indexOf(-0); // 1
參考資料
1.MDN 索引集合類
2.MDN 數(shù)組對(duì)象
3.W3school JavaScript Array 對(duì)象
本部分內(nèi)容到這結(jié)束
| Author |
王平安 |
| E-mail |
[email protected] |
| 博 客 |
www.pingan8787.com |
| 微 信 |
pingan8787 |
| 每日文章推薦 |
https://github.com/pingan8787... |
| JS小冊(cè) |
js.pingan8787.com |
歡迎關(guān)注微信公眾號(hào)【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .
