JavaScript ES6 - 芒果文档

JavaScript ES6 (也称为ECMAScript 2015或ECMAScript 6 )是2015年推出的JavaScript的较新版本。

ECMAScript是JavaScript编程语言使用的标准。 ECMAScript提供了有关JavaScript编程语言应如何工作的规范。

本教程为您简要概述了ES6的常用功能，以便您可以快速开始使用ES6。

JavaScript `let`

JavaScript let用于声明变量。以前，变量是使用var语句声明的。

要了解有关let和var之间的区别的更多信息，请访问JavaScript let vs var。

使用let声明的变量是块作用域的 。这意味着它们只能在特定的块内访问。例如，

// variable declared using let
let name = 'Sara';
{
    // can be accessed only inside
    let name = 'Peter';

    console.log(name); // Peter
}
console.log(name); // Sara

JavaScript const

const语句用于在JavaScript中声明常量。例如，

// name declared with const cannot be changed
const name = 'Sara';

声明后，您将无法更改const变量的值。

JavaScript箭头函数

在ES6版本中，可以使用箭头函数来创建函数表达式。例如，

这个函数

// function expression
let x = function(x, y) {
   return x * y;
}

可以写成

// function expression using arrow function
let x = (x, y) => x * y;

要了解有关箭头功能的更多信息，请访问JavaScript箭头功能。

JavaScript类

JavaScript类用于创建对象。类类似于构造函数。例如，

class Person {
  constructor(name) {
    this.name = name;
  }
}

关键字class用于创建一个类。这些属性是在构造函数中分配的。

现在您可以创建一个对象。例如，

class Person {
  constructor(name) {
    this.name = name;
  }
}

let person1 = new Person('John');

console.log(person1.name); // John

要了解有关类的更多信息，请访问JavaScript类 。

默认参数值

在ES6版本中，可以在函数参数中传递默认值。例如，

function sum(x, y = 5) {

    // take sum
    // the value of y is 5 if not passed
    console.log(x + y);
}

sum(5); // 10
sum(5, 15); // 20

在上面的示例中，如果不为y传递参数，则默认情况下它将为5 。

要了解有关默认参数的更多信息，请访问JavaScript函数默认参数。

JavaScript模板字面量

模板字面量使在字符串包含变量变得更加容易。例如，在您必须做之前：

let first_name = "Jack";
let last_name = "Sparrow";

console.log('Hello ' + first_name + ' ' + last_name);

可以通过以下方式使用模板字面量来实现：

let first_name = "Jack";
let last_name = "Sparrow";

console.log(`Hello ${first_name} ${last_name}`);

要了解有关模板字面量的更多信息，请访问JavaScript模板字面量。

JavaScript解构

解构语法使更容易将值分配给新变量。例如，

// before you would do something like this
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

使用ES6 Destructuring语法，以上代码可以编写为：

const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

let { name, age, gender } = person;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

要了解有关解构的更多信息，请访问JavaScript Destructuring 。

JavaScript导入和导出

您可以导出函数或程序，然后通过导入将其用于其他程序。这有助于制造可重复使用的组件。例如，如果您有两个名为contact.js和home.js的JavaScript文件。

在contact.js文件中，您可以导出 contact() 函数：

// export
export default function contact(name, age) {
    console.log(`The name is ${name}. And age is ${age}.`);
}

然后，当您想在另一个文件中使用contact() 函数时，只需导入该函数。例如，在home.js文件中

import contact from './contact.js';

contact('Sara', 25);
// The name is Sara. And age is 25

JavaScript的`promise`

promise用于处理异步任务。例如，

// returns a promise
let countValue = new Promise(function (resolve, reject) {
   reject('Promise rejected'); 
});

// executes when promise is resolved successfully
countValue.then(
    function successValue(result) {
        console.log(result); // Promise resolved
    },
 )

要了解有关诺言的更多信息，请访问JavaScript Promises。

JavaScript Rest参数和传播运算符

您可以使用rest 参数将不确定数量的参数表示为数组。例如，

function show(a, b, ...args) {
  console.log(a); // one
  console.log(b); // two
  console.log(args); // ["three", "four", "five", "six"]
}

show('one', 'two', 'three', 'four', 'five', 'six')

您使用...语法传递其余参数。因此，名称为rest参数 。

您可以使用传播语法 ...将项目复制到单个数组中。例如，

let arr1 = ['one', 'two'];
let arr2 = [...arr1, 'three', 'four', 'five'];
console.log(arr2); // ["one", "two", "three", "four", "five"]

rest参数和散布运算符使用相同的语法。但是，散布运算符与数组(可迭代值)一起使用。

要了解有关价差运算符的更多信息，请访问JavaScript Spread Operator 。

在本教程中，您将在示例的帮助下了解JavaScript ES6。

JavaScript let