当前位置：首页 > news >正文

js的es6

news 来源：原创 2024/5/16 15:16:55

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 二选一,  只能触发其中一个,  触发之后另一个无法触发

三种状态
- 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

	- 代表当前对象的关键词