ES6 新增的创建数组的方法(小结)
在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()方法，可以使得开发者用更少的代码应对更多变的创建数组的场景。
相关文章
这篇文章主要介绍了JS实现倒序输出的几种常用方法,结合实例形式分析了JavaScript字符串与数组的转换、变量、分割、反转等相关操作技巧,需要的朋友可以参考下2019-04-04
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1...2007-02-02
这是一段点击复制的代码，现在我的页面里不仅有1个链接需要用到这段代码。请哪位好心人指教一下应该怎么用ID对应的方式来改写这段js，使它实现一个点击复制对应1个相应内容2009-12-12
这篇文章主要介绍了JS实现向表格行添加新单元格的方法,涉及javascript针对表格进行动态操作的技巧,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了详解CommonJS和ES6模块循环加载处理的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了jszip插件实现图片打包下载的方法,结合实例形式分析了JavaScript使用jszip插件依据图片列表打包下载zip压缩文件的相关操作技巧,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了微信小程序实现常见弹出层效果 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了详解使用webpack构建多页面应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
art-template 是一个简约、超快的模板引擎。这篇文章主要介绍了详解js模板引擎art template数组渲染的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了js显示动态时间的方法,较为详细的分析了javascript中Date对象的常用方法及功能,并结合实例形式分析了JS时间显示功能,需要的朋友可以参考下2016-08-08
最新评论