ES6为数组做了哪些扩展?

来源:互联网 发布:mysql 修改sql语句 编辑:程序博客网 时间:2024/05/16 14:14

这节主要介绍几个即简单有好玩的新函数:

Array.of()函数

函数作用:将一组值,转换成数组。

Array.of(1,2,3,4,5);//结果:[1,2,3,4,5]

是不是很好理解,传进去的数字是:1~5,最后经过Array.of函数处理,得到了一个数组,而数组的内容就是[1,2,3,4,5]。
Array.of函数的出现是源于Array构造函数的缺陷,这里对新知识学习不影响,所以展开不作讲解,我们只需要关心我们要掌握的知识就ok了。

个人想补充:这里说的一组值,除了数字,也可以是字符串和对象等

这里写图片描述

这里写图片描述

Array.from( )函数

函数作用:可以将类似数组的对象或者可遍历的对象转换成真正的数组。
有哪些是类似数组的对象?最常见的就是调用getElementsByTagName方法得到的结果,它就是一个类似数组的结果,getElementsByTagName方法一定不陌生吧,我们来看一下:

let ele = document.getElementsByTagName('a');ele instanceof Array;  //结果:false,不是数组ele instanceof Object; //结果:true,是对象

看上面的代码,我们调用getElementsByTagName方法,得到结果存到变量ele中,然后对其进行类型判断,发现变量ele并不是一个数组,而是一个对象Array,一个类似数组的对象Object,接下来我们用Array.from( )对其进行处理,并再一次进行类型判断。

Array.from(ele) instanceof Array;//结果:true,是数组

这个时候我们运行的结果是:true,也就是经过Array.from函数处理返回的结果,已经变成了一个真正的数组。
Array.from函数其中一个用处就是将字符串转换成数组。看下面的案例:

let str = 'hello';Array.from(str);//结果:["h", "e", "l", "l", "o"]

字符串“hello”被转换后的返回的结果已经变成了一个数组:[“h”, “e”, “l”, “l”,”o”]。
除了上述的两个静态方法外,还新增了一些实例方法。

find( )函数

函数作用:找出数组中符合条件的第一个元素。

let arr = [1,2,3,4,5,6];arr.find(function(value){    return value > 2;});//结果:value=3

看上面的代码,find()函数的参数是一个匿名函数,数组的每个元素都会进入匿名函数执行,直到结果为true,find函数就会返回value的值:3。倘若所有元素都不符合匿名函数的条件,find( )函数就会返回undefind。看下面的代码案例:

let arr = [1,2,3,4,5,6];arr.find(function(value){    return value > 7;});//结果:undefined

上面的案例中,数组中没有存在大于7的元素,所以find函数就会返回:undefined。

findIndex( )函数

函数作用:返回符合条件的第一个数组成员的位置。

let arr = [7,8,9,10]; arr.findIndex(function(value){     return value > 8; });//结果:2

上面的代码结果是:2,因为数组元素中大于8的元素是9,而元素9的位置正式2,(数组元素是从0算起)。倘若所有元素都不符合匿名函数的条件,findIndex( )函数就会返回-1。

fill( )函数

函数作用:用指定的值,填充到数组。

let arr = [1,2,3];arr.fill(4);//结果:[4,4,4]

经过fill( )函数处理后的数组arr已经变成了[4,4,4];正如函数名fill(填充)一样。所有元素都被填充为数字4了。如果我想只填充部分元素可不可以呢?可以的,fill( )函数提供了一些参数,用于指定填充的起始位置和结束位置。
还是上面的案例,我们稍做调整,再演示一下:

let arr = [1,2,3];arr.fill(4,1,3);//结果:[1,4,4]

上面的代码中第2个参数和第3个参数的意思是:从位置1的元素开始填充数字4,截止到位置3之前,所以是位置1和位置2的元素被数字4填充了,得到的结果:[1,4,4]。

entries( )函数

函数作用:对数组的键值对进行遍历,返回一个遍历器,可以用for..of对其进行遍历。
遍历器和for..of也是ES6的新增特性,这里先进行一下简单地认知。
回到我们的entries( )函数,看个案例:.

for(let [i,v] of ['a', 'b'].entries()){    console.log(i,v);}//0 "a"//1 "b"

上面的代码中,我们将entries( )函数返回的一个遍历器,用for…of进行遍历,并打印出结果,能得到数组的键值:0和1,以及对应的数组元素:‘a‘和’b‘。

如果只想遍历数组的索引键的话,可以使用另一个实例方法。

keys( )函数

函数作用:对数组的索引键进行遍历,返回一个遍历器。

for(let index of ['a', 'b'].keys()){    console.log(index);}//0//1

正如上面的运行结果一样,我们打印出了数组的索引键:0和1。
如果我们想只对数组的元素进行遍历,我们可以使用两一个实例方法。

values( )函数

作用:对数组的元素进行遍历,返回一个遍历器。

for(let value of ['a', 'b'].values()){    console.log(value);}//a//b

上面的代码运行结果也是我们预料之中的,最终打印出了数组的元素:a和b。
除了新增函数以外,ES6还为数组带来了一个新的概念:数组推导。
数组推导
数组推导:用简洁的写法,直接通过现有的数组生成新数组。
举个例子:加入我们有一个数组,我在这个数组的基础上,每个元素乘以2,得到一个新数组。
我们看看传统的实现方法:

var arr1 = [1,2,3,4];var arr2 = [];for(let i=0;i<arr1.length;i++){    //每个元素乘以2后,push到数组arr2    arr2.push(arr1[i]*2);}console.log(arr2);//结果:[2,4,6,8]

统的方式,除了以上的方式,我们还可以用forEach方法实现。但我们现在介绍的主要是利用ES6提供的新写法:数组推导。

var arr1 = [1, 2, 3, 4];var arr2 = [for(i of arr1) i * 2];console.log(arr2);//结果: [ 2, 4, 6, 8 ]

我们同样可以得到数组arr2,它的值和上一段代码的一样。并且代码量大大地减少了。这就是数组推导给我们带来的便利。
在数组推导中,for..of后面还可以加上if语句,我们看来看看代码案例:

var array1 = [1, 2, 3, 4];var array2 = [for(i of array1)  if(i>3) i];console.log(array2);//结果: [4]

在上面代码中,我们不再是对数组的元素乘以2,而是用if做了个判断:数组的元素要大于3。所以运行的结果是:[ 4 ]。

总结:

ES6为数组带来了很多很实用的方法:Array.of( )、Array.from( )、find( )、findIndex( )、fill( )、entries( )、values(),此外还有一个更简洁的语法:数组推导,能让我们更方便地生成一个新数组。

0 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 14个月宝宝流鼻涕怎么办 小孩一直流黄鼻涕怎么办 咳嗽有痰 浓鼻涕怎么办 儿童鼻窦炎总反复流脓鼻涕怎么办? 宝宝感冒咳嗽流黄鼻涕怎么办 哺乳期感冒流清鼻涕怎么办 哺乳期打喷嚏流清鼻涕怎么办 哺乳期妈妈感冒流清鼻涕怎么办 哺乳期严重流清鼻涕怎么办 小孩每天都是脓鼻涕怎么办 夏天小孩咳嗽流黄脓鼻涕怎么办? 受凉了流清鼻涕怎么办 宝宝50多天鼻塞怎么办 50多天孩子咳嗽怎么办 2岁宝宝伤风鼻塞怎么办 2个月伤风鼻塞怎么办 3个月宝宝鼻塞怎么办 感冒治好后咳嗽一直不好怎么办 天气太热感冒了怎么办 3个月的婴儿鼻塞怎么办 四个月宝宝感冒鼻塞严重怎么办 4个月小孩鼻塞怎么办 4个多月的宝宝流鼻涕怎么办 4个月大的宝宝流鼻涕怎么办 两岁宝宝着凉了怎么办 7岁儿童晚上鼻塞怎么办 儿童感冒鼻塞怎么办速效办法 7岁儿童感冒鼻塞怎么办 七个月婴儿感冒流鼻涕怎么办 婴儿感冒流鼻涕怎么办速效办法 三个月婴儿感冒咳嗽流鼻涕怎么办 五个月婴儿感冒咳嗽流鼻涕怎么办 两个多月的宝宝鼻塞怎么办 3个月宝宝感冒鼻塞怎么办 2个月宝宝感冒鼻塞怎么办 5个月宝宝鼻塞怎么办 6个月宝宝鼻塞怎么办 3个月婴儿感冒咳嗽怎么办 感冒打喷嚏打不出来怎么办 4岁宝宝体温37.5怎么办 8个月的宝宝鼻塞怎么办