乐趣区

ES6数组-新增的创建数组的方法

jiezi

在 ES6 之前，创建数组的方式有 2 种：
一: 通过数组字面量

let array = [1,2,3];
console.log(array);//[1,2,3]

二: 通过 new Array()创建数组

let array = new Array(1, 2, 3);
console.log(array); //[1,2,3]

在大多数情况下 new Array()运行良好：

let array = new Array(1, 2);
console.log(array.length); //2
console.log(array[0]); //1
console.log(array[1]); //2

array = new Array('a');
console.log(array.length); //1
console.log(array[0]);//'a'

array = new Array(1, 'a');
console.log(array.length); // 2
console.log(array[0]);//1
console.log(array[1]);//'a'

但是 new Array()有一种诡异的情况：

let array = new Array(2);
console.log(array[0]); // undefined
console.log(array[1]);// undefined
console.log(array.length);  // 2

当我们给 new Array()传递 单个数字 参数时，这个数字不是作为数组元素，而是该数组的 length 属性而存在，而数组本身则是一个空数组。
为了解决上面这个令人类没有安全感的特性，ES6 引入了 Array.of()来解决这个问题：
三：Array.of()
顾名思义，of()方法就是以它接受到的参数作为元素来创造数组，上面我们说的单个数字参数的情况也同样适用：

let array = Array.of(3);
console.log(array.length); // 1
console.log(array[0]); // 3

array = Array.of(1, 2);
console.log(array.length);// 2
console.log(array[0]); // 1
console.log(array[1]);// 2

array = Array.of('a');
console.log(array.length);// 1
console.log(array[0]);// 'a'

array = Array.of(1, 'a');
console.log(array.length); // 2
console.log(array[0]);// 1
console.log(array[1]);// 'a'

四：Array.from()
ES6 还增加了一个 Array.from()，也是用了创建一个数组。它主要用在以 类数组对象 和可迭代对象 为蓝本，创建对应的数组。

1: Array.from(类数组对象)

我们最熟悉的类数组对象，应该就是 function 的 arguments 对象了。接下来，我们看一个用 Array.from()创建包含 arguments 元素的数组：

function createArrayFrom() {console.log(arguments instanceof Array); // false
    return Array.from(arguments);
}

let array = createArrayFrom(1, 2, 3);
console.log(array instanceof Array); // true
console.log(array.length); //3
console.log(array[0]);//1
console.log(array[1]);//2
console.log(array[2]);//3
console.log(array.indexOf(2)); //1

2: Array.from(可迭代对象)

Array.from()也可以把一个可迭代对象转换为数组：let iteratorObject = {*[Symbol.iterator](){
        yield 1;
        yield 2;
        yield 3;
    }
};
let array = Array.from(iteratorObject);
console.log(array instanceof Array); // true
console.log(array.length); // 3
console.log(array[0]); // 1

五：Array.from()的第二个参数
前面的例子，我们看到了一个类数组对象和可迭代对象作为 Array.from()的第一个参数，从而创建出包含它们元素的数组。Array.from()的第二个参数是一个函数，这个函数用来将类数组对象和可迭代对象的元素进行某种变换后，再作为生出数组的元素，例如：

let iteratorObject = {*[Symbol.iterator](){
        yield 1;
        yield 2;
        yield 3;
    }
};
let array = Array.from(iteratorObject, (item)=>{return item + 1});
console.log(array[0]); //2
console.log(array[1]); //3
console.log(array[2]); //4

这个例子里，我们提供了把每个元素值加一的变换，所以原本的 1，2，3，置换到新的数组之后，元素是 2，3，4。

六：Array.from()的第三个参数
Array.from() 还提供第三个参数可用，第三个参数用来指定 this 的值，如果在整个方法的调用中有用到 this 的话，看一个例子：

let firstHelper = {
    diff: 1,
    add(value){return value + this.diff;}
};
let secondHelper = {diff: 2};
function createArrayFrom() {return Array.from(arguments, firstHelper.add, secondHelper);
}

let array = createArrayFrom(1, 2, 3);
console.log(array); //[3, 4, 5]

上面的例子里面，我们的在 add()方法里面使用了 this(这行代码：value + this.diff)，并且 add()定义在 firstHelper 对象，且 firstHelper 对象也有 diff 属性，但是我们的第三个参数传入的是 secondHelper，所以在 firstHelper.add()方法里的 this 值是 secondHelper。

以上就是 ES6 新增的 Array.of()和 Array.from()方法，可以使得开发者用更少的代码应对更多变的创建数组的场景。

退出移动版