【JS】Array.of() 创建数组

微信订阅号：Rabbit_svip Array.of() 的作用是创建数组。 创建数组本来已经有 字面量 和 Array构造函数 等方法，但由于 Array构造函数 创建数组时有一些怪异的行为，所以 ES6 添加了 Array.of() 来弥补 Array构造函数 的不足。 首先看看 Array构造函数 的怪异行为 只传一个值：如果给 Array构造函数 传入1个整型的值，且大于等于0，那么数组的 length 属性会被设为该值。 只传一个值：如果传入一个非数值类型的值，那么这个值会成为目标数据的唯一项。 传入多个值：此时无论这些值是不是数值型，都会变成数组的元素。 只传一个值：不允许只传一个负数或者不能隐式转换成整型的浮点数（如：1.2） let items = new Array(3); console.log(items.length); // 3 => 数值型 console.log(items); // (3) [empty × 3] console.log(items[0]); // undefined console.log(items[1]); // undefined console.log(items[2]); // undefined items = new Array('3'); console.log(items.length); // 1 => 数值型 console.log(items); // ["3"] console.log(items[0]); // 3 => 字符串 items = new Array(1， 2); console.log(items.length); // 2 => 数值型 console.log(items); // [1, 2] console.log(items[0]); // 1 => 数值型 console.log(items[1]); // 2 => 数值型 items = new Array(1， '2'); console.log(items.length); // 2 => 数值型 console.log(items); // [1, '2'] console.log(items[0]); // 1 => 数值型 console.log(items[1]); // '2' => 字符串 items = new Array(-1); // 报错 Uncaught RangeError: Invalid array length items = new Array(1.1); // 报错 Uncaught RangeError: Invalid array length items = new Array(2.0); // 正常 和 new Array(2) 是一样的。 以上是 Array构造函数 的用法，也是 Array构造函数 的怪异行为。 new Array() 当只传入一个参数时，不能传入负数，也不能传入浮点数。 在使用 new Array 时，一不小心就会创建出稀疏数组。这个动作会产生一些诡异的“空槽”行为，这也是JS数组广为人所诟病的一点。 Array.of() Array.of() 取代了 Array() 成为数组的推荐函数形式构造器，因为 Array.of() 并没有这个特殊的单一数值型参数值的问题。 Array.of() 总是返回参数值组成的数组。如果没有参数就返回一个空数组。 所以说，Array.of() 的行为比 Array() 更统一。 Array.of() // [] Array.of(undefined) // [undefined] Array.of(3) // [3] Array.of('1') // ['1'] Array.of(1, 2) // [1, 2] Array.of(1, '2') // [1, '2'] Array.of(-1) // [-1] Array.of(1.1) // [1.1] 模拟 Array.of() 方法 场景1： 如果有一个回调函数需要传入的参数封装为数组，而且不能保证传入的值一定不是0或正整数，Array.of()可以完美解决这个问题。 function createArray(value) { return Array.of(value); } 场景2： 如果需要构建 Array 的子类，并且想要在子类实例中创建和初始化元素。 class Calculator extends Array { sum () { return this.reduce( (acc, curr) => acc + curr, 0); } } let y = new Calculator(3); console.log(y.length); // 3 console.log(y.sum()); // 0 let z = Calculator.of(3, 4); console.log(z.length); // 2 console.log(z.sum()); // 7 这里用了reduce方法，这个方法是Array的，这里用 this.reduce 是因为 Calculator 继承了 Array。 Array.reduce的使用方法可以看下面的链接 【JS】遍历数组的常用方法（举例版）

本文章由javascript技术分享原创和收集