ECMAScript日常总结--ES2019(ES10)

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 可以用于处理异步的映射操作,并得到一个扁平化的结果数组。

相关推荐
周亚鑫3 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.19 分钟前
CSS3新增边框属性(五)
前端·css·css3
neter.asia36 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫36 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
嚣张农民43 分钟前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189111 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾1 小时前
前端基础-html-注册界面
前端·算法·html
Dragon Wu1 小时前
前端 Canvas 绘画 总结
前端