数组的扩展
扩展运算符
扩展运算符,三个点...
。将一个数组(其实只要是一个可迭代的对象即可)转为用逗号分隔的参数序列。
const o = {}
console.log(...o); // Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function
报错中明显地提示我们了,扩展运算符接收一个可迭代的对象。如果你看过我之前的变量的解构赋值文章,那么很快就能知道哪些是可迭代的对象,甚至我们可以自己实现一个可迭代对象。
举例,Set对象是一个可迭代对象:
const sets = new Set([1,2]);
console.log([...sets]); // [1, 2]
扩展运算符的一些作用:
- 替代函数的apply()方法
let arr = [1,2,3];
let max1 = Math.max.apply(null, arr); // 3
let max2 = Math.max(...arr); // 3
- 复制数组(不过需要注意浅拷贝问题)
let arr = [1,2,3];
let arr2 = arr.slice();
let arr3 = [...arr];
arr2[0] = 4;
console.log(arr2, arr); // [4, 2, 3], [1, 2, 3]
arr3[0] = 5;
console.log(arr3, arr); // [5, 2, 3], [1, 2, 3]
Array.from
Array.from()
用于将类数组对象或可迭代的对象转成数组。
// 类数组
let obj = {
0: '0',
1: '1',
length: 2
}
console.log(Array.from(obj)); // ['0', '1']
// 可迭代对象
const map = new Map();
map.set(0, '0');
map.set(1, '1');
console.log(Array.from(map)); // [[0, '0'], [1, '1']]
Array.from
第二个参数接受一个函数作为参数,作用类似于数组的map()
方法。
// 提供一个实用的创建数组的方法
Array.from({length: 3}, (value, index) => index); // [0, 1, 2]
Array.of
Array.of()
用于将一组值转换为数组。
Array.of(1,2,3) // [1,2,3]
find, findIndex, findLast, findLastIndex
find()
用于找出第一个符合条件的数组成员。
findIndex()
功能同find()
相同,只不过返回index。
findLast()
和findLastIndex()
功能同上,只不过从后往前找。
const arr = [1,2,-1,-2];
console.log(arr.find(v => v > 0)); // 1
console.log(arr.findIndex(v => v > 0)); // 0
console.log(arr.findLast(v => v < 0)); // -2
console.log(arr.findLastIndex(v => v < 0)); // 3
fill
fill(value, start?, end?)
用于给数组填值。直接修改了原数组
let arr = [1,2,3,4,5];
arr.fill(4)
console.log(arr.slice()); // [4, 4, 4, 4, 4]
arr.fill(6, 1, 4);
console.log(arr); // [4, 6, 6, 6, 4],从start开始,但不包括end之间范围的内容被替换
entries, keys, values
用于遍历数组,注意:返回的是一个可迭代对象
let arr = [1,2,3];
console.log(arr.keys().next().value); // 0 键名
console.log(arr.values().next().value); // 1 键值
console.log(arr.entries().next().value); //[0, 1] 键值对
includes
indexOf()
的替代品,返回一个布尔值,用于判断数组是否包含某个给定值。
[1, 2, 3].includes(1) // true
flat
拉平数组。接收一个参数,表示需要展开几层,如果传的值是Infinity
,表示无限展开,最后始终得到一维数组。
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
手写一个flat方法:
Array.prototype.myFlat = function (num) {
if (num < 1) {
return this;
}
return this.reduce((sum, cur) => {
return sum.concat(
Array.isArray(cur) ? cur.myFlat(num - 1) : cur
);
}, []);
};
const arr = [1, 2, [3, [4, [5]]]];
console.log(arr.myFlat(2)); // [1,2,3,4,[5]]
另外一些可能用到比较少的方法,不再赘述:
copyWithin
flatMap
at
生成数组的方法之间的区别
let arr1 = new Array(3); // [空属性 × 3]
let arr2 = Array(3); // [空属性 × 3]
let arr3 = Array.from({length: 3}); // [undefined, undefined, undefined]
// 浏览器控制台显示[空属性 × 3],其实就是[,,],数组里面是空位,连undefined也不是。我们在声明一个数组时,尽量避免数组里面有空位。
原因参考:Array Initializer