你知道 ES6 吗？（第一部分）

ES6 就是 JS，ES6 是关于下一代 Javascript。

ES6 之所以如此有用，是因为 React、Angular 和 Vue 应用通常都用到了 ES6 的所有功能。总的来说，ES6 使我们能够编写简洁、健壮的 React 应用，从而帮助我们实现更强大的功能。

内容：

Let 和 const
箭头函数
模块（导出和导入）
课程
三个点...
解构

Let 和 const

Let 和 const 是创建变量的不同方式。
在 JS 中，我们使用 var 来创建变量，但在 ES6 中，引入了两个不同的关键字：let 和 const。var
仍然有效，但强烈建议您使用 let 和 const。Let
是新的 var，您可以使用它来创建具有值的变量。但这里最重要的一点是，如果您想创建一个真正可变的变量，请使用 let。
如果您打算创建一个常量值（即只赋值一次且永远不会更改的值），请使用 const。

在普通的 JS 中，我们使用 var 关键字来创建变量

var myName = 'Mohamed';
console.log(myName);

myName = 'Khaled';
console.log(myName);

在 ES6 中，我们可以使用 let 关键字代替 var 来创建变量

let myName = 'Mohamed';
console.log(myName);

myName = 'Khaled';
console.log(myName);

我们也可以使用 const 来创建常量变量。这意味着我们不能重新赋值。
在下一个例子中，我们尝试重新赋值常量变量，但会报错。

const myName = 'Mohamed';
console.log(myName);

myName = 'Khaled';    //ERROR 
console.log(myName);

箭头函数。

箭头函数是创建 JavaScript 函数的另一种语法。
一个普通的 JavaScript 函数看起来是这样的。

function printName(name){
  console.log(name);
}

printName();        //undefined 
printName('Mohamed');   //Mohamed

但是 Arrow 函数：

const printName = (name) => {
  console.log(name);
}

printName();    
printName('Mohamed');

这种语法有一些替代方法，
如果我们有一个参数

const printName = name => {
  console.log(name);
}

printName();    
printName('Mohamed');

如果我们有一个不接收参数的函数，我们需要传递一对空括号

const printName = () => {
  console.log('Mohamed');
}

printName();

如果我们有一个接收多个参数的函数，我们需要括号

const printName = (name1, name2, age) => {
  console.log(name1, name2, age);
}

printName('Mohamed', 'Khaled', 23); 
//Mohamed
//Khaled
//23

我们还可以更新函数主体

const mul = (number) => {
   return number * 5;
}

console.log (mul(3));       //15

我们可以更新此函数并删除括号并重新运行关键字

const mul = (number) => number * 5;
console.log (mul(3));

我们也可以更新

const mul = number => number * 5;
console.log (mul(3));       //15

模块（导出和导入）

我们可以把代码拆分到多个文件中，怎么做呢？
我们必须按照正确的顺序导入到我们的 html 文件中，这样才能从另一个文件导入内容。

例如，如果我们有一个 person.js 文件，其中包含一个对象

//Object
const person = {
    name: 'Mohamed'
}

export default person

如果我们有另一个文件utility.js，我们可以导出多个东西

export const printMohamed = () => {
    console.log('Mohamed');
}

export const mul = number => number * 5;
export const baseData = 10;

我们可以将其导入到其他地方。例如这个文件 app.js

//Notice: We can name person whatever we want because it's the default 
import person from './person.js'
import prs from './person.js'

我们应该使用花括号来明确地定位文件中的特定内容

import {baseData} from './utility.js'
import {mul} from './utility.js'

我们可以分配一个别名，并在关键字后选择任意名称

import {mul as multiply} from './utility.js'
import {printMohamed as mkhy} from './utility.js'

如果我们在一个文件中有多个命名的导出，并且我们想要导入它们全部，我们使用特殊字符 *，然后分配一个别名

import * as bundled from './utility.js'

如果我们有多个，并且我们想要导入特殊出口

import {baseData},{printMohamed} from './utility.js'

课程

类是对象的蓝图，类可以同时具有属性和方法

这里我们创建了 Person 类，它有 name 属性和 mul 方法。然后我们根据这个类创建了一个对象

//Create class
class Person{
    name = 'Mohamed';
        mul = number => number * 5;
}

//Use class, use new keyword
const myPerson = new Person();

console.log(myPerson.name); //"Mohamed"
console.log(myPerson.mul(3));   //15

另一个例子，我们创建了一个具有构造函数和 print 方法的类。然后我们从这个类创建了一个对象。

//Create class
class Person{
    //Default function method
    constructor(){
        this.name = 'Mohamed';
    }

    printMyName(){
        console.log(this.name);
    }
}

//Create an instance or object
const person = new Person();
person.printMyName();   //"Mohamed"

如果我们想继承怎么办？这里我们使用 super 关键字。super
关键字是一个关键字，它只是执行父类的构造函数

//Create Human class
class Human{
    constructor(){
        this.gender = 'male';
    }

    printGender(){
        console.log(this.gender);
    }
}

//Create Person class
class Person extends Human{
    constructor(){
            super();    
            this.name = 'Mohamed';
    }

    printMyName(){
            console.log(this.name);
    }
}

//Create an instance or object
const person = new Person();
person.printMyName();   //"Mohamed"
person.printGender();   //"male"

请注意下一个重要案例：
这里我们的 person 类从 Human 类扩展而来，但 person 类有它自己的属性和方法。

class Human{
    //Default function method
    constructor(){
        this.name = 'Mohamed';
        this.gender = 'male';
        this.age = 23;

    }

    printGender(){
        console.log(this.gender);
    }
    printAge(){
        console.log(this.age);
    }  
}


class Person extends Human{
    constructor(){
        super();
        this.name = 'Sarah';
        this.gender = 'Female';
        this.age = 35;
    }

    printMyName(){
        console.log(this.name);
    }
}


const person = new Person();
person.printMyName();   //"Sarah"
person.printGender();   //"Female"
person.printAge();  //35

关于类、属性和方法的重要说明

ES7 提供了初始化属性和方法的不同语法
在 ES6 中，属性就像附加到类或对象的变量

constructor(){
    this.myProperty = 'value';
        this.name = 'Mohamed';
}

在 ES7 中，我们可以直接在类内部赋值属性，这样就跳过了构造函数的调用。
实际上，在后台， this 仍然会被转换为使用构造函数。

myProperty = 'value'
name = 'Mohamed';

在 ES6 中，正如我们之前讨论过的，方法就像附加到类或对象的函数一样

//myMethod () {...}
printMyName(){
    console.log(this.name);
}

在 ES7 中：我们使用箭头函数作为属性值，因此使用 this 关键字不会遇到任何问题

//myMethod = () => {...}
printMyName = () => {console.log('Mohamed');}
printGender = () => {this.gender);}
printMyName = () => {this.name);}

在下一个示例中，我们可以删除人类类中的构造函数，并去掉 this 关键字。此外，我们还将方法转换为箭头函数。最后，我们不再需要调用 super 关键字。
注意：如果在 JSbin 上运行它，会报错，因为无法识别语法。所以你实际上需要选择 ES6/Babel。

class Human{
      gender = 'female';

      printGender = () => {
        console.log(this.gender);
      }
}


class Person extends Human{
      name = 'Mohamed';
      gender = 'male';

      printMyName = () => {
        console.log(this.name);
      }
}


const person = new Person();
person.printMyName();   //"Mohamed"
person.printGender();   //"male"

三个点...

扩展和 Rest 运算符称为 threeDots
操作员只有三个点...
展开运算符用于拆分数组元素或对象属性。换句话说，在安全地复制旧对象的同时，复制数组或向对象添加属性。展开运算符会取出所有元素和所有属性，并将它们分配到新的数组或对象中，或者任何你使用它的地方。

EX1 ...带阵列

const numbers = [1,2,3];
const newNumbers = [numbers,4,5];
console.log(newNumbers);    //[[1, 2, 3], 4, 5]

const spreadNumbers =[...numbers,4,5];
console.log(spreadNumbers); //[1, 2, 3, 4, 5]

EX2 .. 使用对象

const oldPerson = {
  name : 'Mohamed'

};

const newPerson = {
  ...oldPerson,
  age: 23
}

console.log(newPerson);

输出
[object Object] {
年龄：23，
姓名：“Mohamed”
}

剩余运算符用于将函数参数列表合并到数组中，我们在函数参数列表中使用它

const filterFunc1 = (...args) => {
  return args.filter(el => el === 1);
}

console.log(filterFunc1(1,2,7,1,3,8,9,1,2));    //[1, 1, 1]

EX3

const filterFunc2 = (...args) => {
  return args.filter(el => el === 1 || el ===2);
}

console.log(filterFunc2(1,2,7,1,3,8,9,1,2));    //[1, 2, 1, 1, 2]

解构

解构允许您轻松提取数组元素或对象属性并将它们存储在变量中
解构与扩展运算符的作用不同
解构允许你提取单个元素或属性，并将它们存储在数组和对象的变量中

数组示例：

[a,b] = ['Mohamed','Khaled']
console.log(a); //Mohamed
console.log(b); //Khaled

对象示例：

myInfo1 = {name:'Mohamed'};
console.log(myInfo1.name);  //Mohamed
console.log(myInfo1.age);   //undefined

myInfo2 = {name:'Mohamed', age:23};
console.log(myInfo2.name);  //Mohamed
console.log(myInfo2.age);   //23

EX1

const numbers = [1,2,3];
[num1,num2] = numbers;

console.log(num1,num2);
//1
//2

EX2

const numbers = [1,2,3];
[num1, ,num3] = numbers;

console.log(num1,num3);
//1
//3

EX3

const {name} = {name:'Mohamed', age:23}
console.log(name);  //Mohamed
console.log(age);   //undefined

EX4

const {name,age} = {name:'Mohamed', age:23}
console.log(name);  //Mohamed
console.log(age);   //23

一些参考：
阅读更多关于let
阅读更多关于const
阅读更多关于ES6 箭头函数

最后...这里是 repo，您可以找到所有源代码。

鏂囩珷鏉ユ簮锛�https://dev.to/this_mkhy/do-you-know-es6---part-1-387m

你知道 ES6 吗？（第一部分）

你知道 ES6 吗？（第一部分）

ES6 就是 JS，ES6 是关于下一代 Javascript。

Let 和 const

箭头函数。

模块（导出和导入）

课程

关于类、属性和方法的重要说明

三个点...

解构

最后...这里是 repo，您​​可以找到所有源代码。

最后...这里是 repo，您可以找到所有源代码。