本文主要介绍了在ES6中创建数组的新方法,并通过示例代码进行了详细介绍。对大家的学习或工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
在ES6之前,有两种创建阵列的方法:
一: 通过数组字面量
设array=[1,2,3];
console.log(数组);//[1,2,3]
二: 通过new Array()创建数组
设array=new Array(1,2,3);
console.log(数组);//[1,2,3]
New Array()在大多数情况下工作良好:
设array=new Array(1,2);
控制台. log(array . length);//2
console . log(array[0]);//1
console . log(array[1]);//2
array=新数组( a );
控制台. log(array . length);//1
console . log(array[0]);//a
array=新数组(1, a );
控制台. log(array . length);//2
console . log(array[0]);//1
console . log(array[1]);//a
但是new Array()有一个奇怪的情况:
设Array=new Array(2);
console . log(array[0]);//未定义
console . log(array[1]);//未定义
控制台. log(array . length);//2
当我们给new Array()传递单个数值形参时,这个数并不是作为数组元素存在的,而是数组的length属性,数组本身就是一个空数组。
为了解决上述不安全问题,ES6引入了Array.of()来解决这个问题:
三:Array.of()
顾名思义,of()方法创建一个数组,数组中的参数作为元素接收。上述单个数字参数的情况也适用:
设array=array . of(3);
控制台. log(array . length);//1
console . log(array[0]);//3
array=Array.of(1,2);
控制台. log(array . length);//2
console . log(array[0]);//1
console . log(array[1]);//2
array=array . of( a );
控制台. log(array . length);//1
console . log(array[0]);//a
array=Array.of(1, a );
控制台. 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元素:
函数createArrayFrom() {
console . log(arguments instance of Array);//假
返回Array.from(参数);
}
设array=createArrayFrom(1,2,3);
console.log(array的数组实例);//真
控制台. log(array . length);//3
console . log(array[0]);//1
console . log(array[1]);//2
console . log(array[2]);//3
console . log(array . index of(2));//1
2: Array.from(可迭代对象)
Array.from()也可以将可迭代对象转换为数组:
让iteratorObject={
*[Symbol.iterator](){
产量1;
产量2;
产量3;
}
};
let array=array . from(iterator object);
console.log(array的数组实例);//真
控制台. log(array . length);//3
console . log(array[0]);//1
五:Array.from()的第二个参数
在前面的例子中,我们看到一个类数组对象和一个迭代对象作为Array.from()的第一个参数,从而创建了一个包含它们的元素的数组。Array.from()的第二个参数是一个函数,用来变换类Array对象和iterable对象的元素,然后把它们作为产生数组的元素,例如:
让iteratorObject={
*[Symbol.iterator](){
产量1;
产量2;
产量3;
}
};
let array=array . from(iterator object,(item)={ return item 1 });
console . log(array[0]);//2
console . log(array[1]);//3
console . log(array[2]);//4
在这个例子中,我们提供了将每个元素的值加1的转换,因此在原来的1,2,3被新数组替换后,元素是2,3,4。
六: Array.from()的第三个参数
Array.from()还提供了第三个可用参数,用于指定此。如果这在整个方法调用中使用,请看一个例子:
let firstHelper={
差异:1,
添加(值){
返回值this.diff
}
};
让secondHelper={
差异:2
};
函数createArrayFrom() {
返回Array.from(arguments,firstHelper.add,second helper);
}
设array=createArrayFrom(1,2,3);
console.log(数组);//[3, 4, 5]
在上面的例子中,我们的在add()方法中使用this(这行代码:value this . diff ), add()在firstHelper对象中定义,它也有一个diff属性。但是,我们的第三个参数被传入secondHelper,因此firstHelper.add()方法中的这个参数的值是secondhelper。
它们是ES6中新的Array.of()和Array.from()方法,可以让开发人员用更少的代码处理更多的变量数组创建场景。