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));
    
     
  • 相关阅读:
    mouse_event模拟鼠标滚轮
    润乾报表配置技术路线
    建筑 物件 开心背单词 读句子,单词,字母,看图例, 翻译,看动画
    文字过渡动画,曲线过渡动画,,使用这个插件assign shape keys
    运动锻炼 开心背单词 读句子,单词,字母,看图例, 翻译,看动画,学英语,轻松背单词,简单背单词
    blender293 内置插件 精度绘画控件,PDT学习003,pdt tangents 切线
    日常用品 背单词 读句子 看图片 读单词 读字母 翻译, 看动画 学英语
    blender293 内置插件 精度绘画控件,PDT学习 precision drawing tools
    乔布斯 背单词 02 读句子 单词 字母 翻译,看动画 学英语 名言 我菜顾我在,我菜故我在,blender加python
    狐狸 和 乌鸦 英语 朗读句子 背单词
  • 原文地址:https://www.cnblogs.com/j2ee-web-01/p/13361458.html
Copyright © 2011-2022 走看看