이번주 자바스크립트 2-JS 튜토리얼-php.cn

이번주 자바스크립트 2

Patricia Arquette

풀어 주다： 2024-11-30 07:40:16

원래의

433명이 탐색했습니다.

This week Javascript 2

JavaScript는 계속 발전하고 있습니다. 최신 중요 업데이트인 ECMAScript 2023(ES14)은 2023년 6월에 출시되었습니다. 이 업데이트에는 언어 기능을 향상하고 개발자 효율성을 향상시키는 몇 가지 새로운 기능이 도입되었습니다.

ECMAScript 2023의 주요 기능

1. 최상위 대기
최상위 레벨 Wait의 도입으로 개발자는 모듈의 최상위 레벨에서 Wait 키워드를 사용할 수 있게 되었고, 이를 비동기 함수로 래핑할 필요 없이 비동기 코드를 단순화할 수 있게 되었습니다.

// Using top-level await
const data = await fetch('https://api.example.com/data');
const jsonData = await data.json();
console.log(jsonData);

로그인 후 복사

2. 새로운 배열 방법
ECMAScript 2023에는 원래 배열을 변경하지 않는 배열 조작을 위한 몇 가지 새로운 방법이 추가되었습니다.

toSorted(): 새로운 정렬된 배열을 반환합니다.
toReversed(): 요소가 역순으로 포함된 새 배열을 반환합니다.
toSpliced(): 원본을 변경하지 않고 요소를 제거하거나 추가한 새 배열을 반환합니다.

예:

const numbers = [3, 1, 4, 1, 5];

// Using toSorted
const sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // [1, 1, 3, 4, 5]

// Using toReversed
const reversedNumbers = numbers.toReversed();
console.log(reversedNumbers); // [5, 1, 4, 1, 3]

// Using toSpliced
const splicedNumbers = numbers.toSpliced(1, 2); // Remove two elements starting from index 1
console.log(splicedNumbers); // [3, 5]

로그인 후 복사

3. findLast() 및 findLastIndex()
이러한 방법을 사용하면 먼저 배열을 뒤집을 필요 없이 특정 조건을 만족하는 마지막 요소나 인덱스를 찾을 수 있습니다.

예:

const numbers = [5, 12, 50, 130, 44];

// Using findLast
const lastGreaterThan40 = numbers.findLast(num => num > 40);
console.log(lastGreaterThan40); // 130

// Using findLastIndex
const lastIndexGreaterThan40 = numbers.findLastIndex(num => num > 40);
console.log(lastIndexGreaterThan40); // 3 (index of 130)

로그인 후 복사

4. RegExp 일치 지수 API
이 기능은 문자열에서 일치 항목의 시작 및 끝 인덱스를 제공하여 정규식을 향상시킵니다.

예:

const regex = /(foo)/g;
const str = 'foo bar foo baz';
const matches = [...str.matchAll(regex)];

for (const match of matches) {
    console.log(`Match: ${match[0]}, Indices: ${match.indices[0]}`);
}
// Output:
// Match: foo, Indices: [0, 3]
// Match: foo, Indices: [10, 13]

로그인 후 복사

5. 오류 원인 확장
이 기능을 사용하면 개발자는 오류 발생 시 원인 속성을 첨부하여 추가 컨텍스트를 제공할 수 있습니다.

예:

try {
    throw new Error('Something went wrong', { cause: 'Invalid input' });
} catch (error) {
    console.error(error.message); // Something went wrong
    console.error(error.cause); // Invalid Input
}

로그인 후 복사

미래 전망: ECMAScript 2024
ECMAScript 2024(ES15)를 기대하면서 예상되는 기능은 다음과 같습니다.