学习回顾No.3

学习回顾No.3

---

ECMAScript6.0

ES6-let声明变量

1. 块级作用域（避免暴露，污染全局作用域）
2. 不允许重复声明
3. 没有变量提升（暂存性死区）
4. 不与顶层对象挂钩

ES6-const声明变量

1. 常量。不能先定义后赋值，可以定义为对象，不可以修改对象，但可以修改对象属性
2. 不能重复定义
3. 块级作用域
4. 声明不提升（暂存性死区）
5. 不与顶层对象挂钩

ES6-变量解构赋值

• 解构赋值，就是快速的从对象或数组中取出成员的一个语法方式
• let [x=1] = [100] => 默认值为1，取到改为100
• let {x,y} = obj => 取对象属性

ES6-模板字符串

• let s =
• ${三元表达式、变量}

ES6-字符串与数值扩展

• includes函数 => 判断字符串中是否存在指定字符
• repeat函数 => 返回一个新字符串，表示将原字符串重复n次
• 二进制八进制写法 => 100(十) 0x100(十六) 0b100(二) 0o100(八)
• Number.isFinite()、Number.isNaN()、Number.isInteger() 减少全局性方法，使语言模块化
• 极小常量Number.EPSILON => 它表示1与大于1的浮点数之间的差
• Math.trunc() => 将小数部分抹掉，返回一个整数
• Math.sign() => 用来判断一个数到底是正数、负数还是零 非数值=>数值

ES6-数组扩展

1. 扩展运算符 => […arr1, …arr2]
2. Array.from => 将类数组对象转换为真正数组
3. Array.of => 将一组值转化为数组，即新建数组
4. find()、findIndex() findLast(),findLastIndex() => ES2022
5. fill()、flat()、flatMap() => 扁平化处理

ES6-对象扩展

1. 对象简写
2. 对象属性，表达式
3. 扩展运算符…ES2018
4. Object.assign(obj, obj1, obj2, obj3)
5. Object.is() => 跟===相似，但可以判断两个NaN为true +0,-0为false

ES6-函数扩展

1. 参数默认值 => function ajax(url,method=‘get’,async=true)
2. rest参数 => 剩余参数，function test(x,y,…data)
3. name属性
4. 箭头函数：写法简洁 let test=()=>{}

• 只有return 可以省略 let test=() => ‘1111’
• 如果返回对象需要注意 let test=() => ({name: “xiaozhang”,age:20})
• 如果只有一个参数，可以省略小括号 let newarr = arr.map(item=>``
• ${item}
• )
• 无法访问arguments，无法new
• 箭头没有this，this指向父作用域

ES6-Symbol

• 表示独一无二的值 let s1 = Symbol()

1. 不能进行运算
2. 显示调用toString()
3. 隐式转换boolean
4. 不能用for in 要用Object.getOwnPropertySymbols(obj)获取obj中Symbol() 用Reflect.ownKeys(obj)获取普通属性和Symbols()，返回数组
5. 作为常量 const VIDEO = Symbol()

ES6-Iterator迭代器

• 作用有三

1. 为各种数据结构，提供一个统一的、简便的访问接口
2. 使得数据结构的成员能够按某种次序排列
3. ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of循环

• 默认接口部署在数据结构的Symbol.iterator属性，只要具有这属性，就认为是可遍历的，属性本身是一个函数，执行这个函数，就会返回一个遍历器
• 原生默认具备Iterator接口的数据结构：Array、Set、Map、String、arguments对象、NodeList对象
• …解构赋值 …展开 => 默认使用迭代器

ES6-Set数据结构

• 它类似于数组，但成员的值都是唯一的，没有重复的值
• set实例属性和方法：s1.size、s1.add()、s1.has()、s1.delete()、s1.clear() 都在Set.prototype定义
• Set.keys()、Set.values()、Set.entries()、Set.forEach()
• 键名也是键值

ES6-Map数据结构

• 类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以作键
• Map实例属性和方法
• Map.size、Map.set(key,value)、Map.get(key)、Map.delete(key)、Map.has(key)、Map.clear()
• Map.keys()、Map.values()、Map.entries()、Map.forEach()

ES6-Proxy代理

• 它的作用是在对象和对象的属性值之间设置一个代理，获取该对象的值或者设置该对象的值
• 以及实例化等多种操作，都会被拦截住，经过这一层我们可以统一处理，可以认为它是“代理器”
• Object.defineProperty(obj,“data”,{get(){}, set(value){}}) => 缺点：只能拦截对象和一个属性
• Vue3 => new Proxy(obj, {get(){}, set(){}})
• Proxy本质上属于元编程非破坏性数据劫持，在原对象的基础上进行了功能的衍生而又不影响原对象，符合松耦合高内聚的设计理念

ES6-Reflect

• 可以用于获取目标对象的行为，它与object类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与Proxy是对应的

1. 代替Object的某些方法 Reflect.defineProperty(obj, ‘name’, {})
2. 修改某些Object方法返回结果
3. 命令式变为函数行为 Reflect.has(obj, ‘name’) Reflect.deleteProperty(obj, ‘name’)
4. 配合Proxy

ES6-Promise对象

• Promise是异步编程的一种解决方案，比传统的解决方案回调函数，更合理和更强大
• ES6将其写进语言标准统一了用法，原生提供了Promise对象

1. 指定回调函数方式更灵活易懂
2. 解决异步回调地狱的问题

• 回调地狱

1. 当一个回调函数嵌套一个回调函数时
2. 就会出现一个嵌套结构
3. 当嵌套的多了就会出现回调地狱

ES6-Generator函数

• Generator函数是ES6提供的一种异步编程解决方案
• 是一个状态机，封装了多个内部状态
• 执行函数会返回一个遍历器对象，除了是状态机，还是一个遍历器对象生成函数
• 返回的遍历器对象，可依次遍历Generator函数内部的每一个状态

ES6-Module语法

ES6-NodeJs中的模块化

• JS现在有两种模块，一种是ES6模块，简称ESM，另一种是CommonJS模块，简称CJS
• CommonJS模块是Node.js专用的，与ES6模块不兼容
• 语法上，最明显差异是CommonJS模块使用require()和module.exports，ES6模块使用import和export

ES7-新特性

1. 求幂运算符 => Math.pow(3,2) === 3 ** 2 //9
2. 数组的includes方法 => [1,2,NaN].includes(NaN) //true [1,2,NaN].indexOf(NaN) //-1 若查找数据是否存在，用includes，查找索引位置，用indexOf

ES8-async和await

• 在Promise中

ES8-对象方法扩展

• Object.values(obj) => 取值
• Object.keys(obj) => 取键
• Object.entries(obj) => 实体
• Object.defineProperties(obj1,Object.getOwnPropertyDescriptors(obj)) => 克隆对象

ES8-字符串填充

• str.padStart(10,‘t’) //strttttttt
• str.padEnd(10,‘x’) //xxxxxxxstr
• 第一个参数为规定长度，第二个为填充数
• 函数参数的末尾加逗号
• function test(a,b,c,){} test(1,2,3,)
• 《末尾逗号》在添加新的参数、属性、元素时是有用的，你可以直接新加一行而不必给上一行再补充一个逗号，这样使版本控制工具的修改记录也更加整洁

ES9-rest与扩展运算符

• 对象的剩余参数与扩展运算符
• let {name, …other} = obj
• 浅复制 let obj6 = {…obj5}

ES9-正则扩展

• 正则表达式命名捕获组
• ES9允许使用命名捕获?，在打开捕获括号后立即命名
• let reg = /(?[0-9]{4})-(?[0-9]{2})-(?[0-9]{2})/
• let res = reg.exec(str)
• let {year,month,day} = res.groups

ES9-Promise.finally

• 无论成功还是失败，都运行同样代码，比如隐藏对话框，关闭数据连接
• .finally()

ES9-异步迭代

• Generator函数返回一个同步遍历器，异步Generator函数的作用，是返回一个异步遍历器对象
• 在语法上，异步Generator函数就是async函数与Generator函数结合

ES10-Object.fromEntries

• 此方法允许你轻松地将键值对列表转换为对象
• let arr = [[“name”,“xiaozhang”],[“age”,21]]
• Object.fromEntries(arr) //{name:‘xiaozhang’,age:21}

ES10-trimStart与trimEnd

• trimStart()和trimEnd()方法在实现上与trimLeft()和trimRight()相同

ES10-其他新增

1. 数组的flat、flatMap arr.flat()
2. Symbol对象 description属性
3. try{} catch(e){} 其中e可省略

ES11-Promise.allSettled

• 此方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果

ES11-Module新增

1. 动态导入import() 标准用法导入是静态的，会使模块在加载时就被编译（无法做到按需编译，降低首页加载速度） import(“./1.js”) //返回值Promise对象
2. import.meta 会返回一个对象，有一个url属性，返回当前模块的url路径，只能在模块内部使用
3. export * as obj from ‘module’ 在自己模块中导出别的模块以及自己的方法属性

ES11-String的matchAll方法

• 返回一个包含所有匹配正则表达式的结果的迭代器，可用for…of遍历，或用(…)或Array.from转换为数组
• str.matchAll(reg)

ES11-BigInt

• js能准确表示的整数范围在-2^53~253之间（开区间），超出则无法精确表示，使得js不适合进行科学和金融方面精确计算
• 为了与Number区别，BigInt类型数据必须添加后缀n
• 1234 123n 1n+2n //3n

ES11-顶层对象globalThis

• globalThis提供了一个标准的方式来获取不同环境下的全局this对象
• 它确保在有无窗口的各种环境下正常工作
• 便于记忆，记住全局作用域中的this就是globalThis

ES11-空值合并运算符

• ??是一个逻辑运算符，当左侧为null或undefined时，返回右侧操作数，否则返回左侧
• ??和||的区别
• ??左侧为’'或0时，依然返回左侧的值
• ||左侧会进行boolean类型转换，所以""和0都会转换成false，返回右侧的值
• ??可用于个人签名部分实现

ES11-可选链操作符

• 可选链前面的值如果是null或undefined，则不再执行后面的，直接返回前面的值
• obj?.location?.city = obj&&obj.location&&obj.city

ES12-逻辑赋值操作符

• ??= , &&= , ||=
• a ??= b => a = a ?? b
• a &&= b => a = a && b
• a ||= b => a = a || b

ES12-数字分隔符

• 为了方便程序员看代码，分隔符不仅可以分隔十进制，也可用于二进制或十六进制的数据
• 用_下划线分隔
• let num = 123_456_789 //十进制
• let num1 = 0b0010_0101 //二进制
• let num2 = 0o1111_0101 //八进制
• let num3 = 0xa1_b2_c3 //十六进制

ES12-字符串的replaceAll方法

• 所有匹配都会被替代项替换，模式可以是字符串或正则表达式，而替换项可以是字符串或针对每次匹配执行的函数，并返回一个全新的字符串
• str.replaceAll(“i”,“xiaozhang”)

ES12-Promise.any

• 只要有一个实例为fulfill状态，就为fulfill状态，全为rejected状态，才为rejected状态
• 传入一个数组，传出一个Promise对象

ES12-FinalizationRegistry

• 清理器注册表功能，用来指定目标对象被垃圾回收机制清除以后，所要执行的回调函数
• 新建一个注册表实例
• const registry = new FinalizationRegistry(data=>{})
• registry.register(obj,“some value”)
• registry.unregister(obj)

ES12-WeakRefs

• 一般情况下，对象的引用是强引用的，意味着只要持有对象的引用，它就不会被垃圾回收
• 只有当对象没有任何的强引用时，垃圾回收才会销毁该对象并且回收该对象所占内存空间
• 而WeakRef允许您保留对另一个对象的引用，而不会阻止弱引用对象被垃圾回收
• let target = {}
• let wr = new WeakRef(target)
• WeakRef实例对象有一个deref方法，如果原始对象存在，返回该对象，如果原始对象已经被垃圾回收机制清除，返回undefined
• let obj = wr.deref()
• if(obj){//target 未被垃圾回收机制清除
• ​ //…
• }
• //WeakSet:1.只能复杂类型 2.不存在引用计数+1 3.size,for不能用
• 弱引用，跟着引用对象消失

ES13-类新增特性

• 用#代表私有属性 = private

1. 私有属性或方法
2. 静态成员的私有属性和方法
3. 静态代码块 这些代码块只会在类被创造的时候执行一次

ES13-最外层的await

• 顶层await只能用在ES6模块，不能用在CommonJS模块，因为require()是同步加载，如果有顶层await，就无法处理加载了
• 配合动态导入使用

ES13-at函数

• 索引元素
• arr[1] => arr.at(1)
• arr[arr,length-1] => arr.at(-1)

ES13-正则匹配的开始和结束索引

• let reg = /…/d
• 多了一个indices 存放各组索引值

ES13-其他新增特性

• findLast() 和 findLastIndex()
• Error对象的Cause属性
• 来指明错误出现的原因，可以帮助我们为错误添加更多的上下文信息，更好定位错误