ES6-ES11语法笔记

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:'紫罗兰永恒花园',
        heroine(){},
        city(){},
        [Symbol('heroine')]: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

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

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