Array 對象用于在單個(gè)的變量中存儲多個(gè)值。
數(shù)組創(chuàng)建
- 字面量 - 推薦使用
const arr1 = []; // 創(chuàng)建一個(gè)空數(shù)組
const arr2 = [1, 2, 3, 4, 5]; // 創(chuàng)建一個(gè)有初始值的數(shù)組
- 構(gòu)造函數(shù)
當(dāng)把構(gòu)造函數(shù)作為函數(shù)調(diào)用不使用 new 運(yùn)算符時(shí)雀监，它的行為與使用 new 運(yùn)算符調(diào)用它時(shí)的行為完全一樣双吆。new Array() <=> Array()
const arr1 = new Array(); // 創(chuàng)建一個(gè)空數(shù)組
const arr2 = new Array(3); // 創(chuàng)建一個(gè)length為3，[empty × 3] | [,,,]会前。
const arr3 = new Array(1, 2, 3, 4, 5); // 創(chuàng)建一個(gè)有初始值的數(shù)組
- Array.of() - es6語法
可以彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()的不足,因?yàn)閰?shù)個(gè)數(shù)的不同好乐，會導(dǎo)致Array()的行為有差異。
const arr6 = Array.of() // []
const arr7 = Array.of(3) // [3]
const arr8 = Array.of(1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]
數(shù)組判斷
- Array.isArray()
用于確定傳遞的值是否是一個(gè)數(shù)組, 返回true或false瓦宜。
Array.isArray([1, 2, 3]); // true
Array.isArray({}); // false
- 當(dāng)檢測Array實(shí)例時(shí), Array.isArray 優(yōu)于 instanceof,因?yàn)锳rray.isArray能檢測iframes.
- 假如不存在 Array.isArray()蔚万，則在其他代碼之前運(yùn)行下面的代碼將創(chuàng)建該方法
if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}
數(shù)組合并
- concat()
連接兩個(gè)或多個(gè)數(shù)組，不會改變原有數(shù)組,并返回合并的新數(shù)組临庇。
參數(shù)可以是具體的值反璃，也可以是數(shù)組〖俣幔可以是任意多個(gè)淮蜈。
const arr = [1, 2];
const arr1 = arr.concat(3, 4, 5); // [1, 2, 3, 4, 5]
const arr2 = arr.concat([3, 4, 5]); // [1, 2, 3, 4, 5]
const arr3 = arr.concat([3, 4], [5]); // [1, 2, 3, 4, 5]
- 擴(kuò)展運(yùn)算符（...)
const arr1 = [1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5]
- 奇技淫巧（復(fù)制數(shù)組）
const arr = [1, 2, 3, 4, 5];
const arr1 = arr.concat(); // [1, 2, 3, 4, 5] 這個(gè)方法不傳參數(shù)默認(rèn)淺拷貝arr
const arr2 = [...arr]; // [1, 2, 3, 4, 5]
const [...arr3] = arr; // [1, 2, 3, 4, 5]
- 以上方法都是淺拷貝，使用的時(shí)候需要注意已卷。
arr3 和 arr4 是用兩種不同方法合并而成的新數(shù)組梧田，但是它們的成員都是對原數(shù)組成員的引用，這就是淺拷貝。如果修改了原數(shù)組的成員柿扣，會同步反映到新數(shù)組肖方。
const arr1 = [{ a: 1 }];
const arr2 = [{ b: 2 }];
const arr3 = arr1.concat(arr2);
const arr4 = [...arr1, ...arr2];
arr1[0].a = 999;
console.log(arr3[0]); // 999
console.log(arr4[0]); // 999
數(shù)組增刪
- push()
向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長度未状。
const arr = [1, 2];
const a = arr.push(3); // 3
const b = arr.push(4, 5); // 5
console.log(arr); // [1, 2, 3, 4, 5];
- unshift()
向數(shù)組的開頭添加一個(gè)或多個(gè)元素俯画，并返回新的長度。
const arr = [4, 5];
const a = arr.unshift(3); // 3
const b = arr.unshift(1, 2); // 5
console.log(arr); // [1, 2, 3, 4, 5]
- pop()
刪除數(shù)組最后一個(gè)元素并返回它司草。
如果數(shù)組為空艰垂，則 pop() 不改變數(shù)組，并返回 undefined 值埋虹。
const arr = [1猜憎，2];
const a = arr.pop(); // 2
const b = arr.pop(); // 1
const c = arr.pop(); // undefined
console.log(arr); // []
- shift()
刪除數(shù)組第一個(gè)元素并返回它。
如果數(shù)組為空搔课，那么 shift() 不改變數(shù)組胰柑，返回 undefined 值。
const arr = [1, 2];
const a = arr.shift(); // 1
const b = arr.shift(); // 2
const c = arr.shift(); // undefined
console.log(arr); // []
- splice()
array.splice(index, num, item1, ....., itemX)
- 從數(shù)組中添加/刪除元素爬泥，然后返回被刪除的元素,如果沒有元素被刪除則返回 []柬讨。
- index: 規(guī)定添加/刪除元素的位置，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置袍啡。
- num: 要?jiǎng)h除的元素?cái)?shù)量踩官，如果設(shè)置為 0，則不會刪除元素境输。
- item1, ..., itemX可選,向數(shù)組添加的新項(xiàng)目蔗牡。
const arr = [1, 2, 3];
const a = arr.splice(0, 0, 0); // [ ]
console.log(arr); // [0, 1, 2, 3]
const b = arr.splice(0, 4, 7); // [0, 1, 2, 3]
console.log(arr); // [7]
轉(zhuǎn)為字符串
- join()
array.join(separators)。
- 把數(shù)組所有元素拼接成字符串,元素按照指定分隔符進(jìn)行分隔嗅剖。
- separators 可選辩越，指定要使用的分隔符，如果省略該參數(shù)則使用逗號作為分隔符信粮。
const arr = [1, 2, 3, 4, 5];
const a = arr.join(); // "1, 2, 3, 4, 5"
const b = arr.join('-'); // "1 - 2 - 3 - 4 - 5"
- toString()
把數(shù)組轉(zhuǎn)換成字符串并返回結(jié)果黔攒，數(shù)組元素之間用逗號分隔，等同于沒有參數(shù)的 join() 方法蒋院。
const arr = [1, 2, 3, 4, 5];
const b = arr.toString(); // '1, 2, 3, 4, 5'
數(shù)組排序
- reverse()
顛倒數(shù)組中元素的順序。
const arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]
- sort()
對數(shù)組的元素進(jìn)行排序,默認(rèn)按升序排序莲绰。
如果想按照其他標(biāo)準(zhǔn)進(jìn)行排序欺旧，就需要提供比較函數(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 的值鲫尊。
const a = ['b', 'a', 'e', 'd', 'c'];
a.sort();
console.log(a); // ['a', 'b', 'c', 'd', 'e'];
---
const b = [3, 2, 1, 5, 4];
b.sort();
console.log(b); // [1, 2, 3, 4, 5];
---
function sortNumber(a, b) {
return a - b
};
const c = ['300', '20', '100', '5', '40'];
c.sort(sortNumber);
console.log(c); // ['5', '20', '40', '100', '300']
數(shù)組截取
- slice()
從已有的數(shù)組中返回選定的元素痴柔。
start: 必需，規(guī)定從何處開始選取疫向。如果是負(fù)數(shù)咳蔚，那么它規(guī)定從數(shù)組尾部開始算起的位置。-1 指最后一個(gè)元素搔驼，-2 指倒數(shù)第二個(gè)元素，以此類推。
end 可選贪庙，規(guī)定從何處結(jié)束選取抓半。該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。如果沒有指定該參數(shù)囊嘉，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素温技。如果這個(gè)參數(shù)是負(fù)數(shù)，那么它規(guī)定的是從數(shù)組尾部開始算起的元素哗伯。
const arr = [1, 2, 3, 4, 5];
const a = arr.slice(2); // [3, 4, 5];
const b = arr.slice(-2) // [4, 5];
const c = arr.slice(2, 4) // [3, 4];
const c = arr.slice(2, -1) // [3, 4];
數(shù)組查找
- indexOf()
array.indexOf(searchElement, fromIndex);
返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引荒揣，如果不存在，則返回-1焊刹。
要查找的元素fromIndex開始查找的位置系任。
如果該索引值大于或等于數(shù)組長度，意味著不會在數(shù)組里查找虐块，返回-1俩滥。
如果參數(shù)中提供的索引值是一個(gè)負(fù)值，則將其作為數(shù)組末尾的一個(gè)抵消贺奠，即-1表示從最后一個(gè)元素開始查找霜旧，-2表示從倒數(shù)第二個(gè)元素開始查找 ，以此類推儡率。
注意：如果參數(shù)中提供的索引值是一個(gè)負(fù)值挂据，并不改變其查找順序，查找順序仍然是從前向后查詢數(shù)組儿普。如果抵消后的索引值仍小于0崎逃，則整個(gè)數(shù)組都將會被查詢。其默認(rèn)值為0.
const arr = [1, 2, 3, 3, 4, 3, 5];
arr.indexOf(3); // 2
arr.indexOf(999); // -1
---
arr.indexOf(3, 1); // 2
arr.indexOf(3, 2); // 2
arr.indexOf(3, 3); // 3
arr.indexOf(3, 6); // -1
---
arr.indexOf(3, -1); // -1
arr.indexOf(3, -2); // 5
arr.indexOf(3, -4) // 3 從倒數(shù)第四個(gè)元素開始從前往后查找[-, -, -, 3, 4, 3, 5]
- lastIndexOf()
array.lastIndexOf(searchElement, fromIndex);
返回元素在數(shù)組中的最后一個(gè)的索引眉孩，如果不存在則返回 -1个绍。
從數(shù)組的后面向前查找勒葱，從fromIndex處開始,fromIndex默認(rèn)為數(shù)組的長度減1，即整個(gè)數(shù)組都被查找巴柿。
如果該值大于或等于數(shù)組的長度凛虽，則整個(gè)數(shù)組會被查找。
如果為負(fù)值广恢，將其視為從數(shù)組末尾向前的偏移凯旋。即使該值為負(fù)，數(shù)組仍然會被從后向前查找袁波。
如果該值為負(fù)時(shí)瓦阐，其絕對值大于數(shù)組長度，則方法返回 -1篷牌，即數(shù)組不會被查找睡蟋。
const arr = [1, 2, 3, 3, 4, 3, 5]; // length 7
arr.lastIndexOf(3); // 5
arr.lastIndexOf(3, 999); // 5
arr.lastIndexOf(3, 4); // 3
---
arr.lastIndexOf(3, -1); // 5
arr.lastIndexOf(3, -5); // 2
arr.lastIndexOf(3, -6); // -1
arr.lastIndexOf(3, -999); // -1
- find()
用于找出第一個(gè)符合條件的數(shù)組成員。它的參數(shù)是一個(gè)回調(diào)函數(shù)枷颊，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)戳杀，直到找出第一個(gè)返回值為true的成員，然后返回該成員夭苗。如果沒有符合條件的成員信卡，則返回undefined。
const arr = [1, 2, 3, 4, 5];
const a = arr.find((value, index, arr) => value===3); // 3
const b = arr.find((value, index, arr) => value===7); // undefined
---
- 可以接受第二個(gè)參數(shù)题造，用來綁定回調(diào)函數(shù)的this對象傍菇。
const arr = [31, 32, 33, 34, 35];
function f(value, index, arr) {
return value > this.size;
};
const stu = {name: 'Jack', size: 33};
arr.find(f, stu); // 34
- 可以發(fā)現(xiàn)NaN，彌補(bǔ)了數(shù)組的indexOf方法的不足界赔。
const arr = [1, NaN, 2];
const a = arr.indexOf(NaN); // -1
const b = arr.find(x => Object.is(NaN,x)); // NaN
- findIndex()
返回第一個(gè)符合條件的數(shù)組成員的位置丢习，如果所有成員都不符合條件，則返回-1淮悼。
const arr = [1, 2, 3, 4, 5];
const a = arr.findIndex((value, index, arr) => value===5); // 4
const b = arr.findIndex((value, index, arr) => value===999); // -1
- 可以接受第二個(gè)參數(shù)咐低，用來綁定回調(diào)函數(shù)的this對象。
const arr = [31, 32, 33, 34, 35];
function f(value, index, arr) {
return value > this.size;
};
const stu = {name: 'Jack', size: 33};
arr.findIndex(f, stu); // 3
- 可以發(fā)現(xiàn)NaN袜腥，彌補(bǔ)了數(shù)組的indexOf方法的不足见擦。
const arr = [1, NaN, 2];
const a = arr.indexOf(NaN); // -1
const b = arr.findIndex(x => Object.is(NaN,x)); // 1
- includes()
array.includes(searchElement, fromIndex)
判斷一個(gè)數(shù)組是否包含一個(gè)指定的值，根據(jù)情況返回 true否false羹令。
該方法的第二個(gè)參數(shù)表示搜索的起始位置鲤屡，默認(rèn)為0。如果第二個(gè)參數(shù)為負(fù)數(shù)福侈，則表示倒數(shù)的位置酒来，如果這時(shí)它大于數(shù)組長度（比如第二個(gè)參數(shù)為-4，但數(shù)組長度為3）癌刽，則會重置為從0開始役首。
const arr = [1, 2, NaN];
arr.includes(1) // true
arr.includes(NaN) // true
arr.includes(999) // false
---
const arr = [1, 2, NaN];
arr.includes(2, 1); // true
arr.includes(2, 2); // false
arr.includes(2, -1); // false
arr.includes(2, -2); // true
arr.includes(2, -4) // true
迭代方法
- every()
數(shù)組所有元素都滿足條件時(shí)返回true否則返回false。
const arr = [1, 2, 3, 4, 5];
const a = arr.every((value, index, arr) => value > 0); // true
const b = arr.every((value, index, arr) => value > 1); // false
- some()
數(shù)組至少有一個(gè)元素滿足條件時(shí)返回true否則返回false显拜。
const arr = [1, 2, 3, 4, 5];
const a = arr.some((value, index, arr) => value > 4); // true
const b = arr.some((value, index, arr) => value > 5); // false
- filter()
把滿足條件的元素組成一個(gè)新的數(shù)組衡奥。
const arr = [1, 2, 3, 4, 5];
const a = arr.filter((value, index, arr) => value > 2); // [3, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5];
- map()
對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的新數(shù)組远荠。
const arr = [1, 2, 3, 4, 5];
const a = arr.map((value, index, arr) => value*2); // [2, 4, 6, 8, 10];
console.log(arr); // [1, 2, 3, 4, 5]
- forEach()
遍歷整個(gè)數(shù)組矮固，沒有返回值。
return false或者true都是結(jié)束本次循環(huán)執(zhí)行下一次循環(huán)譬淳。沒有break和continue档址。
const arr = [1, 2, 3, 4, 5];
const a = [];
arr.forEach((value, index, arr) => a.push(value*2));
console.log(a); // [2, 4, 6, 8, 10]
console.log(arr); // [1, 2, 3, 4, 5]
歸并操作
- reduce()
array.reduce(callback, initialValue);
callback // 執(zhí)行函數(shù)
initialValue // 初始值
- 加和操作
const arr = ['1', '2', '3', '4', '5'];
const a = arr.reduce((prev, curr, index, arr) => prev+curr); // '12345'
const b = arr.reduce((prev, curr, index, arr) => prev+curr, '0'); // '012345'
- reduceRight()
array.reduce(callback, initialValue);
callback // 執(zhí)行函數(shù)
initialValue // 初始值
- 加和操作
const arr = ['1', '2', '3', '4', '5'];
const a = arr.reduceRight((prev, curr, index, arr) => prev+curr); // '54321'
const b = arr.reduce((prev, curr, index, arr) => prev+curr, '0'); // '054321'
其余方法
- flat()
用于將嵌套的數(shù)組“拉平”，變成一維數(shù)組邻梆。該方法返回一個(gè)新數(shù)組守伸，對原數(shù)據(jù)沒有影響。
如果想要“拉平”多層浦妄，可以給flat()方法傳遞參數(shù)尼摹，參數(shù)是正整數(shù)，默認(rèn)為1剂娄。
如果不知道有多少層蠢涝，可以用Infinity關(guān)鍵字作為參數(shù)。
const arr = [1, [2], [[3]], [[[4]]], 5];
const a = arr.flat(); // [1, 2, [3], [[4]], 5];
const b = arr.flat(2); // [1, 2, 3, [4], 5];
const c = arr.flat(Infinity); // [1, 2, 3, 4, 5];
- flatMap()
對原數(shù)組的每個(gè)成員執(zhí)行一個(gè)函數(shù)（相當(dāng)于執(zhí)行map()）阅懦，然后對返回值組成的數(shù)組執(zhí)行flat()方法和二。該方法返回一個(gè)新數(shù)組，不改變原數(shù)組耳胎。
flatMap()方法還可以有第二個(gè)參數(shù)惯吕，用來綁定遍歷函數(shù)里面的this。
const arr = [1, 2, 3, 4, 5];
arr.flatMap((value ,index, arr) => [[value*2]]); // [[2], [4], [6], [8], [10]]
- fill()
使用給定值场晶，填充一個(gè)數(shù)組混埠。
還可以接受第二個(gè)和第三個(gè)參數(shù)，用于指定填充的起始位置和結(jié)束位置诗轻。
const arr = [1, 2, 3, 4, 5];
arr.fill(7);
console.log(arr); // [7, 7, 7, 7, 7];
arr.fill(6, 2);
console.log(arr); // [7, 7, 6, 6, 6];
arr.fill(3, 3, 4);
console.log(arr); // [7, 7, 6, 3, 6];
arr.fill(1, -5);
console.log(arr); // [1, 1, 1, 1, 1];
- entries()钳宪，keys()， values()
用于遍歷數(shù)組扳炬，唯一的區(qū)別是keys()是對鍵名的遍歷吏颖、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷恨樟。
const arr = ['a', 'b', 'c', 'd', 'e'];
for (let index of arr.keys()) {
console.log(index);
}
// 0
// 1
// 2
// 3
// 4
for (let value of arr.values()) {
console.log(value);
}
// a
// b
// c
// d
// e
for (let [index, value] of arr.entries()) {
console.log(index, value);
}
// 0 a
// 1 b
// 2 c
// 3 d
// 4 e
- Array.from()
用于將兩類對象轉(zhuǎn)為真正的數(shù)組：類似數(shù)組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map）半醉。
//數(shù)組去重
const set = new Set([1, 2, 3, 4, 4, 5]);
const arr = Array.from(set); // [1, 2, 3, 4, 5]
- copyWithin()
數(shù)組實(shí)例的copyWithin()方法，在當(dāng)前數(shù)組內(nèi)部劝术，將指定位置的成員復(fù)制到其他位置（會覆蓋原有成員）缩多，然后返回當(dāng)前數(shù)組呆奕。也就是說，使用這個(gè)方法衬吆，會修改當(dāng)前數(shù)組梁钾。
Array.prototype.copyWithin(target, start = 0, end = this.length)
- target（必需）：從該位置開始替換數(shù)據(jù)。如果為負(fù)值逊抡，表示倒數(shù)姆泻。
- start（可選）：從該位置開始讀取數(shù)據(jù)，默認(rèn)為0冒嫡。如果為負(fù)值拇勃，表示從末尾開始計(jì)算。
- end（可選）：到該位置前停止讀取數(shù)據(jù)孝凌，默認(rèn)等于數(shù)組長度方咆。如果為負(fù)值，表示從末尾開始計(jì)算蟀架。
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 2, 3);
console.log(arr); // [3, 2, 3, 4, 5]
