V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
wilddog
V2EX  ›  JavaScript

ECMAScript 6( ES6)有什么新东西(三)

  •  1
     
  •   wilddog · 2015-11-07 18:07:49 +08:00 · 2769 次点击
    这是一个创建于 3311 天前的主题,其中的信息可能已经有所发展或是发生改变。

    QQ 截图 20151103202108.png

    作者: Lars Kappert
    原文: http://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/
    审校:陈万幸
    野狗官网: https://www.wilddog.com/
    野狗官博: https://blog.wilddog.com

    MATH

    Math 对象中采用了一些新的方法。

    1.sign 把一个数字符号返回为 1 ,
    2.-1 或 0 。 trunc 返回参数的整数部分。
    3.cbrt 返回一个数的立方根。

    Math.sign(5); // 1
    Math.sign(-9); // -1
    
    Math.trunc(5.9); // 5
    Math.trunc(5.123); // 5
    
    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]
    
    // ES5 equivalent:
    let values = [1, 2, 4];
    // Iterate, push, sweat, repeat...
    // Iterate, push, sweat, repeat...
    

    Run this code

    展开操作句法在用于调用函数与参数时功能也很强大:

    let values = [1, 2, 4];
    
    doSomething(...values);
    
    function doSomething(x, y, z) {
       // x = 1, y = 2, z = 4
    }
    
    // ES5 equivalent:
    doSomething.apply(null, values);
    

    Run this code

    正如你所看到的,这也将我们从平常使用的 fn.apply ()应变方法中拯救出来。这个句法是非常灵活的,因为展开操作符可以在参数列表中任意使用。这就意味着,下面的调用会产生同样的结果:

    let values = [2, 4];
    doSomething(1, ...values);
    

    Run this code

    我们一直将展开操作符应用于数组和参数中。事实上,它可以被应用于所有的可迭代对象中,比如 NodeList:

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

    Run this code

    现在 allTheThings 是一个包括 form 节点以及它的 input 还有 select 子节点的平面阵列。

    解构

    解构为从目标或数组中提取数据提供了便利。对于初学者来说,这里可以用数组给出一个很好的例子:

    let [x, y] = [1, 2]; // x = 1, y = 2
    
    // ES5 equivalent:
    var arr = [1, 2];
    var x = arr[0];
    var y = arr[1];
    

    有了这个句法,可以给多个变量一次性分配一个值。还有一个很好的附加效果,你可以很容易的交换变量值:

    let x = 1,
        y = 2;
    
    
    [x, y] = [y, x]; // x = 2, y = 1
    

    Run this code

    解构也和目标兼容,要确保有匹配按键。

    let obj = {x: 1, y: 2};
    let {x, y} = obj; // x = 1, y = 2
    

    Run this code

    你也可以用这个方法来改变变量的名称:

    let obj = {x: 1, y: 2};
    let {x: a, y: b} = obj; // a = 1, b = 2
    

    还有一个有趣的模式是模拟多个返回值:

    function doSomething() {
       return [1, 2]
    }
    
    let [x, y] = doSomething(); // x = 1, y = 2
    

    Run this code

    解构也可以用来将默认值指定到参数目标中。通过一个对象字面值,你也可以模拟命名参数。

    function doSomething({y = 1, z = 0}) {
       console.log(y, z);
    }
    doSomething({y: 2});
    

    此文为译文,如有问题请加 QQ 群 105454604 联系群主

    moooookey
        1
    moooookey  
       2015-11-08 18:48:19 +08:00
    H6 要到来的节奏吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1401 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 17:36 · PVG 01:36 · LAX 09:36 · JFK 12:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.