《es6-es10》

*es6

let+const

• let

  用于块级作用域 不存在变量提升 不可重复声明 未声明不可使用 不可使用window去调用

• const

  不可重复定义 不可对重复赋值 不存在变量提升 不允许先赋值后声明

作用域

• 什么是作用域？

  规定程序源代码中定义的变量执行区域 规定了如何查找等一些列规则

• 作用域有哪些？

  全局作用域（global，window） 局部作用域（函数作用域） 块级作用域（let。const定义的代码块区域） 动态作用域（this）

• 全局变量？

  函数以外定义的变量 函数内部不通过var定义的变量 不通过var等定义的变量属于window下面的属性可以被删除。var则不可以，严格意义上来说直接定义的变量不属于全局变量

Array

• for of

  对于可迭代的对象创建一个迭代循环

• Array.from

  转成数组，用法： Array.from(arrayLike[, mapFn[, thisArg]]) arrayLike类数组或可迭代对象 mapFn如果指定了该参数，都会执行 可选参数，执行回调函数 mapFn 时 this 对象

• Array.fill

  填充数组 arr.fill(value[, start[, end]]) value填充元素 start起始索引 end结束索引 let arr=[1,4,6,7] arr.fill(99,1,9)

• Array.of

  创建数组 let arr=Array.of(1,43,6,8)

• Array.find

  find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

• Array.findIndex

  findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。其实这个和 find() 是成对的，不同的是它返回的是索引而不是值。

class

• 如何定义并实例化一个类？

  • es5

     function Fn(type) {
                this.name = type
            }
            let fn = new Fn('miya')
            console.log(fn)
    

  • es6

      class Fn {
                constructor(val) {
                    this.name = val
                }
            }
            let fn = new Fn('miya')
            console.log(fn)
    

• 如何读写属性？

  es6允许把属性放到函数最顶层，而不是必须放到constructor（）函数中 放到最顶层前面加set或者get，因为添加上就会变成属性。 set和get的操作可以让我们灵活改变返回值，但是返回值和出口值不能相同

  • get+set

    class Animal { constructor (type, age) { this.type = type this._age = age } get age () { return this._age } set age (val) { this._age = val } }

  • 与es5相比读写有何优点？

    es5属性进行修改无法拦截，有条件写和设置丢做不到 es6通过get。set就可以做到，让你在读写操作上有更大的操作权，甚至可以定制化

• 操作方法

  通过对象实例 添加方法 通过类的静态方法添加 定义时前面添加static fn(){} 使用时类调用

    class Animal {
              constructor(type, age) {
                  this.type = type
                  this._age = age
              }
              get age() {
                  return this._age
              }
              set age(val) {
                  this._age = val
              }
              static run() {
                  console.log('run ')
              }
          }
          let a = new Animal('miya', 18)
  

  • 什么是类的静态方法？

    不属于对象实例上的方法，属于类的静态方法，直接从对象实例访问不到 通过类去访问

  • 什么时候使用类的静态方法和对象的实例方法？

    如果这个方法不依赖对象实例上的属性和方法使用类的静态方法 反之，使用对象的实例方法

• 继承

箭头函数

• this指向（待完成）

set+map+对象上的更新

• 对象属性值简写

  key。value的简写 属性支持变量和表达式，只需用花括号抱起来即可 在obejct中可以添加异步函数（加*）

  let [x,y]=[1,99]
  let obj={x,y,[x+y]:8,* fn (){console.log(212)}}
  

• set

  值可以是任意值

  • add()

    方法：添加 let s=new Set() s.add(12).add(89)

  • delete()

    方法：删除某一项。 let s=new Set() s.add(12).add(89) s.delete(10)

  • clear

    方法：删除所有。 let s=new Set() s.add(12).add(89) s.clear()

  • has

    方法：判断元素是否存在 let s=new Set() s.add(12).add(89) s.has(12)

  • keys()、values()、entries()

    keys=>获取所有keys值 values=>获取所有value值 s.entries()=>获取健值对

  • size

    属性:获取已经存元素的长度 let s=new Set() s.add(12).add(89) s.size()

• map

  • set()

    添加修改： let m=new Map() m.set('a',1).set('b',2)

  • has()

    根据key值查找 let m=new Map() m.set('a',1).set('b',2) m.has('a')

  • delete()

    let m=new Map() m.set('a',1).set('b',2) m.delete('a')

  • clear

    方法：删除所有。 let m=new Map() m.set('a',1).set('b',2) s.clear()

  • keys()、values()、entries()

    let m=new Map() m.set('a',1).set('b',2) keys=>获取所有keys值 values=>获取所有value值 m.entries()=>获取健值对

  • size

    属性:获取已经存元素的长度 let m=new Map() m.set('a',1).set('b',2) m.size()

• Object.assign

  对象的拷贝 优缺点： 优点实现对象的浅拷贝 缺点会出现数据丢失，不能直接实现深拷贝（用递归可以实现） 浅拷贝对不是引用类型的值做数据替换；引用类型则直接替换地址 如果目标对象是undefined或者null会引发错误 原对象是undefined或者null则会返回object

  • 用法

    let target={} Object.assign(target,{a:1.b:2})

正则（待熟悉）

• y修饰符（粘连）

  连续匹配，用法如下： let str = 'aaa_aa_a' let r1 = /a+/g let r2 = /a+/y console.log(r1.exec(str)) console.log(r2.exec(str))

      console.log(r1.exec(str))	
    console.log(r2.exec(str))
  

• u修饰符

  • 中文的地方添加u修饰符
  • 处理码点操作的时候加u
  • 量词处理的时候加u
  • 忽略大小写的时候添加u

模版字符串

使用方法：我是前端的${'小学生 '}

变量的结构赋值

变量结构赋值：重点是在赋值，赋值的元素是要拷贝出来赋值给变量，赋值元素本身将不会收到改变

• Array Destructuring

  • 1、可以跳过赋值元素

    如果想忽略数组中的某一项，可以使用逗号来处理 let [a,,b]=['miya','youzi','hanmeimei','xioaming']

  • 2、赋值元素可以是任意可遍历的对象

    let [a,b,c]='abc' let [x,y,z]=new Set([1,2,4])

  • 3、左边的变量

    let user={} [user.name,user.surname]='Ilya Kantor'.split(' ') user //{name: "Ilya", surname: "Kantor"}

  • 4、循环体

    let obj = { name: 'hanmeimei', addr: 'beijing' } for (let [k, v] of Object.entries(obj)) { console.log(k, v) }

  • 5、rest函数

    let [x,y,...rest]=[1,3,5,6,8,9]

  • 6、默认值

    let [u,i] =[] 默认值为 undefined

• object Destructuring

  • 1、基础用法

    在这个结构赋值的过程中，左侧的“模板”结构要与右侧的 Object 一致，但是属性的顺序无需一致。 let {name,addr}={name:'liming',addr:'beijing'}

  • 2、默认值

    let options={title:'Menu'} let {width=100,height=200,title}=options

  • 3、rest运算符

    let obj1={name:'hanmeimei'} let obj2={addr:'beijing'} let obj3={...obj1,...obj2}

Promise

• Promise出现的背景？

  js中有很多异步操作，异步操作不是此刻完成，而是之后完成后， 描述按顺序加载不同的脚本，采用了回调之后再回调的连锁过程，这样代码看起来就会臃肿很多 嵌套越深，代码层次就会变深，维护难度也就加增加，所以出现了promise

• Promise的工作原理？

  • promise未调用.then方法前执行了什么？

    首先new Promise的时候，我们需要关心2个内容。 status：会有一个padding状态被挂起 result：返回值此时是underfind

  • promise的状态怎么去改变？

    通过resolve和reject方法去改变状态，此时需注意。状态不可逆，一旦确认，无法改变

  • promise结果状态改变的时候怎么传递数据？

    通过then方法去传递执行，执行then方法之后会返回一个promise对象，这样就可以完成链式操作

• 静态方法

  • all

    使用.catch可以捕获链式操作的错误 是promise对象上的方法，不是promise静态的方法 避免每次在then上部署错误处理 不要使用throw的方式去触发，使用reject的方法去触发promise状态的改变，去捕获错误 并行操作

  • Race

    Promise.race 生成并返回一个新的 Promise 对象。 参数 promise 数组中的任何一个 Promise 对象如果变为 resolve 或者 reject 的话， 该函数就会返回，并使用这个 Promise 对象的值进行 resolve 或者 reject。

  • resolve, reject

    是promise2个静态的方法，必须使用promise的类调用执行 resove触发成功操作 reject触发失败的操作

• 对象上的方法

  • catch错误处理

    使用。catch可以捕获链式操作的错误 是promise对象上的方法，不是promise静态的方法 避免每次在then上部署错误处理 不要使用throw的方式去触发，使用reject的方法去触发promise状态的改变，去捕获错误

  • then方法

    • 怎么去用？

      then是promise对象原型上的方法，只要是promis对象就可以调用此方法。 语法fn().then(onFulfilled,onReject) onFulfilled,onReject分别对应成功与失败2个方法 如果没传函数，默认会被忽略，返回一个空的promise对象 如果后面不是函数，是表达式也会被执行，返回结果， 调用.then会返回一个promise实例

    • 工作原理是什么？

      首先调用，then()它会返回一个promise对象。所以才可以产生链式调用 当then的参数不为函数时。返回使用return中断后续then方法

Reflect

反射机制。函数执行先调用。再去查找那个方法使用。

• defineProperty

  静态方法 Reflect.defineProperty() 基本等同于 Object.defineProperty() 方法，唯一不同是返回 Boolean 值。

  • Reflect.defineProperty(obj,'name',{value:'miya'})

• deleteProperty

  静态方法 Reflect.deleteProperty() 允许用于删除属性。它很像 delete operator ，但它是一个函数。

  • Reflect.deleteProperty(target, propertyKey)

• apply

  通过指定的参数列表发起对目标(target)函数的调用 可以动态化去控制方法， apply 原来：先确定调用对象，后跟apply方法Math.floor.apply(null,[12.433]) 现在：先绑定apply。在进行执行方法。Reflect.apply(Math.floor,null,[12.433]) 使用场景 价格判断，比如超多100使用向下取整，没超过使用向上取整 old：let price = 18.9090 price = price >= 100 ? Math.floor.apply(null, [price]) : Math.ceil.apply(null, [price]) new: price = Reflect.apply(price >= 100 ? Math.floor : Math.ceil, null, [price])

• construct

  Reflect.construct() 方法的行为有点像 new 操作符 构造函数 ， 相当于运行 new target(...args). newTarget新创建对象的原型对象， 参考 new.target 操作符，默认值为target。 Reflect.construct允许你使用可变的参数来调用构造函数 ，这和使用new操作符搭配对象展开符调用一样。

  • 用法

    Reflect.construct(target, argumentsList[, newTarget])

  • target

    被运行的目标构造函数

  • argumentsList

    类数组，目标构造函数调用时的参数。

  • newTarget

    新创建对象的原型对象， 参考 new.target 操作符，默认值为target。

  • 与Object.create()的区别？

    虽然两种方式结果相同，但在创建对象过程中仍一点不同 当使用Object.create()和Function.prototype.apply()时，如果不使用new操作符调用构造函数，构造函数内部的new.target值会指向undefined。 当调用Reflect.construct()来创建对象，new.target值会自动指定到targe（或者newTarget，前提是newTarget指定了）。

• get

  Reflect.get()方法与从 对象 (target[propertyKey]) 中读取属性类似，但它是通过一个函数执行来操作的。

  • Reflect.get(obj,'name')

• getOwnPropertyDescriptor

  Reflect.getOwnPropertyDescriptor() 与 Object.getOwnPropertyDescriptor() 方法相似。如果在对象中存在，则返回给定的属性的属性描述符。否则返回 undefined。

  • Reflect.getOwnPropertyDescriptor(target, propertyKey)

    描述符分为：数据描述符和存取描述符 value：‘数据’ writable：是否可被重写，默认false enumerable：是否可以被遍历,默认false configurable：是否可以被删除,默认false

• getPrototypeOf

  getPrototypeOf返回指定对象的原型

  • Reflect.getPrototypeOf({}); // Object.prototype

• has

  静态方法 Reflect.has() 作用与 in 操作符 相同。

  • Reflect.has(target, propertyKey)

    Reflect.has({x: 0}, "y"); // false Reflect.has({x: 0}, "x"); // true

• isExtensible

  静态方法 Reflect.isExtensible() 判断一个对象是否可扩展 （即是否能够添加新的属性）。与它 Object.isExtensible() 方法相似，但有一些不同，

  • Reflect.isExtensible()

    传值为一个对象，返回当前对象是否可以添加扩展属性 传入非对象会触发错误

  • object.isExtensible()

    也是判断当前传入对象是否可以扩展 传入非对象时，非对象的第一个参数会被强制转换为一个对象。返回布尔值。不会报错

• ownKeys

  Reflect.ownKeys() 返回一个由目标对象自身的属性键组成的数组。

  • Reflect.ownKeys({x:1,y:2,z:3})
  • Reflect.ownKeys([])// ["length"]

• preventExtensions

  Reflect.preventExtensions() 方法阻止新属性添加到对象 例如：防止将来对对象的扩展被添加到对象中)。该方法与 Object.preventExtensions()相似，但有一些不同点。

  • Reflect.preventExtensions(obj)

    返回值为布尔值 当传入的值不为对象的时候，会引发错误

  • object.preventExtensions

    Object.preventExtensions() 方法， 非对象的第一个参数将被强制转换为对象。

• set

  Reflect.set() 工作方式就像在一个对象上设置一个属性。

  • Reflect.set(target, propertyKey,value)

    返回值为一个布尔值

• setPrototypeOf

  指定对象的原型

  • Reflect.setPrototypeOf(obj,String.prototype)

proxy

• 什么是proxy?

  它可以自定义一些行为，比如查找，循环、赋值。函数执行 基础用法：new proxy(target,handler) target要被代理的对象，可以是对象，函数，或者另一个代理 handler一个对象。被代理的过程

• 使用场景？

  处理key。value值 过滤不存在的属性 表单验证 阅后即焚

• 什么是临时代理？有哪些使用场景？

  proxy中有可以创建临时代理，可以取消，一旦调用revoke。prox将失效，也就是是临时代理 用法 let obj={name:'柚子'} let o=Proxy.revocable(obj,{}) o.revoke()

• 用法

  let obj = { name: 'miya', age: 190 } window.addEventListener('error', e => { console.log(e) }, true) let validator = { set(target, key, value) { if (!Reflect.has(target, key)) return '' if (key === 'age') { if (typeof value !== 'number' || Number.isNaN(value)) { throw new TypeError('Age mast be a number') } if (value <= 0) { throw new TypeError('Age must be a positive number') } } return target[key] = value } } let d = new Proxy(obj, validator) d.age = '90' console.log(d.age)

Generator

• 什么是Generator

  可控制迭代器的函数，可以暂停，也可以选择任何时候恢复

• Generator的基础用法

  比普通函数多了一个* 函数内部使用yield来控制函数执行的暂停 Generator不可以使用尖头函数，会产生错误 Generator函数可以嵌套，在yield后添加* 恢复执行函数适应next方法，此函数返回一个对象，分别是当前程序执行的状态和数据，也可传参数，参数将作为yield返回值

• Generator的使用场景

  抽奖（批量产生） 异步数据的加载 经常玩一些小游戏，比如数数字，遇到 3 的倍数就要跳过，从 1 一直往下数 斐波那契数列

• 方法

  • next

    Generator 对象通过next方法来获取每次遍历的结果。这个对象返回一个对象，对象中包含2个属性： value：当前程序运行的结果 done：遍历是否结束 next方法可以接受参数。这个参数是可以传入到Generator函数中，这个参数就是作为yield的返回值

  • return

    可以使 Generator 遍历终止，类似for break 也可传参数，作为yield的返回值

  • thorw

    也是可以中断函数执行 可以通过 throw 方法在 Generator 外部控制内部执行的“终断”。 如果想退出遍历 catch 之后可以配合return false， 可以起到break 的功效

• yield表达式

  yield表达式用于暂停和恢复一个生成器函数 yield表达式返回是一个underfind，但是遍历器对象的next方法可以传参数改变这个默认值。 yield后可添加*，表示后面继续是个可遍历，可迭代对象，也可嵌套Generator对象

• 用法

  function* fn(x=0,y=1){ while(1){yield x+y; [y,x]=[x,x+y]}} let f=fn() f.next() {value: 1, done: false} f.next() {value: 1, done: false} f.next() {value: 2, done: false} f.next() {value: 3, done: false} f.next() {value: 5, done: false} f.next() {value: 8, done: false}

Iterator

• 什么是自定义遍历器？

  for of是为可迭代对象创建一个迭代循环。 可迭代协议允许js去自定义定制他的迭代行为，例如在for of中那些元素可以被循环等。一些内置的对象有默认迭代行为，比如array，map，另一类则不具备（object） 自定义遍历器必须满足2个条件。 可迭代协议 迭代器协议

• 什么是迭代器协议？

  首先是一个对象 返回一个无参函数next() 函数返回一个对象，对象包含done和value属性。 down代表当前遍历程序是否结束 value代表当前遍历数据 4.next(返回如果不是对象）会报错

• 什么是可迭代协议？

  为了变成可迭代对象， 一个对象必须实现 @@iterator 方法, 意思是这个对象（或者它原型链 prototype chain 上的某个对象）必须有一个名字是 Symbol.iterator 的属性 如果让一个对象是可遍历的，就要遵守可迭代协议，该协议要求对象要部署一个以 Symbol.iterator 为 key 的键值对，而 value 就是一个无参函数，这个函数返回的对象要遵守迭代器协议。

• Generator 和 Iterator 的关联关系理解了吗？

  Generator是天然的具备迭代器协议。 使用Generator 配合可迭代协议就不再需要显示的写迭代协议了（next方法和包含 done、value 属性的返回对象）。

• 用法

  需求我们需要遍历所有的作者名字 let authors = { allAuthors: { fiction: [ 'Agatha Christie', 'J. K. Rowling', 'Dr. Seuss' ], scienceFiction: [ 'Neal Stephenson', 'Arthur Clarke', 'Isaac Asimov', 'Robert Heinlein' ], fantasy: [ 'J. R. R. Tolkien', 'J. K. Rowling', 'Terry Pratchett' ] } } allAuthors[Symbol.iterator] = function* () { let allAuthors = this.allAuthors let keys = Reflect.ownKeys(allAuthors) let values = [] while (1) { if (!values.length) { if (keys.length) { values = allAuthors[keys[0]] keys.shift() yield values.shift() } else { return false } } else { yield values.shift() } } } for (let item of obj) { console.log(item) }

model

• 导出

  • 导出变量，常量

    export const name='miya' export let addr=''beijing' export let list=[1,2,4] or: const name='miya' let addr=''beijing' let list=[1,2,4] export {name,addr,list}

  • 导出函数

    export function say (content){ console.log(content); } export let run=(content)=>console.log(content) or: function say (content){ console.log(content); } let run=(content)=>console.log(content

    export {say,run}

  • 导出对象

    let data={code:0,msg:'请求成功'，data:{name:'miya'}} export {data}

  • 导出class

    export class Test{ constructor(){ this.id = 2 }} or : class Test{ constructor(){ this.id = 2 }}

    export {Test}

• 导入

  • 直接导入

    export const name='miya' export let addr=''beijing' export let list=[1,2,4]

    导入： import {name,addr,list} from 'a.js'

  • 修改导入名字

    export const name='miya' export let addr=''beijing' export let list=[1,2,4]

    导入： import {name as cname,addr,list} from 'a.js'

  • 批量导入

    export const name = 'miya' export let addr = 'beijing' export let list = [1, 2, 4]

    导入： import * as md from 'index.js'

*es7

1、includes

判断一个元素是否存在数组中，返回值为布尔值用法如下： let arr=[12,40,289] arr.includes(40) //true arr.find(key=>key===40) //40

2、.pow

Math.pow() 函数返回基数（base）的指数（exponent）次幂，即 baseexponent 用法如下： Math.pow(2,5)//32 2**5//32

*es8

1、asnyc await

是promise的语法糖 使用 Promise 之后可以让我们书写异步操作更加简单，而 async 是让我们写起 Promise 像同步操作 async 函数显式返回的不是 Promise 的话，会自动包装成 Promise 对象 await 不可以脱离 async 单独使用

2、object

• object.keys()

• object.entries()

• object.values()

• object.getOwnPropertyDescriptors()

  获取对象的描述符

3、String

• string.paddingStart()
• String.paddingEnd()

*es9

1、for awite of

• for of

  用于遍历集合，创建一个循环来迭代可迭代的对象

• awite

  处理异步操作

• for awite of

  用于操作异步集合的操作 // function geo(time) { // return new Promise((resolv, reject) => { // setTimeout(() => { // resolv(time) // }, time) // }) // }

      // async function test() {
      //     let arr = [geo(2000), geo(100), geo(3000)]
      //     for await (const item of arr) {
      //         console.log(new Date().getTime(), item)
      //     }
      // }
  
      // test()
  

2、promise. finally

Promise.prototype.finally() 方法返回一个Promise，在promise执行结束时，无论结果是fulfilled或者是rejected，在执行then()和catch()后，都会执行finally指定的回调函数。这为指定执行完promise后，无论结果是fulfilled还是rejected都需要执行的代码提供了一种方式，避免同样的语句需要在then()和catch()中各写一次的情况。

3、object

• object rest

  数组中我们常用...来合并数组 对象中合并也可以使用object的rest进行2个对象的合并。他的原理是浅拷贝。不是引用。用法如下： let obj={a:1,b:2,c:3} let obj2={...obj,f:9090} console.log(obj2)//{a: 1, b: 2, c: 3, f: 9090}

• object spreat

  当对象 key-value 不确定的时候，把必选的 key 赋值给变量，用一个变量收敛其他可选的 key 数据，用法如下： let obj={a: 1, b: 2, c: 3, f: 9090} let {a,b,...rest}=obj console.log(a,b,rest) 1 2 {c: 3, f: 9090}

4、正则

• do Al l

  正则表达式中，点（.）是一个特殊字符，代表任意的单个字符，但是有两个例外。 1、一个是四个字节的 UTF-16 字符，这个可以用u修饰符解决； 2、另一个是行终止符（line terminator character）。/n 和/r 用法如下： /foo.boo/s.test('foo\nboo')

  • 添加s
  • 判断是否是使用doAll模式

• 命名捕获

  • 用法?<>

• 后行断言

  • 用法?<=

• 先行断言

  • 用法?=

*es10

1、JSON

• JSON.stringify()

  对于一些超出范围的 Unicode，为其输出转义序列，使其成为有效 Unicode developer.mozilla.org/en-US/docs/…

2、Array

• flat()

  指定嵌套数组结构应展平的深度级别。默认为1。 let arr=[1,[2,6,[9]]] arr.flat(1) // [1, 2, 6, Array(1)] arr.flat(2) //[1, 2, 6, 9] arr.flat(Infinity) //[1, 2, 6, 9] developer.mozilla.org/en-US/docs/…

• flatMap()

  首先使用映射函数映射每个元素，然后将结果展平为新数组。它与深度为1 map()的a 相同flat()，但flatMap()通常非常有用，因为将两者合并为一种方法效率更高。 let arr= [1, 0, 6, 9] arr.flatMap(item=>[item*2]) //[2, 0, 12, 18] developer.mozilla.org/en-US/docs/…

3、String

• trimStart()

  去开始空格 let str=' u ' str.trimStart() // 'u '

• trimEnd()

  去除结束空格 let str=' u ' str.trimEnd() // ' u'

• matchAll()

  针对字符串返回正则表达式的所有匹配项。 let str = '"foo" "boo" sd "ooo"' let collectGroup1 = (str, regExp) => { let matches = [] for (let item of str.matchAll(regExp)) { matches.push(item[1]) } return matches } console.log(collectGroup1(str, /"([^"]*)"/g))

4、Object

• Object. fromEntries()

  把键值对列表转换为一个对象，这个方法是和 Object.entries() 相对的。 let search = window.location.search.substr(1).split('&'); Object.fromEntries(search.map(k => k.split('=')))

5、Symbol

• Symbol. description

  通过 description 方法获取 Symbol 的描述 let symbol=Symbol('My name is miya') symbol.description// My name is miya

6、function

• function.toString()

  toString() 方法返回一个表示当前函数源代码的字符串 let say=()=>console.log('hhhh') say.toString() //()=>console.log('hhhh')

7、try catch

• 可以省略catch后边error参数

  try { console.log('Foobar') } catch { console.error('Bar') }

8、BigInt

XMind: ZEN - Trial Version