6个小而美的es6新特性

2022-05-21 05:06:15

译者：动静若参商

译文：http://www.zcfy.cc/article/1795

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

JavaScript社区中的每个人都喜欢新API、新语法和新特性——可以更优雅，更智能，更有效的完成重要任务。ES6带来了很多好东西，并且在过去的一年里,浏览器厂商们全力以赴的升级浏览器来使它们可用。尽管ES6中有一些大的更新，但是一些小升级也给了我巨大的惊喜。下面这些就是我最喜欢的六个JavaScript新特性。

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. 箭头函数

不用了解ES6带来的改变，你也早就知道箭头函数了——它已经是许多话题的中心，给JavaScript程序员造成了一些困扰（至少在开始的时候是这样的）。我可以写出好几篇博客来解释箭头函数的方方面面，但是我最想告诉大家的是，箭头函数是如何压缩简单函数的代码量的：

// 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. 模板字符串

在JavaScript中，我们用连接符或者在一行字符的末尾增加来创建多行字符串，这两种方法都难以维护。许多开发者和框架都开始滥用标签来封装多行字符串模板，其它的则通过DOM和 outerHTML来获取元素的HTML作为一个字符串。

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

当然，除了多行字符串，模板字符串还有其它的能力，比如说简单或者高级的插值。不过，仅仅是优雅的写多行字符串这件事情，已经让我十分欣慰了。

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中的沧海一粟，却是我们会不假思索的、频繁使用的特性。这些微小的新特性往往得不到人们的关注，却是代码中的核心部分。

码农公寓