ES6 - 入门教程

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

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

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

Let声明

JavaScript let用于声明变量。以前，变量是使用var关键字声明的。

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

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

// 使用 let 声明的变量
let name = 'Sara';
{
   //只能在里面访问
    let name = 'Peter';

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

Const常量

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

// 用 const 声明的名称不能更改
const name = 'Sara';

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

箭头函数

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

// 函数表达式
let x = function(x, y) {
   return x * y;
}

可以写成

// 使用箭头函数的函数表达式
let x = (x, y) => x * y;

要了解有关箭头函数的更多信息，请访问 JavaScript 箭头函数.

Class类

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

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

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

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

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

const person1 = new Person('John');

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

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

默认参数值

在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函数默认参数。

模板文字

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

const first_name = "Jack";
const last_name = "Sparrow";

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

可以通过以下方式使用模板文字来实现:

链接：https://www.learnfk.comhttps://www.learnfk.com/es6/ES6.html

来源：LearnFk无涯教程网

const first_name = "Jack";
const last_name = "Sparrow";

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

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

解构语法

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

// 在你做这样的事情之前
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

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

Import和Export

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

在contact.js文件中，您可以export contact()函数:

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

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

import contact from './contact.js';

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

Promise

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

// 返回一个Promise
let countValue = new Promise(function (resolve, reject) {
   reject('Promise rejected'); 
});

// 当 promise 成功解决时执行
countValue.then(
    function successValue(result) {
        console.log(result);
    },
 )

要了解有关promises的更多信息，请访问 JavaScript promise.

Rest参数

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

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 parameter。

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

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

要了解有关spread操作符的更多信息，请访问 JavaScript Spread 操作符。