ES6学习笔记（三）数组的扩展

类数组:

简单举个例子

我们用DOM元素获取两个DOM类数组,最终判定为两个HTMLCollection[]和NodeList[],并不是真正意义上的数组.

let doms_1 = document.getElementsByClassName('xx')
let doms_2 = document.getElementsByTagName('xx')
let doms_3 = document.querySelectorAll('.xx')
console.log(doms_1)
console.log(doms_2)
console.log(doms_3)

伪数组

let arrayLike = {
    0: '1',
    1: '2',
    2: '3',
    length: 3
}
console.log(arrayLike)

这里最开始写错了.第三个元素索引写成了3,所以显示有些问题.不过没事.

Array.from():如何将类/伪数组转为真正的数组:

ES5方法

let doms_1 = document.getElementsByClassName('xx')
let array_1 = Array.prototype.slice.call(doms_1)
console.log(array_1)

ES6方法

使用Array.from()

let arrayLike = {
    0: '1',
    1: '2',
    2: '3',
    length: 3
}
let arr=Array.from(arrayLike)
console.log(arr)

成了,又简单又便捷.

Array.of()

当你用ES5的语法构建数组时,会出现一些问题.

//正常声明时不会出现问题
var arr_1 = new Array(1, 2, 3)
console.log(arr_1)
//但当参数变为一个时,会创建一个长度为3的空数组,带来麻烦
var arr_2 = new Array(3)
console.log(arr_2)

我们使用Array.of()时就不会出现问题.

let arr = Array.of(3)
console.log(arr)

Array.of()甚至能将不同的数据结构形式组合成新数组,十分强大.

let arr = Array.of(123, 'Faker', [1, 2, 3], { name: 'Faker' })
console.log(arr);

copyWithin()

copyWithin将数组的一部分拷贝到数组的某个位置.

let arr = Array.of(1, 2, 3, 4, 5, 6, 7, 8)
//将下标 6 ~ 8 的元素拷贝并覆盖到下标 2 开始的元素上
arr.copyWithin(2, 6, 8)
console.log(arr)

当原定位置不够时,新元素会覆盖老元素.

let arr = Array.of(1, 2, 3, 4, 5, 6, 7, 8)
arr.copyWithin(2, 3, 8)
console.log(arr)

Array.fill()

还记得之前new Array()声明出空数组的问题吗,可以用fill()来解决.

使用fill(...)可以将空数组填充上初始值

let arr = new Array(3).fill(1)
console.log(arr)

fill()也可指定某段位置进行填充

let arr = Array.of(1, 2, 3, 4, 5, 6, 7)
//将相应文本填充到下标 2 ~ 4 区间
arr.fill('777', 2, 4)
console.log(arr)

includes()

includes()和indexOf()的区别

includes()返回值为Boolean ( true false ) 可以查询NaN,当数组的有空的值的时候，includes会认为空的值是undefined，而indexOf不会。

indexOf()返回值为number ( 0 -1 ) 无法查询NaN

let arr = Array.of(1, 2, 3, NaN)
if (arr.indexOf(NaN) == 0) {
    console.log('YES')
}
else if (arr.indexOf(NaN) == -1) {
    console.log('NO')
}

let arr = Array.of(1, 2, 3, NaN)
if (arr.includes(NaN)) {
    console.log('YES')
}
else if (!arr.includes(NaN)) {
    console.log('NO')
}