ES6简明教程总结

1、let、const和block作用域

let和const允许创建块级作用域，ES6推荐在函数中用let定义变量。

var a = 2;
{
  let a = 3;
  console.log(a); // 3
}
console.log(a); // 2

const可以声明一个变量，ES6中，但是const声明的常量并不是一成不变的。const与let的唯一区别就是它在声明变量时必须同时初始化变量，且不能修改const声明的变量的值。

{
  const ARR = [5,6];
  ARR.push(7);
  console.log(ARR); // [5,6,7]
  ARR = 10; // TypeError
}

注意点：

• let可以只声明不赋值，const在声明变量的时候必须同时初始化变量
• 当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING
• let 关键词声明的变量不具备变量提升（hoisting）特性
• let和const与var最大的区别是：let和const都拥有块级作用域，且没有变量提升。
• var 只存在函数作用域和全局作用域（没有块级作用域的概念）
• let不能重复声明赋值，var可以

let不能重复声明赋值，var可以：因此在js中，当for循环（同步代码）中出现异步代码时，需要使用let

//let
for(let i = 0; i < 5; i++){
  setTimeout(()=>{
        console.log(i)
    },100);
}
// 0 1 2 3 4

for(var i = 0; i < 5; i++){   //同步
//setTimeout可以看做一个异步的过程，在JavaScript的事件循环中，先执行同步代码，再执行异步代码，当异步代码执行时，for循环已经循环完毕，又因为在for循环中，由于用var定义变量，在循环体中执行的是同一个i，所以会输出5个5
  setTimeout(()=>{   //异步             
        console.log(i)
    },100);
}
//会导致出现问题： 5 5 5 5 5

但是如果用var要实现同一效果，用var实现同一效果的原理就是要使用更多的闭包，而用let实现并没有形成闭包而只是使用了块级作用域，使用过多闭包且不进行恰当的回收会形成内存泄漏

var _loop = function _loop(i) {
  setTimeout(function() {
    console.log(i);
  }, 100);
};

for (var i = 0; i < 5; i++) {
  _loop(i);
}

2、箭头函数

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体

箭头函数的this指向他的父级，箭头函数中的this指向外层函数（非箭头函数）的作用域中的this指向。

function foo () {
    console.log(this); // obj1
    var test = () => {
        console.log(this); // obj1
    }
    test();
}
var obj1= {
    a: 1,
    foo: foo
}
obj1.foo();

相当于：
var obj1= {
    a: 1,
    foo: foo(){
        console.log(this); // this指向的是obj1
        var test = () => {
        console.log(this); // obj1
        }
        test();
    }
}
obj1.foo();

函数的this指向：

1、web全局环境下的this指向window，

console.log(this); // window

2、非严格模式下，函数内部的this指向window，严格模式下，为undefined

function fn() {
    console.log(this);
}
fn(); // window
window.fn();




'use strict'
function fn() {
    console.log(this);
}
fn(); // undefined

3、被嵌套的函数独立调用时，this默认指向window

var obj = {
    a: 2,
    foo: function() {
        function test() {
            console.log(this); // window
        }
        test();
    }
}
obj.foo();

4、闭包中this默认指向window

var obj3 = {
    a: 2,
    foo: function() {
        console.log(this); // obj3
        var c = this.a; // 2
        return function test() {
            console.log(this); // window
            return c;
        }
    }
}
var fn = obj3.foo();
console.log(fn()); // 2

3、函数参数默认值

ES6 中允许你对函数参数设置默认值：

let getFinalPrice = (price, tax=0.7) => price + price * tax;
getFinalPrice(500); // 850

4、Spread / Rest 操作符（...）

当被用于迭代器时，是spread操作符

function foo(x,y,z){
    console.log(x,y,z)
}
let arr=[1,2,3]
foo(...arr); //1 2 3

当被用于函数传参时，就是Rest操作符

function foo(...args){
    console.log(args);
}
foo(1,2,3,4,5)    //[1,2,3,4,5]

5、ES6 允许声明在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法，并且允许在对象属性中进行计算操作

function getCar(make, model, value) {
  return {
    // 简写变量,初始化属性变量
    make,  // 等同于 make: make
    model, // 等同于 model: model
    value, // 等同于 value: value

    // 忽略 `function` 关键词简写对象函数,初始化函数的定义方法
    depreciate() {
      this.value -= 2500;
    }
 }

6、解构赋值：解构赋值是指将数组中的值或对象的属性取出，赋值给其他变量

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// Expected output: 10

console.log(b);
// Expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// Expected output: Array [30, 40, 50]

对象和数组解构：解构可以避免在对象赋值时产生中间变量

function foo() {
  return [1,2,3];
}
let arr = foo(); // [1,2,3]
 
let [a, b, c] = foo();
console.log(a, b, c); // 1 2 3
 
function bar() {
  return {
    x: 4,
    y: 5,
    z: 6
  };
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z); // 4 5 6

7、 对象超类：ES6在对象中允许使用super（）方法

var parent = {
  foo() {
    console.log("Hello from the Parent");
  }
}
 
var child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
  }
}
 
//Object.setPrototypeOf() 静态方法可以将一个指定对象的原型（即内部的 [[Prototype]] 属性）设置为另一个对象或者 null。
//把child的原型设置为parent的原型属性
Object.setPrototypeOf(child, parent);

child.foo(); // Hello from the Parent
             // Hello from the Child

7、模板语法和分隔符：${}和分隔符``

${...}：用来渲染变量，``作为分隔符

let user='aaa';
console.log(`Hi ${user}!`);    //Hi aaa

8、for...of和for...in

for...of用于遍历一个迭代器，如遍历数组（遍历数组、字符串、Map、Set、arguments都是迭代器）

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname of nicknames) {
  console.log(nickname);
}
// 结果: di, boo, punkeye

for...in：用来遍历对象中的属性

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname in nicknames) {
  console.log(nickname);
}
Result: 0, 1, 2, size

9、Map 和 WeakMap

ES6 中两种新的数据结构集：Map 和 WeakMap。事实上每个对象都可以看作是一个 Map。

一个对象由多个 key-val 对构成，在 Map 中，任何类型都可以作为对象的 key，如：

Map:

var myMap = new Map();
 
var keyString = "a string",
    keyObj = {},
    keyFunc = function () {};
 
// 设置值
myMap.set(keyString, "value 与 'a string' 关联");
myMap.set(keyObj, "value 与 keyObj 关联");
myMap.set(keyFunc, "value 与 keyFunc 关联");
 
myMap.size; // 3
 
// 获取值
myMap.get(keyString);    // "value 与 'a string' 关联"
myMap.get(keyObj);       // "value 与 keyObj 关联"
myMap.get(keyFunc);      // "value 与 keyFunc 关联"

WeakMap：就是一个Map，只不过它的所有 key 都是弱引用，意思就是 WeakMap 中的东西垃圾回收时不考虑，使用它不用担心内存泄漏问题。

另一个需要注意的点是，WeakMap 的所有 key 必须是对象。它只有四个方法 delete(key),has(key),get(key) 和set(key, val)：

let w=new WeakMap();
w.set('a','b');

var o1={},
    o2=function(){},
    o3=window

w.set(o1,37);
w.set(o2,"aaa");
w.set(o3,undefined);

w.get(o3);//undefined
w.has(o1);//true
w.delete(o1);
w.has(o1);//false

10、Set 和 WeakSet

什么是set？Set 对象是值的合集，Set对象允许你存储任何类型（无论是原始值还是对象引用）的唯一值。

set中的元素只会出现一次，即集合中的数是唯一的，可以按照插入顺序迭代集合中的元素。

set 对象是一组不重复的值，重复的值将被忽略，值类型可以是原始类型和引用类型

let mySet=new Set([1,1,2,2,3,3]);
mySet.size;//重复的值被忽略，所以size：3
mySize.has(1);//true
mySize.add('strings');
mySize.add({a:1,b:2});

//通过forEach来遍历对象
mySet.forEach((item)=>{
    console.log(item);
    //1
    //2
    //3
    //'strings'
    //Object{a:1,b:2}
    })

//通过for...of来遍历对象
for(let value of mySet){
    console.log(value);
    //1
    //2
    //3
    //'strings'
    //Object{a:1,b:2}
}

类似于 WeakMap，WeakSet 对象可以让你在一个集合中保存对象的弱引用，在 WeakSet 中的对象只允许出现一次： 

var ws = new WeakSet();
var obj = {};
var foo = {};
 
ws.add(window);
ws.add(obj);
 
ws.has(window); // 添加了window对象，true
ws.has(foo);    // false, foo 没有添加成功
 
ws.delete(window); // 从结合中删除 window 对象
ws.has(window);    // false, window 对象已经被删除

12、类

ES6中引入了class和继承的语法糖，但是这里的class只是原型链的语法糖表现形式，在 JavaScript 中，原型链是一种用于实现继承和对象属性查找的机制。原型链的语法糖表现形式是指通过一些语法糖（简化的语法）来实现对原型链的操作和访问。

如何理解原型链是一种用于实现继承和对象属性查找的机制？

（1）在 ES6 之前，JavaScript 中的原型链是通过构造函数和原型对象来实现的。

Person 是一个构造函数，它定义了一个 Person 类。

Person 的原型对象上定义了一个 sayHello 方法。通过 new 关键字，我们可以创建 Person 的实例 person1。

通过原型链，person1 实例可以访问 Person.prototype 上定义的方法和属性。

当我们调用 person1.sayHello() 时，实际上是在原型链上查找并调用 Person.prototype 上的 sayHello 方法。

//构造函数定义对象
function Person(name, age) {
  this.name = name;
  this.age = age;
}

//添加方法到原型对象
Person.prototype.sayHello = function() {
  console.log("Hello!");
};

//创建对象实例
var person1 = new Person("John", 25);

（2）在 ES6 中，引入了类（class）和继承的语法糖。

Person 是一个类，通过 class 关键字定义。类中的 constructor 方法用于初始化对象的属性。类中的其他方法则直接定义在类的内部。

通过类和继承的语法糖，我们可以更直观地定义对象和方法，并实现继承关系，而无需直接操作构造函数和原型对象。

//类定义对象
class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    sayHello(){
        console.log("Hello!")
    }
}

//创建对象实例
let person1=new Person("john",25);

函数中使用static定义构造函数的方法和属性

class Task {
  constructor() {
    console.log("task instantiated!");
  }
 
  showId() {
    console.log(23);
  }
 
  static loadAll() {
    console.log("Loading all tasks..");
  }
}
 
console.log(typeof Task); // function
let task = new Task(); // "task instantiated!"
task.showId(); // 23
Task.loadAll(); // "Loading all tasks.."

 类中的继承和超集：在类的继承中，一个类可以继承另一个类的属性和方法，并且可以扩展或修改继承的内容。超集（superset）是指一个类包含另一个类的所有属性和方法，以及额外的自身定义的属性和方法。

class Car {
  constructor() {
    console.log("Creating a new car");
  }
}

class Porsche extends Car {
  constructor() {
    super();
    console.log("Creating Porsche");
  }
}

let c = new Porsche();
// Creating a new car：继承父类Car的log
// Creating Porsche：Porsche 自己的log

extends 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需要执行 super() 函数。

注意：

• 类的声明不会提升（hoisting)，如果你要使用某个 Class，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误
• 在类中定义函数不需要使用 function 关键词，使用constructor()

13、 Symbol：ES6引入的一种数据结构，表示一个唯一的标识符，用于创建对象的私有属性或其他用途。

创建Symbol：

const mySymbol=Symbol();

通过调用Symbol()函数来创建一个新的Symbol，每次调用该函数都会返回一个全新且唯一的Symbol

Symbol 的唯一性：

const symbol1 = Symbol();
const symbol2 = Symbol();

console.log(symbol1 === symbol2);  // false
```

每个 Symbol 值都是唯一的，即使两个 Symbol 值的描述相同，它们也不相等。

Symbol 的描述：

const mySymbol = Symbol('My Symbol');
console.log(mySymbol);  // Symbol(My Symbol)
```

在创建 Symbol 时，可以提供一个可选的描述参数。
描述仅用于调试和描述目的，不会影响 Symbol 的唯一性。

Symbol 用作对象的私有属性：

const firstName = Symbol('first name');
const person = {
  [firstName]: 'John'
};

console.log(person[firstName]);  // John
```

Symbol 可以用作对象的私有属性，因为它的唯一性确保不会与其他属性冲突。

 

什么是标识符：

标识符是用于标识变量、函数、类、对象、模块或其他编程实体的名称。它是由字母、数字、下划线和美元符号组成的字符串，具有一些命名规则和约定。

命名规则：

1. • 标识符可以包含字母（A-Z、a-z）、数字（0-9）、下划线（_）和美元符号（$）。
   • 标识符必须以字母、下划线或美元符号开头，不能以数字开头。
   • 标识符区分大小写，例如 myVariable 和 myvariable 是不同的标识符。
   • 标识符不能使用 JavaScript 的保留字作为名称，例如 if、for、function 等。
2. 标识符应该具有描述性，能够清晰地表达其所代表的内容。
3. 标识符通常使用驼峰命名法（camel case）或下划线命名法（snake case）来提高可读性。例如，myVariable 或 my_variable。

14、迭代器：iterator

迭代器允许每次访问数据集合的一个元素，当指针指向数据集合的最后一个元素时，迭代器会退出，提供了next()函数来遍历一个序列，这个方法返回一个包含done、value属性的对象。

通过Symbol.iterator可以给对象设置默认的遍历器，无论什么时候需要遍历，都可以执行iterator方法返回用于获取值的迭代器。

数组默认就是一个迭代器

//创建一个数组
var arr=[11,12,13];
//给数组设置一个遍历器
var itr=arr[Symbol.iterator]();

itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }
 
itr.next(); // { value: undefined, done: true }

你可以通过 [Symbol.iterator]() 自定义一个对象的迭代器

15、Generators：允许一个函数返回的可遍历对象生成多个值

在使用中你会看到 * 语法和一个新的关键词 yield:

如何使用Generator 函数？

1.定义generator函数：

function *myGenerator(){
    yield 1;//1
    yield 2;//2
    yield 3;//3
}

//在函数声明中使用`function*` 关键字定义Generator函数，函数体内使用`yield`关键字来定义要产生的值，每次执行到`yield`语句时，函数会暂停，并将返回的值返回

2、创建Generator对象

//通过myGenerator定义一个对象
const generator=myGenerator();

调用generator函数会返回一个Generator对象，
可以通过调用函数名后加上圆括号来创建该对象。

3、迭代 Generator 对象：

console.log(generator.next());  // { value: 1, done: false }
console.log(generator.next());  // { value: 2, done: false }
console.log(generator.next());  // { value: 3, done: false }
console.log(generator.next());  // { value: undefined, done: true }

通过next()方法可以迭代Generator对象，每次调用next()方法将恢复函数的执行，并返回一个包含 `value` 和 `done` 属性的对象。`value` 属性表示每次迭代生成的值，`done` 属性表示是否已经完成迭代。

4、控制 Generator 的执行：

console.log(generator.next());  // { value: 1, done: false }
console.log(generator.return('Finished'));  // { value: 'Finished', done: true }
```

可以使用 `return()` 方法来提前终止 Generator 函数的执行，并指定一个最终的返回值。

总结：Generator 函数提供了一种灵活控制迭代流程的方式，可以通过 yield 语句来产生值，并通过 next() 方法来控制函数的执行。这使得我们可以按需生成值，而不是一次性生成所有值。

16、Promises： JavaScript 中处理异步操作的一种方式，是es6引入的一个内置对象，一个 Promise是一个等待被异步执行的对象，当它执行完成后，其状态会变成 resolved 或者rejected。

使用方法：

var p = new Promise(function(resolve, reject) {  
  if (/* condition */) {
    // fulfilled successfully
    resolve(/* value */);  
  } else {
    // error, rejected
    reject(/* reason */);  
  }
});

每一个 Promise 都有一个 .then 方法，这个方法接受两个参数，第一个是处理 resolved 状态的回调，一个是处理 rejected 状态的回调：

p.then((val) => console.log("Promise Resolved", val),
       (err) => console.log("Promise Rejected", err));

基本概念：

1. 异步操作：
   异步操作是指不会立即返回结果的操作，例如从服务器获取数据、读取文件、发送网络请求等。传统的回调函数方式在处理异步操作时会导致回调地狱（callback hell）和代码可读性差的问题。

2. Promises 对象：
   Promises 对象表示一个异步操作的最终结果。它有三种状态：pending（等待态）、fulfilled（已完成态）和rejected（已拒绝态）。

3. 创建 Promise：
   可以使用 new Promise() 构造函数创建一个 Promise 对象，该构造函数接受一个执行器函数作为参数。执行器函数有两个参数：resolve 和 reject，它们分别用于将 Promise 标记为已完成或已拒绝。

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  // 当操作成功时调用 resolve()，并传递结果
  // 当操作失败时调用 reject()，并传递错误信息
});

4、处理 Promise 结果：
可以使用 then() 方法来处理 Promise 对象的结果。then() 方法接受两个回调函数作为参数，分别处理成功态和拒绝态。

myPromise.then(
  (result) => {
    // 处理成功态，result 是 resolve() 传递的结果
  },
  (error) => {
    // 处理拒绝态，error 是 reject() 传递的错误信息
  }
);

5、 Promise 链式调用：
可以通过返回一个新的 Promise 对象来实现 Promise 链式调用。这样可以在一个 Promise 的结果上继续执行其他操作。

myPromise
  .then((result) => {
    // 处理成功态
    return someAsyncOperation(result);
  })
  .then((result) => {
    // 继续处理成功态
    return anotherAsyncOperation(result);
  })
  .catch((error) => {
    // 处理拒绝态
  });
```

在链式调用中，每个 `then()` 方法可以返回一个新的 Promise 对象，从而构建一个 Promise 链。如果任何一个 Promise 失败，将跳过后续的成功态处理，直接进入最近的拒绝态处理。