ECMAScript日常总结--ES2019(ES10)

RoBin2024-01-26 11:27

ECMAScript日常总结--ES2019(ES10)

1. Object.fromEntries() -- 将键值对的列表转换为对象

Object.fromEntries()主要功能是将键值对的列表转换为对象。对于从数组或类似数据结构中创建对象非常方便，特别是在使用 Object.entries() 将对象转换为键值对数组后。

  • 允许将键值对的列表转换为对象。这对于将Map转换为对象很有用。

语法

javascript 复制代码 
Object.fromEntries(iterable)
  • iterable: 一个可迭代对象，通常是包含键值对的数组或其他类似结构。
javascript 复制代码 
const abc = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(abc);
// obj: { a: 1, b: 2, c: 3 }

用途

  1. 从键值对数组创建对象

    javascript 复制代码 
    const abc = [['name', 'wb'], ['age', 25], ['city', 'xian']];
const person = Object.fromEntries(abc);
// person: { name: 'wb', age: 25, city: 'xian' }

  2. 从Map对象创建对象

    javascript 复制代码 
    const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const objFromMap = Object.fromEntries(map);
// objFromMap: { a: 1, b: 2, c: 3 }

  3. 与Object.entries()结合使用

    javascript 复制代码 
    const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
const newObj = Object.fromEntries(entries);
// newObj: { a: 1, b: 2, c: 3 }

  4. 处理类似数组的对象

    javascript 复制代码 
    const abc = { 0: ['a', 1], 1: ['b', 2], length: 2 };
const obj = Object.fromEntries(abc);
// obj: { 0: ['a', 1], 1: ['b', 2], length: 2 }

如果键值对的数组中有重复的键，后面的键值对会覆盖前面的键值对，因为对象中不能有重复的键

2. Array.prototype.flat() -- 用于将嵌套数组（多维数组）扁平化为一维数组

Array.prototype.flat() 用于将嵌套数组（多维数组）扁平化为一维数组。该方法通过指定扁平化的深度来控制展开的层级。如果没有提供深度参数，该方法默认只会扁平化一层。

  • 用于将嵌套的数组扁平化。

语法

javascript 复制代码 
arr.flat([depth])
  • arr: 要扁平化的数组。
  • depth（可选）: 指定扁平化的深度，默认为 1。
javascript 复制代码 
const A = [1, [2, [3, [4]]]];
const flatArray = A.flat(Infinity);
// flatArray: [1, 2, 3, 4]

用途

  1. 扁平化一层

    javascript 复制代码 
    const A = [1, [2, [3, [4]]]];
const flatArray = A.flat();
// flatArray: [1, 2, [3, [4]]]

  2. 指定深度扁平化

    javascript 复制代码 
    const deeplyA = [1, [2, [3, [4]]]];
const flatArrayDepth2 = deeplyA.flat(2);
// flatArrayDepth2: [1, 2, 3, [4]]

  3. 移除空元素

    javascript 复制代码 
    const EmptyElements = [1, 2, [3, , 4], , 5];
const flatEmpty = EmptyElements.flat();
// flatEmpty: [1, 2, 3, 4, 5]

  4. 与 map 结合使用

    javascript 复制代码 
    const A = [[1], [2], [3]];
const mapFlat = A.flatMap(arr => arr.map(num => num * 2));
// mapFlat: [2, 4, 6]

  5. 处理异步操作

    javascript 复制代码 
    const APromises = [Promise.resolve(1), [Promise.resolve(2), Promise.resolve(3)]];
const flatPromises = APromises.flat();
// flatPromises: [Promise, 2, 3]

如果不提供深度参数或深度参数设置为 1，flat() 只会扁平化一层。为了完全扁平化嵌套数组，使用 flat(Infinity)，注意潜在的性能影响。

3. String.prototype.trimStart() 和 String.prototype.trimEnd() -- 用于删除字符串的开头或结尾的空格。

String.prototype.trimStart() 和 String.prototype.trimEnd()用于移除字符串的开头和结尾的空格（空白字符）。在之前的 ECMAScript 版本中，这两个方法分别被称为 String.prototype.trimLeft() 和 String.prototype.trimRight()。这两个方法不会修改原始字符串，而是返回一个新的字符串。

  • 用于删除字符串的开头或结尾的空格。

3.1 String.prototype.trimStart()

语法

javascript 复制代码 
str.trimStart()
  • str: 要处理的字符串。
javascript 复制代码 
const ASpaces = "   Hello!   ";
const Start = ASpaces.trimStart();
// Start: "Hello!   "

3.2 String.prototype.trimEnd()

语法

javascript 复制代码 
str.trimEnd()
  • str: 要处理的字符串。
javascript 复制代码 
const stringWithSpaces = "   Hello, World!   ";
const trimmedEnd = stringWithSpaces.trimEnd();
// trimmedEnd: "   Hello, World!"

用途

  1. 移除开头或结尾的空格

    javascript 复制代码 
    const ASpaces = "   Hello!   ";
const Start = ASpaces.trimStart();
const End = ASpaces.trimEnd();
// Start: "Hello!   "
// End: "   Hello!"

  2. 处理用户输入

    javascript 复制代码 
    const Input = document.getElementById('user').value;
const trimInput = Input.trimStart().trimEnd();

  3. 与其他字符串方法链式使用

    javascript 复制代码 
    const ASpaces = "   Hello, World!   ";
const B = ASpaces.trimStart().toUpperCase().substring(0, 5);
// B: "HELLO"

  4. 处理文件路径

    javascript 复制代码 
    const filePath = "/user/documents/file.txt";
const trimPath = filePath.trimEnd('/');
// trimPath: "/user/documents/file.txt"

4.Symbol.prototype.description -- 允许检索Symbol的描述字符串

Symbol.prototype.description属性是 Symbol 类型实例方法，允许获取 Symbol 创建时传递的可选描述字符串。提供了一种更方便的方式来获取 Symbol 的描述字符串，这在某些场景下（如调试和动态属性设置）可能会很有用。

  • 允许检索Symbol的描述字符串。

语法

javascript 复制代码 
Symbol.prototype.description
javascript 复制代码 
const A = Symbol('ABC');
console.log(A.description); // 输出 'ABC'

用途

  1. 获取 Symbol 的描述字符串

    javascript 复制代码 
    const A = Symbol('ABC');
console.log(A.description); // 输出 'ABC'

  2. 在对象字面量中使用

    javascript 复制代码 
    const key = Symbol('uniqueKey');
const obj = {
  [key.description]: 'abc'
};
console.log(obj['uniqueKey']); // 输出 'abc'

  3. 遍历 Symbol 属性时获取描述字符串

    javascript 复制代码 
    const obj = {
  [Symbol('a')]: 'A',
  [Symbol('b')]: 'B',
  [Symbol('c')]: 'C'
};

Object.getOwnSymbols(obj).forEach(item => {
  console.log(item.description);
});
// 输出 'a', 'b', 'c'

如果 Symbol 创建时没有提供描述字符串，description 属性返回 undefined。在使用该属性之前需检查一下。

javascript 复制代码 
const A = Symbol();
console.log(A.description); // 输出 undefined

5.Optional Catch Binding -- 允许在try-catch语句中省略catch块的绑定参数

允许在 try-catch 语句中省略 catch 块的绑定参数。在之前的 ECMAScript 版本中，catch 块总是需要包含一个参数，即捕获的异常对象。Optional Catch Binding 的引入使得可以在不需要捕获异常对象的情况下使用 catch 块。这对于只关心是否发生异常，而不需要异常对象的情况很有用。

"Optional Catch Binding" 提供了更简洁的语法，使得在一些场景下处理异常更加方便和清晰。省略 catch 块的参数意味着你无法在 catch 块中访问异常对象，所以只有在确实不需要访问异常对象的情况下才使用这个特性。

  • 允许在try-catch语句中省略catch块的绑定参数。

语法

javascript 复制代码 
try {
  // 代码可能抛出异常的区域
} catch {
  // 处理异常的代码块，没有参数
}
javascript 复制代码 
try {
  // 可能抛出异常的代码
  throw new Error('异常的代码');
} catch {
  // 不需要捕获异常对象的处理代码
  console.log('不需要捕获异常对象的处理代码');
}

用途

  1. 只关心是否有异常，而不关心异常对象

    javascript 复制代码 
    function ABC(input) {
  try {
    // 处理输入的代码
  } catch {
    // 处理异常的代码，不需要关心异常对象
    console.log('处理异常的代码，不需要关心异常对象');
  }
}

  2. 简化代码，避免未使用的异常对象参数

    javascript 复制代码 
    try {
  // 一些可能抛出异常的代码
} catch (error) {
  // 不使用异常对象，但在代码中需要声明一个未使用的参数
  console.log('不使用异常对象，但在代码中需要声明一个未使用的参数');
}

    使用 Optional Catch Binding：

    javascript 复制代码 
    try {
  // 一些可能抛出异常的代码
} catch {
  // 不需要声明未使用的异常对象参数
  console.log('不需要声明未使用的异常对象参数');
}

  3. 更清晰的异步代码处理

    在异步代码中，catch 块可能用于处理 Promise 的 rejection。使用 Optional Catch Binding 可以简化处理，尤其是在只关心是否有异常的情况下。

    javascript 复制代码 
    async function ABC() {
  try {
    // 异步操作，可能抛出异常
    const data = await fetchData();
    return data;
  } catch {
    // 不需要异常对象
    console.log('不需要异常对象');
  }
}

6.Array.prototype.flatMap() -- 将嵌套数组映射为新数组后进行扁平化

Array.prototype.flatMap()它结合了 map() 和 flat() 的功能，用于将数组的每个元素通过映射函数处理后得到的结果扁平化成一个新数组。Array.prototype.flatMap() 提供了一种简便的方式来映射并扁平化数组，使得在处理嵌套结构或异步操作时更加方便。

  • 结合map和flat两个方法，将嵌套数组映射为新数组后进行扁平化。

语法

javascript 复制代码 
array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
  • callback: 对每个元素执行的函数，该函数返回一个数组，数组的元素将被扁平化。
  • currentValue: 当前被处理的数组元素。
  • index（可选）: 当前被处理的数组元素的索引。
  • array（可选）: 调用 flatMap 的数组。
  • thisArg（可选）: 执行 callback 函数时的 this 值。
javascript 复制代码 
const arr = [1, 2, 3];
const A = arr.flatMap(x => [x * 2]);
// A: [2, 4, 6]

用途

  1. 映射并扁平化数组

    javascript 复制代码 
    const arr = [1, 2, 3];
const A = arr.flatMap(x => [x * 2]);
// A: [2, 4, 6]

  2. 移除空元素

    javascript 复制代码 
    const arr = [1, 2, , 3, , 4];
const A = arr.flatMap(x => x ? [x] : []);
// A: [1, 2, 3, 4]

  3. 处理嵌套数组

    javascript 复制代码 
    const arr = [1, [2, 3], [4, 5]];
const A = arr.flatMap(x => x);
// A: [1, 2, 3, 4, 5]

  4. 将字符串拆分为字符

    javascript 复制代码 
    const words = ['hello', 'world'];
const A = words.flatMap(word => word.split(''));
// A: ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

  5. 处理异步操作

    javascript 复制代码 
    const data = [1, 2, 3];
const fetchData = async (x) => {
  return new Promise(resolve => setTimeout(() => resolve(x * 2), 1000));
};

const result = await Promise.all(data.map(async x => fetchData(x)));
// result: [2, 4, 6]

const A = data.flatMap(async x => await fetchData(x));
// A: [2, 4, 6]

    在异步操作中，flatMap 可以用于处理异步的映射操作，并得到一个扁平化的结果数组。

相关推荐
桂月二二4 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062066 小时前
ubuntu向一个pc主机通过web发送数据，pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb6 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角6 小时前
CSS 颜色
前端·css
九酒6 小时前
从UI稿到代码优化，看Trae AI 编辑器如何帮助开发者提效
前端·trae
浪浪山小白兔7 小时前
HTML5 新表单属性详解
前端·html·html5
lee5767 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579657 小时前
AI赋能Flutter开发：ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
limit for me8 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者8 小时前
如何构建一个简单的React应用？
前端·react.js·前端框架
热门推荐
01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04PyTorch AMP 混合精度中grad_scaler.py的scale函数解析05Windows10安装PCL1.14.0及点云配准06密码学原理技术-第六章-introduction to pulibc-key cryptography07xgboost: Why not implement distributed XGBoost on top of spark08Oracle Scheduler: Calendaring09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10BMC 虚拟i2c访问PCA9545(switch芯片)后面的设备,为什么找不到PCA9545?