ES6 | ES2015 (ES6) 全面学习指南

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

ES6 是一种 JavaScript 编码标准，也称为 ECMASCRIPT2015，于 2015 年发布。它有很多很棒的特性，JavaScript 开发人员必须了解这些特性并在自己的代码中实现它们。

今天，我们将学习 ES6 的几乎所有特性。为了便于理解，我还为每个特性提供了一个示例。

我建议你先学习一个章节并尝试编写代码，然后再学习下一个章节。

那么，开始吧！！！

本文也可在我的GitHub帐户中找到：https://github.com/dipakkr/ES6-Guide

我是 Deepak Kumar，一名全栈 JavaScript 开发工程师、自由职业者，也是一位正在创业的年轻人。我最近创办了一家初创公司FrontBench，旨在帮助学生获得平等的机会、专业的指导和支持。我热爱构建和推广能够真正影响社区的产品。

您可以通过LinkedIn | Instagram | Twitter | Github与我联系。

我们来学习ES6吧。

1. Var、let 和 const

1.1 变量

Var 关键字以前用于在 JavaScript 中声明变量。
用 var 声明的变量可以重新初始化，也可以重新声明。
不建议在var发布后使用let。const

    var a = 10;

    for(var i=0;i<5;i++){
            var a = 20;
            console.log(a); //Returns 20
    }

    console.log(a); // Returns 20

1.2 LET

当你需要在代码的后续部分更改变量的值时，可以使用“let”。
它具有块级作用域。
它可以重新初始化，但不能重新声明。

    let a = 10;

    // re-initialization
    a = 30; // Updating a value to 30.

    //re-declartion
    let a = 20; // Throws Error

    // Block 1
    {
         let c = 10;
         console.log(c); // c=10
    }

    console.log(c); // Throws Error, c not defined.

1.3 常量

Const 用于定义一个常量变量，该变量在整个代码中不能被更改。
它具有块级作用域。
你既不能重新发起，也不能重新声明。

    const a = 10;

    // re-initialization
    a = 30; // Throws Error, CONST variable can't be changed

    //re-declartion
    const a = 20; // Throws Error

    // Block 1
    {
         const c = 10;
         console.log(c); // c=10
    }

    console.log(c); // Throws Error, c not defined.

2. 模板文字

模板字面量是允许嵌入表达式的字符串字面量。您可以使用多行字符串和字符串插值功能。在 ES2015 规范的早期版本中，它们被称为“模板字符串”。

模板字面量本质上是 JavaScript 中字符串的格式化方式。在 ES5 中，格式化字符串是一项繁琐的任务，因为它涉及到非常繁琐的手动格式化语法。

让我们来看一个我们在 ES5 中如何格式化字符串的例子。

    # TEMPLATE STRING (WITHOUT ES6)

    function greet(name){
        const greeting = 'Hello,' + ' ' + name + ' ' + Welcome to JavaScript Course;
        return greeting;
    }

    greet('Deepak');

    // Hello, Deepak Welcome to JavaScript Course.

    # TEMPLATE STRING (WITH ES6)

    function greet(name){
        const greeting = `Hello, ${name} Welcome to JavaScript Course`;
        return greeting;
    }

    greet('Deepak');

    // Hello, Deepak Welcome to JavaScript Course.

现在，您可以看到使用 ES6 新语法编写格式化字符串是多么容易了。

概要

模板字符串用反引号(``)括起来，而不是用单引号或双引号括起来。
模板字面量可以包含占位符。这些占位符用美元符号和花括号 (\${表达式}) 表示。占位符中的表达式和反引号 (``) 之间的文本会被传递给一个函数。

3. 默认参数

默认参数或默认实参是 ES6 中的一项新特性。它允许你在未传递值或未定义值时，为函数参数/实参设置默认值。

使用 ES5 处理默认参数

    function add(a, b){
            return a + b;
    }

    add() // NaN

    // Handling Default Argument without ES6.

    function add(a, b){
        const a = (typeof(a) !== 'undefined') ? a : 5;
        const b = (typeof(b) !== 'undefined') ? b : 10;
      return a+b;
    }

    add() // Returns 15

当没有传递任何参数时，我们可以看到必须通过设置 a 和 b 的默认值来显式处理错误。这看起来并不是处理默认参数的理想方式。

使用 ES6 处理默认参数

    function add(a=5, b=10){
        return a+b;
    }

    add(); // a=5, b=10, sum = 15;

    add(2, 3); // a=2, b=3, sum = 5;

    add(4); // a=4, b=10, sum=14 ;

只有在未传递任何参数时，才会使用 A 和 B 的默认值。

4. 箭头函数

箭头函数是常规函数表达式的一种语法紧凑的替代方案，它没有自己的绑定到逗号this、括号和空格super。

**Using Regular Function Express (ES5)**

    // Example 1
    function add(a, b){
        return a+b;
    }

    add(5, 10);

    // Example 2

    const x = [1, 2, 3, 4, 5];

    const square = x.map(function(x){
        return x*x;
    });

    console.log(sqaure);

使用箭头函数（ES6）

    // Example 1
    const add = (a, b) => {
            return a+b;
    }

    add(5, 10)

    //Example 2

    const x = [1, 2, 3, 4, 5];

    const square = x.map(num => num*num);
    console.log(sqaure);

5. 数组和对象解构

解构是 ES6 中引入的一项新特性，用于从数组中解包值或从对象中解包属性。它有助于提高代码的可读性和性能。

ES5 中的解构

    // Example 1 - Object Destructuring

    var user = {
        name : 'Deepak',
      username : 'dipakkr',
      password : 12345
    }

    const name = user.name; // Deepak
    const username = user.username; // dipakkr
    const password = user.password // 12345

    //Example 2 - Array Destructing

    *c*onst fruits = ["apple", "mango", "banana", "grapes"];

    const fruit1 = fruits[0];
    const fruit2 = fruits[1];
    const fruit3 = fruits[2];

ES6 中的解构

    // Example 1 - Object Destructuring

    var user = {
        name : 'Deepak',
      username : 'dipakkr',
      password : 12345
    }

    const {name, username, password} = user;
    console.log(name);
    console.log(username);
    console.log(password);

    //Example 2 - Array Destructing

    const fruits = ["apple", "mango", "banana", "grapes"];

    const [fruit1, fruit2, fruit3] = fruits;

    console.log(fruit1); // apple
    console.log(fruit2); // mango
    console.log(fruit3); // banana

6. 映射、归约和过滤

Map、Reduce 和 Filter 是 ES6 中引入的数组方法。这三个方法的共同点是，当它们应用于数组时，都会根据给定的参数返回一个新数组。

映射方法

让我们通过一个简单的例子来理解 Map 方法。假设你有一个 users 数组，其中包含多个用户对象。但是，你只需要每个用户的用户名。

你打算怎么做？这里有一种方法。

    const users = [
      { name: 'Deepak', username: 'dipakkr', password: '123456'},
      { name: 'Rohan', username: 'rohan12', password: '198243' },
      { name: 'Sam', username: 'sam124', password: '123876' },
    ];

    var usernames = [];

    users.forEach(function(user) {
      usernames.push(user.username);
    });

    console.log(usernames); // [ 'dipakkr', 'rohan12', 'sam124', 'ro123' ]

现在，让我们用map()这种方法来解决这个问题。

    const users = [
      { name: 'Deepak', username: 'dipakkr', password: '123456'},
      { name: 'Rohan', username: 'rohan12', password: '198243' },
      { name: 'Sam', username: 'sam124', password: '123876' },
    ];

    const usernames = users.map(user => user.username);

    console.log(usernames); // [ 'dipakkr', 'rohan12', 'sam124', 'ro123' ]

过滤方法

过滤方法接受一个函数参数，该函数参数应用于数组中的每个元素，然后满足参数条件的元素将被返回到新数组中。

    const number = [5, 1, 4, 10, 15, 20, 12];

    const result = number.filter(num => num>10);

    console.log(result); // [15, 20, 12];

7. 可迭代对象和循环

以下是 JavaScript 中可交互对象的列表。

可迭代的	描述
大批	通过遍历数组来访问每个元素。
地图	遍历键值对
字符串	通过遍历字符串来访问每个字符。
套	遍历集合元素
论点	通过遍历参数来访问每个参数。

for...of`for...of`语句是 ES6 中引入的一个新特性，用于更方便地访问可迭代对象。它本质上是一个循环，用于遍历可迭代对象。

循环无for...of

const array = [5, 10, 15, 20, 25, 30, 35];

for(var value in array){
    console.log(array[value]);
}

// To access the element of the array, We are using array[postion] notation.

循环for...of

const array = [5, 10, 15, 20, 25, 30, 35];

for(var value of a){
    console.log(value);
}

所以，我们可以看到，我们可以使用 for...of 方法直接访问可交互元素。

8. 休息和扩展运算符

扩展运算符和剩余运算符用三个点表示...。这三个点有两种用法，一种是“展开”，Spread Operator另一种是“展开”。Rest Parameter

⇒剩余参数

它将剩余的所有元素收集到一个数组中。
剩余参数可以将任意数量的参数收集到一个数组中。
剩余参数必须是最后一个参数。

不使用剩余参数

    // Write a Function to print sum of arguments.

    function add() {
      var sum = 0;
      for (var i = 0; i < arguments.length; i++) {
        sum = sum + arguments[i];
      }
      return sum;
    }

    console.log(add(1, 2, 3, 4, 5)); // 15

    console.log(add(1, 3, 4)); // 8

使用 REST 运算符的示例

    function add(...args) {
      let sum = 0;
      for (let i of args) {
        sum += i;
      }
      return sum;
    }

    console.log(add(3, 4, 5, 10, 20)); // 42

    console.log(add(1, 3, 4)); // 8

价差操作商

它允许arrays / objects /strings将可迭代对象扩展为单个参数/元素。
扩展运算符与剩余参数相反。剩余参数是将参数列表收集到一个数组中，而扩展运算符则可以展开数组元素。

让我们来看一个例子来理解spread

    ## EXAMPLE - 1

    const cars = ['BMW', 'Honda', 'Audi'];
    const moreCars = ['Maruti', 'Swift', ...cars];

    console.log(moreCars);  // ['Maruti', 'Swift', 'BMW', 'Honda', 'Audi'];


    ## EXAMPLE - 2 //Copying one array to other

    const array1 = [1, 2, 3];
    const copiedArray = ...array1;

    console.log(copiedArray); // [1, 2, 3]

9.对象字面量

对象字面量用于在 JavaScript 中创建对象。ES2015 (ES6) 版本中对对象字面量的增强使其功能更加强大。

可以直接使用变量名初始化对象。请参见下面的示例 1。
ES5 中 Object 的方法需要使用 requirefunction语句。ES6 中不再需要，可以直接使用 return 语句。请参见下面的示例 2。
ES6 中的对象字面量键可以是动态的。可以使用任何 Express 组件来创建键。

让我们来看一个例子，了解对象字面量的工作原理。

不使用 ES6 的对象字面量（支持 ES5）

    # Example 1

    var username = 'dipakkr'
    var name = 'Deepak Kumar'
    var country = 'India'
    var password = '123456'

    var user = {
        username : username,
      name : name,
        country : country,
        password : password
    }

    # Example 2

    var calculate = {
      sqaure :  function(a) { return a*a; },
      sum : function(a, b) { return a + b; }
    };

    console.log(calculate.square(5));  // 25
    console.log(calculate.sum(4,5));   //  9

ES6 中的对象字面量

    # Example 1

    const username = 'dipakkr'
    const name = 'Deepak Kumar'
    const country = 'India'
    const password = '123456'

    const user = {
        username,
        name,
        country,
        password,
    };


    # Example 2

    const calculate = {
        square(a) return a*a,
      sum(a, b) return a+b
    }

    console.log(calculate.square(5));   // 25
    console.log(calculate.sum(5,7));    // 12

10. ES6 中的类

JavaScript 在 ECMAScript 2015 中引入了类。类支持基于原型的继承、构造函数、super 调用、实例方法和静态方法。

在 JavaScript 中，定义类有两种方法。

类声明
类表达式

类声明

要使用 using 声明方法定义类，需要使用class关键字 `using`，后跟类名。类名必须以大写字母开头。

    class Rectangle {
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
    }

类表达式

类表达式是定义类的另一种方式。类表达式可以是命名的，也可以是匿名的。命名类表达式的名称仅在类体内部有效。

    let Rectangle = class {
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
    };

    console.log(Rectangle.name);

Mozilla Developer 对 JavaScript 类有非常精彩的解释。点击此处阅读更多内容。

11. 承诺

为了支持异步编程，JavaScript 使用回调函数。然而，回调函数的实现存在一个重大问题，即所谓的Callback hell.“回调地狱”。Promise 的出现正是为了解决这个问题。

Promise是一种模式，它通过使代码看起来像同步代码并避免与回调相关的问题，大大简化了异步编程。

承诺有三种状态。

待定：初始状态，既未完成也未拒绝。
已完成：表示操作已成功完成。
已拒绝：表示操作失败。

图片来源：MDN

let promise = new Promise(function(resolve, reject) {
      setTimeout(() => resolve('Success ! '), 2000);
    });

    promise
      .then(function(result) {
        console.log(result);
      })
      .catch(function(error) {
        console.log(error);
      });

RESULT

Success!

想了解更多信息Promises，请点击此链接

作者简介

大家好，我是 Deepak Kumar，一名全栈 JavaScript 开发自由职业者。我热爱构建和扩展那些对社区产生真正影响的产品。

让我们保持联系！ - | LinkedIn | Instagram | Twitter

订阅我的电子邮件简讯，即可随时了解最新动态！

文章来源：https://dev.to/dipakkr/es6-a-compressive-guide-to-learn-es2015-es6-2ao1

菜单

分享

ES6 | ES2015 (ES6) 学习综合指南 DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！

ES6 | ES2015 (ES6) 全面学习指南

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

目录

1. Var、let 和 const

2. 模板文字

3. 默认参数

4. 箭头函数

5. 数组和对象解构

6. 映射、归约和过滤

7. 可迭代对象和循环

8. 休息和扩展运算符

9.对象字面量

10. ES6 中的类

11. 承诺

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码