学习回顾No.3-CSDN博客

本文链接：https://blog.csdn.net/weixin_54365125/article/details/135434199

本文概述了ECMAScript6.0及其后续版本的关键特性，包括变量声明、数据结构（如Set和Map）、迭代器、异步编程工具（如Promise和async/await）、模块系统和新的语法特性。作者详细介绍了let、const、解构赋值、模板字符串等，并讨论了如何避免全局污染和提升问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习回顾No.3

ECMAScript6.0

ES6-let声明变量

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

ES6-const声明变量

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

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-数组扩展

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

ES6-对象扩展

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

ES6-函数扩展

参数默认值 => function ajax(url,method=‘get’,async=true)
rest参数 => 剩余参数，function test(x,y,…data)
name属性
箭头函数：写法简洁 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()

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

ES6-Iterator迭代器

作用有三

为各种数据结构，提供一个统一的、简便的访问接口
使得数据结构的成员能够按某种次序排列
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是对应的

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

ES6-Promise对象

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

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

回调地狱

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

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-新特性

求幂运算符 => Math.pow(3,2) === 3 ** 2 //9
数组的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-其他新增

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

ES11-Promise.allSettled

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

ES11-Module新增

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