简约而不简单的六个ES6新特性

By David Walsh on October 31, 2016
Translated by Jemair on March 5, 2017

Javascript社区中，每个人都热衷于拥抱JS提供的各种新的API、语法和特性 —— 它们使我们能够更高效，更智能地编写代码。ES6带来了一大波新的好东西，在过去的一年里，浏览器厂商努力工作，将这些语言更新到他们的浏览器中。虽然这次JS提供了很多大的更新，但同时我也对一些小的更新十分感兴趣。以下是我最中意的6个新特性：

1. Object[key]语法

自古以来，JavaScript开发者一大烦恼便是无法在声明一个对象的时候，使用变量设置对象的某个属性名 —— 你必须在声明完了这个对象之后在加上这个键值对：

//举个简单的栗子
let myKey = 'key3';
let obj = {
key1: 'One',
key2: 'Two'
};
obj[myKey] = 'Three';
在这个简单的例子中看起来这种模式仅仅有些不太方便，但是在复杂的环境下，这种写法就会显得十分的混乱和丑陋！不过还好，ES6为我们带来了终结这一团乱麻的方法：

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

只是简单的将变量名包含在[]中就可以简单地解决这一切！

2. 箭头函数

不要怕，要理解箭头函数的用法并不意味着你要掌握ES6的每一个新特性（事实上他们中的许多都令初级开发者感到困扰）。虽然我可以写很多博客文章来解释箭头函数的方方面面，但是我想指出，箭头函数为我们压缩代码量提供了一个非常简单高效的方法：

//将传入的参数变为1.1倍并返回
let calculateTotal = total => total * 1.1;
calculateTotal(10)//11

//取消默认事件 —— 另一个小任务
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);

如你所见，我们并没有用到function或return关键字，有时候你甚至不用使用() —— 箭头函数是实现一些简单函数的伟大方式！

3. find/findIndex

你可以使用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. 展开运算符

展开运算符可以在调用数组或是可迭代对象时，将其拆散撑单独的参数，比如以下例子：

//这个函数接收需要是多个单独的参数
//比如Function.prototype.apply()也是这样的一个函数
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

//也可以便捷地把节点对象转化为数组
let divsArray = [...document.querySelectorAll('div')];

//当然参数数组也是可以的
let argsArray = [...arguments];

使用展开运算符的一个优势在于可以方便地将可迭代对象（比如节点对象和参数对象）转化为真正的数组 —— 从此我们可以告别Array.from或者其它hack的写法。

5. 字符串模板语法

在过去JavaScript中的多行字符串是使用拼接字符串或是在行尾加\字符的形式来实现的，然而不管使用哪种方法都显得难以维护。当然更有甚者使用<script>标签封装多行字符串或是创建DOM节点然后使用outerHTML将HTML元素作为字符串。

通过ES6提供的字符串模板语法，你可以用反引号十分简便地创建多行字符串：

// 多行字符串
let myString = `Hello

I'm a new line`; // No error!

// 基本的插值
let obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3

6. 函数的默认参数

在许多服务器端语言（如python和PHP）中，我们可以在函数声明写入默认参数，现在在JavaScript中我们也可以这么做：

// 基本用法
function greet(name = 'Anon') {
console.log(`Hello ${name}!`);
}
greet(); // Hello Anon!

// 你甚至可以把一个函数作为参数的默认值！
function greet(name = 'Anon', callback = function(){}) {
console.log(`Hello ${name}!`);

// 再也没有if(callback){callback()}这种坑爹判断
callback();
}

// 只为一个元素设置默认参数也是可以哒~
function greet(name, callback = function(){}) {}

对于没有提供默认值的参数，其它语言可能会发出警告，但JavaScript会继续将这些参数值设置为undefined。

我在这里列出的六个功能只是提供给开发人员的一个不用去考虑其它问题而可以直接使用的常用工具列表。这些微小的补充往往得不到我们的注意却有可能成为我们未来撸码的核心。

如果我有什么遗漏，欢迎和我联系，让我知道你对JavaScript中这些细节改变的热爱~

原文链接：Six
Tiny But Awesome ES6 Features