ES6 Array 之生成新数组

2023-03-29 07:42| 来源: 网络整理| 查看: 265

这是我参与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() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例：

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

Array.from(arrayLike, mapFn, thisArg) arrayLike：伪数组 mapFn：遍历的函数（就是每次都要执行的） thisArg：this 对象（如果传入的函数中用到了 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] 复制代码

【本文地址】

公司简介

联系我们