在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()有一种诡异的状况:this
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()方法就是以它接受到的参数做为元素来创造数组,上面咱们说的单个数字参数的状况也一样适用:code
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。it
六: Array.from()的第三个参数
Array.from()还提供第三个参数可用,第三个参数用来指定在第二个参数所表明的回调函数的this的值,看一个例子:io
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()方法,可使得开发者用更少的代码应对更多变的建立数组的场景。