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。
es6字符串转数组六： 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()⽅法，可以使得开发者⽤更少的代码应对更多变的创建数组的场景。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。