1。 扩展运算符
扩展运算符用三个点表示。可以将一个数组分隔成用逗号区分的参数序列
let a = [1,2,3,4,5,6];
console.log(...a)
1 2 3 4 5 6
主要用于函数的调用
add = (a,b) => {
console.log(a+b)
}
add(...[10,20])
30
替代函数的 apply 方法
let array = [1,2];
add = (a,b) => {
console.log(a+b)
};
// es5
add.apply(null,array);
//es6
add(...array)
3
3
求最大值
let a = [1,2,3,4,5,6];
console.log(Math.max.apply(null,a));
console.log(Math.max(...a));
6
6
push函数实现数组的添加
let a = [1,2,3,4,5,6];
let b = ['1','a','c'];
Array.prototype.push.apply(a,b);
console.log(a);
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
console.log(arr1)
[ 1, 2, 3, 4, 5, 6, '1', 'a', 'c']
[ 0, 1, 2, 3, 4, 5 ]
console.log(new Date(...[new Date()]));
console.log(new Date(...[2015, 1, 1]))
2020-04-07T06:10:17.905Z
2015-01-31T16:00:00.000Z
二 扩展运算符的应用
数组的复制
let a = [1,2,3,4,5,6];
let b = [...a];
c[0] = "es6";
console.log(b);
console.log(c);
console.log(a);
[ 1, 2, 3, 4, 5, 6 ]
[ 'es6', 2, 3, 4, 5, 6 ]
[ 1, 2, 3, 4, 5, 6 ]
数组的合并
let a = [1,2,3,4,5,6];
let b = ['1','a','c'];
let c = new Array();
// es5
c = a.concat(b);
console.log(c);
// es6
let d = new Array(...a,...b);
console.log(d)
[
1, 2, 3, 4, 5,
6, '1', 'a', 'c'
]
[
1, 2, 3, 4, 5,
6, '1', 'a', 'c'
]
与结构赋值一起使用。在进行赋值时扩展运算符必须放在最后一位否则会报错
let [q,...d] = [1,2,3,4,5];
console.log(q);
console.log(d);
let [w,...r] = [];
console.log(w);
console.log(r)
let [...s,t] = [1,2];
console.log(s);
console.log(t)
1
[ 2, 3, 4, 5 ]
undefined
[]
let [...s,t] = [1,2];
^^^^
SyntaxError: Rest element must be last element
字符串转数组
let str = 'hello';
let array = [...str];
console.log(array)
[ 'h', 'e', 'l', 'l', 'o' ]
实现了 Iterator 接口的对象
Map 和 Set 结构,Generator 函数
三 Array.from()
将一个类数组转化为真正的数组。一般为dom操作时返回的数组。以及函数arguments的对象都可以被转化为真的数组
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
return p.textContent.length > 100;
});
该方法可以接收一个函数为第二个参数对每个元素进行处理。 返回新的数组
let a = [1,2,3,4]
a = Array.from(a,(item) => item * 100);
console.log(a)
[ 100, 200, 300, 400 ]
四 Array.of 将一组值转为数组
console.log(Array.of(1,2,3,4))
console.log(Array.of('q','e'));
console.log(Array.of(11,22).length);
[ 1, 2, 3, 4 ]
[ 'q', 'e' ]
2
五 copyWithin 在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
target(必需):从该位置开始替换数据。如果为负值,表示倒数。
start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
let a = [1,2,3,4,5];
a.copyWithin(1,2,3);
console.log(a);
a.copyWithin(3,4);
console.log(a)
[ 1, 3, 3, 4, 5 ]
[ 1, 3, 3, 5, 5 ]
六。数组实例的 find() 和 findIndex()
find()返回第一个符合条件的数组成员。找不到时返回undefined
let a = [1,2,3,4,5];
let b = a.find(a => a === 2);
console.log(b)
2
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
})
10
findIndex()返回符合条件的元素的位置。找不到时返回-1
let a = [1,2,3,4,5];
let b = a.findIndex(a => a > 20);
console.log(b)
let c = a.findIndex(a => a > 2);
console.log(c)
-1
2
七。fill() 方法使用给定值,填充一个数组
let a = new Array(3).fill({name:""});
console.log(a)
[ { name: '' }, { name: '' }, { name: '' } ]
fill()可接收第二个和第三个参数作为起始位置和结束位置
let a = [1,2,3,4];
a.fill('es6' ,1, 3);
console.log(a)
[ 1, 'es6', 'es6', 4 ]
八。 entries(),keys() 和 values()遍历数组
let a = [1,2,3,4];
// 遍历键值对
for (let [index,item] of a.entries()){
console.log(index,item)
}
0 1
1 2
2 3
3 4
// 遍历键
for (let key of a.keys()){
console.log(key)
}
0
1
2
3
// 遍历值
for ( let value of a.values()){
console.log(value)
}
1
2
3
4
九 includes(). 返回一个布尔值。用于监测数组中是否包含给定的值
let a = [1,2,3,4];
console.log(a.includes(3));
console.log(a.includes(100))
true
false
第二个参数表示开始的位置
let a = [1,2,3,4];
console.log(a.includes(3,1));
console.log(a.includes(3,3))
true
false
十 数组实例的 flat(),flatMap()
flat()用于将一个多维数组拉平
let a = [1,2,3,4,[1,2,3,[1,2,3,4,[1,2,3,4,5]]]];
// 拉平一层
let b = a.flat();
console.log(b)
// 拉平两层
let c = a.flat(2);
console.log(c)
//全部拉平
let d = a.flat(Infinity);
console.log(d)
[ 1, 2, 3, 4, 1, 2, 3, [ 1, 2, 3, 4, [ 1, 2, 3, 4, 5 ] ] ]
[ 1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 4, [ 1, 2, 3, 4, 5 ] ]
[
1, 2, 3, 4, 1, 2,
3, 1, 2, 3, 4, 1,
2, 3, 4, 5
]
flatMap()
方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()
),然后对返回值组成的数组执行flat()
方法。该方法返回一个新数组,不改变原数组。
let a = [1,2,3,4];
let b = a.flatMap(a => [a * 12]);
console.log(b)
let c = a.flatMap(a => a * 12);
console.log(c)
let d = a.flatMap(a => [a, a * 12]);
console.log(d)
[ 12, 24, 36, 48 ]
[ 12, 24, 36, 48 ]
[
1, 12, 2, 24,
3, 36, 4, 48
]