ES6~ES13

Posted 2023-03-26 转角90

新ECMA代码执行描述

• 词法环境：一种规范类型，用于在词法嵌套结构中定义关联的变量、函数等标识符
  • 环境记录
    • 声明式环境记录
    • 对象式环境记录
  • 外部词法环境 Outer

LexicalEnvironment和VariableEnvironment区别
LexicalEnvironment用于处理let/const声明的标识符
VariableEnvironment用于处理var 和 function声明的标识符

let VS const

let 在使用上和var一样，不同的是变量无法提升，存在暂时性死区，无法在定义前访问

const 定义一个常量，一旦定义无法被修改，如果是引用类型，可以通过引用找到对应的对象，修改对象的内容

let 和 const 
1. 不允许重复声明变量，并且都存在暂时性死区，在未定以前无法访问。
2. 不会添加到window上
3. 和位置无关，与执行顺序有关
4. 有块级作用域，块级作用域中定义的函数，可以被外界访问，只能在之后访问

模板字符串

/*
使用一：`内容$var`
使用一：调用函数：fn(参数)  fn`参数$name` 标签模板字符串
*/

function foo(...args)console.log(args)

foo`aaa $name bbb $age`  

/*
[
    [
        "aaa ",
        " bbb ",
        ""
    ],
    "ss",
    22
]
*/

函数增强

形参

// 默认参数：不会对null做判断
function foo (name=\'hyf\',age=18) 
    console.log(name,age)

foo()  // hyf 18
foo(\'myl\',19)  // myl 19

// ES6新增语法  ?? : 判断是否是undefined和null， 
function foo (name,age=18) 
    let _name = name ?? \'hyf\' // 相当于 let _name = (name === null || name === undefined)?\'hyf\':name
    console.log(_name)

/*
1. 默认参数形参尽量写到后面
2. 剩余参数形参尽量写到最后
3. 剩余参数形参不会被length计算
*/

// 与解构一起使用
function foo (name,age = name:\'hyf\',age:18) 
    console.log(name,age)


function foo (name=\'mr\',age=11 = ) 
    console.log(name,age)

箭头函数

• 箭头函数没有显示原型：let foo = () => ; console.log(foo.prototype) // undefined
• 箭头函数不绑定this,arguments,super参数

展开运算符

let name = [1,2,3,4]
let str = \'abcd\'
let obj = 
    name:\'hf\',
    age:18,
    

console.log(...name)
console.log(...str)
console.log(...obj) // 无法对不是可迭代对象进行处理

let obj2 = 
    ...obj, // 构建对象字面时可以使用展开运算符
    addr:\'ddd\'

console.log(obj2)

展开运算符是一种浅拷贝：

深拷贝：引用拷贝

浅拷贝：值拷贝

数值的表示

进制表示

二进制：0b
八进制：0o
十六进制：0x

长数字表示

// ES12新增: 使用 _ 进行分割
const money = 1000_0000_0000_0000

Symbol的使用

// 解决变量冲突，变量名独一无二，
const s1 = Symbol()
const obj = 
    [s1]:\'aaa\'


// 描述 ES10
const s2 = Symbol(\'描述\')
console.log(s2.description)

// 获取Symbol对应的key
Object.getOwnPropertySymbols(obj)

// 相同的Symbol
const s3 = Symbol.for(s2.description)
console.log(s3 === s2) // false
const s4 = Symbol.for(s2.description)
console.log(s3 === s4)

// 获取key
Symbol.keyFor(s3)  // \'描述\'

Set的使用

// 里面的元素不能重复
let _set = new Set()

// 添加元素
_set.add(11)
_set.add(10)
_set.add(11)
_set.add(12)
_set.add(12)
_set.add(12)
let obj1 = 
let obj2 = 
_set.add(obj1)
_set.add(obj2)

// 应用场景： 数组的去重

常见属性

• size: 获取Set中元素的个数

常见方法

• add(value)
• delete(value)
• has(value)
• clear()
• forEach(callback,)

WeakSet的使用

弱引用：GC在计数时不会计算在内
1. WeakSet只能存放对象类型
2. 对对像的引用都是弱引用
3. 不可遍历

const weakSet = new WeakSet()
weakSet.add(obj1)
weakSet.add(obj2)
weakSet.add(obj3)
weakSet.delete(obj3)
weakSet.has(obj3) // false

Map的使用

// 可以将对象作为key
const info = name:\'asdf\'
const info2 = age:10

const map = new Map()
map.set(info,99)
map.set(info2,88)
console.log(map)

常见属性

• size: 获取Map中元素的个数

常见方法

• set(key,value)
• get(key)
• delete(key)
• has(key)
• clear()
• forEach(callback,)

WeakMap

1. WeakMap中的key只能是对象
2. 不可遍历

• set(key,value)
• get(key)
• delete(key)
• has(key)

ES7

Array includes

arr.includes(item1) // true/false

指数运算符

3**3 相当于 pow(3,3)

ES8

对象相关的属性

// 1. 获取所有的keys
const keys = Object.keys(obj)

// 2. 获取所有的value
const values = Object.values(obj)

// 3. 获取一个数组，可枚举属性key,value
const items = Object.entries(obj)
for (let [key,val] of items) 
    console.log(key,val)

字符串填充

let str = \'123\'

str = str.padEnd(4,\'p\')  // 123p

str = str.padStart(6,\'0\') // 00123p

Trailing Commas 尾部逗号

function foo(item,item2,)

Object Descriptors

ES9

• Promise finally

ES10

flat flatMap

flat会按照一定的深度进行递归遍历，将遍历到的元素和子数组中的元素组成一个新的数组，进行返回，拉平

let arr = [1,2,3,[34,5,6,7,[9,88,90]]]
let arr1 = arr.flat(1)  // 默认拉平1层， Infinity表示无限拉平

// flatMap
let mes = [\'hello hyf\',\'aaa bbb\']
let newMes = mes.flatMap((item)=>
    return item.split(\' \')
)
console.log(newMes)

Object.fromEntries

let obj = 
    name:123,
    age:1234

let entries = Object.entries(obj)

let obj1 = Object.fromEntries(obj)

// 应用场景
let url = new URLSearchParams(\'name="hyf"&age=12\')
let urlObj = Object.fromEntries(url)

去除空格

• str.trimStart()
• str.trimEnd()

ES11

BigInt

9007199254740991n+100n 一定正确

?? 空值合并

var name = name1 ?? \'默认值\'  // 当name1为null或undefined时使用默认值

可选链

/*
?.
*/
obj?.frind?.running?.()

Global This

通过globalThis获取全局对象

for...in标准化

对for...in 遍历对象进行标准化，遍历的是key

allSettled(ES11)

ES12

FinalizationRegistry

/*
当一个在注册表中注册的对象被回收时，请求在某个时间点调用一个清理回调finalizer
通过register进行注册
*/

let obj = name:\'hyf\',age:18
const finalRegistry = new FinalizationRegistry(()=>
    console.log(\'回收了\')
)
finalRegistry.register(obj)

obj = null // 回收了 

WeakRefs

let obj = new WeakRef(o)  // 弱引用
obj.deref().name

逻辑赋值运算符

let message ||= \'默认值\'  // message=message || \'默认值\'

let ms ??= \'默认值\'   // ms = ms ?? \'默认值\'

obj && obj.running && obj.running()

let obj = obj && obj.name  // obj为undefined时 赋值给obj
let obj1 &&= obj1.name

ES13

方法

at()

Object.hasOwn(obj,propKey)

• 防止对象中有自己的hasOwnProperty方法
• 更广泛

class中的新成员

class Person
    height = 1.88  // 公共实例字段
    #intro = \'this is private\'  // 私有属性
    static total = 30  // 类属性
    
    constructor(name,age)
        this.name = name
        this.age = age
    
    log()
        console.log(this.height,this.#intro)
    
    
    // 静态代码块
    static 
        console.log(this.height,this.#intro,total)
    

let p = new Person(\'hyf\',18)
console.log(p.name,p.height,p.age)

总结：

• 公共实例属性
• 私有属性
• 类属性 static
• 静态代码块