六个小巧但很棒的ES6功能

JavaScript社区中的每个人都喜欢新的API，语法更新和功能-它们提供了更好，更智能，更有效的方式来完成重要任务。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开发人员大量讨论和混淆的源泉（至少在最初是这样）。虽然我可以写许多博客文章来解释arrow函数的每个方面，但我想指出arrow函数如何为简单函数的压缩代码提供一种方法：

// 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.查找/查找索引

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];

5.模板文字

JavaScript中的多行字符串最初是通过串联或以 字符结尾的方式创建的，而 这两种方法都很难维护。许多开发人员甚至某些框架开始滥用<script> 标签来封装多行模板，其他开发人员实际上是使用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为开发人员提供的功能中的一小部分，但是它们是我们经常使用的功能，不会考虑任何东西。这些微小的添加通常不会引起注意，但却成为我们编码的核心。

我有什么遗漏吗？让我知道您喜欢JavaScript的哪些小附加功能！