学习回顾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 = <li><b>${三元表达式、变量}</b></li>

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,)
• 《末尾逗号》在添加新的参数、属性、元素时是有用的，你可以直接新加一行而不必给上一行再补充一个逗号，这样使版本控制工具的修改记录也更加整洁