大家好，我是讯享网，很高兴认识大家。

ES6新特性

let 声明变量

1. 不能重复命名
2. 块级作用域｛｝
3. 不存在变量提升
4. 不影响作用域链
5. 里面定义的外面访问不到，外面定义的里面可以通过作用域链访问到

const 声明常量

1. 必须要赋初始值(一般使用大写)
2. 块级作用域｛｝
3. 普通常量的值不能修改
4. 可以对数组和对象常量中的元素进行修改

变量的解构赋值

允许按照一定模式从数组和对象中提取值，对变量进行赋值

例:

解构数组

<script>         const persons=['张三','李四','王五']         let [zg,ls,ww] =persons         console.log(zg,ls,ww);     </script>

讯享网

解构对象

讯享网  

  <script>         const zs ={             name:'张三',             age:33,             work(){                 console.log('法外狂徒');             }         let {name,age,work}=zs         console.log('叫'+zs.name+' 年龄'+zs.age);         zs.work()     </script>

模板字符串 ``

1. 支持换行
2. 支持变量拼接 ${内容}

箭头函数

讯享网  

  <script>         // 传统方式        function fn(a,b){             return a+b         }         console.log(fn(1,2));         let fn1 = (a,b)=>{             return a+b         }         console.log(fn1(1,2));     </script>

箭头函数适用与this无关的回调，定时器，数组的方法回调

箭头函数不适用于this有关的回调，事件回调，对象的方法

this是静态的，始终指向函数声明时所在作用域下的this的值 call()方法无法改变

箭头函数不能作为构造函数new出来

不能使用argument变量 arguments是参数伪数组 在不知情多少参数的情况下使用 可以遍历

当形参有且只有一个的时候 可以省略( )

当代码体只有一条语句的时候 可以省略{ return} 语句的结果就是函数的返回值

rest参数（...args）

讯享网 <script>       function fn(){         console.log(arguments);       }         // 参数对象       fn(2,3,3,3,3)       let fn1 = (a,b...args)=>{           console.log(args);       }         // 参数数组       fn1(2,4,4,4,4)     </script>

1. 作用类似ES5中arguments对象保存参数，rest用数组保存参数
2. rest参数必须放在参数最后

扩展运算符(将数组转变一个字符串序列)

数组的合并

讯享网 <script>             const person1 = ['张三','李四']             const person2 = ['王五','赵六']             const persons = [...person1,...person2]             console.log(persons);         </script>

数组的克隆（浅拷贝）

 <script>             const flower = ['薇尔莉特','伊芙加登']             const violet = [...flower]             console.log('人如其名 '+violet);         </script>

伪数组转为真数组

讯享网<script>         const divs = document.querySelectorAll('div')         // 是个对象         console.log(divs);         const newDivs =[...divs]         // 是个数组         console.log(newDivs);     </script>

Symbol的基本使用

Symbol是新的原始数据类型，表示独一无二的值，是一种类似字符串的数据类型

1. Symbol的值是唯一的，用来解决命名冲突的问题
2. Symbol的值不能用于和其他数据进行运算/对比/比较
3. Symbol定义的对象属性不能使用for...in遍历循环，但可以使用Reflect.ownKeys来获取所有对象的键名

   创建独一无二的值

  <script>       // Symbol 独一无二的值 创建方法       let s1 = Symbol('wkq')       let s2 = Symbol('wkq')       console.log(s1 === s2) //false       // Symbol 相同值 创建方法       let s3 = Symbol.for('wkq')      let s4 = Symbol.for('wkq')      console.log(s3 === s4) //true </script>

避免创建对象同名的冲突

讯享网 <script>     let films = {         name:'紫罗兰永恒花园',         ******e(){},         city(){},         [Symbol('******e')]:function(){             console.log('女主角薇尔莉特.伊芙加登')         },         [Symbol('city')]:function(){             console.log('故事地点在莱顿');         }     }     console.log(films);     </script>

JavaScript七种数据类型

USONB you are so niubility 你是真牛逼

U: undefined

S: String、Symbol

O: bject

N: Number、Null

B：Boolean

迭代器(自定义遍历数据）

for(let v in 迭代对象) for...in中迭代保存的是键名

for(let v of 迭代对象) for...of中迭代保存的是键值

生成器(本质就是特殊的函数 识别是函数名前加* 也是迭代器原理)

讯享网<script>      function getUsers(){        setTimeout(() => {          let data = '用户数据'          // 调用next方法，并将数据传入 这是第二个next 它的实参将作为第一个yield的返回结果          iterater.next(data)         }, 1000);     }      function getOrders(){        setTimeout(() => {          let data = '订单数据'          // 这是第三个next 它的实参将作为第二个yield的返回结果          iterater.next(data)       }, 1000);     }      function getGoods(){        setTimeout(() => {          let data = '商品数据'          // 这是第四个next 它的实参将作为第三个yield的返回结果          iterater.next(data)       }, 1000);     }        function *gen(){          let users = yield getUsers()          console.log(users);          let orders = yield getOrders()          console.log(orders);          let goods = yield getGoods()          console.log(goods);       }      // 调用生成器        let iterater = gen()        // 生成器跑起来        iterater.next()      </script>

Promise构造函数

构造函数有两个函数参数 resolve和reject 根据异步任务的执行情况改变promiseState以及promiseResult

与之对应的then函数有两个函数参数value和reason 值由promiseResult决定 状态由promiseState决定。

如果then的value和reason返回一个Promise函数 则该返回的Promise的状态和数据决定了value或reason的

状态和数据，异常的状态仍为rejected。then中可以在套Promise函数，最后以catch异常穿透，从而解决回调

地狱的问题

const fs = require('fs') ​ const { resolve } = require('path/posix') ​ const p = new Promise((resolve,reject)=>{ ​  fs.readFile('./name.txt',(err,data)=>{ ​ •    resolve(data) ​ }) ​ }) ​ p.then(v=>{ ​  return new Promise(resolve=>{ ​ •    fs.readFile('./gender.txt',(err,data)=>{ ​ •      resolve([v,data]) ​ •   }) ​ }) ​ }).then(v=>{ ​  return new Promise(resolve=>{ ​ •    fs.readFile('./age.txt',(err,data)=>{ ​ •      v.push(data) ​ •      resolve(v) ​ •   }) ​ }) ​ }).then(v=>{ ​  console.log(v.join(' \r\n')); ​ })

Set集合(本质是对象)

类似数组，但成员的值是唯一的，集合实现了迭代器接口，可以用扩展运算符和for...of进行遍历

方法

1. size 返回集合元素个数
2. add 增加一个元素并返回当前集合
3. delete 删除元素并返回布尔值
4. has 检测集合中是否包含某个元素，返回boolean值
5. clear 清空集合

讯享网 <script>      let s = new Set(['甘', '文', '崔', '小玉', '小玉'])      // 添加元素      s.add('阿福')      // 删除元素      s.delete('小玉')      // 长度      console.log(s.size)      // 是否存在      console.log(s.has('阿福'))      // 清空      s.clear() let nums1 = [0, 1, 2, 3, 2, 1, 0]      let nums2 = [2, 3, 4, 5, 4, 3, 2]      // 数组去重 变为集合在变为数组      let result1 = [...new Set(nums1)]      console.log(result1)      // 求交集      let result2 = [...new Set(nums1)].filter((item) =>        new Set(nums2).has(item)     )      console.log(result2)      // 求并集      let result3 = [...new Set([...nums1, ...nums2])]      console.log(result3)      // 求差集(交集的逆运算)      let result4 = [...new Set(nums1)].filter(       (item) => !(new Set(nums2).has(item))     )      console.log(result4)    </script>

Map(升级版对象 键可以多样)

键值对的集合，但是键的范围不限于字符串包括对象可以作为键，各种类型的值

讯享网

集合实现了迭代器接口，可以用扩展运算符和for...of进行遍历

方法

1. size 返回map的元素个数
2. set 增加一个新元素并返回当前Map
3. delete 删除一个元素
4. get 返回键名对象的键值
5. has 检测Map中是否包含某个元素，返回boolean值
6. clear 清空集合并返回undefined

`

<script> // 创建新的Map let m = new Map() // 添加元素 m.set('name','张三') m.set('idea', function(){ console.log('方法可以作为值'); }) let key = { age: 24, } m.set(key,[1,2,3]) // Map元素个数 console.log(m.size); // 根据键名返回键值 console.log(m.get('idea')); console.log(m.get(key)); // 删除一个元素 m.delete('name') console.log(m.size); // 是否包含某个值 console.log(m.has('idea')); // 遍历 返回的每个元素是个数组 for(let v of m){ console.log(i); } // 清空Map m.clear() </script>

`

Class类

1. 实例对象身上是没有构造函数对象身上的属性方法，构造函数对象身上的属性方法称为静态成员，有构造函数原型对象上的属性方法 构造函数.prototype.属性/方法
2. 子类不能直接调用父类的同名方法，只能重写

`

讯享网   

 <script>      class Phone {        // 构造方法 名字不能修改 在new的时候自动调用        constructor(brand, price) {          this.brand = brand          this.price = price       }        static president = '张三'        // get和set        get Info() {          console.log('信息被获取了')          // 返回值就是调用getInfo呈现的值          return '信息'       }        set Info(info) {          console.log('信息被设置了')       }        call() {          console.log('我可以打电话')       }     }      const DGD = new Phone()      console.log(DGD.president) //undefined      // 获取      console.log(DGD.Info)      // 设置      DGD.Info = '改后的信息' ​      // 继承      class SmartPhone extends Phone {        constructor(brand, price, color, weight) {          // super 省略了同样的this.xx=xx的编码          super(brand, price)          this.color = color          this.weight = weight       }        play() {          console.log('我能打游戏')       }        call() {          console.log('我能打视频电话')       }     }      const ET = new SmartPhone('外星人', '19999', '银色', '5kg')      ET.call()      ET.play()    </script>

`

数值扩展

1. Number.EPSILON代表JavaScript中最小精度值，如果两个浮点数相差小于该值，则为相等
2. 进制数 二进制：0b开头，如0b1010 =10 八进制：0o开头，如0o777 = 511 十六进制：0x开头，如0xff = 255
3. Number.isFinite(num) 判断一个数值是否为有限数
4. Number.isNaN(num) 判断一个数值是否为NaN
5. Number.parseInt(str)和Number.parseFloat(str) 字符串转数值 夹断！！ 适用于数字开头的字符串
6. Number.isInteger(num) 判断一个数值是否为整数
7. Math.trunc(float) 将数值的小数部分 夹断！！
8. Math.sign(num) 判断一个数值是正数 负数 还是0 分别返回1 -1 0

对象方法扩展

讯享网 <script> // Object.is(a,b) 判断a,b是否完全相等 a,b不为对象 console.log(Object.is(NaN, NaN)) // Object.assign(a,b) b覆盖掉a同名的属性,不存在则保留 const config1 = { host: 'localhost', username: 'root', password: '123', special: '独一份', } const config2 = { host: '127.0.0.1', username: '张三', password: '233', sologon: '法外狂徒', } console.log(Object.assign(config1, config2)) //设置原型对象 setPrototypeOf(a,b) b作为a的原型 const person ={ name:'张三', talk:'法外狂徒' } const city ={ locate:'二仙桥' } Object.setPrototypeOf(person,city) console.log(Object.getPrototypeOf(person)); console.log(person); </script>

模块化 （类似乐高）将较大的程序文件拆分成多个小文件，然后将这些小文件组装

暴露模块语法汇总

// 默认暴露 ​ export default { ​ name: '张三', ​ sologon:function() { ​  console.log('法外狂徒') ​ }, ​ } ​ // 统一暴露 ​ let age = 23 ​ function run(){ ​  console.log('跑得快');     ​ } ​ export {age,run} ​ // 分别暴露 ​ export let gender = '男' ​ export function jump(){ ​  console.log('跳得远'); ​ }

引入模块汇总

讯享网  <script type="module">      // 通用引入      import * as m1 from './src/m1.js'    // 解构赋值引入(按需引入)    import {name,sologon} from './src/m1.js'    // m2.js中放在default中    import {default as m2} from './src/m2.js'    // 针对默认暴露    import m1 from './src/m1.js'  </script>

ES7新特性

Array.prototype.includes 检查数组中是否包含某个元素，返回布尔值

    <script>      const books = ['张三', '李四', '王五', '赵六']      console.log(books.includes('张三')) //true      console.log(books.includes('尼古拉斯赵四'))     //false    </script>

指数操作符

讯享网   

 <script>       let result = 2 10 // 类似Math.pow(2,10)     console.log(result);    </script>

ES8新特性

async和await

1、async 函数的返回值是promise对象

promise对象的结果和状态由async函数执行的返回值决定

如果返回值是promise则由该promise的结果和状态决定

2、await右侧的表达式一般为promise对象 2.1、如果是promise对象，await返回的是promise成功的值 2.2、如果是其他，直接将此值作为await的返回值

3、await必须在async函数中 async可以没有await 如果await的promise失败了 则抛出异常 相应try...catch进行捕获

讯享网const fs = require('fs') const util = require('util') const mineReadFile = util.promisify(fs.readFile) async function main(){  try {    const p1 =await mineReadFile('./content1.txt')    const p2 =await mineReadFile('./content2.txt')    const p3 =await mineReadFile('./content3.txt')     console.log(p1+p2+p3); } catch (error) {      console.log(error); } } main()    

对象方法扩展

Object.keys(对象) 获取对象所有的键

Object.values(对象) 获取对象所有的值

Object.entries(对象) 获取对象所有的键值 对象转二维数组

Object.getOwnPropertyDescriptor(对象) 获取对象所有的信息

Object.create(null/{},{对象属性}) 创建带有对象属性描述的对象

ES9新特性

向对象提供rest参数和扩展运算符

讯享网<script>    function connect({host,port,...user}){      console.log(host);      console.log(port);      console.log(user);    //{username: "root", password: 233}   }    connect({      host:'127.0.0.1',      port:3000,      username:'root',      password:233   })     const name={       name:'张三'     }     const sologon={       sologon:'法外狂徒'     }     const result = {...name,...sologon}     console.log(result);     //{name: "张三", sologon: "法外狂徒"}    </script>

正则扩展

命名捕获分组

讯享网 <script>      // 会多一个groups里面是url和text 这样方便提取捕获 ?<别名>      let str = '<a href="https://www.baidu.com">百度</a>'      const reg = /<a href=(?<url>.*)>(?<text>.*)<\/a>/      const result = reg.exec(str)      console.log(result)      console.log(result.groups.url)      //"https://www.baidu.com"      console.log(result.groups.text)       //百度    </script>

断言

<script>      // 通过前面和后面 判断唯一性      let str1 = '心野2222啦啦'       // 正向断言 通过后面 判断前面的是否匹配      const reg1 = /\d+(?=啦)/      // 反向断言 通过前面 判断后面的是否满足      const reg2 =/(?<=啦)\d+/      const result1 = reg1.exec(str1)      const result2 = reg2.exec(str1)      console.log(result1);cd      console.log(result2);    </script>

dotAll模式(简略换行)

讯享网  

<script>      let str = `      <ul>      <li>        <a>肖申克的救赎</a>        <p>上映日期：1994-09-10</p>      </li>    </ul>`      // 之前      const reg1  =/<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/        const result1 = reg1.exec(str)        console.log(result1);        // dotAll模式   .*? 替代 /s 同时在正则后加s        const reg2 = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/s          const result2 = reg2.exec(str)          console.log(result2);      </script>

E10新特性

对象方法扩展

Object.fromEntries 获取数组所有的键值 二维数组转对象

讯享网  

  <script>      const result = Object.fromEntries([       ['name', '张三'],       ['sologon', '法外狂徒'],     ])      console.log(result)      const result1 = Object.entries({        name: '张三',        sologon: '法外狂徒',     })      console.log(result1);      const m = new Map()      m.set('name','张三')      m.set('sologon','法外狂徒')      console.log(m);    </script>

字符串方法扩展

trimStart和trimEnd清除左右空白

讯享网 <script>      let str = '     还有一件事 要用魔法打败魔法     '      console.log(str)      console.log(str.trim())      console.log(str.trimStart())      console.log(str.trimEnd()) </script>

数组方法扩展

flat 降低数组维度 和 flatMap 先map函数处理返回如果是多维再flat降低维度

讯享网<script>      //flat(数字) 降低维度 数字从0开始 0默认为一维 降到多少维写多少      let arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]]      let result1 = arr.flat(2)      console.log(arr) //(4) [1, 2, 3, Array(4)]      console.log(result1) //[1, 2, 3, 4, 5, 6, 7, 8, 9]      //flatMap 先map再flat      let arr1 = [1, 2, 3, 4]      let result2 = arr.map((item) => [item * 10]) //返回形式如果多维 要降维度      let result3 = arr.flatMap((item) => [item * 10])      console.log(result2)      console.log(result3)    </script>

Symbol扩展

symbol.prototype.description Symbol的描述

讯享网 <script>      let s = Symbol('我是Symbol的描述')      console.log(s.description);    </script>

E11新特性

私有属性 #属性

   <script>      class Person {        // 公有属性可以在外部获取        name        // 私有属性 只可以由内部方法获取        #age        #weight        constructor(name, age, weight) {          this.name = name          this.#age = age          this.#weight = weight       }        getAtrribute() {          console.log(this.name)          console.log(this.#age)          console.log(this.#weight)       }     }      let zs = new Person('张三', 23, 100)      console.log(zs.name)      console.log(zs.age)    //私有属性 是undefined      zs.getAtrribute()     //私有属性通过方法 this.#xx获取    </script>

Promise扩展

Promise.allSettled

接收promise数组 返回结果是promise 成功的状态 值是数组中各个promise的状态和数据

讯享网  

  <script>      const p1 = new Promise((resolve, reject) => {        resolve('成功！')     })      const p2 = new Promise((resolve, reject) => {       try {        // reject('失败！')        throw '出错啦'       } catch (error) {        console.warn(error);       }     })      const pArr = [p1, p2]      let result = Promise.allSettled(pArr)      console.log(result)      let result1 = Promise.all(pArr)      console.log(result1);    </script>

字符串扩展

String.prototype.matchAll(正则表达式) 用于得到正则批量匹配的结果 用于正则匹配提取数据

讯享网    

<script>           let str = `      <ul>      <li>        <a>肖申克的救赎</a>        <p>上映日期：1994-09-10</p>      </li>      <li>        <a>阿甘正传</a>        <p>上映日期：1994-07-06</p>      </li>    </ul>`    const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg      const result =str.matchAll(reg)      for(v of result){        console.log(v);     }      console.log(...result);    </script>

可选链操作符

当所属值在对象的深处，省去层层判断

讯享网    

<script>         function main(config){          // 传统方案          // const dbPassWord = config && config.db && config.db.password          // 可选链操作符   x?.y 如果x有,在去传入y          const dbPassWord = config?.config.db?.db.password          console.log(dbPassWord);         }         main({           db:{             name:'MySql',             password:222           },           cache:{            name:'高速缓存区',            password:333           }         })    </script>

动态导入

import(路径)返回的是promise对象 可以用then 实现promise成功的数据

讯享网 <body>    <button id="btn">点击获取方法</button>    <script>      const btn = document.querySelector('#btn')        btn.onclick =function(){          import('./src/m1.js').then(module=>{            console.log(module.sologon());         })       }    </script>  </body>

大整型数据类型

用于大数值的计算

<script>      let n = 1024n   //整数n 即表示是个大整型数据      let max = Number.MAX_SAFE_INTEGER //最大安全整数      console.log(max + 1)      console.log(max + 2)      console.log(BigInt(max) + BinInt(1))      console.log(BigInt(max) + BinInt(2))    </script>

globalThis

始终指向全局对象，当需要使用全局对象时就可以调用这个

如果有错误的地方，希望各位大神多多指教啊