时间:2021-05-28
在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); //2console.log(array[0]); //1console.log(array[1]); //2array = new Array('a');console.log(array.length); //1console.log(array[0]);//'a'array = new Array(1, 'a');console.log(array.length); // 2console.log(array[0]);//1console.log(array[1]);//'a'但是new Array()有一种诡异的情况:
let array = new Array(2);console.log(array[0]); // undefinedconsole.log(array[1]);// undefinedconsole.log(array.length); // 2当我们给new Array()传递单个数字参数时,这个数字不是作为数组元素,而是该数组的length属性而存在,而数组本身则是一个空数组。
为了解决上面这个令人类没有安全感的特性,ES6引入了Array.of()来解决这个问题:
三:Array.of()
顾名思义,of()方法就是以它接受到的参数作为元素来创造数组,上面我们说的单个数字参数的情况也同样适用:
let array = Array.of(3);console.log(array.length); // 1console.log(array[0]); // 3array = Array.of(1, 2);console.log(array.length);// 2console.log(array[0]); // 1console.log(array[1]);// 2array = Array.of('a');console.log(array.length);// 1console.log(array[0]);// 'a'array = Array.of(1, 'a');console.log(array.length); // 2console.log(array[0]);// 1console.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); // trueconsole.log(array.length); //3console.log(array[0]);//1console.log(array[1]);//2console.log(array[2]);//3console.log(array.indexOf(2)); //12: Array.from(可迭代对象)
Array.from()也可以把一个可迭代对象转换为数组:
五: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]); //2console.log(array[1]); //3console.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()方法,可以使得开发者用更少的代码应对更多变的创建数组的场景。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文主要讲解ES6数组方法find()与findIndex(),关于JS的更多数组方法,可参考以下:①JavaScript内置对象之-Array②ES5新增数组
本文实例讲述了ES6使用Set数据结构实现数组的交集、并集、差集功能。分享给大家供大家参考,具体如下:Set数据结构是es6中新增的,它类似于数组,但是成员的值
es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,mapletarr=[1,2,3,4,3,2,1,2];遍历数组最简洁直接的方法
ES6通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程。一、字面量语法扩展在ES6模式下使用字面量创建对象更加简
ES6中的Set数据结构ES6新增了一种Set数据结构。它类似数组。最重要的一点是Set中的结构成员没有重复的,可用这点一行代码实现数组去重。Set本身是一个构