扩展运算符(...),和rest参数逆运算差不多一个意思,将一个数组转为用逗号分隔的参数序列;
主要用于函数调用;
function add( x, y ){
return x + y;
}
const numbers = [4, 38];
add(...numbers); //42
替代函数的apply方法:
//ES5
function f(x, y, z){
}
var args = [0, 1, 2];
f.apply(null, args);
//在ES6中的扩展运算符取代apply方法将数组转为函数的参数
//ES6
function f(x, y, z){
}
var args = [0, 1, 2];
f(...args);
合并数组:
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
//ES5
arr1.concat(arr2, arr3);
//ES6
[...arr1,...arr2,...arr3]
Array.from()方法用于将两类对象转化为数组:类似数组的对象(array-like Object)和可遍历(iterable)的对象;还可以用于类似数组的对象,类似数组的对象本质上只有一点就是必须有length属性;
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
//ES5
var arr1 = [].slice.call(arrayLike);
//ES6
let arr2 = Array.from(arrayLike);
应用:1.类似数组的对象是DOM操作返回的NodeList集合
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
return p.textContent.length > 100;
})
2.函数内部的arguments对象
function foo(){
var args = Array.from(arguments);
}
Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组;
Array.from([1, 2, 3], (x) => x * x)
Array.of():方法用于将一组值,转换为数组;
弥补数组构造函数Array()的不足,因为参数个数的不同,会导致Array()的行为有差异;
如果没有参数,返回一个空数组;
Array.of(3);//[3]
Array.of(3,8,10);//[3,8,10]
Array(3);//[,,]
Array(3,8,10);//[3,8,10]
copyWithin():在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组;
Array.prototype.copyWithin(target, start = 0, end = this.length)
target:必需,从该位置开始替换数据,如果是负值,表示倒数;
start:可选,从该位置开始读取数据,默认为0,如果是负值,表示倒数;
end:可选,到该位置前停止读取数据,默认等于数组长度,表示倒数;
[1,2,3,4,5].copyWithin(0,3)
//[4,5,3,4,5]
find():找出第一个符合条件的数组成员,参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,返回该成员,若没有符合条件的,则返回undefined;
findIndex():找出第一个符合条件的数组成员,参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,返回该成员的位置,若没有符合条件的,则返回-1;
这两个方法都可以发现NaN,弥补了数组的indexOf方法的不足;
[1, 4, -5, 10].find((n) => n < 0);//-5
[1, 5, 10, 1].find(function(value, index, arr){
return value > 9
});//10
[1, 4, -5, 10].findIndex((n) => n < 0);//2
[1, 5, 10, 1].find(function(value, index, arr){
return value > 9
});//2
[NaN].indexOf(NaN);//-1
[NaN].findIndex(y => Object.is(NaN, Y));//0
这两个方法都可以接受第二个参数,用来绑定回调函数的this对象;
function f(v){
return v > this.age;
}
let person = {name:'John',age: 20};
[10,12,26,15].find(f, person); //25
fill():使用给定值,填充一个数组;还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置;
如果填充的类型是对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象;
['a','b','c'].fill(7);//[7, 7, 7]
['a','b','c'].fill(7,1,2);//['a', 7, 'c']
let arr = new Array(3).fill({name:'Mike'});
arr[0].name = "Ben";
console.log(arr);//[{name:'Ben'},{name:'Ben'},{name:'Ben'}]
entries(),key(),values():用于数组遍历;
entries():对键值对的遍历;
key():对键名的遍历;
values():对键值的遍历;
for(let index of ['a','b'].keys()){
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'
includes():表示某个数组是否包含给定的值,返回布尔值;第二个参数是起始位置;
[1, 2, 4].includes(3, 3);//false
flat():用于将嵌套的数组"拉平";
参数是一个整数,即拉平的层数,默认为1;
不管多少层,都要转为一维数组,可以用Infinity关键字作为参数;
如果原数组有空位,flat()方法会跳过空位;
[1, 2, [3, [4, 5]]].flat();//[1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2);//[1, 2, 3, 4, 5]
[1, 2, [3, [4, 5]]].flat(Infinity);//[1, 2, 3, 4, 5]
[1, 2, , , 3, 4, 5].flat();//[1, 2, 3, 4, 5]
flatMap():是对原数组的每个成员执行一个函数,对于返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。只能展开一层数组。