ECMAScript 6（ES6）有什么新东西

Posted 2020-07-08 Shoestrong

你可能已经听说过ECMAScript 6，javascript的下一个版本，它有一些非常棒的新功能。这些功能略微复杂，在简单的脚本和复杂的应用中都可以使用。在这篇文章中，我们将挑选一些ES6的功能进行讨论，你可以在日常JavaScript编码中使用它们。

需要注意的是，当前的各种浏览器对ES6的这些新功能的支持各不相同。

下面的很多代码样本下都带有“run this code”的链接，可以看到这些代码并直接使用它。

变量

LET

你习惯用 var 来声明变量，现在你可以使用 let 来做的更好。唯一细微的差别在于作用域。

if(true) {
 let x = 1;
}
 console.log(x); // undefined

这样可以使代码更简洁，从而减少变量环绕。我们用这个经典的数组迭代：

for(let i = 0, l = list.length; i < l; i++) {
   // do something with list[i]
}

console.log(i); // undefined

通常1在使用的时候，例如，J 变量为在同一作用域内的另一迭代。但是对于 LET 变量，你可以放心的再一次声明 I 变量，因为他只能在自己限定的范围内定义和使用。

CONST

还有另外一种方式来声明块级作用域的变量： const ，使用const 变量赋值时，是一个只读引用。你必须直接声明一个变量。如果你改变变量，或者你没有立即赋值，就会报错：

const MY_CONSTANT = 1;
MY_CONSTANT = 2 // Error
const SOME_CONST; // Error

需要注意的是，你仍然可以更改对象属性或者数组成员：

const MY_OBJECT = {some: 1};
MY_OBJECT.some = ‘body‘; // Cool

箭头函数

箭头函数对于JS来说，是一个伟大的功能，它可以使代码更简短。我们在比较早的时候将箭头函数引入，这样就可以在后面使用它了。下面的代码片段展示了箭头函数，以及在ES5中的相同功能：

let books = [{title: ‘X‘, price: 10}, {title: ‘Y‘, price: 15}];
let titles = books.map( item => item.title );
// ES5 equivalent:var titles = books.map(function(item) {
  return item.title;
});

使用箭头函数不需要function关键字，只有0个或多个参数、“=>”和函数表达式。

return是默认就有的。而且，没有参数或者多于一个参数时，你必须使用括号。

// No argumentsbooks.map( () => 1 ); // [1, 1]
// Multiple arguments[1,2].map( (n, index) => n * index ); // [0, 2]

如果你需要复杂的逻辑，把函数表达式放进块（{ … }）中：

let result = [1, 2, 3, 4, 5].map( n => {
n = n % 3;
return n;
});

箭头函数不仅可以减少代码量，与普通函数也有不同。箭头函数会从周围的环境中继承this和arguments。这意味着你可以摆脱像var that = this一样丑陋的语句，不需要把函数绑定到正确的上下文中。下面是一个例子：

let book = {
 title: ‘X‘,
 sellers: [‘A‘, ‘B‘],
 printSellers() {
   this.sellers.forEach(seller => console.log(seller + ‘ sells ‘ + this.title));
   }}
// ES5 equivalent:var book = {
title: ‘X‘,
sellers: [‘A‘, ‘B‘],
printSellers: function() {
var that = this;
this.sellers.forEach(function(seller) {
console.log(seller + ‘ sells ‘ + that.title)
    })
  }
}

字符串

方法

String原型已经有几个简单的方法，其中的大多数是借助于indexOf()方法来实现:

‘my string‘.startsWith(‘my‘); //true
‘my string‘.endsWith(‘my‘); // false
‘my string‘.includes(‘str‘); // true

现在添加了一个创建重复字符串的简单方法：

‘my ‘.repeat(3); // ‘my my my ‘

模板文本

模版文本提供一个简单方法来创建字符串和插入字符串。你可能对它的语法已经非常熟悉，使用 $ 和 花括号: ${..}。模版文本是由花括号括起来的，下面有一个示例：

let name = ‘John‘,
   apples = 5,
   pears = 7,
   bananas = function() { return 3;}

console.log(`This is ${name}.`);

console.log(`He carries ${apples} apples, ${pears} pears, and ${bananas()} bananas.`);
// ES5 equivalent:
console.log(‘He carries ‘ + apples + ‘ apples, ‘ + pears + ‘ pears, and ‘ + bananas() +‘ bananas.‘);

上面的示例相比ES5，仅仅是方便了字符串连接。模版文本也适用于多行字符串。空白文本也是字符串的一部分：

let x = `1...
2...
3 lines long!`; // Yay
// ES5 equivalents:var x = "1...\n" + 
"2...\n" +
"3 lines long!";

var x = "1...\n2...\n3 lines long!";

数组

Array对象现在有一些新的静态类方法，以及Array原型的新方法。

Array.from，将一个类数组对象或可迭代对象转换成真实的数组。示例：

• arguments中传入一个函数；
• getElementsByTagName()返回节点列表；
• 新的Map和Set。

let itemElements = document.querySelectorAll(‘.items‘);
let items = Array.from(itemElements);
items.forEach(function(element) {
    console.log(element.nodeType)
 });

// A workaround often used in ES5:
let items = Array.prototype.slice.call(itemElements);

在上面的例子中可以看到，items 数组有foreach方法，但是itemelements是没有的。

Array.from有一个有趣的特点：第二个参数是可选参数mapfunction。这样就可以在调用时创建一个映射数组：

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

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]; // Array literal

最后比较重要的一点，Array原型也增加了一些方法。我相信find方法将会受到大多数JavaScript开发者的欢迎。

• find 返回值是在回调函数中第一个返回true的元素.
• findIndex 返回值是在回调函数中第一个返回true的元素的索引.
• fill 根据所给参数来更改数组元素的值.

[5, 1, 10, 8].find(n => n === 10) // 10

[5, 1, 10, 8].findIndex(n => n === 10) // 2

[0, 0, 0].fill(7) // [7, 7, 7]
[0, 0, 0, 0, 0].fill(7, 1, 3) // [0, 7, 7, 7, 0]

MATH

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

• sign把一个数字符号返回为1，-1或0。
• trunc 返回参数的整数部分。
• 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...

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

let values = [1, 2, 4];

doSomething(...values);

function doSomething(x, y, z) {
   // x = 1, y = 2, z = 4
}

// ES5 equivalent:
doSomething.apply(null, values);

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

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

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

let form = document.querySelector(‘#my-form‘),
   inputs = form.querySelectorAll(‘input‘),
   selects = form.querySelectorAll(‘select‘);

let allTheThings = [form, ...inputs, ...selects];

现在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

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

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

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

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

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

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

　　

此文摘抄于http://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/