ES6之数组扩展

作者: ferrint | 来源:发表于2017-03-13 13:19 被阅读86次

关键词:数组

array.form

我们知道document.getElementsByTagName获取的是一个集合,它有有长度,能遍历,但它不是纯粹的数组:

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
    var divs = document.getElementsByTagName('div');
    var div = [].slice.call(divs);
    console.dir(div);  //Array
    console.dir(divs); //HtmlCollection 

ES6提供了array.form方法把集合转为数组

    var eles = Array(divs); 
    console.log(eles);
    var eles = Array.from(divs);
    console.log(eles);   // [div, div, div, div, div, div]

array from不仅可以转集合,还可以转换字符串

    var str = "sdsdss";
    console.log(Array.from(str));   // ["s", "d", "s", "d", "s", "s"]
array.of

我们用new Array建立数组时候,如果只输入一个数据,数组会把它默认为长度

    var arr = new Array(5); 
    console.log(arr);   // [] length:5
    var arr = new Array(5,6,7);  // [5, 6, 7]
    console.log(arr);

这个时候用array.of就可以解决

  var arr = Array.of(5);
    console.log(arr);  //[5]
find()函数
    var arg = [1,2,3,4,5]
    var n = arg.find(function(value,index){
        return value > 3;  
    });
    console.log(n);      //4 
    var nn = arg.findIndex(function(value,index){
        return value > 3;  // 3
    });
    console.log(nn);    

如果数组是字符串会返回什么?

       var arg = ["小明","小强","小李","小王","小张"];
    var n = arg.find(function(value,index){
        return value > 3;  
    });
    console.log(n);   //undenfined
    var nn = arg.findIndex(function(value,index){
        return value > 3;  // 3
    });
    console.log(nn);     // -1
fill()函数

替换数组中对应区间的值
语法:fill ( range,start,end )

var rr = [8,8,8,8,8,8];
  rr.fill(6,2,5);  // [8, 8, 6, 6, 6 ,8]
  console.log(rr);
for...of

感觉就是个语法糖

  var arr = ["22","33","44","55"];
  for(var [key,value] of arr.entries()){
    console.log(key,value);
  }
  for(var key of arr.keys()){
    console.log(key);
  }
  for(var value of arr){
    console.log(value);
  }
// 返回结果
0 "22"
1 "33"
2 "44"
3 "55"
0
1
2
3
22
33
44
55

相关文章

  • 2018-03-26

    拥抱 ES6 之数组扩展 https://segmentfault.com/a/1190000003857670?...

  • es6之扩展运算符 三个点(...)

    es6之扩展运算符 三个点(...)对象的扩展运算符数组的扩展运算符总结es6之扩展运算符 三个点(…)对象的扩展...

  • 2018-04-21

    ES6数组的扩展整理

  • 【基础知识】扩展运算符...

    变量解构使用案例 数组扩展运算符 重点:对象也可以使用...哦ES6之扩展运算符-对象

  • ES6之数组的扩展

    在进入es6之数组的扩展这篇学习前,先了解下数组的基础内容,这里大概总结下,以便自己今后复习: 数组的创建方式: ...

  • 数组合并及数组去重 对象数组去重

    1.数组合并concat方法 es6扩展符... 数组循环 2.数组去重高阶函数reduce: es6 filte...

  • ES6之扩展运算符与应用(对象篇)

    对象的扩展运算符 《ES6之扩展运算符与应用(数组篇)》一文中,已经介绍过了扩展运算符(...). ES2017将...

  • ES6文集的目录

    基础 变量的解构赋值扩展运算符箭头函数export与import 数据类型 引用数据类型 ES6的数组数组之Arr...

  • ES6之数组扩展

    (1)fill( ) 用给定参数填充数组如果传入的对象,对某一项对象属性的修改会反映到所有,因为所有数组项都是用的...

  • ES6之数组扩展

    关键词:数组 array.form 我们知道document.getElementsByTagName获取的是一个...

网友评论

    本文标题:ES6之数组扩展

    本文链接:https://www.haomeiwen.com/subject/yumfnttx.html