本文共 1533 字,大约阅读时间需要 5 分钟。
类数组并非真正意义上的数组,通常指拥有数组特有的属性(如 [] 和 length)但缺乏数组方法的对象。例如:
let div1 = document.getElementsByTagName('div'); // HTMLCollection []let div2 = document.getElementsByClassName('div'); // HTMLCollection []let div3 = document.querySelectorAll('.xx"); // NodeList [] 可以通过 console.log(div2 instanceof Array) 判断是否为数组,若为真则为数组,否则为伪数组。
可以将伪数组转换为真正数组。ES5 和 ES6 的实现方式分别如下:
ES5:
let arr = Array.prototype.slice.call(div3); // 转换为数组
ES6:
let arrayLike = { 0: 'es6', 1: 'es7', 2: 'es8', length: 3 };let arr = Array.from(arrayLike); // 转换为数组 用于处理数组构造器的局限性:
let arr = new Array(1, 2); // [1, 2]let arr = new Array(3); // 长度为3let arr = Array.of(3); // [3]let arr = Array.of(3, 5, 7); // [3, 5, 7]
支持多种数据类型拼接为数组,如:
let arr = Array.of(1, 'name', true, [1, 'zhangsan', false, { age: 12 }, { age: 23 }]); 用于数组的值替换:
示例:
let arr = [1, 2, 3, 4, 5];console.log(arr.copyWithin(1,3)); // [1,4,5,4,5]
用于数组填充:
示例:
let arr = [1, 2, 3, 4, 5];arr.fill('zhangsan', 1, 3); // [1, 'zhangsan', 'zhangsan', 4, 5]arr.fill(0); // [0, 0, 0, 0, 0] 用于检测数组是否包含特定值,解决了 indexOf() 中 NaN 的问题:
示例:
let arr = [1, 2, 3, NaN];console.log(arr.includes(NaN)); // true
flat():将多维数组扁平化处理。
示例:
const arr = [1, 2, 3, 4, 5, [6, [7, 8], 9]];const res = arr.flat(3); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
flatMap():结合 map 和 flat。
示例:
const arr = [1, 2, 3, 4, 5];const res = arr.flatMap(x => [x + 1]); // [2, 3, 4, 5, 6]
如需进一步练习,可以通过以上方法进行实际操作和验证。这些方法在现代 JavaScript 开发中都有广泛应用。
转载地址:http://pgbaz.baihongyu.com/