六个小而美的 ES6 特性

1. 设置对象变量键值的语法

JavaScript开发者的烦恼之一是不能在对象字面量里设置变量键值——必须要在初始化后对象后增加变量键/值：

// *Very* reduced example
let myKey = 'key3';
let obj = {
key1: 'One',
key2: 'Two'
};
obj[myKey] = 'Three';

ES6给开发者们提供了一个解决方法：

let myKey = 'variableKey';
let obj = {
key1: 'One',
key2: 'Two',
[myKey]: 'Three' /* yay! */
};

加上一层 []，程序员们就可以在一条对象字面量定义语句就做完所有的事情。

2. 箭头函数

箭头函数最大的方便之处是如何压缩简单函数的代码量：

// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11
// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);

不用写 function和 return这两个关键词，有时候甚至不需要写 ()，箭头函数是简单函数非常好的一个快捷写法。

3. find/findIndex

JavaScript提供了 Array.prototype.indexOf 法，用来获取一个元素在数组中的索引，但是 indexOf 法不能计算目标元素的查找条件。有时候你还会想获取满足查找条件的那个元素本身。输入 find和 findIndex吧——这两个方法可以在一个数组搜索出第一个满足条件的值。

let ages = [12, 19, 6, 4];
let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 18); // 1

find和 findIndex允许搜索一个计算后的值，也防止了一些不必要的副作用和循环产生的不确定值

4. 扩展运算符： …

扩展运算符表示一个数组或者一个可迭代的对象可以在一次调用中将它们的内容分割为独立的参数。比如：

// Pass to function that expects separate multiple arguments
// Much like Function.prototype.apply() does
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
// Convert NodeList to Array
let divsArray = [...document.querySelectorAll('div')];
// Convert Arguments to Array
let argsArray = [...arguments];

这个神奇的运算符带来的附加好处是能够把可迭代对象（ NodeList, arguments等等）转化为真正的数组——一直以来我们都用 Array.from 或其它的hack方法。

5. 模板字符串

ES6给我们提供了模板字符串，你可以用它和重音符一起轻松的写多行字符串。

// Multiline String
let myString = `Hello
I'm a new line`; // No error!
// Basic interpolation
let obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3

这个神奇的运算符带来的附加好处是能够把可迭代对象（ NodeList, arguments等等）转化为真正的数组——一直以来我们都用 Array.from 或其它的hack方法。

6. 默认参数值

许多服务端语言可以在函数声明中定义默认参数值，比如python和PHP，现在JavaScript也可以了。

// Basic usage
function greet(name = 'Anon') {
console.log(`Hello ${name}!`);
}
greet(); // Hello Anon!
// You can have a function too!
function greet(name = 'Anon', callback = function(){}) {
console.log(`Hello ${name}!`);
// No more "callback && callback()" (no conditional)
callback();
}
// Only set a default for one parameter
function greet(name, callback = function(){}) {}

如果没有传递无默认值的参数，其它的语言可能会报错，但是JavaScript会将它们设为 undefined。

这六个特性只是ES6中的沧海一粟，却是我们会不假思索的、频繁使用的特性。这些微小的新特性往往得不到人们的关注，却是代码中的核心部分。

原文：https://davidwalsh.name/es6-features