【ES6标准入门】JavaScript的数组的扩展

😁 作者简介：一名大三的学生，致力学习前端开发技术
⭐️个人主页：夜宵饽饽的主页
❔ 系列专栏：前端js专栏
👐学习格言：成功不是终点，失败也并非末日，最重要的是继续前进的勇气

​🔥​前言：

这里是关于数组的扩展，其中有关数组的一些方法使用扩展，我觉得大家可以去参照MDN文档的去使用，会更加方便，这是我自己的学习JavaScript的笔记，希望可以帮助到大家，欢迎大家的补充和纠正

第8章 数组的扩展

8.1 扩展运算符

8.1.1 含义

扩展运算符是三个点（…) 它可以将一个数组转为用逗号分隔得参数序列

⭐️ 重要细节：

• 该运算符主要用于函数调用

• 扩展运算符与正常的函数可以结合使用，非常灵活

• 扩展运算符后面还可以放置表达式

  const arr=[
      ...(x>0 ? ['a'] :[]),
      'b'
  ]
  

• 如果扩展运算符后面是一个空数组，则不会产生任何效果

8.1.2 扩展运算符的应用

1. 合并数组

var arr1=['a','b']
var arr2=['c','e']

console.log([...arr1,...arr2])

2. 与解构赋值结合

扩展运算符可以与解构赋值结合起来，用于生成数组

const [first,...rest]=[1,2,3,4]

//first 1
//rest [2,3,4]

❗️ 注意点：如果将扩展运算符用于数组赋值时，则只能将其放在参数的最后一位

3. 函数的返回值

JavaScript的函数只能返回一个值，如果想要返回多个值，只能返回数组和对象，我们可以使用扩展运算符过渡一下达到多个参数返回使用

var dataFiles=readDateFields(database)
var d=new Date(...dateFies)

上面的代码从数据库取出一行数据，通过扩展运算符，直接将其传入构造函数Date中

4. 字符串

扩展运算符还可以将字符串转为真正的数组。

[...'hello']
//['h','e','l','l','o']

这样的写法是可以正确识别32位的Unicode字符

5. 实现了Iterator接口的对象

var nodeList=document.querySelectorAll('div')
var array=[...nodeList]

上面的代码中,querySelectorAll方法返回是一个NodeList类数组对象，这时扩展运算符可以将其转为真正的数组，原因在于NodeList对象实现了Iterator.

6. Map和Set结构，Generator函数

1. Map和Set结构是具有Iterator接口的对象，所以可以使用扩展运算符
2. Generator函数运行会返回一个遍历器对象，因此也可以使用扩展运算符

8.2 Array.from()

8.2.1 含义

Array.from方法用于将两类对象转为真正的数组

1. 类似数组的对象，比如：DOM操作返回的NodeList集合，以及函数内部的arguments对象
2. 可遍历（iterable）对象（包括ES6新增的数据结构Set和Map)

Array.from 还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

Array.from(arrayLike,x=>x*x)

//等同于
Array.from(arrayLike).map(x => x*x)

⭐️ Array和扩展运算符的区别

先解释何为类似数组对象的：本质特征只有一点，即必须有 length属性

扩展运算符： 其背后调用的是遍历器接口（Symbo.iterator），如果一个对象没有部署该接口，就无法转换

Array.from()： 其是支持类似数组对象，任何有length对象，都可以通过Array.from方法转换为数组，扩展运算符是无法转换这种情况的

Array.from({ length:3 })
//[undefined,undefined,undefined]

8.2.3 应用

1. Array.from()可以将各种值转为真正的数组，并且提供map功能。这实际上意味着，只要有一个原始数据结构，就可以先对它的值进行处理，然后转成规范的数组结构，在使用数组方法进行操作
2. Array.from()可以将字符串转为数组，然后返回字符串的长度，因为它可以正确处理各种Unicode字符，可以避免JavaScript将大于 、uFFFF的Unicode字符算作2个字符的bug

8.3 Array.of()

📑 描述： 将一组值转为数组

Array.of(3,2,6) //[3，2，6]

使用细节：

这个方法主要是用于弥补数组构造函数Array()的不足，因为参数个数不同会导致Array()的行为差异

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

Array只有当参数个数不少于2个时，Array()才会返回有参数组成的新数组

Array.of 基本上可以用来替代Array()或 new Array()

8.4 数组实例的includes()

📑 描述： 该方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似

该方法有两个参数

1. 表示查询的值
2. 表示查询的起始位置，默认为0，如果其为负数，则表示倒数位置，如果大于数组长度，则会重置0开始

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


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

该方法与indexOf的区别

1. indexOf方法不够语义化，不够直观
2. indexOf其内部使用严格的相等运算符（===）进行判断，会导致对NaN的误判

8.5 数组的空位

数组的空位是指某一个位置没有任何值，比如Array构造函数返回的数组都是空位

Array(3) //[ , , ,]

❗️ 注意

空位不是undefined ,一个位置的值等于undefined依然是有值的，空位是没有任何值的,in运算符可以说明这点

ES5对空位处理很不一致，大多数情况下会忽略空位

• forEach()，filter() ，every()和some()都会跳过空位
• map() 会跳过空位，但是会保留这个值
• join() 和 toString会将空位视为undefined ，而undefined和null会被处理成字符串

//forEach方法
[,'a'].forEach((x,i)=>console.log(i)); //1

//filter方法
var filterdata=['a',,'b'].filter(x=>true);
console.log('filter='+filterdata); //['a','b']

//every方法
var everydata=[,'a'].every(x => x==='a');
console.log("every="+everydata); //true

//some方法
var somedata=[,'a'].some(x=>x!=='a');
console.log('some='+somedata); //false

//map方法
var mapdata= [,'a'].map(x=>1);
console.log("map="+mapdata); //[,1]

//join方法
var joindata=[,'a',undefined,null].join('#');
console.log('join='+joindata); //"#a##"

//toString方法
var toStringdata=[,'a',undefined,null].toString()
console.log('toString='+toStringdata) //",a,,"

ES6则明确将空位转为undefined

• Array.from()方法会将数组的空位转为undefined,这个方法不会忽略空位
• 扩展运算符（…) 也会将空位转为undefined
• copyWithin() 会连空位一起复制
• fill() 会将空位视为正常的数组位置
• for…of循环也会遍历空位

//Array.from方法
var arrayFrom=Array.from(['a',,'b'])
console.log(arrayFrom) //[ 'a', undefined, 'b' ]

//扩展运算符
console.log([...['a',,'b']])
//[ 'a', undefined, 'b' ]

//copyWithin()
var copy=[,'a','b',,].copyWithin(2,0)
console.log('copy='+copy)
//[,'a',,'a']

//fill
var fill=new Array(3).fill('a')
console.log('fill='+fill)
//['a','a','a']

总结：由于空位的处理规则非常不统一，所以建议避免出现空位