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

최신 ES8 기능 개요

巴扎黑
풀어 주다: 2017-07-21 09:59:31
원래의
3730명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿