>웹 프론트엔드 >JS 튜토리얼 >최신 ES8 기능 개요

최신 ES8 기능 개요

巴扎黑
巴扎黑원래의
2017-07-21 09:59:313729검색

ECMAScript 2017(ES8) 기능 개요는 ES8 릴리스에서 편집되었으며 여기에 저자의 최신 JavaScript 개발: 구문 기본 및 실용 기술 기사 시리즈에 요약된 주요 새로운 기능이 있습니다. 또한 매주 프런트 엔드를 팔로우하실 수 있습니다. 직접 정보를 얻으려면 시리즈를 나열하세요.

ECMAScript 2017 또는 ES8은 2017년 6월 말에 TC39에서 공식적으로 출시되었습니다. 여기에서 전체 버전을 찾아볼 수 있습니다. ES8의 대표적인 기능에는 문자열 채우기, 객체 값 탐색 및 객체 속성 설명자 획득이 포함됩니다. 함수 매개변수 목록 및 호출의 쉼표, 비동기 함수, 공유 메모리 및 원자적 연산 등

문자열 채우기

ES8에는 padStart 및 padEnd라는 내장 문자열 채우기 기능이 추가되었습니다. 이 함수는 문자열의 머리 부분이나 끝 부분을 채워 문자열이 고정 길이에 도달하도록 보장합니다. 개발자는 패딩 문자열을 지정하거나 사용할 수 있습니다. 함수는 다음과 같이 선언됩니다:

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])

위에 표시된 것처럼 함수의 첫 번째 매개변수는 최종 생성된 문자열의 길이인 대상 길이입니다.

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'
'es8'.padEnd(2);          // 'es8'
'es8'.padEnd(5);          // 'es8  '
'es8'.padEnd(6, 'woof');  // 'es8woo'
'es8'.padEnd(14, 'wow');  // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');     // 'es86666'

Object value traversal

Object.values ​​​​함수는 지정된 객체의 열거 가능한 속성 값의 배열을 반환합니다. 배열의 값 순서는 for-in과 일치합니다. 루프 함수 선언은 다음과 같습니다.

Object.values(obj)

첫 번째 매개변수 obj는 탐색해야 하는 대상 객체입니다. 객체 또는 배열일 수 있습니다(배열은 키가 첨자인 객체로 간주될 수 있습니다).

const obj = { x: 'xxx', y: 1 };
Object.values(obj); // ['xxx', 1]

const obj = ['e', 's', '8']; // same as { 0: 'e', 1: 's', 2: '8' };
Object.values(obj); // ['e', 's', '8']

// when we use numeric keys, the values returned in a numerical 
// order according to the keys
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']
Object.values('es8'); // ['e', 's', '8']
Object.entries 메소드는 의 열거 가능한 속성과 값을 2차원 배열 형식으로 반환합니다. 배열의 순서는 Object.values와 일치합니다.

const obj = { x: 'xxx', y: 1 };
Object.entries(obj); // [['x', 'xxx'], ['y', 1]]

const obj = ['e', 's', '8'];
Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]
Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]
객체의 속성 설명자를 가져옵니다.

getOwnPropertyDescriptors 함수 지정된 객체의 지정된 속성에 대한 설명자를 반환합니다. 속성은 객체에서 상속되기보다는 객체 자체에 의해 정의되어야 합니다. 프로토타입 체인 함수의 선언은 다음과 같습니다.

Object.getOwnPropertyDescriptor(obj, prop)
obj는 소스 객체이고 prop은 확인해야 하는 것입니다. 결과에 포함된 키는 구성 가능, 열거 가능, 쓰기 가능, 가져오기, 설정 가능합니다. 그리고 가치.

const obj = { get es8() { return 888; } };
Object.getOwnPropertyDescriptor(obj, 'es8');
// {
//   configurable: true,
//   enumerable: true,
//   get: function es8(){}, //the getter function
//   set: undefined
// }
함수 매개변수 목록 및 호출의 후행 쉼표

이 기능을 사용하면 오류 보고 없이 함수를 정의하거나 호출할 때 후행 쉼표를 추가할 수 있습니다.

function es8(var1, var2, var3,) {
  // ...
}
es8(10, 20, 30,);
비동기 함수

는 ES8에서 허용됩니다. 비동기 함수를 정의하고 실행하기 위한 async/await 구문을 사용하면 async 키워드는 내부 구현에서 AsyncFunction 개체를 반환합니다. 비록 비동기 함수와 반복자의 구현 원리는 비슷하지만 반복자 함수로 변환되지는 않습니다.

function fetchTextByPromise() {
  return new Promise(resolve => { 
    setTimeout(() => { 
      resolve("es8");
    }, 2000);
  });
}
async function sayHello() { 
  const externalFetchedText = await fetchTextByPromise();
  console.log(`Hello, ${externalFetchedText}`); // Hello, es8
}
sayHello();

console.log(1);
sayHello();
console.log(2);

// 调用结果
1 // immediately
2 // immediately
Hello, es8 // after 2 seconds
공유 메모리 및 원자성 작업

공유 메모리를 사용하면 여러 스레드가 동시에 데이터를 읽고 쓸 수 있으며, 원자성 작업을 통해 동시성 제어를 통해 여러 경쟁 스레드의 순차적 실행을 보장할 수 있습니다. 이 섹션에서는 새로운 생성자 SharedArrayBuffer와 정적 메서드가 포함된 네임스페이스 객체 Atomics를 소개합니다. Atomic 객체는 Math와 유사합니다. 인스턴스를 직접 생성할 수는 없지만 제공되는 정적 메서드만 사용할 수 있습니다.

  • add /sub - 특정 위치에서 값을 더하거나 빼기

  • 및 / 또는 / xor - 비트 연산 수행

  • 로드 - 값 가져오기

위 내용은 최신 ES8 기능 개요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.