ES10(ES2019)新特性整理

一、Array.prototype.flat() 和 flatMap()(数组扁平化)

(1)flat(depth)

  • 将嵌套数组“拉平”到指定深度(默认 depth=1)。

    const arr = [1, [2, [3]]];
    arr.flat();      // [1, 2, [3]](默认深度 1)
    arr.flat(2);     // [1, 2, 3](深度 2)

(2)flatMap()

  • 先对数组每个元素执行映射,再将结果扁平化(深度固定为 1)。

    const arr = ["Hello", "World"];
    arr.flatMap(str => str.split("")); 
    // ["H", "e", "l", "l", "o", "W", "o", "r", "l", "d"]

适用场景

  • 处理嵌套数组(如 API 返回的多维数据)

  • 合并映射和扁平化操作(比 map + flat 更高效)

 

二、Object.fromEntries()(键值对转对象)
  • 将键值对列表(如 MapArray)转换为对象,是 Object.entries() 的逆操作。

    const entries = [ ['name', 'Alice'], ['age', 30] ];
    const obj = Object.fromEntries(entries);
    // { name: "Alice", age: 30 }

典型用途

  • 将 URLSearchParams 转为对象

  • 转换 Map 为普通对象

    const params = new URLSearchParams("name=Alice&age=30");
    Object.fromEntries(params); // { name: "Alice", age: "30" }

 三、String.prototype.trimStart() 和 trimEnd()
  • 分别移除字符串开头或结尾的空格(别名:trimLeft() / trimRight())。

    const str = "   Hello   ";
    str.trimStart(); // "Hello   "
    str.trimEnd();   // "   Hello"
  • 对比旧方法

  • trim():移除两端空格。

  • trimStart()/trimEnd():更精确控制。

四、Optional Catch Binding(可选的 catch 参数)
  • 允许省略 catch 中的错误参数(如果不需要使用错误对象)。

    try {
      JSON.parse("invalid json");
    } catch { // 不需要写 catch (error)
      console.log("解析失败");
    }

适用场景

  • 不需要处理具体错误时简化代码。

五、Symbol.prototype.description
  • 获取 Symbol 的描述字符串(定义时的参数)。

    const sym = Symbol("自定义描述");
    sym.description; // "自定义描述"

用途

  • 调试时快速查看 Symbol 的用途。

六、JSON.stringify 改进
  • 修复对 \u2028(行分隔符)和 \u2029(段落分隔符)的序列化,使其符合 JSON 标准。

    // 早期版本会将这些字符转义为 \uXXXX,现在直接输出
    JSON.stringify("\u2028"); // ""\u2028""

七、Function.prototype.toString() 改进
  • 返回函数完整的原始代码(包括注释和空格),而不仅是 "function() { ... }"

    function foo() {
      // 这是一个函数
      console.log("Hello");
    }
    foo.toString(); 
    // 完整输出:
    // "function foo() {
    //   // 这是一个函数
    //   console.log("Hello");
    // }"

用途

  • 动态代码分析、代码格式化工具。

八、Array.prototype.sort() 稳定排序
  • 规定 sort() 必须使用稳定排序算法(相同元素保持原始顺序)。

    const users = [
      { name: "Alice", age: 30 },
      { name: "Bob", age: 25 },
      { name: "Alice", age: 20 }
    ];
    // 按 name 排序后,相同 name 的 age 顺序不变
    users.sort((a, b) => a.name.localeCompare(b.name));

影响

  • 对复杂对象的排序更可靠。

注:如有缺失,请联系作者或在下方评论,我尽量在第一时间补充上去!!!  

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

某公司摸鱼前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值