参考文章：数组的扩展
一、扩展运算符...
扩展运算符（spread）是三个点（...）。
主要作用：将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
- 该运算符主要用于函数调用。
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。
- 扩展运算符与正常的函数参数可以结合使用，非常灵活。
function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);
- 扩展运算符后面还可以放置表达式。
const arr = [
...(x > 0 ? ['a'] : []),
'b',
];
- 如果扩展运算符后面是一个空数组，则不产生任何效果。
[...[], 1]
// [1]
- 注意，扩展运算符如果放在括号中，
JavaScript引擎就会认为这是函数调用，否则就会报错。
(...[1,2])
// Uncaught SyntaxError: Unexpected number
console.log((...[1,2]))
// Uncaught SyntaxError: Unexpected number
上面两种情况都会报错，因为扩展运算符所在的括号不是函数调用，而console.log(...[1, 2])就不会报错，因为这时是函数调用。
- 实现浅拷贝
1、Object.assign
2、扩展运算符
3、Array.prototype.slice
4、Array.prototype.concat
如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
var obj = {
a: 1,
b: { c: 1 }
}
var obj2 = { ...obj };
obj.a = 2;
console.log(obj); //{a:2,b:{c:1}}
console.log(obj2); //{a:1,b:{c:1}}
obj.b.c = 2;
console.log(obj); //{a:2,b:{c:2}}
console.log(obj2); //{a:1,b:{c:2}}
- 实现深拷贝
序列化和反序列化
// filesCopy是一个副本，避免被files影响
const filesCopy = JSON.parse(JSON.stringfy(files))
二、数组实例的 find() 和 findIndex()
数组实例的find方法，用于找出第一个符合条件的数组成员。
它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
- 下面代码找出数组中第一个小于
0的成员。
[1, 4, -5, 10].find((n) => n < 0)
// -5
- 下面代码中，
find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
- 数组实例的
findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
- 这两个方法都可以接受第二个参数，用来绑定回调函数的
this对象。
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26
上面的代码中，find函数接收了第二个参数person对象，回调函数中的this对象指向person对象。
- 另外，这两个方法都可以发现
NaN，弥补了数组的indexOf方法的不足。
[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0
上面代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。
三、Array.from()
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
四、数组实例的 entries()，keys() 和 values()
keys()是对键名的遍历
values()是对键值的遍历
entries()是对键值对的遍历
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
五、数组实例的 includes()
Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(3, 3); // false 该方法的第二个参数表示搜索的起始位置，默认为0
const authResources = this.getAuthResources() || [];
let passable = false;
if (resourceCode instanceof Array) {
passable = resourceCode.some(rc => authResources.includes(rc));
} else {
passable = authResources.includes(resourceCode);
}
return passable;
六、数组实例的 flat()
Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。
flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
网友评论