JavaScript ECMAScript 6의 모든 새로운 기능 요약

ECMAScript가 2015년에 ES6를 공식 출시한 지 8년 만입니다. 2015년부터 매년 6월에 해당 연도를 버전 번호로 새 버전이 출시됩니다.

이 많은 버전에는 많은 새로운 기능이 등장했습니다. 기억을 돕기 위해 이 기사에서는 모든 새로운 기능을 정리했습니다.

ps: ES2015 이후의 모든 버전을 통칭하여 ES6이라고 부르는 정보도 있고, ES6은 ES2015, ES7은 ES2016을 의미하는 등의 정보도 있는데 여기서는 논의하지 않겠습니다.

ES2015 (ES6)

ES2015는 가장 큰 변화가 있는 버전입니다. 기본적으로 ES2015 이전의 모든 콘텐츠가 다음 그림과 같이 확장되었습니다.

let, const 키워드 및 블록 수준 범위

ES6 이전에는 변수를 선언하는 방법이 var 키워드를 사용하는 것뿐이었습니다. ES2015에서는 변수와 상수를 선언하기 위해 let 및 const 키워드가 추가되었습니다

. 다음과 같습니다:

// 선언 변수 let v = 100
v = 200
// 상수 선언 const V = 200
// 상수 수정 // V = ​​​​300 //

let 및 const 키워드를 사용하여 선언된 변수 또는 상수는 블록 수준 범위를 가

집니다

.
  변수 v = 100
}
{
  발 = 200으로 놔두세요
}
console.log(v)
console.log(val) // 오류 val이 정의되지 않았습니다.

let 또는 const 키워드를 사용하여 선언된 변수는 변수 승격 특성이 없으며 임시 데드존이 있다는 점에 유의할 가치가 있습니다.

함수 확장을

통해 함수가 ES2015의 기본값을 사용할 수 있습니다. 샘플 코드는 다음과 같습니다.

// es2015 이전 function foo(v) {
  v = v ?: 100
  v를 반환하다
}
//es2015
함수 바(v = 100) {
  v를 반환하다
}

매개변수가 여러 개인 경우 기본 매개변수를 뒤에서 앞으로 사용해야 한다는 점에 유의할 필요가 있습니다.

ES2015에는 function 의 축약형인 화살표 함수가 추가되었습니다 . 샘플 코드는 다음과 같습니다.

function foo(v) {
  v``를 반환
}
// 화살표 함수가 작성됩니다. const foo = (v) => {
  v를 반환하다
}
// 약어 1
const foo = v => { // 하나의 매개변수만 괄호를 생략할 수 있습니다. return v
}
// 약어 2
const foo = v => v // 명령문에 return만 있는 경우 return과 중괄호를 생략할 수 있습니다.

화살표 함수의 this 실행 컨텍스트에 따라 결정되며 this 내부적으로 바인딩되지 않습니다. .

화살표 함수를 사용할 때 내부 인수 객체는 없지만 대신 나머지 매개변수를 사용합니다.

예제 코드는 다음과 같습니다.

const foo = (...args) => {
  // console.log(arguments) // ReferenceError: 인수가 정의되지 않았습니다.
  console.log(args) // args는 배열입니다.}
foo(1, 2, 3, 4) // [1, 2, 3, 4]

ES2015에서 함수에 추가된 name 속성은 함수의 이름을 가리킵니다.

샘플 코드는 다음과 같습니다:

function foo(v) {
  v를 반환하다
}
const 바 = v => v
console.log(foo.name) // foo
console.log(bar.name) //bar

값

. ES2015의 값 확장은 주로 Math 및 Number 객체에 몇 가지 메서드를 추가하고 이진수 및 8진수 표현 메서드를 추가합니다.

ES2015에서는 2진수를 나타내기 위해 0b 또는 0B 사용하고, 8진수를 나타내기 위해 0o 또는 0O 사용합니다.

샘플 코드는 다음과 같습니다:

console.log(0b111111111 === 511) // true
console.log(0o777 === 511) //

Number에 대해 true로 확장된 속성 및 메서드는 다음과 같습니다.

다음과 같습니다.

문자열 확장

ES2015에는 백틱 표시(`)를 사용하여 정의된 템플릿 문자열이 도입되었습니다. 템플릿 문자열은 형식을 유지하며 변수를 사용할 수 있습니다.

샘플 코드는 다음과 같습니다.

// `를 사용하여 템플릿 문자열을 정의합니다. let str = `a Bowl of Week`
// 템플릿 문자열은 let str2 = `A Bowl of Week` 형식을 유지할 수 있습니다.
// 템플릿 문자열은 변수를 사용할 수 있습니다. const myName = 'A Bowl of Week'
let str3 = `author: ${myName}` // ${}를 사용하여 ES2015를 래핑합니다

. 또한 다음과 같이 String 및 String 인스턴스에 대한 일부 메서드를 확장합니다.

의 확장은

ES2015에서 확장 연산자를 제공합니다. 즉, 배열을 확장하는 데 사용됩니다. 쉼표로 구분합니다.

샘플 코드는 다음과 같습니다.

const arr = [1, 2, 3, 4, 5, 6]
const newArr = [...arr] // 배열 복사 console.log(Math.max.call(null, ...arr)) // 배열의 각 항목을 매개변수로 사용합니다

. 하나씩 소개될 일련의 메소드를 제공합니다.

Array.from() : 배열과 유사한 객체 또는 반복 가능한 객체를 새 배열로 생성합니다 . 샘플 코드는 다음과 같습니다.

function foo() {
  return Array.from(arguments) // 인수를 배열로 변환}

console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]

Array.of() : 가변 개수의 인수를 사용하여 새 배열을 만듭니다. 예 , 샘플 코드는 다음과 같습니다:

Array.of(1) // [1]
Array.of(true, 1, 'A Bowl of Week') // [true, 1, 'A Bowl of Week']

Array.prototype.copyWithin(), 배열의 일부를 동일한 배열의 다른 위치에 얕게 복사합니다. , 이를 반환해도 원래 배열의 길이는 변경되지 않습니다.

샘플 코드는 다음과 같습니다:

const arr = [1, 2, 3, 4]

// 인덱스 2에서 시작하여 끝에서 인덱스 0에 콘텐츠를 복사합니다. arr.copyWithin(0, 2) // [ 3, 4, 3, 4 ]

Array.prototype.find() , 주어진 콜백 함수에 따라 , 첫 번째로 일치하는 요소를 찾고, 찾을 수 없으면 정의되지 않은 값을 반환합니다 . 샘플 코드는 다음과 같습니다.

const arr = [1, 2, 3, 4]
arr.find(item => item === 2) // 2 (표시 요소),

Array.prototype.findIndex() , 주어진 콜백 함수에 따라 첫 번째로 일치하는 요소의 인덱스를 찾고, 없으면 반환 - 1 에서 샘플 코드는 다음과 같습니다:

const arr = [1, 2, 3, 4]
arr.findIndex(item => item === 2) // 1 (인덱스를 나타냄)

Array.prototype.fill() , 주어진 값으로 배열을 채웁니다 . 샘플 코드는 다음과 같습니다:

const arr = [1, 2 , 3, 4 ]
// 인덱스 1-3을 주어진 값으로 채웁니다.
arr.fill('a Bowl of Week', 1, 3) // [ 1, 'a Bowl of Week', 'a Bowl of Week', 4 ]

Array.prototype.keys() 내용이 다음과 같은 반복 가능한 객체를 반환합니다 . 는 배열의 키이며 샘플 코드는 다음과 같습니다:

const arr = [1, true, 'A Bowl of Week']
const 키 = arr.keys()
for (키 구성) {
  console.log(i) // 순회 결과 0 1 2
}

Array.prototype.values() 는 내용이 배열의 값인 반복 가능한 객체를 반환합니다 .

샘플 코드는 다음과 같습니다:

const arr = [1, true, 'A Bowl of Zhou']
const 값 ​​= arr.values()
for (값의 구성) {
  console.log(i) // 순회 결과 1 true A Bowl of Week}

Array.prototype.entries() , 내용이 배열인 반복 가능한 객체를 반환합니다. 인덱스 0 은 원래 배열의 요소이고 1 은 요소입니다. 위치의 값,

샘플 코드는 다음과 같습니다:

const arr = [1, true, 'A Bowl of Week']

const 반복자 = arr.entries()
console.log(Array.from(iterator)) // [ [ 0, 1 ], [ 1, true ], [ 2, 'A Bowl of Week' ] ]

객체 확장

은 객체의 속성 이름과 속성 값이 일관되도록 속성 이름만 작성하면 됩니다.

샘플 코드는 다음과 같습니다.

const myName = 'A Bowl of Week'
const 연령 = 18
const 사람 = { 내 이름, 나이 }
console.log(person) // { myName: 'A Bowl of Zhou', age: 18 }

또한 객체 정의 시 속성 이름으로 [] 래핑된 표현식을 사용할 수 있습니다.

const myName = '한 그릇의 주간'
const 연령 = 18
const 사람 = {
  내 이름,
  ['a' + 'g' + 'e']: 나이,
}
console.log(person) // { myName: 'One Bowl Zhou', age: 18 }

Object.is() : 두 값이 같은지 비교하는 데 사용됩니다. ​​​​NaN ≠= NaN, +0을 해결하는 데 사용됩니다. === - 0 문제,

샘플 코드는 다음과 같습니다:

console.log(NaN === NaN) // false
console.log(+0 === -0) // 참

console.log(Object.is(NaN, NaN)) // 참
console.log(Object.is(+0, -0)) // false

Object.assign() : 하나 이상의 소스 객체에서 열거 가능한 모든 속성의 값을 대상 객체에 복사하고 대상 객체를 반환합니다.

예: 코드는 다음과 같습니다:

const person = Object.ass({}, { name: 'One Bowl Zhou' }, { age: 18 })
console.log(person) // { name: 'One Bowl Zhou', age: 18 }

• Object.getPrototypeOf() : 프로토타입 객체 가져오기 ;
• Object.setPrototypeOf() : 프로토타입 객체 설정 .

클래스는

ES2015의 클래스 개념을 제시하며, 구문 수준에서 클래스를 사용할 수 있습니다. 샘플 코드는 다음과 같습니다

.
  생성자(나이) {
    //속성 this.myName = '주간 한 그릇'
    this.age = 나이
  }
  // 정적 메소드 static print() {
    콘솔.로그()
  }
  //접속자 get myName() {
    console.log('게터')
    '일주일의 한 그릇'을 반환하다
  }
  myName(v) 설정 {
    console.log('setter' + v)
  }
  세트이름(v) {
    this.myName = v
  }
}
const 사람 = 새로운 사람(18)
person.setName('ywanzhou') // setter 접근자 트리거 console.log(person.myName) // getter 접근자 트리거

Modularity는

ES2015에서 최초의 공식 레벨 모듈화 사양인 ESModel 모듈화 사양을 제안했습니다. 사양에서는 모듈을 내보내려면 내보내기를 사용하고 모듈을 도입하려면 가져오기를 사용할 수 있습니다.

샘플 코드는 다음과 같습니다.

import a from 'm' // 모듈 m에서 기본 내보내기를 가져오고 이름을 a로 지정합니다.
import a, { b } from 'm' // 모듈 m에서 기본 내보내기를 가져오고 멤버 b를 별도로 가져옵니다.
import * as A from 'm' // 모듈의 모든 멤버 가져오기 import 'm' // m 모듈 실행 내보내기 const b = 1 // 별도로 내보내기 내보내기 기본값 b // 기본 내보내기 내보내기 { b } // 요청 시 내보내기 내보내기 { b as bb } // 이름 바꾸기 및 내보내기 내보내기 { b } from 'm' // 모듈 m에서 멤버 b 가져오기 및 구조 분해 할당 내보내기

ES2015에는 구조 분해 할당을 위한 새로운 구문이 추가되었습니다

.

또는 객체에서 지정된 값을 추출합니다.

샘플 코드는 다음과 같습니다:

// 배열의 구조 할당 let [name, age, Hobby = 'coding' /* 구조 할당의 기본값 */] = ['A Bowl 저우', 18]
// 두 변수의 값을 교환합니다. let a = 1
b = 2라고 하자
;[a, ​​​​b] = [b, a]
console.log(a, b) // 2 1

// 객체 구조 할당 let { name: ObjName /* 구조 분해 할당 rename*/, sex } = { name: 'A Bowl of Week', sex: 1 }

// 함수 매개변수 할당 해제 function bar({ name, age }) {
  이름 + 나이 반환
}
bar({ name: 'A Bowl of Weeks', age: 18 }) // A Bowl of Weeks 18

Symbol

Symbol은 ES2015의 새로운 데이터 유형으로 Symbol() 메서드를 통해 생성되며 문자열을 전달할 수 있습니다. Symbol

() 메소드를 통해 생성된 기호 값은 모두 고유합니다.

/**
 * 구문 * 기호([설명])
 * * 설명 -> 선택적 설명 정보입니다 */
//Symbol 유형의 값 생성 const mySymbol = Symbol()
console.log(mySymbol) // 기호()

const myName = Symbol('주 한 그릇')
console.log(typeof myName) // 기호

Symbol에는 여기에 소개되지 않은 일련의 속성과 메서드도 있습니다.

Promise

Promise는 ES2015에서 제공하는 비동기 솔루션 으로 콜백 지옥의 문제를 해결합니다.

Promise() 생성자를 통해 Promise 객체를 생성할 수 있습니다. 각 Promise 객체에는 다음과 같은 상태가 있습니다.

• 보류 중: 초기 상태, 성공도 실패도 아닙니다.
• 해결됨: 작업이 성공적으로 완료되었음을 의미합니다.
• 거부됨: 작업이 실패했음을 의미합니다.

• 보류 중→해결됨
• 보류 중→해결됨

이라는 두 가지 유형만 있습니다

. 일단 상태가 변경되면 다시 변경되지 않습니다.

Promise Promise 에는 각각 호출을 연결할 수 있는 then 메서드가 있습니다.

아래 그림과 같이

then Promise 가 반환됩니다

샘플 코드는 다음과 같습니다:

new Promise((resolve, Reject) => {
    console.log('나는 첫 번째 Promise의 로그입니다.')
    해결하다()
})
    .then(() => {
        console.log('그럼 제가 첫 번째 로그인입니다')
    })
    .then(() => {
        console.log('나는 두 번째 로그인이지만 예외가 있습니다.')
        새로운 오류 발생('오류')
    })
    .then(() => {
        console.log('그럼 세 번째 콜백의 로그인데 위에서 예외가 발생해서 실행하지 않겠습니다.')
    }, () => {
        console.log('저는 세 번째 콜백의 로그이고 실행했습니다.')
    })
    .then(() => {
        console.log('저는 4번째 로그이므로 정상적으로 실행할 수 있습니다.')
    })

/* 실행 결과는 다음과 같습니다. 나는 첫 번째 Promise의 로그입니다.
그럼 난 첫 번째 로그인이야
나는 두 번째의 로그인데, 그때는 세 번째의 두 번째 콜백의 로그입니다. 그러면 나는 그것을 정상적으로 실행할 수 있습니다.*/

관련 일부 Promise의 메소드는 다음과 같습니다:

• Promise.prototype.then() : Promise의 성공 및 실패에 대한 콜백 함수,
• Promise.prototype.catch() : then 메소드의 두 번째 매개변수와 동일합니다
• Promise.all() : 여러 인스턴스를 새 인스턴스로 압축하고 모든 인스턴스 상태 변경 후 결과 배열을 반환합니다(모든 변경 사항을 변경한 후 반환)
• Promise.race() : 여러 인스턴스를 새 인스턴스로 압축하고 모든 인스턴스 상태 반환 변경된 결과 (먼저 변경하고 먼저 반환)
• Promise.resolve() : 객체를 Promise 객체로 변환합니다. ( new Promise(resolve => resolve()) 과 동일)
• Promise.reject() : 객체를 rejected 상태로 변환합니다. Promise 객체( new Promise((resolve, reject) => reject()) 와 동일)

Iterator

Iterator는 다양한 데이터 구조에 대한 통합 액세스 메커니즘을 제공하는 인터페이스입니다. 구조는 반복 인터페이스를 배포하므로 통합된 방식으로 탐색할 수 있습니다.

반복 가능한 인터페이스를 구현하는 데이터 구조는 일반적으로 자체적으로 구현되거나 Symbol.iterator 속성을 상속하며 반복 가능한 객체입니다. Symbol.iterator 속성 자체는 현재 데이터 구조의 기본 반복자 생성 함수인 함수입니다.

next() 메서드를 포함하는 객체를 반복 가능한 객체라고 부를 수 있습니다.

아래와 같이

next() 개의 값을 포함하는 객체를 반환합니다

• value : 반복자가 반환한 JavaScript 값입니다. done 이 true 경우 생략할 수 있습니다.
• done : 불리언 값. false 이면 반복이 멈추지 않았다는 뜻이고, true 이면 즉시 반복자를 멈추고 value 값은 생략 가능하다.

JavaScript에서 기본적으로 제공하는 반복자 인터페이스는 아래 그림에 표시되어 있습니다.

이제 obj에 대한 반복자를 구현합니다. 코드는 다음과 같습니다.

const obj = {
    [Symbol.iterator] () {
        반품 {
            다음 () {
                console.log('반복자가 실행됨');
                반품 {
                    값: '',
                    done: true // 끝났는지 여부를 표시하고, true는 끝났음을 의미합니다.}
            }
        }
    }
}

되었는지

next() 하기 위해 print를 추가했습니다.

Generator

Generator는 ES2015에서 제공하는 비동기 프로그래밍 솔루션입니다. function 키워드 함수 이름과 함수 이름 사이에 * 별표를 사용하고, 함수 내에서 yield 키워드를 사용하여 다양한 상태를 정의합니다.

샘플 코드는 다음과 같습니다.

function* testGenerator() {
  // Yield는 상태 Yield 'a Bowl of Weeks'를 정의합니다.
  'esnew 기능'을 생성합니다.
  return 'generator' // Generator 종료, 나중에 Yield 키워드가 있어도 무효가 됩니다.}
const g = testGenerator() // Generator 객체를 반환하고 next() 메서드를 통해 상태를 이동합니다. g.next()
/* { value: '주 한 그릇', done: false } */

g.다음()
/* { value: '새로운 기능', done: false } */

g.다음()
/* { value: 'generator', done: true } */

Proxy 및 Refect

Proxy 객체는 기본 작업의 차단 및 사용자 정의를 구현하기 위한 프록시 객체를 생성하는 데 사용됩니다. 다음 표에 표시된 대로 13가지 기본 작업이 있습니다

Proxy 코드는 Proxy 객체의 사용을 보여줍니다

.
<html lang="ko">
<머리>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
  <title>세트를 통해 자동으로 dom 업데이트</title>
</head>

<본문>
  <p class="카드" 스타일="너비: 300px; 여백: 100px 자동">
    <p class="카드-본문">
      <h1 id="이름"></h1>
      <button id="btn" class="btn btn-primary">수정</button>
    </p>
  </p>
  <스크립트>
    // DOM 노드 가져오기 const name = document.getElementById('name')
    const btn = document.getElementById('btn')
    //값을 수정하는 함수 정의 const updateDOM = (el, value) => {
      el.innerHTML = 값
    }
    const 사람 = 새 프록시({
      이름: '죽 한 그릇',
    }, {
      set(대상, propKey, 값) {
        //내부 값이 변경되면 updateDOM을 호출합니다.
        updateDOM(이름, 값)
        타겟[propKey] = 값
        true를 반환
      },
    })
    name.innerHTML = 사람.이름
    // 수정 작업을 트리거하려면 버튼을 클릭하세요. btn.addEventListener('click', () => {
      person.name === '주 한 그릇'?
        (person.name = '죽 한 그릇') :
        (사람.이름 = '한그릇 저우')
    })
  </script>
</body>
</html>

위 코드는 데이터 바인딩을 위해 set 메소드를 사용합니다. 객체가 변경되면 DOM이 자동으로 업데이트됩니다.

Reflect는 ECMAScript2015에서 제공하는 개체입니다. 이는 JavaScript 작업을 가로채기 위한 몇 가지 정적 메서드를 제공합니다. 이러한 메서드는 Proxy의 handlers 메서드와 일치합니다.

Reflect는 생성자가 아니므로 인스턴스화할 수 없습니다.

Proxy 객체의 각 가로채기 작업(예: get , delete 등)은 그에 따라 내부적으로 Reflect 메서드를 호출합니다.

다음과 같이

Proxy의 handlers 에 있는 메서드 이름과 일치합니다

Set, Map, WeakSet, WeakMap

Set , Map , WeakSet 및 WeakMap 클래스의 인스턴스는 ES2015의 몇 가지 새로운 객체입니다.

• Set 과 WeakSet 배열과 유사합니다. 둘의 차이점은 Set 모든 데이터 유형을 저장할 수 있는 반면 WeakSet 객체에 대한 참조만 저장할 수 있다는 것입니다

. 실제 개발에서 Set 객체는 데이터 중복 제거를 구현하는 것입니다. 샘플 코드는 다음과 같습니다:

const arr = [1, 2, 2, 3, 4 , 3, 5]
const 세트 = 새로운 세트(arr)
// set 객체를 사용하여 모든 항목을 확장할 수 있습니다. console.log([...set]) // [ 1, 2, 3, 4, 5 ]

• Map 및 WeakMap 객체와 유사하며 다음에 저장됩니다. 키-값 쌍의 형태 예, 둘 사이의 차이점은 Map 의 키-값 쌍은 임의적일 수 있는 반면 WeakMap 의 키는 객체에 대한 참조여야 하며 값은 모든 유형이 될 수 있다는 것입니다.

ES2016 (ES7)

ES2016은 아래 그림과 같이 상대적으로 적은 수의 새로운 기능을 출시하며 주로 두 가지 새로운 기능을 출시합니다.

지수 연산자

ES2016에는 Math.pow()와 동일한 기능을 갖는 거듭제곱 연산자라고도 하는 새로운 지수 ** 가 있습니다

:

console.log(2 ** 10 === Math.pow (2, 10 )) // true

Array.prototype.includes() 메서드는

이

includes() 는 배열에 지정된 값이 포함되어 있는지 확인하고 부울 값을 반환하는 데 사용됩니다.

샘플 코드는 다음과 같습니다:

const arr = [1, 2, 3, 4, 5, NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true

includes() 사용할 때 NaN 과 NaN , +0 및 -0 이 동일하다는 점은 주목할 가치가 있습니다.

ES2017(ES8)

async/await 구문 설탕

Promise의 출현으로 콜백 지옥 문제가 해결되었지만 체인 호출이 너무 많으면 ES2017의 새로운 async/await 구문 설탕이 이 문제를 해결합니다.

Promise는 다음과 같이 작성됩니다:

;(function () {
  함수 약속(동사) {
    return new Promise((해결, 거부) => {
      해결하다(동사)
    })
  }
  const p = 약속(1)
  p.then(res => {
    반환 약속(res)
  }).then(res => {
    console.log(res)
  })
})()

다음 Promise가 이전 Promise에 의존하는 경우 이 호출 체인은 매우 길어질 것입니다. 이제 async/await 구문 설탕을 사용하여 다시 작성해 보겠습니다.

;(async function () {
  함수 약속(동사) {
    return new Promise((해결, 거부) => {
      해결하다(동사)
    })
  }
  const r1 = 약속 기다리기(1)
  const r2 = 약속 기다리기(r1)
  const res = 약속을 기다립니다(r2)
  console.log(res)
})()

보시다시피 async/await 구문 설탕을 사용하여 Promise를 플랫 작성 방법으로 다시 작성할 수 있습니다.

Atomics 객체

ES2017은 새로운 Atomics 객체를 추가합니다. 이 객체는 SharedArrayBuffer 및 ArrayBuffer 객체를 작동하기 위한 일련의 정적 메서드를 제공합니다. 이 객체는 new 키워드를 사용하여 인스턴스화할 수 없습니다. 이는 세 가지 정적 메서드만 제공

합니다

. ES2017에서는 Object에 대해 다음과 같이 확장되었습니다.

• Object.values() : 주어진 객체 자체의 모든 열거 가능한 속성 값 배열을 반환합니다.
• Object.entries() : 주어진 객체의 모든 열거 가능한 속성 값 배열을 반환합니다. 객체 자체. 열거된 속성에 대한 키-값 쌍의 배열입니다.
• Object.getOwnPropertyDescriptors() : 지정된 객체의 모든 자체 속성에 대한 속성 설명자를 반환합니다.

함수 확장을

사용하면 함수 매개변수 목록 끝에 쉼표를 추가할 수 있습니다. 후행 쉼표를 업데이트할 때 코드 한 줄만 변경하면 되기 때문에 이 작은 기능은 매우 유용합니다. 두 줄의 코드를 변경해야 합니다.

예제 코드는 다음과 같습니다:

function fun(
  아아아아,
  bbbbbb,
  cccc,
) {}

뒤에 쉼표가 있는 경우 끝에 한 줄만 추가하면 되고, 없으면 끝에 쉼표를 추가한 후 한 줄을 추가하면 됩니다. 버전 관리에서 한 줄이 아닌 두 줄이 변경됩니다.

문자열 확장은

ES2017에 문자열에 대한 두 가지 새로운 인스턴스 메서드를 추가합니다.

• padStart() : 문자열 시작 부분의 공백을 채웁니다.
• padEnd() : 문자열 끝 부분의 공백을 채웁니다.

const

str; = '주 한 그릇'
console.log(str.padStart(10)) /* 저우 한 그릇*/
console.log(str.padEnd(10)) /* 저우 이완*/

ES2018(ES9)

비동기 반복

에는 비동기 반복 가능 객체를 순회하는 데 사용할 수 있는 새로운 for await...of 문이 있습니다.

샘플 코드는 다음과 같습니다.

var asyncIterable = {
  [Symbol.asyncIterator]() {
    반품 {
      나: 0,
      다음() {
        if (this.i < 3) {
          return Promise.resolve({ value: this.i++, done: false })
        }

        Promise.resolve({ 완료: true }) 반환
      },
    }
  },
}
;(비동기 함수 () {
  대기(asyncIterable 수) {
    console.log(숫자)
  }
})()

// 0
// 1
// 2

정규식 확장

ES2018에서는 정규식에 다음과 같은 확장이 이루어졌습니다.

정규식 그룹 이름 지정:

ES2018 이전에는 정규식에서 그룹 이름을 지정할 수 없었습니다. 이 기능은 ES2018에 도입되었습니다. 참고로,

샘플 코드는 다음과 같습니다:

const RE_DATE = /(?<연도>d{4})-(?<월>d{2})-(?<일>d {2})/

const matchObj = RE_DATE.exec('2022-02-22')
const 연도 = matchObj.groups.year // 2022
const 월 = matchObj.groups.month // 02
const day = matchObj.groups.day // 22

s 수정자/dotALl 모드: 새로운 s 수정자는 . 를 허용하며 모든 단일 문자와 일치하며 **** 속성은 정규식 기호에서 " s " 수정을 함께 사용할지 여부를 나타냅니다. .

역방향 어설션: ES2018 이전에는 순방향 어설션만 존재했지만 ES2018에는 역방향 어설션 과 역부정 어설션이 추가되었습니다.

객체 전개 연산자

ES2015에서는 새로운 배열 전개 연산자가 추가되었습니다. ES2018에서는 이 기능이 객체에 추가되었습니다. 샘플 코드는 다음과 같습니다.

const n = { name: 'One Bowl of Zhou' }
const a = { 나이: 18 }
const 사람 = { ...n, ...a }
// 병합 객체 console.log(person) // { name: 'A Bowl of Zhou', age: 18 }

Promise.prototype.finally()

finally() 메소드는 Promise 상태가 되면 Promise 객체를 반환합니다. rejected 되거나 fulfilled 되면 finally() 콜백이 실행됩니다.

샘플 코드는 다음과 같습니다:

fetch(url)
  .then(res => {
    console.log(res)
  })
  .catch(오류 => {
    console.log(오류)
  })
  .finally(() => {
    console.log('끝')
  })

ES2019(ES10)

최적화는

ES2019에서 다음 두 가지 콘텐츠를 최적화했습니다.

되어

• Function.prototype.toString() .
• try...catch : 문의 catch 에는 매개 변수가 허용되지 않습니다. 샘플 코드는 다음과 같습니다.

{
  console.log('한 주의 한 그릇')
} 잡다 {
  console.error('몇 주의 한 그릇')
}

TrimStart()/trimLeft() 및 TrimEnd()/trimRight()

• String.prototype.trimStart : 문자열 왼쪽의 공백을 제거하는 데 사용됩니다.
• String.prototype.trimLeft : trimStart String.prototype의 별칭입니다
• String.prototype.trimEnd : 사용됨 문자열 오른쪽의 공백을 제거합니다.
• String.prototype.trimRight : 이는 TrimEnd 의 별칭 배열 확장 trimEnd

• Array.prototype.flat()

즉

, ES2019에서는 두 가지 배열 메서드가 확장됩니다.

• 메서드는 지정 가능한 배열을 반복적으로 탐색하고 탐색된 하위 배열의 요소와 모든 요소를 ​​병합하여 새 배열로 반환합니다. 간단히 말하면 배열을 평면화하는 것입니다.

const arr = [0, 1, 2, [3, 4]]
console.log(arr.Flat()) // [ 0, 1, 2, 3, 4 ]

• Array.prototype.flatMap() : 이 메서드는 배열을 매핑하고 평면화한 후 새 배열을 반환합니다(한 수준의 배열만 가능). 확장될 수 있습니다.)

Object.fromEntries()

ES2019의 새로운 Object.fromEntries() 메서드는 키-값 쌍 목록을 객체로 변환합니다. 이는 Object.entries() 메서드의 반대 작업입니다.

샘플

코드는 다음과 같습니다.

= {
  이름 : '주 한 그릇',
  나이: '18',
}
const e = Object.entries(사람)

const p = Object.fromEntries(e)
console.log(p) // { name: 'A Bowl of Week', age: '18' }

Symbol.prototype.descrption

description Symbol 객체 생성 시 선택적 설명 문자열을 반환하는 읽기 전용 속성입니다.

ES2020(ES11)

모듈화는

ES2020에 동적 가져오기를 추가합니다. 이는 필요할 때 모듈이 로드된다는 것을 의미합니다. 이는 오버헤드와 페이지 로딩 시간을 줄일 수 있습니다:

import('/modules/my-module.js'). then(모듈 => {
  // 모듈로 뭔가를 합니다.
})

동적 가져오기는 Promise를 반환하는 import() 메서드를 사용합니다.

ES2020에서는 import 에 meta 객체도 추가되어 상황별 메타데이터 속성 객체를 JavaScript 모듈에 노출합니다.

BigInt 데이터 유형

BigInt의 출현은 JavaScript에서 허용되는 최대 수가 2**53-1 이라는 문제를 해결합니다. BigInt 모든 큰 정수를 나타낼 수 있습니다.

const theBiggestInt = 9007199254740991n;
const alsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n
const hugeString = BigInt("9007199254740991");
// ↪ 9007199254740991n
const hugeHex = BigInt("0x1fffffffffffff");
// ↪ 9007199254740991n
const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n

globalThis 객체

globalThis 는 전역 객체의 도입인 ES2020에서 도입되었습니다. Node의 전역 객체는 Global 이고 브라우저 환경은 Window 입니다. 다음 코드는 GlobalThis 가 있는지 여부의 차이를 보여줍니다

. var getGlobal = 함수() { 
  if (typeof self !== '정의되지 않음') { return self } 
  if (창 유형 !== '정의되지 않음') { 반환 창 } 
  if (typeof 전역 !== '정의되지 않음') { return global } 
  throw new Error('전역 객체를 찾을 수 없습니다'); 
}; 

var globals = getGlobal(); 

if (typeof globals.setTimeout !== '함수') { 
  // 이 환경에서는 setTimeout이 없습니다! 
}

// if (typeof globalThis.setTimeout !== 'function') {
  // 이 환경에서는 setTimeout이 없습니다!
}

Null 값 병합 연산자

Null 값 병합 연산자는 두 개의 물음표로 표시됩니다. 이 연산자는 논리 OR 연산자와 유사한 논리 연산자이기도 합니다. 계산 규칙은 왼쪽 피연산자가 null 이거나 undefined 한 오른쪽 피연산자가 반환되고, 그렇지 않으면 왼쪽 피연산자가 반환된다는 것입니다. 논리 OR 연산자는 왼쪽 피연산자가 boolean 유형으로 변환되고 false 인 경우에만 오른쪽 피연산자를 반환합니다.

샘플 코드는 다음과 같습니다:

console.log(null ?? 10) // 10
console.log(정의되지 않음 ?? 10) // 10
Console.log (false ?? 10) //

값

이 값을 할당하십시오

코드는 다음과 같습니다.

var 값

// 값 값이 널 또는 정의되지 않은 경우 값 10을 지정하십시오.
값 = 값?
Console.log (value) // 10it는

널 값 연합 연산자와 논리적이거나 동시에 사용될 수 없다는 점에 주목할 가치가 있습니다. 그렇지 않으면 해결책은 () 사용하여 우선 순위를 표시하는 것입니다.

옵션 연산자 옵션

체인 연산자는 객체의 체인에서 속성의 값을 읽는 데 사용됩니다 속성 Aab , 먼저 A 존재하는지 확인해야합니다. Aab 에 액세스하기 전에 Aa 존재하는지 확인해야합니다. 그렇지 않으면 오류 가보고됩니다.

옵션 연산자를 사용하면 그러한 문제가 발생하지 않으면 한 부분이 존재하지 않는 한 undefind 가 반환되고 오류가보고되지 않습니다.

var a = {}

// console.log (AAB) // Error Console.Log (AA? .B) //

샘플 코드는 다음과 같습니다.

var obj = {}.

// obj.fun () 메소드가 존재하면 바로 아래에 호출됩니다.

obj.fun

?

Promise.allSettled()

ES2021 (ES12)

string.prototype.replaceall ()

replaceAll() 메소드는 새 문자열 의 내용을 반환합니다

.
const newstr = str.replaceall ( 'porridge', 'week')
Console.log (Newstr) //

숫자

분리기

( _ )는 숫자를 쉽게 읽을 수 있도록합니다

(

1_0000_0000

) // 기호 10000000은

읽기 쉬운 결과에만 영향을 미치지 않습니다

WeakRef 다른 물체에 대한 참조. 약한 참조는 약하게 참조 된 물체가 GC에 의해 재활용되는 것을 막지 않습니다.

약속

Promise.any() promise.all() Promise.any() (즉, 모든 약속이 실패/거부), 실패한 약속 및 골재 유형의 인스턴스가 반환됩니다.

논리 할당 연산자

같이

ES2021에 추가되었습니다.

=

• &&=
• ||=
• ??=

] = [true, false]
f1 && = '주중의 그릇'// str = str && '몇 주 그릇'에 해당합니다.
f2 || = '주 그릇'// str = str ||

??

= '주중의 그릇 // str = str?'

클래스의 확장을

통해 ES2022의 constructor 에서 클래스 멤버를 정의 할 수 있습니다 .

Class C {

  myname = 'zhou의 그릇'
}
/* 둘 다 일관성이 있습니다*/
클래스 C {
  생성자() {
    myname = 'zhou의 그릇'
  }
}

멤버가 초기화없이 선언되면 기본값은 정의되지 않습니다.

ES2022에서는 # 로 시작하는 변수를 클래스의 개인 구성원으로 사용할 수 있습니다.

Class C {

.

  #myname = '한 그릇 주간'
}
const c = 새로운 c ()
Console.log (#myname) // 개인 필드 '#Myname'은

await 에서는 최상위에 사용

됩니다

Async

async 를 사용하지 않고 최상위 레벨.

awaitasyncfun ()
console.log (123)

object.hasown (

)

객체 Object.hasOwn()

  이름 : 'Zhou의 그릇',
  나이: 18,
}
console.log (Object.hasown (person, 'name')) // true
console.log (object.hasown (person, 'sex')) // false

array.prototype.at ()

es2022의 새로운 at() 메소드는 배열의 멤버를 얻는 것이며 매개 변수는 색인입니다. 배열의 인덱스를 직접 사용하는 것과 다르면 샘플 코드는 다음과 같습니다.

const arr = [1, 2, 3, 4, 5,. 6]
Console.log (arr.at (-1)) // 6
// arr [arr.length -1]

d 수정 자

exec() 표현식은 A /d 수정자를 추가하면 A /d 수정자가있는 경우 결과가 더 많은 지수를 반환합니다. 일치하는 결과의 시작 인덱스 값을 원래 문자열에서 나타내는 데 사용되는 속성.

샘플 코드는 다음과 같습니다.

const str = 'javaScript'
const r = /a /d

const m = r.exec (str)
Console.log (M.Indices [0]) // [1, 2]

작성

했습니다.

마인드 맵은 다음과 같습니다.