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

e10101 发布于2019-08-26 10:28 / 2778人阅读

摘要：它主要用在以类数组对象和可迭代对象为蓝本，创建对应的数组。类数组对象我们最熟悉的类数组对象，应该就是的对象了。

在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的值，看一个例子：

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()方法，可以使得开发者用更少的代码应对更多变的创建数组的场景。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106241.html

深入理解ES6（四）（数组的扩展）

摘要：例如，会删除数组中的前两项。插入的项数不必与删除的项数相等。对数组进行遍历循环，对数组中的每一项运行给定函数。判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回。深入理解ECMA2015（四） —— 数组的扩展一、JavaScript数组详解回顾（ES6之前）（1）数组的创建使用 Array 构造函数： var arr1 = new Array(); //创建一个...

big_cat 2019-08-29 15:41 评论0 收藏0
Javascript内置对象新增接口列表

网上很少有提供不同版本接口对比的文章，所以自己总结一下。 Array Method Description Modify Version concat 连接多个数组，返回数组副本，参数可以为值或数组否 ES3 join 把数组元素组合为字符串否 ES3 pop 删除并返回最后一个元素是 ES3 push 向数组末尾添加一个或多个值，返回数组长度是 ES3 reve...

xuhong 2019-08-21 17:02 评论0 收藏0
白话es6系列一：Array.of()和Array.from()

摘要：更重要的是，代码意图也直观数组长度，每一项按照约定的规则进行初始化。上面代码创建了一个长度为的数组其中的项为数字。的强大不止于此，它还能接受一个映射函数上面代码中，被直接传递给方法，从而将它包含的值转换成了数组。 es6新增了二种方法：Array.of()和Array.from()，它们有什么用途呢？在平时的开发中能给我们带来什么方便呢？本篇将从一个创建数组的小问题开始，逐步揭开它们的...

newtrek 2019-08-23 15:36 评论0 收藏0
《深入理解ES6》笔记—— 改进数组的功能（10）

摘要：创建数组中创建数组的方式数组字面量一个数组。传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。用新元素替换掉数组内的元素，可以指定替换下标范围。 ES5提供的数组已经很强大，但是ES6中继续改进了一些，主要是增加了新的数组方法，所以这章的知识非常少。创建数组 ES5中创建数组的方式：数组字面量、new一个数组。 const arr1 = [] //数组字...

inapt 2019-08-20 18:25 评论0 收藏0