为了账号安全,请及时绑定邮箱和手机立即绑定

ES6对数组的拓展(2018-04-17)

标签:
JavaScript

Array.of()函数

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

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

Array.from( )函数

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

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"]

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。

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(let [i,v] of ['a', 'b'].entries())
{
    console.log(i,v);
}
//0 "a"
//1 "b"

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

for...in和for...of的区别:

    1、for … in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后,for … in循环将带来意想不到的意外效果:

var a = ['A', 'B', 'C'];
a.name = 'Hello';

for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}

    for … in循环将把name包括在内,但Array的length属性却不包括在内。

    2、for … of循环则完全修复了这些问题,它只循环集合本身的元素:

var a = ['A', 'B', 'C'];
a.name = 'Hello';for (var x of a) {
    alert(x); // 'A', 'B', 'C'
}

    3、然而,更好的方式是直接使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。以Array为例:

var a = ['A', 'B', 'C'];
a.forEach(function(element, index, array){   
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身   
   alert(element);
});

    注意,forEach()方法是ES5.1标准引入的,你需要测试浏览器是否支持。

keys( )函数

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

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

values( )函数

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

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

数组推导 

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

    举个例子:加入我们有一个数组,我在这个数组的基础上,每个元素乘以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 ofarr1) i* 2];
   console.log(arr2);
   //结果: [ 2, 4, 6, 8 ]

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

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

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


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

转载请注明原文地址哦~
作者:a小磊_
链接:https://www.jianshu.com/p/4debf1922bed


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消