2021-07-08 | 学习笔记 | UNLOCK | 更新时间:2021-7-15 15:51

复习ES6中精简知识点

let 和 const

var在申明变量时,会申明提前。letconst在申明变量的时候,变量不会提前,不允许重复声明;const会申明一个指针不变的变量;

console.log(A)   //A is not defined
let A = 1

let A = 1
console.log(A)   //1

const B = 2
B = 1            //Assignment to constant variable

const B = { a:2 }
B.a = 1          //{ a:1 }

{} 块级作用域

ES6允许块级作用域的任意嵌套;块级作用域使得获得广泛应用的立即执行函数表达式(IIFE)不在必要;

立即执行函数:立即执行函数的出现是为了不污染全局变量

let A = 1
{
  {
    let A = 2
  };
  {
    let B = 3
  };
}
console.log(A)   //1

变量的解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值

let [ x,y ] = [ 1,2,3 ]      //x = 1; y = 2
let [ x, ,z ] = [ 1,2,3 ]    //X = 1; z = 3

let [ x,y=2 ] = [ 1 ]           //x = 1; y = undefined
let [ x,y=2 ] = [ 1,undefined ] //x = 1; y = 2
let [ x,y=2 ] = [ 1,null ]      //x = 1; y = null

let { x,y } = { y:2,x:1 }     //x = 1; y = 2
let { x:x,y:y } = { y:2,x:1 } //x = 1; y = 2
let { A:x } = { A:1 }         //x = 1

扩展运算符

扩展运算符可以将数组和对象以展开的方式展示或者运算;

let A = [ 1,2,3 ], B  = [ 2,3,4 ]
let C = [ ...A, ...B ]     //C = [ 1,2,3,2,3,4 ]

let A = { a:1, b:2 }, B = { b:3, c:4 }
let C = { ...A, ...B}      //C = { a:1, b:3, c:4 }

let { A,B, ...C } = { A:1, B:2, a:3 }  // A = 1, B = 2, c = {a:2}

独一无二的Symbol

ES6 之后,Javascript 拥有6种基本数据类型;string number null undefined boolean symbol代表着独一无二;

let A = Symbol('king');
let B = Symbol('King');
A==B    //false

// Symbol.for 会保证拥有该字符串的symbol。没有才会创建;有则返回
let A = Symbol.for('king');
let B = Symbol.for('King');
A==B    //true

let a = Symbol()
let A ={
  a:1,
  [a]:2
}
// A.a = 1; A['a'] = 1; A[a] = 2

Set 和 Map 的数据结构

Set 数据结构类似数组,但是它的成员的值都是唯一,没有重复的值;Map 类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键

const A = new Set([1])
[ 2,3,2,3 ].forEach( n => A.add(n) )
// A = [ 1,2,3 ]

Set 实例的操作方法(用于操作数据)

  • add(value):添加某个值,返回 Set 结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示该值是否为Set的成员。
  • clear():清除所有成员,没有返回值。

Set 实例的遍历方法(用于遍历成员。)。

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员
let A = new Map([
  ['name','张三'],
  ['sex',"男"]
])
// {"name" => "张三", "sex" => "男"}

Map 实例的操作方法(用于操作数据)

  • set(key,value):添加某个值,返回 Map 结构本身。
  • delete(key):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(key):返回一个布尔值,表示该值是否为Map的成员。
  • get(key):查找map中对应的key值,没有则 undefined。
  • clear():清除所有成员,没有返回值。

Map 实例的遍历方法(用于遍历成员。)。

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员

Promise 异步编程

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大;Promise对象存在三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)

const promise = new Promise((fulfill,reject)=>{
  // 可用于网络请求 等异步操作;
  console.log('异步操作')
  if(true){ // 可以通过条件判断执行不同的状态或只执行成功
    fulfill('成功')
  }else{
    reject('失败')
  }
})

promise.then(function(value) {
    // 成功后的回调
    console.log(value)
  },function(error) {
    // 失败后的回调
    console.log(error)
  })
  .catch((err)=>{ // 和then 第二个参数对比,建议使用 catch 捕获
      // 执行状态失败的回调(包括代码出错)
  })
  .finally(() => {
      // 无论怎样都会执行的回调
  });

Generator 异步编程

Generator 是 ES6 提供的一种异步编程解决方案;它有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式. Generator 函数和普通函数最大区别在于它是分段执行

function* generator(){
  console.log(1)
    yield 'hello'
  console.log(2)
    yield 'word'
  console.log(3)
    return 'end'
}
let gen=generator()
gen.next() //1 { value: 'hello', done: false }
gen.next() //2 { value: 'word', done: false }
gen.next() //3 { value: 'end', done: true }
gen.next() //  { value: undefined, done: true }

generator 的方法

  • throw() :在函数体外抛出错误。 可以在 Generator 函数体内或体外使用try捕获;
  • return():可以返回给定的值,并且终结遍历 Generator 函数
// 状态机
var clock = function* () {
  while (true) {
    yield false;
    yield true;
  }
};

Async 语法糖

Async 可以看做为 Generator 的语法糖; await后可以跟Promise或其他异步操作,只有异步操作执行才会继续执行;而且Async 会返回Promise 对象;Promise对象只有在async体内的异步操作都完成后才会改变状态,除非return 或者体内抛出异常

async function demo(){
  console.log(1)
    await 'hello'
  console.log(2)
    await 'word'
  console.log(3)
    return 'end'
}
demo()
.then(val=>console.log(val))
.catch(err=>console.log(err))
.finally(val=>console.log(val))
// 1 2 3 'end' undefined 会依次执行

Class 类的定义

Es6引入了 class 这个概念, 你可以看做为这是个语法糖,他的功能 Es5 都能实现。

class Name{
  constructor(x,y){  // 构造方法
    this.name = x
    this.sex = y
  }
  toString(val){
    return this.x +'是'+ val
  }
}
let a=new Name('李四','男性')

Es6 通过 extends 指定继承关系;

class Point { }

class ColorPoint extends Point {
  constructor(){
    super() //可以用来获取父级this
  }
}
ES6