您需要使用的4种现代JavaScript（ES6 +）功能

在过去的几年中，JavaScript取得了长足的进步。 无论您是JavaScript的新手还是有一定经验的人，并且想快速掌握现代JavaScript中最常用的功能，本文均适合您。

在本文中，我将与您分享我每天使用的功能。 这些功能包括：

• 模板文字
• let和const
• 箭头功能
• 解构

这不是ECMAScript 2015（ES6）以来所有新功能的完整列表。 但是这些是您80％的时间使用的功能的20％。 另外，本文正在进行中。 我将在此列表中添加更多功能。 现在，我想今天发布！

所有现代浏览器都原生支持所有这些新功能。 如果您想尝试以下任何代码段，只需打开Chrome开发者工具并输入代码即可。

所以，让我们开始吧！

模板文字

在ES6之前，我们必须处理以下丑陋的字符串连接：

var name = 'Mosh' ; 
var message = 'Hi ' + name + ',' ;

现在，使用模板文字（以前称为模板字符串），我们可以定义一个带占位符的字符串，并消除所有这些串联：

var name = 'Mosh' ; 
var message = `Hi ${name} ,` ;

请注意，我在这里使用反引号字符。 听起来很有趣，但直到Angular 2发行之前，没人知道反引号！ 那是键盘上数字1之前的字符。

要在模板文字中添加占位符，我们使用$ {expression}语法。 您可以使用任何JavaScript表达式替换“表达式”。 在这里，我们在此处添加name变量。 您还可以调用函数或传递任何产生值的JavaScript表达式。

使用模板文字的另一个好处是它们可以扩展多行。 在编写电子邮件时，它们特别有用：

var message = `
Hi ${name} ,
Thank you for joining my mailing list. 
Happy coding,
Mosh
` ;

let和const

在ES6之前，我们使用var关键字定义变量。 使用var关键字定义的变量的范围是整个封闭函数。 这是一个例子：

function doSomething ( )  {
   for ( var x = 0 ; x < 5 ; x++) { 
      // Technically, x should only be scoped to this block because this is 
      // where we have defined x. 
   }
   // But it turns out that x is available here as well! 
   console .log(x); // 5 
}

如果不是所有其他编程语言，那不是大多数情况下的表现！ 块中定义的变量应仅作用于该块。 在此示例中，在for块之外不应访问x 。

var关键字的另一个问题是，如果在函数外部的顶级使用它，它将在全局对象上创建一个属性：

var x = 1 ; 
console .log( window .x); // 1

ES6引入了两个用于解决这些问题的新关键字： let和const 。 这两个关键字都定义了范围为包含“块”而不是“功能”的变量：

function doSomething ( )  {
   for ( let x = 0 ; x < 5 ; x++) { 
      // With the "let" keyword, now x is only accessible in this block.
   }
   // x is out of the scope here
   console .log(x); // x is not defined  
}

使用const我们可以定义一个常量。 因此，我们以后无法重新分配它：

const x = 1 ; 
x = 2 ; // throws "Assignment to constant variable."

此外，与var关键字不同，如果在顶层使用它们，则let和const不会在全局对象上创建属性：

let x = 1 ; 
console .log( window .x); // undefined

因此，这是您应该带走的东西：

放弃var关键字。 仅使用let和const 。

最好使用const来let 。 仅在需要重新分配标识符时才使用let ； 否则，请使用const防止意外重新分配常量。

箭头功能

我最喜欢的ES6功能！ 受到C＃中lambda表达式的启发，箭头函数为您提供了简洁明了的语法来编写函数表达式。 这是ES5中的函数表达式：

const square = function ( number )  { 
   return number * number; 
}

使用arrow函数，我们摆脱了function关键字，并在参数和函数主体之间放置了一个粗箭头=> ：

const square = ( number ) => { 
   return number * number; 
}

如果我们的函数是单行代码并返回一个值，则可以删除return关键字以及花括号：

const square = ( number ) => number * number;

是不是比以前的语法更简洁，更简洁？

但是，等等，我们可以使它更短：如果我们的arrow函数仅包含一个参数，我们甚至可以删除括号：

const square = number => number * number;

如果我们的arrow函数没有任何参数怎么办？ 我们需要使用一对括号：

const sayHello = () => { console .log( 'hello' ); };

当您需要将回调函数作为参数传递时，箭头函数特别有用：

// ES5
var activeJobs = jobs.filter( function ( job )  { 
    return job.isActive; 
});
// ES6
const activeJobs = jobs.filter( job => job.isActive);

箭头功能与普通功能不同，请勿重新绑定this 。 这种模式对您来说看起来很熟悉吗？

// ES5
function onSubmit ( )  { 
    // Keep a reference to "this" so we can use it in the inner function below. 
    var that = this ; 
    orderService.store(order, function ( result )  { 
       // In JavaScript, ever function defines its own "this" value. So, "this" in this inner function 
       // here is different from "this" in the onSubmit() function. That's why we had to keep a 
       // reference to "this" and store it in "that". Now, we can use "that": 
       that.result = result; 
    });
}

箭头功能与普通功能不同，请勿重新绑定this 。 他们使用封闭执行上下文的this值。 因此，如果我们将上述内部函数替换为箭头函数，则无需保留this的引用   不再。

// ES6
function onSubmit ( )  { 
    orderService.store(order, result => { 
       // Since we're using an arrow function here, "this" references the "this" value of the containing function
       // (onSubmit). Arrow functions don't re-define "this". 
       this .result = result; 
    });
}

解构

解构是一个表达式，它使我们可以从对象中提取属性或从数组中提取项目。 假设我们有一个像这样的地址对象：

const address = { 
   street : '123 Flinders st' ,
   city : 'Melbourne' ,
   state : 'Victoria'
};

现在，在其他地方，我们需要访问这些属性并将它们的值存储在一系列变量中：

const street = address.street;
const city = address.city; 
const state = address.state;

我们反复有这样的重复代码：“地址”。 重复3次。 对象解构为我们提供了一种简洁的语法，以提取对象中多个属性的值：

const { street, city, state } = address;

而已！ 此代码与上面的代码段完全等效。 我们使用左侧的花括号来破坏地址对象。 在花括号内，我们定义了3个变量： street ， city和state 。 它们的值将从地址对象中的相应属性中提取。

注意，我们不必列出地址对象中的所有属性。 也许我们只对street属性感兴趣：

const { street } = address;

当处理嵌套对象时，对象分解特别有用：

const person = { 
   name : 'Mosh' , 
   address : {
      billing : { 
         street : '123 Flinders st' ,
         city : 'Melbourne' ,
         state : 'Victoria'
      }
   }
};

如果不进行结构分解，我们将不得不编写以下丑陋且重复的代码：

const street = person.address.billing.street;
const city = person.address.billing.city;
const state = person.address.billing.state;
// So annoying!

现在，我们可以使用一行代码来达到相同的结果：

const { street, city, state } = person.address.billing;

我们也可以解构数组，但是我们使用方括号（[]）代替花括号（{}）。 假设我们有一个数组，我们想要增加第一项和第二项并将它们存储在两个不同的变量中：

// ES5
const values = [ 'John' , 'Smith' ];
const first = values[ 0 ];
const last = values[ 1 ]; 
// ugly!

通过解构，我们可以像上面这样重写上面的代码：

// ES6
const values = [ 'John' , 'Smith' ];
const [first, last] = values;

如果您想深入学习JavaScript，我强烈推荐Mosh的JavaScript课程。 所有课程的链接如下：

• 初学者的JavaScript基础
• JavaScript中的面向对象编程
• 完整的Node JS课程

From: https://hackernoon.com/4-modern-javascript-es6-features-you-should-be-using-now-tp1h320q