ECMAScript新方法记录

2023-08-10  本文已影响0人  柚子硕

本文记录ES7后续一些自己没get到的好用的新特性。

1.hasOwn

hasOwn用于检查对象自身是否拥有某个属性，而并非其原型链上的属性。如果对象拥有该属性，则返回true，否则返回false。

let obj = {  
  prop: 123  
};  
  
console.log(Object.hasOwn(obj, 'prop'));  // 输出：true  
console.log(Object.hasOwn(obj, 'nonExistent'));  // 输出：false

2.Promise.prototype.finally()

finally()方法在Promise被解决或拒绝后，无论如何都会执行。它允许你指定在Promise结束时必须执行的清理逻辑。在之前处理Promise回调中一般只会写then、catch,如果使用finally处理则更好。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .finally(() => {
    console.log('Fetch request completed.');
  });

3.Object.fromEntries()

这个静态方法允许将键值对列表转换为对象。它接收一个键值对的可迭代对象（如数组）作为参数，并返回一个新的对象。

const entries = [['name', 'John'], ['age', 30], ['city', 'New York']];

// 将键值对列表转换为对象
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: 30, city: 'New York' }

4.globalThis

ES10引入了一个名为globalThis的全局属性，它始终指向全局对象，无论在什么环境下。

// 在浏览器控制台和 Node.js 中使用 globalThis
console.log(globalThis);
// 在浏览器全局作用域中声明变量
globalThis.myVariable = "Hello World";
console.log(myVariable); // "Hello World"

除了访问全局变量，你还可以使用globalThis来调用全局函数。例如，如果你在全局作用域中定义了一个函数myFunction，你可以在Vue组件中使用globalThis.myFunction()来调用它。

// 在全局作用域中定义函数  
globalThis.myFunction = () => {  
  console.log("Hello, Vue!");  
};  
  
// 在Vue组件中调用全局函数  
export default {  
  mounted() {  
    globalThis.myFunction(); // 输出 "Hello, Vue!"  
  }  
}

5.可选链操作符

可选链操作符 ?. 允许在访问可能为 null 或 undefined 的属性或方法时避免出现错误。如果链中的某个属性或方法不存在，则整个表达式的值将为 undefined，而不会抛出异常。
可以使用 ?. 来访问可能为 null 或 undefined 的属性或方法，避免出现错误。例如：

const name = person?.name;
const age = person?.age?.value;

6.空值合并操作符

?? 可以用来提供默认值，当左侧的值为 null 或 undefined 时，使用右侧的值作为结果。
空值合并操作符 ?? 主要用于检查变量是否为 null 或 undefined，如果是，则返回默认值。与逻辑或操作符 || 不同，空值合并操作符只有在变量值为 null 或 undefined 时才会返回默认值，其他 falsy 值（如空字符串、0 或 false）仍然会返回变量本身。例如：

const value = someVariable ?? defaultValue;

const value = someVariable || defaultValue;

someVariable ?? defaultValue 是一个逻辑非空运算符，它表示如果 someVariable 不为 null 或 undefined，那么返回 someVariable，否则返回 defaultValue。

而 someVariable || defaultValue 是一个逻辑或运算符，它表示如果 someVariable 为假值（false、0、null、undefined、NaN 或者 ""），那么返回 defaultValue，否则返回 someVariable。

所以主要的区别在于：

?? 只检查其左边的操作数为 null 或 undefined。如果左边的操作数不是 null 或 undefined，无论其值是什么（即使是 false、0、"" 等假值），都将返回左边的操作数，而不会考虑右边的操作数。
|| 会检查其左边的操作数的所有假值（包括 null、undefined、false、0、""、NaN 等）。如果左边的操作数为任何假值，都将返回右边的操作数，否则返回左边的操作数。
因此，使用 ?? 可以确保当变量为 null 或 undefined 时返回默认值，而使用 || 则无法保证这一点。

7.动态 import() 函数

能够动态地导入模块，返回一个 Promise 对象，可以在需要时按需加载代码。例如：

import("./module.js")
    .then(module => {
        // 使用导入的模块
    })
    .catch(error => {
        // 处理导入失败的情况
    });

8.Promise.allSettled()

接收多个 Promise 对象，并返回一个新的 Promise，当所有的 Promise 完成（不管是成功还是失败）时才会被 resolve。返回的结果是一个数组，每个元素包含原始 Promise 的状态和值。例如：

Promise.allSettled([promise1, promise2])
    .then(results => {
        for (const result of results) {
            console.log(result.status, result.value);
        }
    });

Promise.allSettled() 是一个新的 Promise API，它接收一个 Promise 数组，并在所有 Promise 完成后返回一个新的 Promise，该 Promise 的值是一个包含每个 Promise 状态和结果的对象数组。无论 Promise 是成功还是失败，它都会被解析。

首先，Promise.allSettled() 接受一个 Promise 数组作为参数，而 Promise.all() 也接受一个 Promise 数组，但两者在处理异步操作和返回结果上有不同的行为。

返回结果：

如果你需要知道所有异步操作的结果，无论成功还是失败，Promise.allSettled() 是最好的选择。
如果你只关心所有异步操作是否成功，而不在意失败的操作具体是什么，你可以选择 Promise.all()。
总的来说，Promise.allSettled() 和 Promise.all() 各有其特点，选择哪个方法取决于你的具体需求。

9.Promise.any()

和Promise.allSettled()的区别在于可以全部执行并且返回错误的Promise错误信息数组

10.Array.at()

取出数组中特定顺序的元素
在日常开发中，我们一般会使用[]，直接来获取数组中的元素，比如array[0]、array[2]，
但是如果是取出数组中的倒数第2个元素时候，我们得先求出数组的长度 array[array.length - 2],这个就比较麻烦了，
at()方法是JavaScript中数组对象的一个新方法，它可以根据指定的索引返回数组中对应的元素。如果指定的索引超出数组范围，at()方法返回undefined。

const array = [1,2,3,4,5,6,7,8];
console.log(array.at(0)); // 数组中元素索引为0的元素  1
console.log(array.at(-1)); // 倒数第一个元素  8
console.log(array.at(-2)); // 倒数第二个元素  7
console.log(typeof array.at(-10)); //返回undefined

除了数组，字符串和 TypedArray 对象现在也有 at() 方法。

const str = 'Hello world!';
console.log(str.at(0)); // H
console.log(str.at(1)); // e
console.log(str.at(-1)); // !
console.log(str.at(-3)); // l
console.log(typeof str.at(30)); // undefined


const typedArray = new Uint8Array([16, 32, 48, 64]);
console.log(typedArray.at(0)); // 16
console.log(typedArray.at(1)); // 32
console.log(typedArray.at(-1)); // 64
console.log(typedArray.at(-3)); // 32
console.log(typeof typedArray.at(30)); // undefined

11.“#”声明私有属性

以前我们用“_”来表示私有属性，但是不安全，仍然有可能被外部修改。在 JavaScript 中，使用 "#" 符号声明私有属性是一种相对较新的特性，被称为“私有字段”（Private Fields）。它是在 ECMAScript 2019 标准中引入的，主要用于防止类的属性被意外修改或访问。

class Person {
    #money=1
    constructor (name) {
      this.name = name
    }
    get money () {
      return this.#money
    }
    set money (money) {
      this.#money = money
    }
    showMoney () {
      console.log(this.#money)
    }
  }
  const p1 = new Person('fatfish')
  console.log(p1.money) // 1
  // p1.#money = 2 // We cannot modify #money in this way
  p1.money = 2
  console.log(p1.money) // 2
  console.log(p1.#money) // 未捕获的语法错误：私有字段“#money”必须在封闭的类中声明class

12.findLast()

findLast是一个用于在列表中查找最后一个满足特定条件的元素的函数。具体来说，这个函数会从列表的末尾开始逐个检查元素，直到找到第一个满足条件的元素为止。如果找不到满足条件的元素，函数会返回null或undefined。

const array = [1, 2, 3, 4, 5];  
const lastNumber = array.findLast(num => num > 3);  
console.log(lastNumber); // 输出：5

在这个例子中，findLast函数会在数组array中查找最后一个大于3的数字。由于5是最后一个大于3的数字，因此lastNumber的值为5。

----更新到2022即ES13

上一篇 下一篇

猜你喜欢

热点阅读