js的es6

ES6

ECMAScript 第六个版本, 发布于2015年. 是JS提供特性最多的版本, 升级最大的版本

• 非常好的参考文档
  https://es6.ruanyifeng.com/#docs

let

• 块级作用域
• 同一作用域中, 不允许重复声明
• 在全局作用域中声明, 变量会存储在脚本区, 而非全局window中, 所以不会造成全局变量污染
• 推荐用let 代替 var

const

• 块级作用域
• 在全局作用域中声明, 变量会存储在脚本区, 而非全局window中, 所以不会造成全局变量污染
• 同一作用域中, 不允许重复声明
• 声明时必须赋值, 后续不允许重新赋值
• 在没有重新赋值的场景中, 推荐用const 代替 let

数组的展开

• … 运算符, 可以把数组展开

• 常用于把数组展开成函数参数, 代替 函数的apply 方法的场景

  • Math.max(…[11,22,33])

• 合并数组

  • […数组1, …数组2]

对象的展开

• … 运算符, 可以把对象类型展开

• 合并对象

  • {…对象1, …对象2}

剩余参数

• function 函数(a, …args)

  • args 非固定名称, 可以随意书写
  • 示例函数, 剩余的参数都会存储在 args 这个数组类型的变量里

参数默认值

• function 函数(参数=值)

数组解构

• let [a,c] = [11, 22, 33]

  • a = 11
    c = 33

对象解构

• let {name, age} = {name: 11, age:22}

  • name = 11
    age = 22

• 别名写法

  • let {name: gname, age} = {name: 11, age: 22}

    • gname = 11
      age = 22

模板字符串

• ``

• 配合 ${} 关键词, 可以在 模板字符串中书写JS代码

• 场景

  • 在DOM操作中, 常用于拼接 HTML 模板代码

箭头函数

• 匿名函数的简化写法

• ()=>{}

• 语法糖1

  • 当参数仅有一个时, 简化()
  • name => {}

• 语法糖2

  • 方法体只有一行代码时, 简化 {return }

  • ()=> {return xxx}

    • ()=>xxx

  • 注意

    • 如果 返回值是对象类型, 则必须用()包裹, 来防止{}的歧义
    • ()=> ({xx: xxx})

• this

  • 本身没有this, 使用声明时所在作用域中的this

• 不能做构造函数使用

  • 搭配new使用会报错

• 没有 bind, call, apply 这些方法

对象方法

• Object.keys

  • 获取对象所有可遍历的直属属性

• Object.setPrototypeOf

  • 替换对象类型的原型

• Object.create

  • 创建对象类型时, 指定其原型和属性

for of

• 快速遍历数组类型, 得到其中的值
• for (let value of arr){}

Promise

• 一种实现异步操作的方式

• 旧方式: 回调函数

  • 有造成回调地狱的风险

• Promise利用链式语法来防止回调地狱的发生

• 基础语法

  • new Promise((resolve, rejected)=>{
    resolve({})

  reject({})
  }).then(res=>{}).catch(err=>{})

    - resolve会触发 then函数,  其参数会传递给 res
    - reject 会触发 catch 函数, 其参数会传递给 err
    - resolve 和 reject 二选一,  只能触发其中一个,  触发之后另一个无法触发
  1
  2
  3

• 三种状态

  • pending

    • 准备就绪, 初始

  • fulfilled

    • resolve 已解决

  • rejected

    • reject 被拒绝, 失败

class

• 面向对象三大特征

  • 封装

    • 用{} 把代码括起来, 后续通过名字进行调用

  • 继承

    • 原型链效果: 自己没有的属性, 去__proto__中查找

  • 多态

    • 继承同一个构造函数后, 可以得到更多具有个人特色的构造函数, 这些构造函数重写父的属性, 可以具有多种状态效果

• JS提供了独特的 构造函数方式语法

  • function Point(x, y) {
    this.x = x;
    this.y = y;
    }

Point.prototype.toString = function () {
return ‘(’ + this.x + ', ’ + this.y + ‘)’;
};

var p = new Point(1, 2);

• 这种语法与传统的面向对象语言, 例如 C++ JAVA PHP Python 等等… 差异非常大, 很容易让这些程序员感觉困惑

• ES6提供了更接近传统语言的写法, 本质上是一个语法糖, 让传统程序员更容易学习和接受

• class 类名 extends 父类 {
  static 静态属性

  static 静态方法(){}

  constructor(a, b){
  this.a = a
  this.b = b
  }

  对象方法(){
  super.对象方法()
  }

}

- extends是继承的关键词

	- 相当于 类.prototype.__proto__ = 父类.prototype

- static

	- 静态关键词, 相当于   类.属性名 = 值

- constructor

	- 构造方法

- super

	- 代表父类的关键词

- this

	- 代表当前对象的关键词
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19