ECMAScript6-数组的扩展

一、数组的扩展

1. 类数组/伪数组

• 指的就是不是真正意义上的数组，比如：

  let div1 = document.getElementsByTagName('div')
  console.log(div1) // HTMLCollection []
  
  let div2 = document.getElementsByClassName('div')
  console.log(div2) // HTMLCollection []
  
  let div3 = document.querySelectorAll('.xx')
  console.log(div3) // NodeList []
  
  // 检测数组的方法
  console.log(div2 instanceof Array) // true 是数组 false 就不是数组
  

  以上代码输出信息可知，具有数组的标识 [] 和 length，但是这些数组使用 push() 方法就会报错，从这步可以检测出，这些数组不是真正意义上的数组，不具有数组的方法，但是具有数组的 length 属性，故称之为 伪数组 / 类数组

2. Array.from()

// 如何将伪数组转换为真正意义上的数组
// ES5 做法
let arr = Array.prototype.slice.call(div3)
console.log(arr) // []
arr.push(123)
console.log(arr) [123]
// ES6 做法
let arrayLike = {
  0: 'es6',
  1: 'es7',
  2: 'es8',
  length: 3
}
let arr = Array.from(arrayLike)
arr.push('es9')
console.log(arr) // ['es6', 'es7', 'es8', 'es9']

3. Array.of()

let arr = new Array(1, 2) // 当参数为两个以上时 这里的参数就是 数组的每项值
console.log(arr) // [1, 2]

let arr = new Array(3) // 当参数为 1 个时 代表初始化的数组的长度
console.log(arr.length) // 3

// Array.of() 就是为了处理数组构造器存在的一些问题而设定 使用这个方法即使值传入一个参数 也会是数组的项值 而不是数组的长度值
let arr = Array.of(3)
console.log(arr) // [3]

let arr = Array.of(3, 5, 7)
console.log(arr) // [3, 5, 7]

// 可以将各种各样的数据通过 Array.of 方式拼成一个数组
let arr = Array.of(1, 'name', true, [1, 'zhangsan', false, {age: 12}], {age: 23})
console.log(arr)

4. copyWithin()

// 数组值替换
// copyWithin() 支持3个参数:
// target: 复制到指定目标索引位置
// start: 元素复制的起始位置
// end: 停止复制的索引位置(默认为 array.length) 如果为负值，表示倒数
let arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(1,3)) // [1, 4, 5, 4, 5]

5. fill()

// 数组填充
// fill() 支持3个参数:
// value: 填充的值 [必传]
// start: 开始填充位置 [可选]
// end: 停止填充位置 [可选] 默认是数组的长度
let arr = [1, 2, 3, 4, 5]
arr.fill('zhangsan', 1, 3)
console.log(arr) // [1, 'zhangsan', 'zhangsan', 4, 5 ]

// 如果只传入一个参数
arr.fill(0)
console.log(arr) // 0,0,0,0,0

6. includes()

// 是否包含
// 在 es5 之前为了检测某一个项是不是在数组中存在 通常通过 indexOf() 方法配合
// indexOf() 方法可以获得数组元素在数组中的索引 如果存在就会返回索引值 不存在就会返回 -1
// 但是以下情况，会存在问题
let arr = [1, 2, 3, NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(NaN == NaN) // false 在js 中 NaN 是不等于 NaN 的 所以在数组中通过 indexOf() 方法得到的就是 -1
// 这种就可以通过includes() 方法即可处理
let arr = [1, 2, 3, NaN]
console.log(arr.includes(NaN)) // true

7、数组扩展【ES10】

• Array.prototype.flat()
• Array.prototype.flatMap()

// 将多维数组扁平化处理
const arr = [1, 2, 3, 4, 5, [6, [7, 8], 9]]
const res = arr.flat(3)
console.log(res) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// map和flat整合
const arr = [1, 2, 3, 4, 5]
const res = arr.flatMap( x => [x + 1])
console.log(res)