新增的对象、函数等#

• Map, Set ,WeakMap, WeakSet
• 放射与代理Reflect、Proxy
• structureClone 全局函数
• view transition api
• transform stream接口
• documen元素变更监听
  • MutaionObserver监听 DOM 树的变化
  • **ResizeObserver**监听 元素尺寸变化
  • **IntersectionObserver**监听 元素是否进入/离开视口
  • PerformanceObserver 监听 性能条目（PerformanceEntry） 的生成
  • ArrayBuffer, DataView
  • 国际化 RelativeTimeFormat / Intl
• 取消机制：AbortController + signal
• 函数
  • Array
    • Array.from 将可迭代的对象转为真正的数组
    • Array.of 创建一个包含指定元素的新数组
    • Array.prototype.copyWithin 浅复制一部分
    • **Array.prototype.fill**用一个固定值填充数组的全部或部分元素。
    • Array.prototype.find 、findIndex、keys、values、entries
    • includes [es7]
    • flat [ES10]
    • Array.prototype.at()（支持负索引）[ES12]
  • String | String.prototype.includes() | 判断字符串是否包含指定子串（返回布尔值） | ES6 | | --- | --- | --- | | String.prototype.startsWith() | 判断字符串是否以指定子串开头 | ES6 | | String.prototype.endsWith() | 判断字符串是否以指定子串结尾 | ES6 | | for...of 遍历字符串 | 正确迭代包含 emoji 等 Unicode 字符的字符串 | ES6 | | String.prototype.padStart() | 在字符串开头填充字符至指定长度 | ES8 | | String.prototype.padEnd() | 在字符串末尾填充字符至指定长度 | ES8 | | String.prototype.trimStart() | 移除字符串开头的空白字符（别名：trimLeft） | ES9 | | String.prototype.trimEnd() | 移除字符串末尾的空白字符（别名：trimRight） | ES9 | | String.prototype.matchAll() | 返回所有正则匹配结果（含捕获组）的迭代器 | ES10 | | String.prototype.replaceAll() | 替换所有匹配的子串（无需正则全局标志） | ES12 | | String.prototype.at() | 支持负索引访问字符（如 .at(-1)），更好支持 Unicode | ES13 |
  • Object | 方法 / 特性 | 说明 | 所属版本 | | --- | --- | --- | | Object.assign(target, ...sources) | 浅拷贝多个源对象到目标对象（常用于合并、克隆） | ES6 | | Object.is(value1, value2) | 更严格的相等比较（修复 === 对 NaN 和 +0/-0 的问题） | ES6 | | Object.getOwnPropertyDescriptors(obj) | 获取对象所有自身属性的完整描述符（含 getter/setter） | ES8 | | Object.values(obj) | 返回对象自身可枚举属性的值组成的数组 | ES8 | | Object.entries(obj) | 返回对象自身可枚举属性的 [key, value] 键值对数组 | ES8 | | Object.getOwnPropertyNames(obj) | （注：此方法 ES5 已有，非新增） | — | | Object.fromEntries(iterable) | 将键值对列表（如 Map 或 entries 数组）转为对象 | ES10 | | Object.hasOwn(obj, prop) | 安全检查对象自身是否含有某属性（替代 hasOwnProperty） | ES13 |
  • Math ： log 预算、三角函数、平方、立方根等

新增的特性#

• class[ES6]

• 模块化 import/export

• 迭代器：Iterator

• 类修饰器，函数修饰器

• BigInt 与 Symbol

• 对象属性字面量简写：const obj = { name, age }

  以前只能const obj = { name: name , age : age }

• 模板字符串

• 扩展运算符

  • ES6（数组）
  • ES9（对象）

• 解构赋值[ES6]

• 异步迭代（Async iteration） + for await...of [ES9]

  对象的Symbol.asyncIterator 返回一个异步的迭代器。

  可以使用三种方式创建：

  • **obj[**Symbol.asyncIterator**]**返回异步生成器函数（Async Generator Function）

  • obj[Symbol.asyncIterator]返回一个对象 { next: () ⇒ { value: any, done: boolean } }

  • 本身就是一个异步生成器函数

    1
    function createAsyncIterable(max) {
    2
      return {
    3
        async *[Symbol.asyncIterator]() {
    4
          for (let i = 1; i <= max; i++) {
    5
            await new Promise(resolve => setTimeout(resolve, 500)); // 模拟异步操作
    6
            yield i;
    7
          }
    8
        }
    9
      };
    10
    }
    11
    
    12
    function createManualAsyncIterable(max) {
    13
      let current = 1;
    14
    
    15
      return {
    16
        [Symbol.asyncIterator]() {
    17
          return {
    18
            next() {
    19
              if (current <= max) {
    20
                const value = current++;
    21
                // 模拟异步延迟
    22
                return new Promise(resolve =>
    23
                  setTimeout(() => resolve({ value, done: false }), 500)
    24
                );
    25
              } else {
    26
                return Promise.resolve({ done: true });
    27
              }
    28
            }
    29
          };
    30
        }
    31
      };
    32
    }
    33
    
    34
    async function* asyncNumberStream() {
    35
      let i = 1;
    36
      while (i <= 3) {
    37
        await new Promise(r => setTimeout(r, 300));
    38
        yield i++;
    39
      }
    40
    }
    41
    
    42
    // 使用 for await...of 遍历
    43
    (async () => {
    44
      for await (const num of createAsyncIterable(3)) {
    45
        console.log(num); // 每隔 500ms 输出：1, 2, 3
    46
      }
    47
    })();
    

• let`const\var` 关键字

  • var就会将它们提升到当前作用域的顶端、可重复声明
  • 全局声明的var变量，会挂载到window上

  1
  var a = "a"
  2
  let b = "b"
  3
  const c = "c"
  4
  console.log(window.a) // a
  5
  console.log(window.b) // undefined
  6
  console.log(window.c) // undefined
  

  • const 声明的变量是常量，变量本身不能重新赋值
  • let 声明的是可以修改变量，变量本身能重新赋值
  • let`const` 有块级作用域、禁止重复声明

  1
  // let \ const
  2
  if (true) {
  3
      const a = 1; // 换 let 效果一致
  4
  }
  5
  console.log(a) // Uncaught ReferenceError: a is not defined
  6
  
  7
  // var
  8
  if (true) {
  9
      var a = 1; // var 无块级作用域
  10
  }
  11
  console.log(a) // 1
  12
  
  13
  // var 与 变量提升
  14
  function func () {
  15
    // 因为没有块级作用域，变量提示会提示到上一个作用域的顶部，所以这里访问 a 不会出错
  16
    a = 2
  17
    console.log(a) // 2
  18
    if (true) {
  19
        var a = 1; // var 无块级作用域
  20
    }
  21
    console.log(a) // 1
  22
  }
  23
  
  24
  func() // 2 、 1
  25
  
  26
  // 没有如何修饰符号时，且作用域内没有定义重复的变量时
  27
  function func () {
  28
    // 隐式全局变量创建
  29
    a = 2 // 如果开启 严格模式 ('use strict')：会抛出 ReferenceError: a is not defined
  30
    console.log(2) // 1
  31
  }
  32
  
  33
  func() // 2
  34
  window.a // 2
  

  • let`const` 有暂时性死区

  备注：若是在浏览器的控制台中测试，则需要每次开始前刷新浏览器。因为浏览器的conosle是一个连续的上下文环境。

  1
  // 单独执行下面的语句不会有问题
  2
  console.log(typeof value)  // "undefined"
  3
  
  4
  // 单独执行下面的语句不会有问题
  5
  console.log(typeof value)  // "undefined"
  6
  var value = ""
  7
  
  8
  // 执行下面的则有问题
  9
  console.log(typeof value)
  10
  const value = ""
  11
  
  12
  // 执行下面的则有问题
  13
  console.log(typeof value)
  14
  let value = ""
  15
  
  16
  // 这样就没问题了
  17
  console.log(typeof value)  // "undefined"
  18
  if (true) {
  19
      let value = "" // value 仅在 if 内有效。
  20
  }
  

函数新特性#

• 箭头函数
  • 没有this, super, arguments, new.target
  • This指针不能被修改，this为创建箭头函数时的上下文中的this
• 默认参数function f(a = 1) { ... }
• 剩余参数(可变参数、不定长参数）function f(...args) { ... }
• 函数调用时扩展运算符fn(...arr)
• 异步函数async function f() { ... }
• Generator 函数 (支持异步)

1
function* countSync() {
2
  yield 1;
3
  yield 2;
4
  yield 3;
5
}
6

7
// 使用 for...of（同步）
8
for (const n of countSync()) {
9
  console.log(n); // 1, 2, 3（立即输出）
10
}
11

12
async function* countAsync() {
13
  await delay(100);
14
  yield 1;
15
  await delay(100);
16
  yield 2;
17
}
18

19
// 必须用 for await...of（在 async 函数中）
20
(async () => {
21
  for await (const n of countAsync()) {
22
    console.log(n); // 每隔 100ms 输出 1, 2
23
  }
24
})();

• async/await/Promise