Array 对象用于在单个的变量中存储多个值。
数组创建
- 字面量 - 推荐使用
const arr1 = []; // 创建一个空数组
const arr2 = [1, 2, 3, 4, 5]; // 创建一个有初始值的数组
- 构造函数
当把构造函数作为函数调用不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。new Array() <=> Array()
const arr1 = new Array(); // 创建一个空数组
const arr2 = new Array(3); // 创建一个length为3，[empty × 3] | [,,,]。
const arr3 = new Array(1, 2, 3, 4, 5); // 创建一个有初始值的数组
- Array.of() - es6语法
可以弥补数组构造函数Array()的不足,因为参数个数的不同，会导致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]
数组判断
- Array.isArray()
用于确定传递的值是否是一个数组, 返回true或false。
Array.isArray([1, 2, 3]); // true
Array.isArray({}); // false
- 当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.
- 假如不存在 Array.isArray()，则在其他代码之前运行下面的代码将创建该方法
if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}
数组合并
- concat()
连接两个或多个数组，不会改变原有数组,并返回合并的新数组。
参数可以是具体的值，也可以是数组。可以是任意多个。
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]
- 扩展运算符（...)
const arr1 = [1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5]
- 奇技淫巧（复制数组）
const arr = [1, 2, 3, 4, 5];
const arr1 = arr.concat(); // [1, 2, 3, 4, 5] 这个方法不传参数默认浅拷贝arr
const arr2 = [...arr]; // [1, 2, 3, 4, 5]
const [...arr3] = arr; // [1, 2, 3, 4, 5]
- 以上方法都是浅拷贝，使用的时候需要注意。
arr3 和 arr4 是用两种不同方法合并而成的新数组，但是它们的成员都是对原数组成员的引用，这就是浅拷贝。如果修改了原数组的成员，会同步反映到新数组。
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
数组增删
- push()
向数组的末尾添加一个或多个元素，并返回新的长度。
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()
向数组的开头添加一个或多个元素，并返回新的长度。
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()
删除数组最后一个元素并返回它。
如果数组为空，则 pop() 不改变数组，并返回 undefined 值。
const arr = [1，2];
const a = arr.pop(); // 2
const b = arr.pop(); // 1
const c = arr.pop(); // undefined
console.log(arr); // []
- shift()
删除数组第一个元素并返回它。
如果数组为空，那么 shift() 不改变数组，返回 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)
- 从数组中添加/删除元素，然后返回被删除的元素,如果没有元素被删除则返回 []。
- index: 规定添加/删除元素的位置，使用负数可从数组结尾处规定位置。
- num: 要删除的元素数量，如果设置为 0，则不会删除元素。
- item1, ..., itemX可选,向数组添加的新项目。
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]
转为字符串
- join()
array.join(separators)。
- 把数组所有元素拼接成字符串,元素按照指定分隔符进行分隔。
- separators 可选，指定要使用的分隔符，如果省略该参数则使用逗号作为分隔符。
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()
把数组转换成字符串并返回结果，数组元素之间用逗号分隔，等同于没有参数的 join() 方法。
const arr = [1, 2, 3, 4, 5];
const b = arr.toString(); // '1, 2, 3, 4, 5'
数组排序
- reverse()
颠倒数组中元素的顺序。
const arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]
- sort()
对数组的元素进行排序,默认按升序排序。
如果想按照其他标准进行排序，就需要提供比较函数，比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。若 a 大于 b，则返回一个大于 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']
数组截取
- slice()
从已有的数组中返回选定的元素。
start: 必需，规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选，规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
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];
数组查找
- indexOf()
array.indexOf(searchElement, fromIndex);
返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
要查找的元素fromIndex开始查找的位置。
如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。
如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。
注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为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 从倒数第四个元素开始从前往后查找[-, -, -, 3, 4, 3, 5]
- lastIndexOf()
array.lastIndexOf(searchElement, fromIndex);
返回元素在数组中的最后一个的索引，如果不存在则返回 -1。
从数组的后面向前查找，从fromIndex处开始,fromIndex默认为数组的长度减1，即整个数组都被查找。
如果该值大于或等于数组的长度，则整个数组会被查找。
如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。
如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。
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()
用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为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
---
- 可以接受第二个参数，用来绑定回调函数的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
- 可以发现NaN，弥补了数组的indexOf方法的不足。
const arr = [1, NaN, 2];
const a = arr.indexOf(NaN); // -1
const b = arr.find(x => Object.is(NaN,x)); // NaN
- findIndex()
返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-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
- 可以接受第二个参数，用来绑定回调函数的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
- 可以发现NaN，弥补了数组的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)
判断一个数组是否包含一个指定的值，根据情况返回 true否false。
该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为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()
数组所有元素都满足条件时返回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()
数组至少有一个元素满足条件时返回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()
把满足条件的元素组成一个新的数组。
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()
对数组中的每一项运行给定函数，返回每次函数调用的结果组成的新数组。
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()
遍历整个数组，没有返回值。
return false或者true都是结束本次循环执行下一次循环。没有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 // 执行函数
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 // 执行函数
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()
用于将嵌套的数组“拉平”，变成一维数组。该方法返回一个新数组，对原数据没有影响。
如果想要“拉平”多层，可以给flat()方法传递参数，参数是正整数，默认为1。
如果不知道有多少层，可以用Infinity关键字作为参数。
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()
对原数组的每个成员执行一个函数（相当于执行map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。
flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。
const arr = [1, 2, 3, 4, 5];
arr.flatMap((value ,index, arr) => [[value*2]]); // [[2], [4], [6], [8], [10]]
- fill()
使用给定值，填充一个数组。
还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
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()
用于遍历数组，唯一的区别是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()
用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
//数组去重
const set = new Set([1, 2, 3, 4, 4, 5]);
const arr = Array.from(set); // [1, 2, 3, 4, 5]
- copyWithin()
数组实例的copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
- target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
- start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示从末尾开始计算。
- end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 2, 3);
console.log(arr); // [3, 2, 3, 4, 5]
