ECMAScript 是 JavaScript 的标准化规范。自 1997 年发布第一个版本以来,它已经更新迭代了多个版本。2020 年发布的 ECMAScript 2020 (ES2020) 主要包括一些新特性与 API 的新增。在本篇文章中,我们将会探讨对象的各种方法,这些新的功能对于前端开发者来说非常有用。
更新的 Object.prototype.toString 方法
在 ES2020 中,Object.prototype.toString() 方法现在可以区分出原始值类型的包装对象,这意味着我们可以使用这种方法来区分一个字符串、数字、布尔型等实例对象和他们的原始类型。
以前的版本中,在使用 toString() 方法时,所有类型都被转换成了 [object Object],这种方法是无法分辨这些类型的。在 ES2020 中,这个问题得到了解决,我们可以通过以下示例代码查看实现。
console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array]
console.log(Object.prototype.toString.call('Hello World')); // [object String]
console.log(Object.prototype.toString.call(123)); // [object Number]
console.log(Object.prototype.toString.call(true)); // [object Boolean]使用 Object.fromEntries 转换数组为对象
ES2020 引入了一个新的方法 Object.fromEntries,这个方法可以将包含键值对数组转换为一个对象。在这种情况下,数组中的每一个条目将成为对象的一对键值。多数情况下,这个函数是将 Object.entries 转换为对象。
let myArr = [
['a', 1],
['b', 2],
['c', 3]
];
console.log(Object.fromEntries(myArr)); // {a: 1, b: 2, c: 3}上述代码会输出一个包含给定数组中的所有键值对的对象。
新的可选链运算符
在 ES2020 中,我们可以使用新的可选链运算符 ?. 用来访问一个深层属性,即时这个属性不存在也不会报错。 这个功能非常常用于进行异步操作的API调用。
let myObj = {
data: {
name: 'Alice'
}
};
console.log(myObj?.data?.name); // Alice
console.log(myObj?.nope?.name); // undefined,但是不会报错在上述的代码中,使用可选链运算符 ?. 可以在遇到 nope 属性不存在时返回 undefined,而不会导致一个错误抛出。
新介绍的字符串方法
ES2020 也对原生字符串函数进行了增强。其中之一就是 matchAll 方法,这个方法可以与正则表达式的全局标志 g 结合使用,批量匹配所有的文本值,并以迭代器的形式返回这个匹配值的数据结构。这个功能非常有用,可以减少自己编写迭代器的代码量。
// www.javascriptcn.com code example
let origStr = 'In three words I can sum up everything I\'ve learned about life: it goes on.';
let regex = /[a-y]+/g;
let matches = origStr.matchAll(regex);
for (const match of matches) {
console.log(match);
}在上述的代码中,使用 matchAll() 方法和正则表达式将匹配到所有的文本值,返回一个数据结构,它提供了多次迭代匹配结果的机会。这个代码的输出将会是:
// www.javascriptcn.com code example Array [ "n", index: 3, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "three", index: 3, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "words", index: 9, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "I", index: 15, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "can", index: 17, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "sum", index: 21, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "up", index: 25, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "everything", index: 28, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "ve", index: 40, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "d", index: 44, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "about", index: 47, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "it", index: 54, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "goes", index: 57, input: "In three words I can sum up everything I've learned about life: it goes on." ] Array [ "on", index: 62, input: "In three words I can sum up everything I've learned about life: it goes on." ]
结语
在本篇文章中,我们介绍了 ES2020 中一些包含对象方法和字符串方法的新增特性。这些方法将会帮助前端开发者快速解决一些繁琐且重复的编程任务。我们也建议学习者进行深入的学习并快速上手使用这些新的特性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67d7cea1a941bf7134dfa2f2