zoukankan      html  css  js  c++  java
  • ES6新特性-------数组、Math和扩展操作符(续)

    三、Array

    Array对象增加了一些新的静态方法,Array原型上也增加了一些新方法。

    1.Array.from 从类数组和可遍历对象中创建Array的实例

      类数组对象包括:函数中的arguments、由document.getElementsByTagName()返回的nodeList对象、新增加的Map和Set数据结构。

    //in ES6中 类数组转换为数组的方法
    
    let itemElements=document.querySelectorAll('.item');
    let items=Array.from(itemElements);
    items.forEach(function(item){
         console.log(item.nodeType);
    });
    
    //in ES5 类数组转换数组的方法
    
    var items=Array.prototype.slice.call(itemElements);
    

      上面的例子中,类数组对象itemElements对象是不具备数组方法forEach()的,但可以通过Array.from()方法转换为Array。

      Array.from()另一个特性是它的第二个可选参数mapFunction,该参数允许你通过一次单独调用创建一个新的映射数组:

    let navElements=document.querySelectorAll("nav li");
    let navTitles=Array.from(navElements,el=>el.textContent);
    

    2.Array.of方法

      该方法表现的很像Array的构造函数,它适合只传一个参数的情况,因此Array.of是new Array()的更优选择,所以,构建数组的方式,现在有三种:

    let x=new Array(3);// [undefined,undefined,undefined]
    let y=Array.of(8);//[8]
    let z=[1,2,3];
    

    3.Array的find,findIndex,fill方法

      1)find返回回调返回true的第一个元素

      2)findIndex返回回调函数返回true的第一个元素的下标

      3)fill用所给参数‘覆盖’数组的元素

    [5,3,4,10,1].find(n=>n===10);//10
    
    [5,3,4,10,1].findIndex(n=>n===10);//2
    
    [5,3,4,10,1].fill(7);//[7,7,7,7,7]
    
    [5,3,4,10,1].fill(7,1,3);//[5,7,7,7,1]
    

      

    四、Math

    Math对象新增了几个新方法:  

    //Math.sign返回数字的符号,结果为1、-1或0
    
         Math.sign(5);//1
         Math.sign(-9)//-1
    
    //Math.trunc 返回无小数位的数字
    
         Math.trunc(5.9);//5
         Math.trunc(6.8908);//6
    
    //Math.cbrt返回数字的立方根
    
         Math.cbrt(64);//4
    

      

     五、扩展操作符

      扩展操作符用于特定地方扩展元素,例如:在一个数组中扩展一个数组的元素。

    let values=[1,2,4];
    let some=[...values,8];//[1,2,4,8]
    let more=[...values,8,...values];//[1,2,4,8,1,2,4]
    

      再如  函数调用中的参数中的应用:

    let values=[1,2,4];
    doSomething(...values);
    
    function doSomething(x,y,z){
       //x=1.y=2,z=4
    }
    
    
    //在ES5中的调用方式
    
    doSomething.apply(null,values);
    

       正如所看到的,该语法使我们免去使用fn.apply()的麻烦,它很灵活,因为扩展操作符可以用在参数列表中的任意位置。

       我们已经看到把扩展操作符应用在数组和参数中,事实上,我们可以把它用在所有可比案例的对象中:

    let form = document.querySelectorAll('#my-form').
       inputs=form.querySelectorAll('input');
       selects=form.qurySelectorAll('select');
    
    let allTheThings=[form,...inputs,...selects];
    

      现在,allTheThings是一个包含<form>节点、<input>子节点和<select>子节点的二维数组。

  • 相关阅读:
    make[1]: *** [/workopenwrt/trunk/staging_dir/target-mipsel_24kec+dsp_uClibc-0.9.33.2/stamp/.tools_install_nnnnn] Error 2 make[1]: Leaving directory `/work/openwrt/trunk' make: *** [world]
    安卓端与开发板通信
    openwrt串口的使用
    .OpenWrt驱动程序Makefile的分析概述 、驱动程序代码参考、以及测试程序代码参考
    openwrt系统之字符设备驱动软件包加载、测试程序加载
    cc2530串口通信流程
    cc2530操作任务系统初始化分析
    总结OpenWrt系统基本操作方法
    Zigbee协议栈OSAL层API函数【转载】
    cc2530启动流程---广播发送数据
  • 原文地址:https://www.cnblogs.com/mingxiastory/p/5723002.html
Copyright © 2011-2022 走看看