首页 > 代码库 > 数组的扩展

数组的扩展

2024-11-16 06:25:01   202人阅读

1,Array.from()

用于将两类对象转为数组对象,分别为类数组对象和可遍历对象(包括es6新增的set和map结构)

1)常见的类似数组对象是DOM操作返回的Nodelist对象和函数内部的arguments对象.

//NodeList对象

let ps = document.querySelectAll(‘p‘);
Array.from(ps).forEach(function(p)){
  console.log(p);      
}

//arguments对象

function foo(){
  var args = Array.from(arguments);   //扩展运算符也能转换为数组var args = [...arguments]   
  //    ...

类似数组对象必须有length属性.因此,任何有length属性的对象,Array.from都能将其转化为数组,如Array.from({ length:3 })  返回[undefined, undefined, undefined]

2)可遍历对象指的是部署了Iterator接口的对象,如字符串,Set结构.

 //字符串

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

//set结构

let nameSet = new Set([‘a‘,‘b‘])
Array.from(nameSet) //[‘a‘,‘b‘]

对于还没有部署该方法的浏览器,可以用Array.prototype.slice(es5的写法)方法替代

const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj))();

Array.from还可以接收第二个参数,用来对每个元素进行处理,将处理后的值放入返回的数组

Array.from([1,2,3],n=>n*n)     //[1,4.9]

Array.from([1,,2,,3],n => n||0)   //[1,0,2,0,3] 布尔值为false的成员转为0

Array.from的另一个作用是返回字符串的长度,可以避免jacascript将大于\uFFFF的字符当作2个字符的bug

function countSymbols(str){
  return Array.from(str).length  
}

2,Array.of()

用于将一组值转换为数组,弥补数组函数Array()的不足,因为参数不同导致Array()的行为有差异.

Array.of(3,11,8) //[3,11,8]
Arra.of(3) //[3]
Array.of(3).length //1

Array() //[]
Array(3) // [,,]
Array(3,11,8) //[3,11,8]

3,数组实例的copyWithin()

在数组内部将执行未知的额成员渎职到其他位置(会覆盖原来成员),然后返回当前数组,会改变放前数组.

Array.prototype.copyWithin(target,start=0,end = this.length)  

target:从该位置开始替换数据

start:从该位置开始读取数据.默认0

end:到该位置前停止读取数据.默认为数组的长度

[1,2,3,4,5].copyWithin(0,3,4) //[4,2,3,4,5]

[1,2,3,4,5].copyWithin(0,-2,-1)  //[4,2,3,4,5]

4,数组实例的find()和findIndex()

用于找出第一个符合条件的数组成员,,参数是一个回调函数,数组成员一次执行这个回调函数,直到找出第一个符合条件的成员,find()返回符合条件的成员,findIndex()返回符合条件成员的位置,若都不符合,find()返回undefined,findIndex()返回-1.

[1,5,10,15].find(function(value,index,arr){
   return value > 9 
}) //10

[1,5,10,15].findIndex(function (value,index ,arr){
   return value > 9 
}) //2

另外,这两个方法都可以判断NaN,弥补了数组的indexOf

[NaN].indexOf(NaN) //-1

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

5,数组实例的fill()

用给定值填充数组.用于初始化.可以不接受第二个和第三个参数,也可以接受后2个参数,用于指定填充的位置

[1,2,3] .fill(7) //[7,7,7]

[‘a‘,‘b‘,‘c‘] .fill(7,1,2)  //从1号位置开始填充,2号位置前结束 [‘a‘,7,‘c‘]

 

6,数组实例的entries(),keys()和values()

都用于遍历数组,可用for....of...循环遍历,唯一区别是.keys是对键名的变遍历,values是对键值的遍历,entries是对键值对的遍历.

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‘  
}

7,数组实例的includes()

Array.prototype.includes方法返回一个布尔值,表示数组是否含有给定的值,也可以接受第二个参数,代表搜索的起始位置.默认为0

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

[1,2,3].includes(3,3) //false

之前用的是indexOf方法,使用该方法的缺点是:1,不够语义化. 2,内部采用严格运算符===判断,这样会对NaN造成误判

[NaN].indexOf(NaN)  //-1

[NaN].includes(NaN) //true

对于还没有部署该方法的浏览器,可以使用Array.some方法替代

const contains = (() => Array.prototype.includes ? 
                                   (arr,value) => arr.includes(value)
                                 : (arr,value) => arr.some(el => el===value)
                                   
)();

　　

 

数组的扩展


联系
我们