ES6中数组的扩展:扩展运算符...Array.from()Array.of()copyWithin()find()findIndex()fill()entries()key()values()...

扩展运算符(...),和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()方法。该方法返回一个新数组,不改变原数组。只能展开一层数组。

你可能感兴趣的:(ES6,ES6)