ES10의 5가지 새로운 기능

올해는 ECMAScript 2019(줄여서 ES2019)가 출시됩니다. 새로운 기능에는 Object.fromEntries(), TrimStart(), TrimEnd(), flat(), flatMap(), 기호 객체의 설명 속성, 선택적 캐치 바인딩 등이 포함됩니다.

1.Object.fromEntries()

JavaScript에서는 데이터를 한 형식에서 다른 형식으로 변환하는 것이 매우 일반적입니다. 객체를 배열로 쉽게 변환하기 위해 ES2017에서는 Object.entrie() 메서드를 도입했습니다. 이 메서드는 개체를 매개 변수로 사용하고 [key, value] 형식으로 개체 자체의 열거 가능한 문자열 키 속성 쌍의 배열을 반환합니다. 예:

const obj = {one: 1, two: 2, three: 3};

console.log(Object.entries(obj));    
// => [["one", 1], ["two", 2], ["three", 3]]

하지만 반대로 키-값 쌍 목록을 객체로 변환하고 싶다면 어떻게 해야 할까요? Python과 같은 일부 프로그래밍 언어에서는 이러한 목적으로 dict() 함수를 제공합니다. Underscore.js 및 Lodash에는 _.fromPairs 함수도 있습니다.

ES2019에서는 JavaScript에 유사한 기능을 제공하는 Object.fromEntries() 메서드를 도입했습니다. 이 정적 메서드를 사용하면 키-값 쌍 목록을 객체로 쉽게 변환할 수 있습니다.

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}

보시다시피 Object.fromEntries()는 Object.entries()와 동일하며 정반대입니다. 이전에는 Object.fromEntries()와 동일한 기능을 구현하는 것이 가능했지만 구현 방식은 약간 복잡했습니다.

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const Array.from(myArray).reduce((acc, [key, val]) 
=> Object.assign(acc, {[key]: val}), {})

console.log(obj);    // => {one: 1, two: 2, three: 3}

Object.fromEntries()에 전달된 인수는 반복 가능한 프로토콜을 구현하는 모든 개체가 될 수 있다는 점을 기억하세요. , 두 개의 요소를 반환하는 한 배열과 유사한 객체로 충분합니다.

예를 들어 다음 코드에서 Object.fromEntries()는 Map 객체를 매개변수로 사용하고 키와 해당 값이 Map의 쌍으로 제공되는 새 객체를 생성합니다.

const map = new Map();
map.set('one', 1);
map.set('two', 2);

const obj = Object.fromEntries(map);

console.log(obj);    // => {one: 1, two: 2}

Object.fromEntries( ) 변환 방법 객체도 매우 유용합니다. 다음 코드를 고려하세요.

const obj = {a: 4, b: 9, c: 16};

// 将对象转换为数组
const arr = Object.entries(obj);

// 计算数字的平方根
const map = arr.map(([key, val]) => [key, Math.sqrt(val)]);

// 将数组转换回对象
const obj2 = Object.fromEntries(map);

console.log(obj2);  // => {a: 2, b: 3, c: 4}

위 코드는 객체의 값을 제곱근으로 변환합니다. 이를 위해 먼저 객체를 배열로 변환한 다음 map() 메서드를 사용하여 배열에 있는 값의 제곱근을 구합니다. 결과는 객체로 다시 변환할 수 있는 배열입니다.

Object.fromEntries()를 사용하는 또 다른 사례는 이 예제에 표시된 것처럼 URL의 쿼리 문자열을 처리하는 것입니다.

const paramsString = 'param1=foo&param2=baz';
const searchParams = new URLSearchParams(paramsString);

Object.fromEntries(searchParams);    // => {param1: "foo", param2: "baz"}

이 코드에서 쿼리 문자열은 URLSearchParams() 생성자에 전달됩니다. 그런 다음 반환 값(예: URLSearchParams 객체 인스턴스)이 Object.fromEntries() 메서드에 전달되고 결과는 각 매개변수를 속성으로 포함하는 객체입니다.

Object.fromEntries() 메서드는 현재 4단계 제안이므로 ES2019 표준에 포함될 준비가 되었습니다.

2. TrimStart() 및 TrimEnd()

trimStart() 및 TrimEnd() 메서드는 TrimLeft() 및 TrimRight()와 동일하게 구현됩니다. 이러한 메서드는 현재 4단계에 있으며 padStart() 및 padEnd()와 일치하도록 사양에 추가될 예정입니다. 몇 가지 예를 살펴보세요.

const str = "   string   ";

// es2019
console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"

// 相同结果
console.log(str.trimLeft());     // => "string   "
console.log(str.trimRight());    // => "   string"

웹 호환성을 위해 TrimLeft() 및 TrimRight()는 다음과 같이 유지됩니다. TrimStart() 및 TrimEnd()의 별칭입니다.

3. flat() 및 flatMap()

flat() 메서드는 다차원 배열을 1차원 배열로 평면화할 수 있습니다.

const arr = ['a', 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

과거에는 다중 차원 배열을 평면화하기 위해 Reduce() 또는 concat()를 자주 사용했습니다. -차원 배열:

const arr = ['a', 'b', ['c', 'd']];
const flattend = [].concat.apply([], arr);

// or
// const flattened =  [].concat(...arr);

console.log(flattened);    // => ["a", "b", "c", "d"]

제공된 배열에 null 값이 있으면 해당 값은 폐기됩니다.

const arr = ['a', , , 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

flat()은 중첩 배열을 평면화해야 하는 수준 수를 지정하는 선택적 매개 변수도 허용합니다. 인수가 제공되지 않으면 기본값 1이 사용됩니다.

const arr = [10, [20, [30]]];

console.log(arr.flat());     // => [10, 20, [30]]
console.log(arr.flat(1));    // => [10, 20, [30]]
console.log(arr.flat(2));    // => [10, 20, 30]

flatMap() 메서드는 map()과 flat()을 단일 메서드로 결합합니다. 먼저 제공된 함수의 반환 값을 사용하여 새 배열을 만든 다음 해당 배열의 모든 하위 배열 요소를 연결합니다. 예는 다음과 같습니다.

const arr = [4.25, 19.99, 25.5];

console.log(arr.map(value => [Math.round(value)]));    
// => [[4], [20], [26]]

console.log(arr.flatMap(value => [Math.round(value)]));    
// => [4, 20, 26]

배열은 깊이 수준 1로 평면화됩니다. 결과에서 항목을 제거하려면 빈 배열을 반환하면 됩니다.

const arr = [[7.1], [8.1], [9.1], [10.1], [11.1]];

// do not include items bigger than 9
arr.flatMap(value => {
  if (value >= 10) {
    return [];
  } else {
    return Math.round(value);
  }
});  

// returns:
// => [7, 8, 9]

콜백 함수는 현재 요소 외에 요소도 받습니다. 처리 중인 인덱스와 배열 자체에 대한 참조입니다. flat() 및 flatMap() 메서드는 현재 4단계에 있습니다.

4. Symbol 객체의 Description 속성

Symbol을 생성할 때 디버깅을 위해 설명(description)을 추가할 수 있습니다. 때로는 코드의 설명에 직접 액세스하는 것이 유용할 수 있습니다.

ES2019는 기호 설명이 포함된 문자열을 반환하는 기호 개체에 읽기 전용 속성 설명을 추가합니다.

let sym = Symbol('foo');
console.log(sym.description);    // => foo

sym = Symbol();
console.log(sym.description);    // => undefined

// create a global symbol
sym = Symbol.for('bar');
console.log(sym.description);    // => bar

5. 선택 사항 catch

try catch 문의 catch는 때때로 쓸모가 없습니다.

try {
  // 使用浏览器可能尚未实现的功能
} catch (unused) {
  // 这里回调函数中已经帮我们处理好的错误
}

이 코드의 catch 콜백 정보는 유용하지 않습니다. 그러나 SyntaxError 오류를 피하기 위해 이런 방식으로 작성되었습니다. ES2019는 catch 주위의 괄호를 생략할 수 있습니다:

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

추가: ES2020의 String.prototype.matchAll

matchAll() 메서드는 ES2020 4단계 제안으로, 정규식에 대한 모든 일치 항목(캡처 그룹 포함)에 대해 반복자 개체를 반환합니다.

match() 메서드와 일관성을 유지하기 위해 TC39는 "matches" 또는 Ruby의 "scan"과 같은 다른 제안된 이름 대신 "matchAll"을 선택했습니다. 간단한 예를 살펴보십시오.

const re = /(Dr\. )\w+/g;
const str = 'Dr. Smith and Dr. Anderson';
const matches = str.matchAll(re);

for (const match of matches) {
  console.log(match);
}

// logs:
// => ["Dr. Smith", "Dr. ", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr. ", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]

이 정규 표현식의 캡처 그룹은 문자 "Dr" 뒤에 점과 공백이 오는 것과 일치합니다. w+는 임의의 단어 문자와 한 번 이상 일치합니다. 그리고 g 플래그는 엔진이 문자열 전체에서 패턴을 검색하도록 지시합니다.

이전에는 동일한 결과를 얻기 위해 루프에서 exec() 메서드를 사용해야 했는데 이는 그다지 효율적이지 않았습니다.

const re = /(Dr\.) \w+/g;
const str = 'Dr. Smith and Dr. Anderson';
let matches;

while ((matches = re.exec(str)) !== null) {
  console.log(matches);
}

// logs:
// => ["Dr. Smith", "Dr.", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr.", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]

重要的是要注意尽管match() 方法可以与全局标志g一起使用来访问所有匹配，但它不提供匹配的捕获组或索引位置。 比较以下代码：

const re = /page (\d+)/g;
const str = 'page 2 and page 10';

console.log(str.match(re));    
// => ["page 2", "page 10"]

console.log(...str.matchAll(re)); 
// => ["page 2", "2", index: 0, input: "page 2 and page 10", groups: undefined] 
// => ["page 10", "10", index: 11, input: "page 2 and page 10", groups: undefined]

总结

在这篇文章中，我们仔细研究了 ES2019 中引入的几个关键特性，包括Object.fromEntries()，trimStart(), trimEnd(), flat(), flatMap()，symbol 对象的description 属性以及可选的catch 。

更多相关知识请关注JavaScript视频教程栏目

위 내용은 ES10의 5가지 새로운 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!