类数组 / 伪数组
Array.from()
Array.of()
copyWithin()
fill()
includes()
类数组、伪数组例子:
let divs = document.getElementsByTagName('div'); console.log(divs); // HTMLCollection let divs2 = document.getElementsByClassName('abc'); console.log(divs2); // HTMLCollection let divs3 = document.querySelectorAll('.xxx'); console.log(divs3); // NodeList // 我们使用instanceof 验证这些是伪数组 console.log(divs instanceof Array); // false console.log(divs2 instanceof Array); // false console.log(divs3 instanceof Array); // false
HTMLCollection、NodeList等类型都是伪数组。
这里伪数组不能使用push这种数组原有的方法,因为这些类型没有定义push方法。
使用slice将类数组转换成真正的数组:
let arr = Array.prototype.slice.call(divs) console.log(arr);
arguments也是伪数组:
function foo() { console.log(arguments); } foo(1, 2, 3)
伪数组必要条件:
1、下标索引必须是0为开头的连续正整数数集
2、必须要有length属性,默认值为0
我们使用对象来定义一个伪数组:
let arrayLike = { 0: 'lala', 1: 'haha', 2: 'hehe', length: 3 }
使用ES6方式将伪数组转换成数组:from
let arr1 = Array.from(arrayLike) arr1.push('lolo') console.log(arr1);
使用Array构造器传参生成数组,会因为传参数量不同而参数不同的结果,如下代码:
let a1 = new Array(1, 2) let a2 = new Array(3) console.log(a1); // [1,2] console.log(a2); // 长度为3的空数组
为了解决上面构造器参数问题,使用of方法解决:
of 方法可以拼装任何类型变成一个数组
let a3 = Array.of(1, 2) let a4 = Array.of(3) console.log(a3); // [1,2] console.log(a4); // [3]
copyWithin:从数组的指定位置拷贝元素到数组的另一个指定位置中
参数:
target:必需。复制到指定目标索引位置。
start:可选。元素复制的起始位置。
end:可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。
let c1 = [1, 2, 3, 4, 5, 6] console.log(c1.copyWithin(1, 3)); // 根据参数定义,将索引3的位置到末位的元素,替换从索引1开始的位置。
fill,填充数组:
参数:
value:必需。填充的值。
start:可选。开始填充位置。
end:可选。停止填充位置 (默认为 array.length)
填充abc字符串给长度为3的数组:
let f1 = new Array(3).fill('abc') console.log(f1);
fill也可以做数组元素值的替换:
let f2 = [1, 2, 3, 4, 5] f2.fill('abc', 1, 3) console.log(f2); // [1, "abc", "abc", 4, 5] f2.fill('n') console.log(f2); // ["n", "n", "n", "n", "n"]
includes,ES6用来判断数组里面是否包含指定元素:
ES5中,indexOf有什么弊端?
let i1 = [1, 2, 3, NaN] console.log(i1.indexOf(NaN)); // -1
造成上面的原因是因为NaN不等于NaN
console.log(NaN == NaN) // 输出false
我们来使用includes来判断:
console.log(i1.includes(2)); // true console.log(i1.includes(NaN)); // true console.log(i1.includes(6)); // false
由此可得includes可以实现NaN的正确判断。