es6 -- 数组的扩展

版权声明:版权声明:本文为博主原创文章,若文章中有错误请联系博主改正,请不要恶意留言(不喜欢请绕道)。欢迎大家转载 https://blog.csdn.net/qq_37674616/article/details/83045592

目录

 

数组构造函数的扩展

Array.from()

Array.of()

数组原型的扩展

copyWithin()

find()

findIndex()

fill()

entries()、keys()、values()

includes()


数组构造函数的扩展

Array.from()

该方法可以将类数组对象与可遍历(iterrable)对象转换为数组

类数组对象:任何具有length属性的对象。

可遍历对象:任何部署了Iterrator接口的数据结构,例如: String、Array、set、map等

Array.from('hello');
//['h','e','l','l','o']

//转换类数组对象 dom中

var div=document.querySelectorAll('div');
Array.from(div);

//将数组中为false的成员转换为0
Array.from([1,,2,4,false,'',5],(n)=>n||0);

Array.of()

该方法用于将一组值转换为数组。该方法主要弥补了构造函数的不足。

// new Array
var arr=new Array(4);
arr.length //4

//es6 Array.of
var arr1=Array.of(4)
arr.length //1

**:Array.of总是返回参数值组成的数组。如果没有参数返回空数组

数组原型的扩展

copyWithin()

 该方法,在当前数组内部将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。

参数:

   target(必须):从该位置开始替换数据

  start(可选) :从该位置开始读取数据,默认从0。如果为负值,表示倒数。

  end(可选): 到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

var arr=[1,2,3,4];
//从索引位置为 2开始复制知道数组结束,复制到0号位置
arr.copyWithin(0,2);
console.log(arr); //[3,4,3,4];

find()

用于找出第一个符合条件的数组成员。该方法的参数是一个回调函数,知道找到第一个返回值为true的成员,然后返回该成员。

var res=[1,2,3,4].find(function(value,index,arr){
    return value>2;
}); //3

//es6简写
var res1=[1,2,3,4].find((item)=>item>2);

findIndex()

该方法用于返回第一个满足条件的数组成员的位置,如果都不符合则返回-1

var res=[1,2,3,4].findIndex(function(value,index,arr){
    return value>2;
}); //2

//es5中 indexOf采用 === NaN===NaN为false
[NaN].indexOf(NaN); //-1

[NaN].findIndex(value=>Object.is(NaN,value)); //0

fill()

该方法用于给定值填充数组

new Array(3).fill(1); //[1,1,1]

entries()、keys()、values()

这三个方法用于遍历数组。它们都返回一个遍历器对象。可以for...of循环遍历。keys()是对键名的遍历,values()是对键值的遍历、entries()是对键值对的遍历

for(let index of ['a',1,4].keys()){
    console.log(index); 
}
//0 1 2

for(let [index,item] of ['a',1,4].entries()){
    console.log(index,item); 
}
// 0 'a'
// 1 1
// 2 4

includes()

该方法用于判断数组中是否包含给定值。有则返回true,否则返回false

[1,2,3].includes(2); //true

//该方法的第二个参数 表示起始位置,默认是从0开始
//如果第二个参数为负数,则表示倒数位置,如果该值超出数组位置则重置从0开始
[1,2,3].includes(2,1) //true
[1,2,3].includes(2,-1); //false
[1,2,3,4].includes(2,5); //false
[1,2,3,4].includes(2,-5); //true

猜你喜欢

转载自blog.csdn.net/qq_37674616/article/details/83045592