JavaScript ES2019中的8个新功能

第二阶段:草稿

第3阶段:候选版

第4阶段:已完成/已批准

以下链接可以查看第0阶段第1阶段到第3阶段所有提案

我也不喜欢介绍,所以让我们开始逐一命名和解释这些功能。

可选的Catch绑定

可选catch绑定的建议是能够在不使用catch绑定的地方选择性地删除它。

try {
  // trying to use a new ES2019 feature
  // which may not be implemented in other browsers
} catch (unused) {
  // revert back to old way
}

现在可以删除未使用的绑定。

try {
  ...
} catch {
  ...
}

JSON超集

此提议的动机是JSON字符串可以包含未转义的U+2028 LINE SEPARATOR 和 U+2029 PARAGRAPH SEPARATOR字符,而ECMAScript字符串则不能。 在部署ES2019之前,它会产生SyntaxError: Invalid or unexpected token 错误。

const LS = eval('"\u2028"');
const PS = eval("'\u2029'");

符号描述

符号在ES2015中引入,具有非常独特的功能。 在ES2019中,它现在可以提供给定的描述。 其目标是避免间接从Symbol.prototype.toString获取提供的描述。

const mySymbol = Symbol('myDescription');

console.log(mySymbol); // Symbol(myDescription)

console.log(mySymbol.toString()); // Symbol(myDescription)

console.log(mySymbol.description); // myDescription

Function.prototype.toString  - 修订版

我们之前已经在函数原型中使用了toString方法,但是在ES2019中它已被修改并包含函数内的注释,但请注意它在Arrow函数上不起作用。

function /* comment */ foo /* another comment */ (){}

// Before
console.log(foo.toString()); // function foo(){}

// Now ES2019
console.log(foo.toString()); // function /* comment */ foo /* another comment */ (){}


// Arrow Syntax
const bar /* comment */ = /* another comment */ () => {}

console.log(bar.toString()); // () => {}

Object.fromEntries

它是Object.entries的反向方法,它可以是克隆对象的方法之一。

const obj = {
    prop1: 1,
    prop2: 2,
};

const entries = Object.entries(obj);

console.log(entries); // [ [ 'prop1', 1 ], [ 'prop2', 2 ] ]

const fromEntries = Object.fromEntries(entries);

console.log(fromEntries); // Object { prop1: 1, prop2: 2 }

console.log(obj === fromEntries); // false

小心,因为任何嵌入式对象/数组都只是通过引用复制。

const obj = {
    prop1: 1,
    prop2: 2,
    deepCopy: {
        mutateMe: true
    }
};

const entries = Object.entries(obj);
const fromEntries = Object.fromEntries(entries);

fromEntries.deepCopy.mutateMe = false;

console.log(obj.deepCopy.mutateMe); // false

格式良好的JSON.stringify

这也是由同一个人提出的,并且与JSON超集特征有关。 ES2019不是将未配对的代理代码点作为单个UTF-16代码单元返回,而是用JSON转义序列表示它们。

// Before
console.log(JSON.stringify('\uD800')); // "�"

// Now ES2019
console.log(JSON.stringify('\uD800')); // "\ud800"

String.prototype trimStart和trimEnd

我们已经在String原型中使用了trim方法,它删除了字符串开头和结尾之间的空格。 但是现在ES2019引入了trimStart和trimEnd。

// Trim
const name = "  Codedam ";
console.log(name.trim());  // "Codedam"


// Trim Start
const description = "  Unlocks Secret Codes ";
console.log(description.trimStart());  // "Unlocks Secret Codes "


// Trim End
const category = "  JavaScript ";
console.log(category.trimEnd());    // "  JavaScript"

Array.prototype flat和flatMap

flat方法创建一个新数组,所有子数组元素以递归方式连接到指定的深度。 默认情况下,深度为1,使数组上第一层嵌套数组变平。

const arr = [1, 2, [3, 4, [5, 6]]];
arr.flat(); // [1, 2, 3, 4, [5, 6]]
arr.flat(2); // [1, 2, 3, 4, 5, 6]
 
 
// You can use Infinity to flatten all the nested arrays no matter how deep the array is
 
const arrExtreme = [1, [2, [3, [4, [5, 6, 7, [8, 9]]]]]];
arrExtreme.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

flatMap类似于flat并且与map相关,在map中它映射数组然后将其展平。

const arr = ['Codedam', 'is Awsome', '!'];

const mapResult = arr.map(item => item.split(' '));
console.log(mapResult); // [ [ 'Codedam' ], [ 'is', 'Awsome' ], [ '!' ] ]

const flatMapResult = arr.flatMap(chunk => chunk.split(' '));
console.log(flatMapResult); // ['Codedam', 'is',  'Awsome', '!'];

补充

我还想强调一下现在阶段3中的一些有用的即将推出的功能。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/90cefdf3137680727a02c2fd5a6cd414.html