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

2015-11-07 18:07:49 +08:00
 wilddog

作者: 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 联系群主

2667 次点击
所在节点    JavaScript
1 条回复
moooookey
2015-11-08 18:48:19 +08:00
H6 要到来的节奏吗

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/234440

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX