写点什么

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

用户头像
学习委员
关注
发布于: 2021 年 01 月 24 日
【JS】Array.of() 创建数组

Array.of() 的作用是创建数组。


创建数组本来已经有 字面量 和 Array 构造函数 等方法,但由于 Array 构造函数 创建数组时有一些怪异的行为,所以 ES6 添加了 Array.of() 来弥补 Array 构造函数 的不足。


首先看看 Array 构造函数 的怪异行为

  1. 只传一个值:如果给 Array 构造函数 传入 1 个整型的值,且大于等于 0,那么数组的 length 属性会被设为该值。

  2. 只传一个值:如果传入一个非数值类型的值,那么这个值会成为目标数据的唯一项。

  3. 传入多个值:此时无论这些值是不是数值型,都会变成数组的元素。

  4. 只传一个值:不允许只传一个负数或者不能隐式转换成整型的浮点数(如:1.2)


let items = new Array(3);console.log(items.length);    // 3 => 数值型console.log(items);           // (3) [empty × 3]console.log(items[0]);        // undefinedconsole.log(items[1]);        // undefinedconsole.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() 方法

function ArrayOf() {  return [].slice.call(arguments);}
复制代码



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); // 3console.log(y.sum()); // 0
let z = Calculator.of(3, 4);console.log(z.length); // 2console.log(z.sum()); // 7
复制代码

这里用了 reduce 方法,这个方法是 Array 的,这里用 this.reduce 是因为 Calculator 继承了 Array。


Array.reduce 的使用方法可以看下面的链接

【JS】遍历数组的常用方法(举例版)


用户头像

学习委员

关注

反派 2019.03.19 加入

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

评论

发布
暂无评论
【JS】Array.of() 创建数组