ES6~ES13

ES6~ES13

ES6

  • let/const declare variable
  • variable destructuring/assignment
  • template strings
  • String and Number extend
  • Array extend
  • Object extend
  • Function extend
  • Symbol
  • iterator
  • Set
  • Map
  • Proxy
  • Reflect
  • Promise
  • Generator
  • class/class extends
  • Module

let/const

let/const features:

  • 块级作用域
  • 不允许重复声明变量
  • 没有变量提升
  • 暂时性死区
  • 不与顶层对象挂钩（window）
    let/const different features:
  • let可以声明不赋值，但是const必须初始化赋值；
  • let可以重新赋值，const不行
  • const保存的是指针，值还是可以修改；复杂类型obj对象还是可以改变，可以利用Object.freeze(obj),嵌套的数据结构还要递归冻结才能防止复杂类型obj对象改变；

variable destructuring/assignment

变量解构赋值：

  • eg:let {name:name1=xxx1}={name:xxx}
  • 根据原型链找属性
  • undefined不能解构
  • 适合少量参数的解构，嵌套层数太深看起来也不优雅

template strings

模板字符串：

  • eg:``${}
  • 主要用于字符串拼接

String and Number extend

String:

  • includes()
  • startsWith()
  • endsWith()
  • repeat()

Number:

  • 二进制八进制写法
  • isFinite()
  • isNaN()
  • isInteger():整数
  • Number.EPSILON极小值属性
  • Math.trunc() 将数字的小数部分去掉，只保留整数部分
  • Math.sign() 函数返回一个数字的符号，指示数字是正数，负数还是零

Array extend

  • … 扩展运算符
  • Array.from()静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。
  • Array.of()方法通过可变数量的参数创建一个新的 Array 实例，而不考虑参数的数量或类型
  • Array.prototype.find()/findIndex()
  • Array.prototype.fill()

Object extend

  • … 扩展运算符
  • 对象简写：属性方法简写
  • 对象属性：表达式{[a]:"xxxx"}
  • Object.assign({},obj1,obj2)
  • Object.is(a,b) 判断是否相等

Function extend

  • 参数默认值设置fn(a=0){}
  • rest参数剩余参数…res
  • name属性即函数名
  • 箭头函数
    • 无法访问arguments，不可作为构造函数使用即无法使用new实例化对象
    • 没有this,或者说this指向父作用域
    • 应用：接口请求用箭头函数调整this指向

Symbol

  • 唯一性，避免被覆盖
  • 不能运算，不能被强制转换进行计算
  • 显示调用toString()
  • 隐式转换Boolean
  • 不能使用for in 循环，可以用Reflect.ownKey()返回一个属性键值对数组
  • 可作为常量

iterator

迭代器：

  • Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for…of 循环使用。
  • 适用对象：Array/String/Set/Map/arguments对象/NodeList对象
  • 可以在对象中使用自定义属性定义迭代
  • 迭代器可以实现私有变量功能，避免被外部修改
  • 扩展运算符也是基于迭代器快速实现数组等复制功能
  • arrsymbol.iterator.next()

Set

Set数据结构：

  • 去重
  • 方法：add/has/delete/clear/size/values/entries/keys
  • 数组与集合转化

Map

Map数据结构：

  • Object 结构提供了“ 字符串—值” 的对应， Map 结构提供了“ 值—值” 的对应， 是一种更完善的 Hash 结构实现。
  • 方法跟Set一样

Proxy

代理：Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

  • 没有代理以前利用Object.defineProperty(obj,”data”,{get(){},set(){}}),proxy代理比它更高级一点
  • const p = new Proxy(target, handler)
  • handler.get()属性读取操作的捕捉器。
  • handler.set()属性设置操作的捕捉器。
  • proxy本质上属于元编程非破坏性数据劫持，在原对象的基础上进行功能的衍生而不影响原对象，符合松耦合高内聚的设计理念

Reflect

反射：Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与 proxy handler 的方法相同。Reflect 不是一个函数对象，因此它是不可构造的。

  • 替代Object上的某些方法
  • 处理异常错误时不用try/catch捕获错误，可以直接判断reflect，返回布尔值；
  • 命令式行为改变函数行为。eg:Reflect.deleteProperty(obj,”name”)
  • 配合Proxy

Promise (es6~es13)

Promise 对象用于表示一个异步操作的最终完成（或失败）及其结果值。

  • pending 待定;fulfilled:resolved;rejected:rejected;
  • 返回Promise对象
  • 链式调用
  • 静态方法：(自身迭代iterable)
    • promise.all(iterable)
    • promise.allSettled(iterable)
    • promise.any(iterable)
    • promise.race(iterable)
    • promise.reject(reason)
    • promise.resolve(value)
  • 实例方法：
    • promise.then()
    • promise.catch()
    • promise.finally()

Generator

es6提供的一种异步编程解决方案（手动版async/await）

  • 状态机。封装了多个内部状态
  • 执行generator函数会返回一个遍历器对象，可以依次遍历generator函数内部的每一个状态
  • 基本语法：
    1
    2
    3
    4
    5
    6
    function* fnName(){}
    function *fnName(){
        yield index++;
        yield "xxx";
        return "cc"
    }
  • 实例方法：
    • next()
    • return()
    • throw()
  • 流程调度方案

class/class extends

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Person extends Human{
  //公有字段
  height = 0;
  width;
  //私有字段
  #height = 0;
  #width;
  constructor(name, age){
      //super调用父级对象上的属性和方法
      super(name,age);
      this.name=name;
      this.age=age;
  }
  //静态声明
  static myName="person";
  static myMethod=function(){

  }
  //内部方法
  get location(){}
  set location(){}

}
const personOne=new Person("xxx", 10);

Module

features:

  • 异步加载
  • 私密不漏
  • 重名不怕
  • 依赖不乱
    两种导入导出方式：
  • import {A1，A2} from “xxx.js”; export {A1，A2};
  • import A1X from “xxx.js”; export default A1;
    Node.js中的模块化：
  • 导入导出方式：const obj.A1=require.(“xxx.js”);module.export={A1};
  • javascript es6与node.js环境中的模块化有所不同，导入导出方式就能看出。
  • node.js=>es6模块化转化方法
    • 第一种：npm init 生成package.json
    • 第二种：将js文件格式改成mjs

ES7

  • exponentiation operator
    • 求幂运算符：**
    • eg:Math.pow(3,2)===3**2;
  • Array.prototype.includes()
    • arr.includes(searchElement, fromIndex)

ES8

  • async/await：异步的终极解决方案

  • object extend

    • Object.values(obj)：Object.values({a: 1, b: 2, c: 3}); // [1, 2, 3]
    • Object.entries(obj):把对象属性序列化放在数组中，键值对；
    • Object.getOwnPropertyDescriptors(obj):获取对象属性用于克隆对象（深复制）=》Object.defineProperties(obj1,Object.getOwnPropertyDescriptors(obj))
    • object.assign(obj1,obj)(浅复制)
    • 浅复制只是增加一个指针指向已经存在的内存对象，深复制则是增加一个指针和申请新的内存。

  • string extend

    • str.padStart(10,”x”):从头开始填充，但字符串长度为10，填满为止
    • str.padEnd(10,”x”)

  • function extend

    • function person( name, age, sex, ) {}参数结尾可以为逗号

ES9

  • rest and spread operator (…)：对象的（展开/剩余）运算符
  • promise.finally()：then().catch().finally()
  • async/for await：异步迭代，串联单线程，并非并发，队列请求

ES10

  • object.fromEntries()
    • 它接收一个键值对列表（Map实例），并返回一个真实对象，其属性由条目给出
    • eg:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      const entries = new Map(
          ["apple","orange"],
          ["grapes", "peach"]
      );
      console.log(Object.fromEntries(entries)) 
      //  { apple: "origin", grapes: "peach" }

      let str=`name=xiaoming&age=18`;
      let s=new URLSearchParams(str);
      let o=Object.fromEntries(s);
      console.log(o);
      //{name: 'xiaoming', age: '18'}
  • Array.prototype.flatMap()/flat():数组扁平化，传入扁平化深度参数，默认深度为1，将嵌套的深层数组根据需求展开扁平化形成一个低维数组
  • String.prototype.trimStart()/trimEnd():删除字符串首尾空格
  • symbol(“descriptions”)
  • try/catch:catch的参数有时候是多余的，现在可以省略

ES11

  • promise.allSettled():all()的升级版本

  • module extend(dynamic import)：

    • 通过import声明引用的所有模块（包括初始化暂时用不到的模块）都会在初始化阶段前置加载，影响首屏性能；
    • import()能够在函数、分支等非顶层作用域使用，按需加载、懒加载都不是问题。
    • 动态导入import(),返回的是promise对象；
    • import.mate:mate属性，表示路径关系
    • export * as obj from “xx.js”:复制别人的方法，无损方式继承

  • String.prototype.matchAll()：matchAll()返回的迭代器不仅包括精确的匹配结果，还有全部的正则模式捕获结果

  • BigInt

    • JS 中的Number类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度。
    • 要创建一个 bigint，可以在一个整数的末尾添加字符n，或者调用函数 BigInt()。BigInt 函数使用字符串、数字等来创建一个BigInt。
    • eg:
      1
      2
      9007199254740992 === 9007199254740993;//true
      9007199254740992n === 9007199254740993n; //false

  • globalThis:在浏览器中它是 window, 在 Node.js 中它是global。

  • ??:空值合并运算符：它与或“||”区别：值为0时，??的左侧依然为“0”，而或“||”左侧则会被转换成布尔false从而选择右侧的值

  • ?.：可选链。用户检测不确定的中间节点，如果不存在中间节点则返回undefined。

ES12

  • ??=,&&=,||=
    • ??=:逻辑合并赋值
    • &&=:逻辑与赋值
    • ||=:逻辑或赋值
  • String.prototype.replaceAll():eg:str.replaceAll(replace,newValue)
  • Promise.any(iterable):返回第一个 fulfilled 的 promise ，若全部 reject，则返回一个带有失败原因的 AggregateError实例
    • 只要有一个兑现就可以了，特别是多设备部署同接口，多备份的优势就能体现出来了；
    • eg:三者只要有一个能请求成功就ok
      1
      2
      3
      Promise.any([pErr, pSlow, pFast]).then((value) => {
        console.log(value);
      })
  • WeakRef()/WeakSet()/weak series：WeakRef 对象包含对对象的弱引用，能不使用就尽量不要使用（表现达不到预取，而且在不同JavaScript引擎中效果千差万别）
  • FinalizationRegistry()：FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调。
    • eg:
      1
      2
      const registry = new FinalizationRegistry(heldValue => {});
      registry.register(theObject, "some value");
  • _:数字分割符:const num=1_000_000_000

ES13

  • class extend
    • 支持私有：#
    • static：静态
    • 静态代码块
    • 用in判断对象方法是否为函数的私有属性和方法
  • await：全局await,不建议这么用，可能会阻塞js进程导致变慢
  • at():索引元素；egg:arr.at(num),num可以为正负数
  • Object.hasOwn():用来检测对象中是否含有指定属性，它接受对象和属性作为参数，返回 true/false。
  • regex:正则匹配的开始和结束索引；eg:reg=/xxx/d
    • eg:
      1
      2
      3
      4
      5
      let str = "今天是2023-04-12"
      let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/d
      let res = reg.exec(str)
      console.log(res);
      // ['2023-04-12', '2023', '04', '12', index: 3, input: '今天是2023-04-12', groups: {…}, indices: Array(4)]
  • Array.prototype.findLast()/findLastIndex():快速查找到符合条件的最后一项或者下标。
  • Error object cause property:Error对象cause属性即错误描述。
    • eg:new Error("new error message",{cause:err})
前端
#ECMAScript #ES6~ES13
ES6~ES13
http://chasingbalance.top/2023/01/05/ES6~ES13/
作者
hanzhiwei
发布于
2023年1月5日
许可协议