- ECMAScript概述
- ECMAScript 是JavaScript的规范,JavaScript是ECMAScript扩展,ECMAScript是语言层面的最基本的语法
- JavaScript实现了ECMAScript 并做了扩展 浏览器中 JavaScript => ECMAScript + BOM + DOM
- 从ECMAScript2015开始以年份命名。2015版本也叫做ES6
- ECMAScript2015概述
- 标准命名规则变化 缩写 ES2015
- 相对比 5.1版本变化大
- 解决原有语法上的问题或不足
- 对原有语法增强
- 全新的对象,全新的方法,全新的功能
- 全新的数据类型和数据结构
- let 与 块级作用域
- 新增块级作用域let(以前 全局作用域和函数作用域)
- 只能在所声明的代码块中生效
- let没有声明提升
- let const 有暂时性死区,只要Let声明,就和当前作用域绑定,不受外部影响
- 新增块级作用域let(以前 全局作用域和函数作用域)
- const
- 只读 变量声明之后不能修改 所以要求声明的时候赋值
- 是不允许重新指向新的内存地址 引用型的 可以修改恒量中的属性成员
- 其它和let相同
- 最佳实践 不用var 主用const 配合let
- 数组的解构
- 根据位置去匹配提取
- 注意解构使用…只能在解构位置的最后使用
- 解构的成员长度大于数组长度,返回undefined
- 可以使用默认值,如果没有提取到,会返回默认值
对象的解构
- 需要根据属性名去匹配提取
- 作用域中有相同的命名会产生冲突 可以通过重命名方法解决
const name = 'tom'
const { name: objName } = obj
objName可以提取到name 不会冲突
模板字符串
- 可以换行
- 插值表达式${}可以嵌入值 不需要复杂的拼接 不仅可以嵌入变量 可以嵌入任何javascript语句 返回值可以嵌入
- 带标签的模板字符串
``javascript const name = 'a' const gender = true function myTagFunc(strings,name,gender){ 可以对模板字符串进行加工 console.log(strings,name,gender) } const result = myTagFunc
hey,${name} is a ${gender}`
1. 字符串的扩展方法
1. startsWith() 是否以xxx开头
1. endsWith() 是否以xxx结尾
1. includes() 是否包含
2. 参数默认值
1. function foo(enable=true)
1. 带有默认值的参数要在最后,参数按照次序传递的
1. 没有传递实参或者参数为Undefined时候才会调用
3. 剩余参数
1. 未知参数的个数在形参未知 加 ... 就会从当前位置开始接受所有参数
1. 只可以出现在最后一位,只可以使用一次
1. 数组
4. ... 展开数组
4. 箭头函数
1. => 定义函数,简化函数的定义
1. 箭头左边参数列表,右边是函数体 函数体只有一句话,可以省略return 使用 { } 需要return
1. 不会改变this的指向,箭头函数外边this指向哪里,箭头函数this指向哪里
6. 对象字面量增强
1. 对象中变量名和属性名一直,就可以省略 :变量名
1. 方法的话 可以省略掉 :funciton 普通函数 this指向当前对象
1. 对象属性名可以使用[] 包括任意表达式
7. Object.assign
1. 依次多个源对象中的属性复制到一个目标对象中,相同的属性会被源对象中的覆盖
1. Object.assign(target,source) 返回的结果和目标属性相等
8. Object.is
1. 判断两个值是否相等 ===运算符 +0 -0 相等 NAN不相等 .is判断可以识别出来
9. Proxy
1. 数据代理器 监视到 对象的变化
1. 相比Object.defineProperty 可以监视更多对象操作 例如 delete,方法调用 ,defineProperty只可以监听属性的读写
1. 更好的支持数组对象的监视 defineProperty实现是重写数组的操作方法
1. 以非侵入的方式监管 一个已经定义好的对象,不需要特殊的操作即可以监听
```javascript
const person = {
name:"zce",
age:20
}
const list = []
//监听list可以直接和对象一样 实际是转化为 下标 对象
const personProxy = new Proxy(person,{ //1.需要代理的目标对象,2.代理的处理对象
get(target,property){ //1.代理的目标对象,2.外部所访问的属性名
console.log(target,property)
return property in target ? target[property] : 'default'
}
set(target,property,value){ // 1.代理的目标对象 2.外部所访问的属性名 3.要设置的值
//可以做一些数据校验
target[property] = value
}
deleteProperty(target,property){
console.log('delete',property)
delete target[property]
}
}
})
- reflect
- 统一操作对象 静态类 不可能通过new使用
- 封装了对象的底层操作
- Reflect成员方法就是Proxy处理对象的默认实现
- 提供了统一的一套操作对象的api //MDN
- Reflect.apply() 与function.prototype.apply 功能类似
- Reflect.construct 对构造函数进行new操作,相当于 new target(…args)
- Reflect.defineProperty
- Reflect.deleteProperty(target,propertyKey) 作为delete操作符 相当于 delete target[name]
- Reflect.get(target,propertyKey[,receiver]) 相当于 target[name]
- Reflect.getOwnPropertyDescriptor(target,propertyKey) 如果对象中存在该属性 返回,否则返回undefined
- Reflect.getPrototypeOf
- Reflect.has(target,propertyKey) 判断一个对象是否存在某个属性 和in 相同
- Reflect.ownKeys(target) 返回一个包含所有自身属性(不包含继承属性)的数组
- Reflect.set(target,propertyKey,value[,receiver]) 将值分配给属性的函数,更新成功返回true
- Relect.setPrototypeOf(target,prorotype) 设置对象原型的函数
- Promise
- 更优的异步解决方案
class
- 定义类的方法结构更清晰 容易理解
- 静态方法 static 直接通过类型本身去调用 this指向当前的类型 不会指向实例
- 实例方法 需要构造的实例对象去调用
- 继承 : extends
class Person{
constructor(name){
this.name = name
}
say(){
console.log(`${this.name}`)
}
}
class Students extends Person{
constructor(name,number){
super(name) //始终指向父类,调用父类的构造函数
this.number = number
}
hello(){
super.say() 同样用super调用父类的方法
console.log(`this.number`)
}
}
set 数据结构
- set内部成员不允许重复。类似于数组 ```javascript const s = new set() //返回集合本身 //可以链式调用 s.add(1).add(2) s.size //长度 s.has()//集合当中是否存在某个值 s.delete() //删除集合当中某个值 返回 布尔 s.clear() //清除集合中全部元素 //数组去重 const arr = [1,1,2,2,3] const result =[…new Set(arr)]
- Map数据结构
- 映射两个任意数据间的映射关系。
- 对象实际上只能使用字符串作为键
```javascript
const m = new Map()
m.set(tom,90)
//has()
//delete()
//clear()
m.forEach(value,key)
- Symbol
- 表示一个独一无二的值,解决冲突
- 为对象添加一个独一无二的私有属性
- Symbol.for(‘foo’) 相同的字符串返回相同的Symbol 传入的不是字符串 会自动转为字符串
- Symbol.toStringTag 字符串设置标识
- Object.getOwnPropertySymbols 获取到 symbol()属性名 ```javascript const cache = {} //a.js cache[‘foo’] = Math.random() //b.js cache[‘foo’] = ‘123’ //此时会造成冲突 扩展第三方模块不知道存在某个键
const s = Symbol() Symbol() === Symbol() //false Symbol(‘foo’) //Symbol(foo) 传入字符串识别这个值
- for of 循环
- 遍历所有数据结构的统一方式
- 遍历数组 拿到每一项 可以随时通过 break 终止循环 遍历set一样
- 伪数组也可以直接遍历
- 遍历Map对象 会返回每一项 键值 的数组 通过解构赋值 直接拿到 for (const [key,value] of oneMap)
- 遍历普通对象时,需要给对象添加上iterator方法
- 内部就是 迭代器 iterator = oneMap[Symbol.iterator]() iterator.next()
- 可迭代接口
- iterable 接口 实现iterable接口是for of前提
- 实现iterable 必须要去挂载一个 iterator 迭代器方法
- 这个方法返回 next 不断调用这个对象可以得到遍历
- 迭代器模式
- 外部不需要考虑对象内部的数据结构。直接调用for of
```javascript
// 协同开发一个任务清单
const todos = {
life: ["吃饭", "睡觉", "打豆豆"],
learn: ["语文", "数学", "外语"],
each: function (callback) {
const all = [].concat(this.life, this.learn)
for (const item of all) {
callback(item)
}
},
[Symbol.iterator]: function () {
const all = [...this.life, ...this.learn]
let index = 0
return {
next: function () {
return {
value: all[index],
done: index++ >= all.length,
}
},
}
//用生成器方法 因为生成器本身实现了 可迭代
[Symbol.iterator]: function () {
const all = [...this.life, ...this.learn]
[Symbol.iterator]: function * () {
const all = [...this.life, ...this.learn]
for (const item of all){
yield item
}
},
},
}
for(const item of todos){
console.log(item)
}
- 生成器
- 解决异步代码回调地狱
- Modules
- 语言层次的模块化标准
- ES2016
- includes 检测某个数组当中是否存在某个元素
- indexOf不能判断是否有NAN
- 返回布尔 arr.includes()
- 指数运算符
- 基数 指数 例如 2 10**
- includes 检测某个数组当中是否存在某个元素
- ES2017
- object对象的三个方法
- Object.values() 返回所有值组成的数组
- Object.entries(obj) 返回所有键值对数组的数组 可以用for of遍历了
- Object.getOwnPropertyDescriptors 可以获取到对象所有的描述 配合get set 在使用assign可以复制整个对象
- String
- String.prototype.padStart /padEnd
- 用给定的字符串去填充指定位置 直到指定长度
- String.prototype.padStart /padEnd
- 在参数尾数中添加尾逗号
- Async/Await
- object对象的三个方法