zoukankan      html  css  js  c++  java
  • ES6新特性: 不定参数与默认值参数,解构赋值,箭头函数

    4.不定参数与默认值参数:

    4.1不定参数:
    旧写法:

    function testAll(a){
    for (var i = 1; i < arguments.length; i++) {
    var b = arguments[i];
    if (a.indexOf(b) === -1) {
    return false;
    }
    }
    
    }


    arguments对象,它是一个类数组对象,其中包含了传递给函数的所有参数。
    假如 testAll("a", "b", "c") 可以通过arguments对象 "b", "c";


    不定参数写法(...needles):

    function containsAll(haystack, ...needles) {
    for (var needle of needles) {
    if (haystack.indexOf(needle) === -1) {
    return false;
    }
    }
    return true;
    }

    在所有函数参数中,只有最后一个才可以被标记为不定参数。函数被调用时,不定参数前的所有参数都正常填充,任何“额外的
    ”参数都被放进一个数组中并赋值给不定参数。如果没有额外的参数,不定参数就是一个空数组,它永远不会是undefined。

    4.2默认值参数:

    function animalSentenceFancy(animals2="tigers",
    animals3=(animals2 == "bears") ? "sealions" : "bears")
    {
    return `Lions and ${animals2} and ${animals3}! Oh my!`;
    }

    默认表达式可以使用该参数之前已经填充好的其它参数值

    5.解构赋值

    解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁,同时还比传统的
    属性访问方法更为清晰。

    传统写法:

    var first = someArray[0];
    var second = someArray[1];
    var third = someArray[2];

    解构赋值:

    var [first, second, third] = someArray;


    5.1对象解析:


    当属性名与变量名一致时,可以通过一种实用的句法简写:

    var { foo, bar } = { foo: "lorem", bar: "ipsum" };
    console.log(foo);
    // "lorem"
    console.log(bar);
    // "ipsum"

    常用:

    var robotA = [{ name: "Bender1", age: 1, isstudent: true, cardno: ["a1", "a2"] }, { name: "Bender2", age: 2, 
    isstudent: false, cardno: ["B1", "B2"] }];
    var [{ name, age, isstudent, cardno }, { name: name2, age: age2 }] = robotA;
    console.log(name);
    console.log(age);
    console.log(isstudent);
    console.log(cardno);
    console.log(name2);
    console.log(age2);



    5.2默认值

    var [missing = true] = [];
    console.log(missing);
    // true


    5.3 Map

    var map = new Map();
    map.set(window, "the global");
    map.set(document, "the document");
    for (var [key, value] of map) {
    console.log(key + " is " + value);
    }
    // "[object Window] is the global"
    // "[object HTMLDocument] is the document"

    只遍历键:

    for (var [key] of map) {
    // ...
    }

    或只遍历值:

    for (var [,value] of map) {
    // ...
    }


    5.4 返回值

    function returnMultipleValues() {
    return {
    foo: 1,
    bar: 2
    };
    }
    var { foo, bar } = returnMultipleValues();
    
     

    6.箭头函数

    箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。
    箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

    6.1 简洁的匿名方法

    <input type="button" value="箭头函数" id="buttonTest"/>
    
    $("#buttonTest").bind("click", e => {
    console.log(e);
    console.log(this);
    console.log($(this));
    console.log("click" + e.toElement.getAttribute("value"));
    $(e).before("<p>hahahaah</p>")
    });


    6.2条件表达式

    const materials = [
    'Hydrogen',
    'Helium',
    'Lithium',
    'Beryllium'
    ];
    
    
    console.log(materials.map(material => material.toString()));
    
    console.log(materials.map(material => material.length));
    
     
  • 相关阅读:
    折半插入排序-ACM题
    xcode 常用快捷键
    折半插入排序-算法
    插入排序
    HTML5 data-* 自定义属性
    vertical-align属性baseline(转)
    CSS 基础点
    解决-word里无论怎么改变字体颜色,字体总是红色的
    css属性前加*号的作用
    php 函数的嵌套
  • 原文地址:https://www.cnblogs.com/j2ee-web-01/p/13361458.html
Copyright © 2011-2022 走看看