码迷,mamicode.com
首页 > 编程语言 > 详细

ES6数组扩展

时间:2017-08-03 13:59:23      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:结果   基础   元素   字符串转换   简洁   进入   pre   函数   匿名函数   

Array.of()函数

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

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

 是不是很好理解,传进去的数字是:1~5,最后经过Array.of函数处理,得到了一个数组,而数组的内容就是[1,2,3,4,5]。

Array.from( )函数

  函数作用:可以将类似数组的对象或者可遍历的对象转换成真正的数组。

 有哪些是类似数组的对象?最常见的就是调用getElementsByTagName方法得到的结果,它就是一个类似数组的结果,getElementsByTagName方法一定不陌生吧,我们来看一下:

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

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

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

   这个时候我们运行的结果是:true,也就是经过Array.from函数处理返回的结果,已经变成了一个真正的数组。

   Array.from函数其中一个用处就是将字符串转换成数组。看下面的案例:  

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

  字符串“hello”被转换后的返回的结果已经变成了一个数组:["h", "e", "l", "l","o"]。

  除了上述的两个静态方法外,还新增了一些实例方法。

find( )函数

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

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

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

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

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

findIndex( )函数

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

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

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

 fill( )函数

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

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

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

 还是上面的案例,我们稍做调整,再演示一下:

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

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

entries( )函数

 函数作用:对数组的键值对进行遍历,返回一个遍历器,可以用for..of对其进行遍历。

 遍历器和for..of也是ES6的新增特性,目前我们还没有介绍到,我们可以先进行一下简单地认知。

 回到我们的entries( )函数,看个案例:.

1  for(let [i,v] of [‘a‘, ‘b‘].entries())
2     {
3         console.log(i,v);
4     }
5     //0 "a"
6     //1 "b"

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

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

 keys( )函数

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

 

1   for(let index of [‘a‘, ‘b‘].keys())
2     {
3         console.log(index);
4     }
5     //0
6     //1
7     

正如上面的运行结果一样,我们打印出了数组的索引键:0和1。

  如果我们想只对数组的元素进行遍历,我们可以使用两一个实例方法。

 values( )函数

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

1   for(let value of [‘a‘, ‘b‘].values())
2     {
3         console.log(value);
4     }
5     //a
6     //b

上面的代码运行结果也是我们预料之中的,最终打印出了数组的元素:a和b。

 除了新增函数以外,ES6还为数组带来了一个新的概念:数组推导。

 数组推导 

 数组推导:用简洁的写法,直接通过现有的数组生成新数组。

  举个例子:加入我们有一个数组,我在这个数组的基础上,每个元素乘以2,得到一个新数组。

  我们看看传统的实现方法:

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

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

 

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

  我们同样可以得到数组arr2,它的值和上一段代码的一样。并且代码量大大地减少了。这就是数组推导给我们带来的便利。

 在数组推导中,for..of后面还可以加上if语句,我们看来看看代码案例:

 

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

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

 好了,数组的扩展介绍得差不多了,主要是一些新增函数的使用介绍,这些函数都非常便利,为开发者省去了不少代码量。如果存在疑惑,可以留言提问,前端君都会回复。

 本节小结

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

ES6数组扩展

标签:结果   基础   元素   字符串转换   简洁   进入   pre   函数   匿名函数   

原文地址:http://www.cnblogs.com/queenw/p/7278990.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!