ES6
1、let：声明变量
1.1、块级作用域 { }，只在所处块级有效，var不具备此属性，可用于循环变量变成块级，循环结束消除
1.2、没有变量提升，必须先声明，再使用。
1.3、暂时性死区
var tmp = 123； if(true){ tmp = 'abc'; //未定义，与var的tmp无关 let tmp; }
let arr = []; for (let i = 0; i < 2; i++) { arr[i] = function () { console.log(i); //i在多个块级块级内，赋值给arr，每个块级变量不同 } } arr[0](); //函数输出自己上一级（此处为循环体内块级）作用域下的i值 arr[1]();
2、const：声明常量，即值（内存地址）不能变化的量
2.1：块级作用域；灵活展开可以思索到在块级内如果还包含块级，内部块级可以重新定义赋值const，因为只在本块级有效
const MY_FAV = 7; if (MY_FAV === 7) { // 没问题，并且创建了一个块作用域变量 MY_FAV const MY_FAV = 20; // MY_FAV 现在为 20 // MY_FAV = 10; //同块级不能重新赋值 console.log('my favorite number is ' + MY_FAV); // 这被提升到全局上下文并引发错误 // var MY_FAV = 20; } // MY_FAV 依旧为7 console.log('my favorite number is ' + MY_FAV);
2.2：声明必须赋值；
2.3：赋值后不能修改值，即内存地址不可更改，不能重新声明，但是可以修改对象的属性内容
const arry = [100, 200]; arry[0] = 'a'; arry[1] = 'b'; console.log(arry); //输出ab，数组为对象，可以修改其内容，但是不能重新赋值，改变地址 arry = ['a', 'b']; //报错
3、解构赋值
3.1：数组解构
let arry = [1,2,3]; let [a,b,c] = arry; //a,b,c分别解构了arry内的值
3.2：对象解构
let goods = {id : 1, name: jacky};
let {id, name} = goods; //a,b,c分别解构了arry内的属性
let {id:uid, name:uname} =goods; //该种方法uid和uname为变量，log打印使用该名字，id和name用于属性匹配，只匹配匹配成功的值
4、箭头函数：简化函数定义 ()=>{ }
一般将箭头函数赋值给变量，变量名为函数名，像匿名函数
4.1：函数只有一句代码，且执行结果为返回值，可以省略大括号
const fn = (a,b) => a+b;
4.2：如果只有一个参数，小括号也可以省略
const fn = v => v
4.3：箭头函数this指的是函数定义位置作用域的this，没有自己的this
var obj = { name:20, say:()=>{ console.log(this.name); //obj为对象，对象的大括号没有块级作用域，所以obj的this指向window，所以箭头函数this也指向window，window中没有name } } obj.say();
4.4：剩余参数：将一个不定数量的参数放到数组中 ...args省略号不能省略，代表一个数组
const sum = (first, ...args) => { console.log(first); let totle = 0; args.forEach(value => { totle += value; }) return totle; } console.log(sum(1, 2, 3));
解构也可使用 ...arge，将多余的内容放在一个数组中
5、Array扩展方法
5.1：扩展运算符rest参数： ... 拆分（以逗号分割），合并，伪数组转真数组
- 当用在函数定义时的形参前面时,称为rest参数,当函数调用时,用于接收不确定的参数.
- 当与解构赋值组合使用时,称为rest参数,用于接收剩余的值,存储在数组中.
- 当用在字符串或数组前面时称为扩展运算符,将数组或字符串进行拆解.
let ary = [1,2,3]; ...ary; // 拆分成1，2，3 console. log (...ary) ; // 1 2 3
ary3 = [...ary1, ...ary2];
ary1.push(...ary2);
let oDivs = document.getElementsByTagName ( 'div ' ) ;
..oDivs //拆分成单个
oDivs = [. ..oDivs] ; //转换成真数组
5.2：构造函数方法Array.from()转成数组
let arr2 = Array.from(arrayLike); // [ 'a', 'b','c']
5.3：find()方法找出第一个符合条件的数组成员，若无则返回undefined
var target = array.find((item, index) => item.index === 2)
5.4：findIndex()找出第一个符合条件的数组成员位置，没有返回 -1
5.5：includes()数组是否包含给定值，返回布尔
6、String扩展方法
6.1：模版字符串，创建字符串方式，反引号定义
${ } 模版字符串可以解析变量，换行，调用函数
let name = `jacky`; let p = '我的名字是' + name; //传统 let p = `我的名字是${name}`; //模版字符串
6.2：startsWith()和endsWith()
判断参数字符串是否在原字符串头部 / 尾部，返回布尔值；
6.3：repeat()重复字符串，填写次数，返回新字符串
7、数据结构Set，类似数组，但是成员唯一，没有重复值
const s1 = new Set(['a','b','a']); //只有一个a
数据结构常用实例方法：add()、delete()、has()判断是否存在，返回布尔、clear()、forEach()等，也可使用扩展运算符
8、数据结构Map，类似对象，键值对，键不限于字符串。其实现了迭代接口也可以使用for...of和扩展运算符遍历
let m = new Map(); m.set('name','jacky'); m.set('change',function(){ console.log(1); })
常用属性方法：size、set、get、delete、has、clear
9、原始数据类型Symbol，独一无二的值，类似字符串，一般用来给对象创建独一无二的方法。
let s1 = Symbol(); //方法一，这样创建的多个symbol不同 let s2 = Symbol.for(); //方法二，这样创建的多个symbol相同
不能与其他数据运算，且不能用for...in遍历，可以用reflect.ownKeys获取所有键名
9.1：给对象添加方法时，如果不确定对象是否有该方法，使用symbol可以安全的添加方法
let game = { id: 1, up: function () { console.log(1); } }; let methods = { up: Symbol() }; game[methods.up] = function(){ console.log(2); } console.log(game); //最后会发现有两个up，一个直属game，一个在symbol内，防止冲突
9.2：symbol内置属性
.hasInstance、.isConcatSpreadable、.unscopables、.replace、.search等
10、迭代器iterator 与 for...of
for...of遍历：Array、Arguments、Set、Map、String、TypedArray、NodeList
11、生成器generator：异步编程解决方案，就是一个特殊的函数
function * gen(){ console.log(11); //并不直接执行 yield 'jacky'; //yield是函数代码分隔符,这有两块代码 yield 'Jackey'; } let gener = gen(); gener.next(); //内有迭代器属性，方法必须通过next调用,调用后，非yield行才执行 gener.next();
//如，先1秒后输出1，2秒后再输出2 //传统异步是回调函数套回调，一个是阅读不方便，一个维护不方便 setTimeout(() => { console.log(1); setTimeout(() => console.log(2), 2000) //如果还需要，还得往下继续套娃 }, 1000) //生成器异步 function one() { setTimeout(() => { console.log(1); iter.next(); //将next放置与timeout内，自动异步 }, 1000); } function two() { setTimeout(() => { console.log(2); iter.next(); }, 2000); } function* gen() { let o = yield one(); //将返回值赋值，之后对其操作，如商品打印 yield two(); } let iter = gen(); iter.next(); //第一次next
以上的异步适用于多个场景，比如用户数据，再到订单数据，再到商品数据
12、Promise
一个构造函数，用来封装异步操作并获取其成功或者失败的结果
const p = new Promise(function (reslove, reject) { setTimeout(function () { let data = '数据'; //先网络请求，此行看为网络请求 reslove(data); //resolve成功，状态返回p成功，并将data传于then 状态判断到此结束，不会再往下写接下来的操作，防止回调地狱 let err = '失败'; reject(err); //reject失败，状态返回p失败 }, 1000) }).then.... //请求成功后执行。下接p2
//调用promise的then方法 let p2 = p.then(function (value) { //p2为状态,如果return非promise，则返回return值，如果不写return则返回undefined，但是总会返回状态 console.log(value); //如果成功，会调用此函数，其实这还是个reslove函数，对p.then依然可以进行判断，不让其再往下做操作，重新开辟p.then
return promise 或者 非promise //如果非promise，并且写了返回，则返回其值，如果没写，则返回undefined，但是状态依旧为成功。如果为promise，则需要根据其状态返回成功或失败 }, function (reason) { console.error(reason);//如果失败，调用此函数 })
catch：失败回调
all：多个promise响应后再执行。有失败，返回第一个失败的结果
Promise.all([promise1, promise2, promise3]).then(function(values) { console.log(values); });
13、Class类：ES6的Class是ES5的语法糖（为了更好的面向对象，详细的看JS高级）
getter（一般对动态属性封装，如计算）、setter（因为要传递至少一个参数，一般做判断）
14、ES6模块化（export暴露、import引入）script type = 'module' 兼容性问题，其他浏览器需要bable转成ES5
分别暴露：在每段要暴露的代码前加export
统一暴露：export{name1, name2...};
默认暴露：export default{ }
通用引入：import * as 别名 from 暴露包;
解构赋值引入：import {name1,name2 ...} from 暴露包，若有名称相同，可用as起别名
简便形式：只针对默认暴露，import 名 from 暴露包
15、ES8的async与await（axios）
15.1：async返回值是promise状态。如果async的return为一个promise对象，则返回结果根据该promise结果返回；若不为，则返回resolve；throw异常则为reject，其实可以理解成promise的语法糖
async function fn() { return new Promise((resolve, reject) => { resolve('成功的数据'); }); } console.log(fn().then);
15.2：await
1. await必须写在async函数中
2. await右侧的表达式一般为promise对象
3. await返回的是promise成功的值
4. await的 promise 失败了，就会抛出异常，需要通过try...catch捕获处理
//创建一个Promise const p = new Promise((resolve, reject) => { // resolve('成功'); reject('失败'); }) async function fn() { try { let result = await p; console.log(result); } catch(e){ console.log(e); } } fn();
16、对象扩展
Object.value获取所有值、Object.entries返回数组，方便创建map、Object.getOwnPropertyDescriptors返回对象属性的描述对象
ES9中新增rest对对象的支持
//对象合并 const skillOne = { q: '天音波' } const skillTwo = { w: '金钟罩' } const skillThree = { e: '天雷破' } const skillFour = { r: '猛龙摆尾' } const mangseng = {...skillOne, ...skillTwo, ...skillThree, ...skillFour};
17、正则扩展
17.1：命名捕获分组
17.2：正 / 反向断言
17.3：dotAll
18、ES10
18.1：对象扩展方法Object.fromEntries
18.2：字符串扩展方法trimStart和trimEnd
18.3：数组扩展方法flat和flatMap
19、ES11
19.1：私有属性：# + 属性，只能在内部输出
19.2：Promise.allSettled，返回状态始终成功，值为各个promise的值的集合
19.3：Promise.all 阻塞运行，一个为失败则失败
19.4：字符串扩展matchAll（用于正则快速匹配提取）
19.5：可选链操作符，语法糖，节省代码
19.6：动态import
19.7：BigInt
19.8：绝对全局对象globalThis
扩展：
20、增强写法：
对象增强写法：
//ES5 const name = "zzz"; const age = 18; const user = { name:name, age:age } console.log(user); //ES6 const name = "zzz"; const age = 18; const user = { name,age } console.log(user);
函数增强写法：
//ES5 const obj = { run:function(){ console.log("奔跑"); } } //ES6 const obj = { run(){ console.log("奔跑"); } }
浙公网安备 33010602011771号