wsjls-zw：14、ES6、ESNext规范
ES6 ES2015是主要的版本
ES2018 增加了rest和spread语法
ES2020 第11版
ES的下一个版本是ESnext
## ES6及以后新增常用API
#### let const
for (var i=0;i<=3;i++) {
setTimeout(function(){
console.log(i)
},10)
}原因：
1、var 全局变量，只有一个i
2、setTimeout，下一轮事件循环的时候执行，i=4;console.log(4)
for (let i=0;i<=3;i++) {
setTimeout(function(){
console.log(i)
},10)
}1、let 引入了块级作用域概念，创建setTimeout的时候，变量i只在作用域内生效。对于循环的每一次，引用的i都是不同的
for (let i=0;i<=3;i++) {
(function(i){
setTimeout(function(){
console.log(i)
},10)
})(i)
}2、变量提升问题
console.log(i)
var i = 1;
// let i = 1; // 报错3、const 常量
const i = 1;
// i=2 // 报错#### 箭头函数
1、箭头函数的this是在什么位置定义决定的，普通函数的this是在使用的时候决定的
const obj = {
name: "123",
getName1: () => {
return this.name // window.name
},
getName2: function() {
return this.name // obj.name
}
}2、简写
const arrow = (value) => Number(value)相当于
const arrow = function(value) {
return Number(value)
}const arrow = (value) => ({}) // 返回对象
3、箭头函数不能被用作构造函数
构造函数：改变this指向，指向新实例。
箭头函数：this是在定义的时候决定的。
#### class
class Test {
_name = '';
constructor(name) {
this.name = name
}
static getF() {
return `$(this.name)123123`
}
get name(val) {
return `${this._name} - 加一层包装`;
}
set name() {
console.log("检测到了name的赋值操作");
this._name = val;
}
}
const instance = new Test('ww') // 实例属性
console.log(instance.name)
console.log(Test.getF()) // 静态属性 #### 模板字符串
const a = '111\n222'
const b = `111
222`render函数实现template的功能
const year = "2022";
const month = "10";
const day = "01";
const template = '${year}-${month}-${day}'
const context = {year, month, day}
const str = render(template)(context)
console.log(str) // 2020-10-01
function render(template) {
return function(context) {
return template.replace(/\$\{(.*?)\}/g, (match, key) => context[key]);
}
}#### 解构
1、数组 // 找索引
let arr = [1,2,3]
let [a,b,c] = [1,2,3]
let [a,b,c] = [{
name:'1'
},{
name:'2'
}]
console.log(a.name,b.name)2、对象 // 找值
const {a1, a2} = {a1:"123", a2: "456"}
console.log(a1, a2)3、解构的原理
针对可迭代对象Iterator，通过遍历按照顺序获取对应的值进行赋值
3.1 Iterator 是什么
Iterator是一种接口，interface，为各种不一样的数据解构提供统一的访问机制
任何数据解构只要有Iterator接口
for of，相当于一个遍历器，遍历数据的时候，去寻找Iterator
const obj = {name: "123"}
for(n of obj){console.log(n)} // 报错：VM146:2 Uncaught TypeError: obj is not iterable对象里没有 iterable
3.2 Iterator 有什么用呢
###### 为各种不同的数据解构提供统一的访问接口
###### 数据解构按照顺序处理
###### for of 可以进行遍历
let nextIndex = 0;
function generateIterator(array) {
return {
next: () => nextIndex < array.length ? {
value: array[next++],
done: false
} : {
value: undefined,
done: true
}>
}
}
const iterator = generateIterator([1,2,3])
console.log(iterator.next())
console.log(iterator.next())value done
3.3 可迭代对象是什么
是Iterator接口的实现
可迭代对象存在两种协议，可迭代协议，迭代协议
可迭代协议：对象必须实现iterator方法，对象或者原型链上必须有一个Symbol.iterator:()=>迭代器协议
迭代器协议：必须实现一个next方法，next方法返回的对象done value
const obj = {
count: 0,
[Symbol.iterator]: () => {
return {
next: () => {
obj.count++;
if ( obj.count <= 10>) {
return {
value: obj.count,
done:false
}
} else {
return {
value: undefined,
done: true
}
}
}
}
}
}
for (let item of obj) {
console.log(item)
}#### 遍历
1、for in
Object.prototype.moreName = 'ppppp';
let arr = [a,b,c]
let arr = {
a: 1,
b: 2
}
for (let item in arr) {
console.log(item) // 数组输出索引；对象输出key
if (item.hasOwnProperty) {
}
}不仅会遍历当前对象，还遍历原型链上的属性
不适合遍历数组
forEach 不会被break中断
2、for of
const arr = [
{age: 12},
{age: 22},
{age: 32},
]
for (let {age} of arr) {
if (age > 20) {
break;
}
console.log(age)
}#### Object
1 Object.keys 拿到的是key的数组
const obj = {
a:1,b:2
}
console.log(Object.keys(obj))
function getObjectKeys(obj) {
const result = [];
for(const key in obj) {
if (obj.hasOwnProperty(key)) {
result.push(key);
}
}
return result;
}2 Object.values
const obj = {
a:1,b:2
}
console.log(Object.values(obj))
function getObjectValues(obj) {
const result = [];
for(const key in obj) {
if (obj.hasOwnProperty(key)) {
result.push(obj[key]);
}
}
return result;
}3 Object.entries // 键值对的数组
const obj = {
a:1,b:2
}
console.log(Object.values(obj))
function getObjectEntries(obj) {
const result = [];
for(const key in obj) {
if (obj.hasOwnProperty(key)) {
result.push([key, obj[key]]);
}
}
return result;
}4 Object.getOwnPropertyName // 获取对象自身的key，不包括原型
5 Object.getOwnPropertyDescriptor // 是对象属性的描述符，是一个对象
configurable // false时，其他属性都不可改
writable
'use strict'
enumerable // for in/Object.keys
get set
const obj = {};
let val = undefined;
Object.defineProperty(obj, 'a', {
set: function (value) {
console.log(`${value} - xxx `)
val = value;
},
get: function () {
},
configurable: true
})
obj.a = 111;
console.log(obj.a) const obj = new Proxy({}, {
get: function (target, propKey) {
console.log(`invoke getter ${propKey}`)
return target[propKey]
},
set: function (target, propKey, value) {
console.log(`invoke setter ${propKey} ${value}`)
return Reflect.set(target, propKey, value);
}
})
obj.s = 1;
console.log(obj.s)Reflect 是什么？
语言的优化，内部方法移动到Reflect上
命令式的行为变成函数式的
const obj = {name:1}
delete obj.name // 命令
Reflect.deleteProperty(obj, name) 函数
6 Object.assign // 浅拷贝 {...a, ...b}
const newObj = obj.assign({}, {
name: '11',
age: '22'
}, {
name: '333' // 后面覆盖前面
})
console.log(newObj)
function shallowClone(source) {
const target = {};
for (const i in source) {
if (source.hasOwnProperty[i]) {
target[i] = source[i];
}
}
return target;
}Promise Promise.allSettled // 返回所有promise的状态和结果
function PromiseAllSettled(promiseArray) {
return new Promise((resolve, reject) => {
if (!Array.isArray(promiseArray)) {
return reject(new TypeError('参数必须是一个数组'))
}
let counter = 0;
const promiseNum = promiseArray.length;
const resolvedArray = [];
for (let i = 0; i < promiseNum; i++) {
Promise.resolve(promiseArray[i]).then(value => {
resolvedArray[i] = {
status: 'fulfilled',
value
}
})
.catch(reason => {
resolvedArray[i] = {
status: 'rejected',
reason
}
})
.finally(() => {
counter++;
if (counter == promiseNum) {
resolve(resolvedArray)
}
})
}
})
}#### 数组
1. Array.flat(arr, deep)
const arr1 = [1, 2, [3, 4, [5]]];
console.log(arr1.flat(1))
console.log(arr1.flat(Infinity))function flatDeep(arr, d = 1) {
if (d > 0) {
return arr.reduce((res, val) => {
if (Array.isArray(val)) {
res = res.concat(flatDeep(val,d - 1))
} else {
res = res.concat(val);
}
return res;
}, [])
} else {
return arr.slice();
}
}
flatDeep(arr1, Infinity)2. Array.includes
const arr = [1,2,3]
console.log(arr.includes(2))3. Array.from // 如何把一个类数组转换成真数组。
console.log(Array.from([1, 2, 3], x => x + 1))// 如何把arguments转换成真数组。
1 [...arguments]
2 Array.from(arguments)
3 Array.prototype.slice.call(arguments)# babel编译工具链的使用
//astexplorer.net 查看AST
1、解析
接受代码输出AST
*词法分析
*语法分析
2、转换
接受AST对其进行遍历，可以对节点进行添加 更新 移除等操作
3、生成
把转换过的AST生成为字符串形式的代码，并且创建source map
plugins.js
const template = require('babel-template')
const temp = template('var b=1');
module.exports = function ({
types: t
}) {
return {
visitor: {
VariableDeclaration(path, state) { // 变量声明
// 找到AST节点
const node = path.node;
if (t.isVariableDeclaration(node, {
kind: 'const'
})) {
node.kind = 'let';
const inserNode = temp();
path.inserBefore(inserNode);
}
}
}
}
}babel.js
const myPlugin = require("./plugin");
const babel = require('@babel/core');
const constent = 'const name = 123';
const { code } = babel.transform(content, {
plugins: [myPlugin]
})
console.log(code)