ES6 Array 之生成新数组

922 阅读3分钟

这是我参与8月更文挑战的第3天,活动详情查看:8月更文挑战

ES5 中生成新数组

方法一:使用 Array 构造函数:

var arr1 = Array(5); // 生成一个长度为 5,每个元素为空的数组

方法二:使用字面量对象:

var arr2 = []; // 未指定长度
var arr3 = ['', '']; // 指定长度为 2,每个元素为空字符串

/* 补充 */
// push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
// 说明:push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
arr2.push(1, 2, 'sh');
// pop() 方法用于删除并返回数组的最后一个元素。
// 说明:pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。
arr2.pop();

方法三:伪数组转化为数组:

先用一个数组的方法,比如说 slice 方法,然后再用 call 方法传入伪数组,这样就能实现伪数组到数组的转换:

var args = [].slice.call(arguments); // arguments 属于 collection。 这里只是演示在 ES5 中的做法,实际上,arguments 必须在函数体内部使用,此外,ES6 已经废弃了使用 arguments。
var imgs = [].slice.call(document.querySelectorAll('img')); // document.querySelectorAll('img') 表示选中当前 DOM 树上所有的 img 标签,document.querySelectorAll('img') 属于 NodeList

ES6 中生成新数组

1. Array.from()

方法一:使用 Array.from(),把伪数组转换为数组,实际上也是生成新数组的方式。

Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例:

let arr1 = Array.from({ length: 3 }, function () { return '' }); // 生成一个长度为 3,每个元素值为空字符串的数组
let arr2 = Array.from({ 0: 1, 1: 'sh', length: 2 }); // 生成一个长度为 2,元素值分别为 1、'sh' 的数组
let args = Array.from(arguments);
let imgs = Array.from(document.querySelectorAll('img'));

Array.from() 完整的语法如下:

  • Array.from(arrayLike, mapFn, thisArg)
    • arrayLike:伪数组
    • mapFn:遍历的函数(就是每次都要执行的)
    • thisArgthis 对象(如果传入的函数中用到了 this,那么 this 的指向就是这个 thisArg

Array.from() 除了把伪数组转换为数组,还能声明数组并初始化赋值,举例如下:

// 声明一个长度为 5 的数组 array
let array = Array(5);
// 用 for 循环给数组的所有元素赋值为 1
for (let i = 0, len = array.length; i < len; i++) {
    array[i] = 1;
}
console.log(array);

/* 结果:
(5) [1, 1, 1, 1, 1]
*/

下面我们用 Array.from() 声明数组并对数组元素初始化赋值:

// 用 Array.from 遍历一个长度为 5 的伪数组,每次都返回 1,实现伪数组转换数组的同时,初始化赋值的效果
let array = Array.from({ length: 5 }, function () { return 1 });
console.log(array);

/* 结果:
(5) [1, 1, 1, 1, 1]
*/

对比 for 循环,用 Array from() 声明数组并初始化赋值,代码就简洁多啦。

2. Array.of()

方法二:使用 Array.of(),生成一个新数组的同时,赋初值,实现快速地把 n 个元素放到数组中去:

let arr1 = Array.of(1); // arr1:[1]
let arr2 = Array.of(1, 2, "sh"); // arr2:[1, 2, "sh"]

3. Array.prototype.fill()

  • array.fill(value, start, end)
    • value:必需。填充的值。
    • start:可选。开始填充位置。
    • end:可选。停止填充位置 (默认为 array.length)

方法三:使用 fill() 方法,将一个固定值替换数组的元素。也可以实现为空数组赋值,生成一个元素初始化赋值后的新数组:

let arr1 = Array(5).fill(17); // arr1:[17, 17, 17, 17, 17]
let arr2 = [1, 2, 3, 4, 5];
arr2.fill(8, 2, 4);
console.log(arr2); // [1, 2, 8, 8, 5]