扩展运算符;
扩展运算符(spread)是三个点(...);它好比rest参数的逆运算;将一个数组转为用逗号分隔的参数序列。
console.log(...[1,2,3]);//1 2 3;
console.log(1,...[2,3,4],5);//1 2 3 4 5;
[...document.querySelectAll('div')]
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
作用;
- 复制数组;
const a1=[1,2];
const a2=a1.concat();//使用拼接方法进行;机型深拷贝;
E6中提供更加简单的方法;
const a1=[1,2];
//写法一
const a2=[...a1];//使用扩展字符串;
//写法二;
const [...a2]=a1;
上面的两种写法,a2都是a1的克隆;
- 合并数组;
const arr1=['a','b'];
const arr2=['c'];
const arr3=['d','e'];
//ES5的合并数组;
arr1.concat(arr2,arr3);
//['a','b','c','d','e'];
//ES6的合并数组;
[...arr1,...arr2,...arr3];
不过合并过都是浅拷贝;
- 与赋值结构进行结合;
const [first,...rest]=[1,2,3,4,5];
first=1;
rest=[2,3,4,5];
const [first,...rest]=[];
first//undefined;
rest //[];
const [first,...rest]=['foo'];
first //'foo';
rest //[];
注意在使用结构的时候;扩展运算只能放在最后一个;
如下
const [first,...rest,last]=['1','2','3'];
这样就会报错;
结构可以将字符串转为真正的数组;
[...'hello'];
//['h','e','l','l','o'];
Arroy.from();将类数组转为真正的数组;
let arrayLike={
'0':'a',
'1':'b',
'2':'c',
length:3
};
//ES5中的写法;
var arr1=[].slice.call(arrayLike);//['a','b','c'];
//ES6中写法
let arr2=Array.from(arratLike);//['a','b','c'];
只要部署了iterator[迭代器]接口的数据;都可以使用Array.from进行转换成数组;
Array.from('hello');//['h','e','l','l','o'];
Array.of();用于将数值转化为数组;
Array.of('1','2','3');//['1','2','3'];
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
- find findindex();
数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
[1,-5].find((n)=>{n<0});
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
- fill()填充;
new Array(3).fill('7');//[7,7,7];
fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
- 数组实例的entries(),keys()和valus();
这个三个方法都是对数组的实例就行遍历的;key是对键明的遍历;valus()是对键值的遍历
for(let index of ['a','b'].key()){
console.log(index);
//0
//1
};
for (let elem of ['a','b'].values()){
console.log(elem);
//a,
//b
};
for (let [index,elem] of ['a','b'].entries()){
console.log(index,elem);
};
//0 'a',
//1 'b';
如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历;
let letter=['a','b','c'];
let entries=letter.entries();
console.log(entries.next().value);//[0,'a']
console.log(entries.next().value);//[1,'b']
console.log(entries.next().value);//[2,'c']
- 数组实例的includes();
Array.prototype.includes方法返回一个布尔值;表示某个数组中是否包含给定的值;与字符串的includes相识;
在之前都是使用indexOf进行判定是否含有某个值; - 数组实例的flat(),flatMap();
数组的成员有时还是数组;Array.prototype.flat();用于将嵌套的数组拉平;这个功能好;之前遇到好多二维数组的;
[1,2,[3,4]].flat();
如果要拉平多层的就往里面传值;如果不管有多少层嵌套,
都要转成一维数组,可以用Infinity关键字作为参数。
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]