ES6数组扩展

作者: 大吉的罐头 | 来源:发表于2021-03-04 10:36 被阅读0次

举个栗子

let div=document.querySeletorAll('.xx')
console.log(div instanceof Array) //false

div为伪数组,转化为真数组ES5的方法为:slice

Array.prototype.slice.call(div)
Array.from()

可将类数组转换为真数组
(arguments 是一个对应于传递给函数的参数的类数组对象)

let arrayLike = {
  0:'es6',
  1:'es7',
  2:'es8',
  length:3
}
let arr = Array.from(arrayLike) 

new Array()传一个参数代表长度,传多个参数代表数组中的值

let arr = new Array(1,2)
console.log(arr)  //  [1,2] length为2

let arr = new Array(3)
console.log(arr)    //空数组 length为3
Array.of()

可将类数组转换为真数组,传入一个参数还可以构造一个参数的数组,还可以拼装各种类型为一个新的数组

let arr = Array.of(1,2)
console.log(arr)   // [1,2] length为2

let arr =  Array.of(3)
console.log(arr)    //[3] length为1

let arr = Array.of(1,true,'hi',[1,2,3],{name:'daji'})
console.log(arr)  //还可以拼装各种类型为一个新的数组
copyWithin()

copyWithin (a,b) 替换数组元素,a参数必选起始下标元素,到b参数之前,b开始后面的元素替换范围内的元素

let arr=[1,2,3,4,5]
console.log(arr.copyWithin(1,3)) //[1,4,5,4,5]  下标3后面的元素替换1,2下标元素
fill()

可给只有长度的空数组填充元素,还可替换元素

let arr = new Array(3).fill(7)
console.log(arr) //[7,7,7]

let arr= [1,2,3,4,5]
arr.fill('hi',1,3)
console.log(arr) //[1,'hi','hi',4,5]  把下标1,2替换为第一个参数'hi'

let arr= [1,2,3,4,5]
arr.fill(0)
console.log(arr) //[0,0,0,0,0]  全部替换成0
includes()

返回布尔值,检测数组中是否包含元素,还能检测是否包含NaN

let arr = [1,2,3,NaN]
console.log(arr.indexOf(Nan)) // -1 检测不存在NaN
console.log(NaN == NaN)   //false
console.log(arr.includes(1))  //true
扩展运算符

把数组或类数组展开成用逗号隔开的值(多用于实参和等号右边)

function foo(a,b,c){
      console.log(a,b,c)
}
let arr = [1,2,3]
foo(...arr)   //1 2 3  写法是...
console.log(...arr) //1 2 3

还可以用于合并数组

let arr1= [1,2,3]
let arr2= [4,5,6]
//Array.prototype.push.apply(arr1,arr2)  //ES5中的方法
arr.push(...arr2)
console.log(arr1)    //[1,2,3,4,5,6]

还可以打散字符串

let str = 'hello'
let arr = [...str]
console.log(arr)   //['h','e','l','l','o']
rest参数

把逗号隔开的值合成一个数组(多用于形参和等号左边)

function foo(x,y,z){
      console.log(arguments)    //类数组  
      //ES5中求和的方式
      //Array.prototype.forEach.call(arguments,function(item){
      //        sum+=item
      //})
      Array.from(auguments).forEach(function(item){
              sum+=item
      })
      return sum
}
console.log(foo(1,2))  //3
console.log(foo(1,2,3))  //6

传递不确定参数时

function foo(...args){     //合并成数组
      console.log(args)      //[1,2]
      let sum=0
      args.forEach(function(item){
           sum+=item
      })
      return sum            //求和
}
console.log(foo(1,2))

剩余未知参数时

function foo(x,...args){     //合并成数组
      console.log(x)    
      console.log(args)      
}
foo(1,2,3)     // 1  [2,3]
foo(1,2,3,4)  // 1  [2,3,4]

与解构赋值结合使用

let[x,...y]=[1,2,3]
console.log(x)  //1
console.log(y)  //[2,3]

相关文章

网友评论

    本文标题:ES6数组扩展

    本文链接:https://www.haomeiwen.com/subject/xuwqqltx.html