ES6 新增的创建数组的方法(小结)
在ES6之前,创建数组的方式有2种:
一:通过数组字面量
letarray=[1,2,3]; console.log(array);//[1,2,3]
二:通过newArray()创建数组
letarray=newArray(1,2,3); console.log(array);//[1,2,3]
在大多数情况下newArray()运行良好:
letarray=newArray(1,2); console.log(array.length);//2 console.log(array[0]);//1 console.log(array[1]);//2 array=newArray('a'); console.log(array.length);//1 console.log(array[0]);//'a' array=newArray(1,'a'); console.log(array.length);//2 console.log(array[0]);//1 console.log(array[1]);//'a'
但是newArray()有一种诡异的情况:
letarray=newArray(2); console.log(array[0]);//undefined console.log(array[1]);//undefined console.log(array.length);//2
当我们给newArray()传递单个数字参数时,这个数字不是作为数组元素,而是该数组的length属性而存在,而数组本身则是一个空数组。
为了解决上面这个令人类没有安全感的特性,ES6引入了Array.of()来解决这个问题:
三:Array.of()
顾名思义,of()方法就是以它接受到的参数作为元素来创造数组,上面我们说的单个数字参数的情况也同样适用:
letarray=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元素的数组:
functioncreateArrayFrom(){ console.log(argumentsinstanceofArray);//false returnArray.from(arguments); } letarray=createArrayFrom(1,2,3); console.log(arrayinstanceofArray);//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()也可以把一个可迭代对象转换为数组:
letiteratorObject={ *[Symbol.iterator](){ yield1; yield2; yield3; } }; letarray=Array.from(iteratorObject); console.log(arrayinstanceofArray);//true console.log(array.length);//3 console.log(array[0]);//1
五:Array.from()的第二个参数
前面的例子,我们看到了一个类数组对象和可迭代对象作为Array.from()的第一个参数,从而创建出包含它们元素的数组。Array.from()的第二个参数是一个函数,这个函数用来将类数组对象和可迭代对象的元素进行某种变换后,再作为生出数组的元素,例如:
letiteratorObject={ *[Symbol.iterator](){ yield1; yield2; yield3; } }; letarray=Array.from(iteratorObject,(item)=>{returnitem+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的话,看一个例子:
letfirstHelper={ diff:1, add(value){ returnvalue+this.diff; } }; letsecondHelper={ diff:2 }; functioncreateArrayFrom(){ returnArray.from(arguments,firstHelper.add,secondHelper); } letarray=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()方法,可以使得开发者用更少的代码应对更多变的创建数组的场景。