목차
ECMAScript란 무엇입니까
ES6과 ECMAScript 2015의 관계
ECMAScript 각 버전의 새로운 기능
ES6의 새로운 기능
ES11新增特性
8. let과 const
이전에는 JS에 블록 수준 범위가 없었습니다. const와 let은 모두 블록 수준 범위입니다.
Asynchronous 함수는 AsyncFunction 객체를 반환하고 이벤트 루프를 통해 비동기적으로 작동합니다.
ES12新增特性
웹 프론트엔드 프런트엔드 Q&A ECmascript에는 어떤 기능이 있나요?

ECmascript에는 어떤 기능이 있나요?

Jan 05, 2022 am 11:13 AM
ecmascript javascript

ecmascript의 기능은 다음과 같습니다: 1. 클래스, 3. 화살표 함수, 5. 구조화 연산자, 7. 지수 연산자, "**"; 10. "비동기/대기" 등.

ECmascript에는 어떤 기능이 있나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

ECMAScript란 무엇입니까

ECMAScript는 ECMA International(구 유럽 컴퓨터 제조업체 협회)에서 ECMA-262를 통해 표준화한 스크립팅 프로그래밍 언어입니다.

Ecma International은 국제 회원 기반의 정보 통신 표준 기관입니다. 1994년 이전에는 유럽컴퓨터제조협회(European Computer Manufacturer Association)로 불렸습니다. 컴퓨터의 국제화로 인해 조직의 표준에는 다른 많은 국가가 포함되므로 조직은 국제성을 보여주기 위해 이름을 변경하기로 결정했습니다. 그 이름은 더 이상 약어가 아닙니다.

에크마인터내셔널은 국가정부표준기관과 달리 기업회원제 조직입니다. 조직의 표준화 프로세스는 보다 상업적이며 이러한 운영 모드는 관료주의적인 결과 추구를 감소시킨다고 주장합니다.

실제로 Ecma International은 다음과 같은 사양을 포함한 많은 표준의 공식화를 담당하고 있습니다. 오늘날 우리의 주역인 ECMAScript 사양, C# 언어 사양, C++/CLI 언어 사양 등이 있다는 것을 알 수 있습니다.

ECMAScript JavaScript와의 관계

1996년 11월, JavaScript의 창시자인 Netscape는 이 언어가 국제 표준이 되기를 바라며 표준화 기관인 ECMA에 JavaScript를 제출하기로 결정했습니다. 이듬해 ECMA는 브라우저 스크립팅 언어의 표준을 규정하고 이 언어를 ECMAScript라고 부르는 표준 문서 262(ECMA-262)의 첫 번째 버전을 출시했습니다.

이 표준은 처음부터 JavaScript 언어용으로 개발되었지만 JavaScript라고 부르지 않는 데에는 두 가지 이유가 있습니다. 하나는 상표입니다. Java는 라이센스 계약에 따라 Netscape만이 합법적으로 JavaScript라는 이름을 사용할 수 있으며 JavaScript 자체는 Netscape에 의해 상표로 등록되었습니다. 둘째, 나는 이 언어의 개발자가 Netscape가 아닌 ECMA임을 보여주고 싶습니다. 이는 이 언어의 개방성과 중립성을 보장하는 데 도움이 될 것입니다.

따라서 ECMAScript와 JavaScript의 관계는 전자가 후자의 사양이고 후자는 전자의 구현이라는 것입니다.

ES6과 ECMAScript 2015의 관계

ECMAScript 2015(줄여서 ES2015)라는 용어도 자주 볼 수 있습니다. ES6과 어떤 관련이 있습니까?

2011년 ECMAScript 버전 5.1 출시 이후 버전 6.0 개발이 시작되었습니다. 따라서 ES6이라는 단어의 원래 의미는 JavaScript 언어의 다음 버전을 의미합니다.

그러나 이번 버전에서는 문법적인 기능이 너무 많이 도입되고, 개발 과정에서 많은 기관과 개인이 계속해서 새로운 기능을 제출하고 있기 때문입니다. 하나의 릴리스에 도입될 모든 기능을 포함하는 것은 불가능하다는 것이 금방 분명해졌습니다. 일반적인 접근 방식은 버전 6.0을 먼저 출시한 다음 잠시 후 버전 6.1, 버전 6.2, 버전 6.3 등을 출시하는 것입니다.

표준위원회는 마침내 표준이 매년 6월에 그 해의 공식 버전으로 공식 출시되기로 결정했습니다. 앞으로는 이 버전을 기반으로 변경이 이뤄질 예정이며, 내년 6월까지는 자연스럽게 초안이 새해 버전이 될 예정이다. 이렇게 하면 이전 버전 번호는 필요하지 않고 연도 스탬프만 필요합니다.

따라서 ES6은 역사적 용어이자 일반적인 용어입니다. ES2015, ES2016, ES2017 등을 포괄하는 버전 5.1 이후의 JavaScript의 차세대 표준을 의미하며, ES2015는 구체적으로 출시된 버전을 지칭하는 공식 명칭입니다. 그 해의 언어 표준의 공식 버전입니다.

ECMAScript

의 역사 1996년 11월 넷스케이프는 Js를 국제 표준 기구인 ECMA에 제출했고, 그 언어가 국제 표준이 될 수 있었습니다.
1997년에 ECMAScript 버전 1.0이 출시되었습니다. (올해 ECMA는 브라우저 스크립트 언어에 대한 표준을 규정하고 이 언어를 ECMAScript라고 부르는 Standard Document No. 262(ECMA-262)의 첫 번째 버전을 발표했는데, 이것이 바로 ES1.0 버전입니다.)
1998년 6월 3월 , ES 버전 2.0이 출시되었습니다.
1999년 12월 ES 버전 3.0이 출시되어 JS의 공통 표준이 되었으며 폭넓은 지지를 받았습니다.
2007년 10월 ES의 초안 버전 4.0이 출시되었습니다.
2008년 7월, 당사자 간의 너무 많은 의견 차이로 인해 ECMA는 ES 4.0 개발을 종료하기로 결정했습니다. 대신 기존 기능에 대한 몇 가지 개선 사항이 ES 3.1로 출시됩니다. 하지만 돌아온 후 곧 ES 버전 5.0으로 이름이 바뀌었습니다.
2009년 12월 ES 버전 5.0이 공식 출시되었습니다.

2011년 6월 ES 버전 5.1이 출시되어 ISO 국제 표준(ISO/IEC 16262:2011)이 되었습니다.
2013년 3월에 ES 6 초안이 종료되었으며 새로운 기능이 추가되지 않습니다.
2013년 12월 ES 6 초안이 출시되었습니다.
2015년 6월, ES 6의 공식 버전이 출시되었습니다.

이제부터는 매년 6월에 정식 버전이 출시되므로 최신 버전은 2021년 6월에 출시되는 ES12입니다.

ECMAScript 각 버전의 새로운 기능

ES6의 새로운 기능

1, class

ES6에는 클래스가 도입되어 JavaScript의 객체 지향 프로그래밍을 더 간단하고 이해하기 쉽게 만듭니다.

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."
로그인 후 복사

2. 모듈화

ES5는 기본 모듈화를 지원하며, ES6에서는 모듈이 중요한 구성 요소로 추가됩니다. 모듈의 기능은 주로 내보내기와 가져오기로 구성됩니다. 각 모듈에는 고유한 별도 범위가 있습니다. 모듈 간의 상호 호출 관계는 내보내기를 통해 모듈에서 노출되는 인터페이스를 지정하고 가져오기를 통해 다른 모듈에서 제공되는 인터페이스를 참조하는 것입니다. 동시에 함수 이름 충돌을 방지하기 위해 모듈에 대한 네임스페이스가 생성됩니다.

export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;
로그인 후 복사
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));
로그인 후 복사

3. 화살표 함수

=>는 키워드 함수의 약어일 뿐만 아니라 다른 이점도 제공합니다. 화살표 함수는 이를 주변 코드와 동일하게 공유하므로 이 포인팅 문제를 해결하는 데 도움이 될 수 있습니다. 예를 들어, var self = this; 또는 var that =this는 이 모드 주변을 나타냅니다. 그러나 =>를 사용하면 이 패턴이 더 이상 필요하지 않습니다.

() => 1

v => v+1

(a,b) => a+b

() => {
  alert("foo");
}

e => {
  if (e == 0){
    return 0;
  }
  return 1000/e;
}
로그인 후 복사

4. 템플릿 문자열

ES6은 템플릿 문자열을 지원하여 문자열 접합을 더욱 간결하고 직관적으로 만듭니다.

//不使用模板字符串
var name = 'Your name is ' + first + ' ' + last + '.'
//使用模板字符串
var name = `Your name is ${first} ${last}.`
로그인 후 복사

ES6에서는 ${}를 통해 문자열 연결을 완료할 수 있습니다. 변수를 중괄호 안에 넣으면 됩니다. ${}就可以完成字符串的拼接,只需要将变量放在大括号之中。

5、解构赋值

解构赋值语法是 JavaScript 的一种表达式,可以方便的从数组或者对象中快速提取值赋给定义的变量。

// 对象
const student = {
    name: 'Sam',
    age: 22,
    sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];

// ES5;
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);

// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);
로그인 후 복사

6、延展操作符

延展操作符…可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开;还可以在构造对象时, 将对象表达式按 key-value 的方式展开。

//在函数调用时使用延展操作符
function sum(x, y, z) {
  return x + y + z
}
const numbers = [1, 2, 3]
console.log(sum(...numbers))

//数组
const stuendts = ['Jine', 'Tom']
const persons = ['Tony', ...stuendts, 'Aaron', 'Anna']
conslog.log(persions)
로그인 후 복사

7、Promise

Promise 是异步编程的一种解决方案,比传统的解决方案 callback 更加的优雅。它最早由社区提出和实现的,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象。

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});
로그인 후 복사

8、let 与 const

在之前 JS 是没有块级作用域的,const与 let 填补了这方便的空白,const与 let 都是块级作用域。

function f() {
  {
    let x;
    {
      // 正确
      const x = "sneaky";
      // 错误,常量const
      x = "foo";
    }
    // 错误,已经声明过的变量
    let x = "inner";
  }
}
로그인 후 복사

ES7新增特性

1、Array.prototype.includes()

includes() 函数用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false。

[1, 2, 3].includes(-1)                   // false
[1, 2, 3].includes(1)                    // true
[1, 2, 3].includes(3, 4)                 // false
[1, 2, 3].includes(3, 3)                 // false
[1, 2, NaN].includes(NaN)                // true
['foo', 'bar', 'quux'].includes('foo')   // true
['foo', 'bar', 'quux'].includes('norf')  // false
로그인 후 복사

2、指数操作符

在 ES7 中引入了指数运算符 **, **具有与 Math.pow(…)等效的计算结果。使用指数运算符 **,就像 +、- 等操作符一样。

//之前的版本
Math.pow(5, 2)

// ES7
5 ** 2
// 5 ** 2 === 5 * 5
로그인 후 복사

ES8新增特性

1、async/await

异步函数返回一个AsyncFunction对象并通过事件循环异步操作。

const resolveAfter3Seconds = function() {
  console.log('starting 3 second promsise')
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(3)
      console.log('done in 3 seconds')  
    }, 3000)  
  })  
}

const resolveAfter1Second = function() {
  console.log('starting 1 second promise')
  return new Promise(resolve => {
      setTimeout(function() {
        resolve(1) 
        console.log('done, in 1 second') 
      }, 1000)
  })  
}

const sequentialStart = async function() {
  console.log('***SEQUENTIAL START***')
  const one = await resolveAfter1Second()
  const three = await resolveAfter3Seconds()

  console.log(one)
  console.log(three)
}

sequentialStart();
로그인 후 복사

2、Object.values()

Object.values()是一个与 Object.keys()类似的新函数,但返回的是 Object 自身属性的所有值,不包括继承的值。

const obj = { a: 1, b: 2, c: 3 }
//不使用 Object.values()
const vals = Object.keys(obj).map((key) => obj[key])
console.log(vals)
//使用 Object.values()
const values = Object.values(obj1)
console.log(values)
로그인 후 복사

从上述代码中可以看出 Object.values()

5. 구조 분해 할당

구조 분해 할당 구문은 배열이나 객체에서 값을 쉽게 추출하여 정의된 변수에 할당할 수 있는 JavaScript 표현식입니다.

//不使用 Object.entries()
Object.keys(obj).forEach((key) => {
  console.log('key:' + key + ' value:' + obj[key])
})
//key:b value:2

//使用 Object.entries()
for (let [key, value] of Object.entries(obj1)) {
  console.log(`key: ${key} value:${value}`)
}
//key:b value:2
로그인 후 복사

6. 확장 연산자

...함수 호출/배열 생성 중에 구문 수준에서 배열 표현식이나 문자열을 확장할 수 있습니다. 객체를 생성할 때 키로 객체 표현식을 확장할 수도 있습니다. 가치의 형태.

console.log('0.0'.padStart(4, '10'))
console.log('0.0'.padStart(20))

console.log('0.0'.padEnd(4, '0'))
console.log('0.0'.padEnd(10, '0'))
로그인 후 복사

7. Promise

Promise는 비동기 프로그래밍을 위한 솔루션으로 기존 솔루션 콜백보다 더 우아합니다. ES6는 이를 언어 표준에 작성하고 사용법을 통일했으며 기본적으로 Promise 객체를 제공했습니다.

let myObj = {
  property1: 'foo',
  property2: 'bar',
  property3: 42,
  property4: () => console.log('prop4')  
}

Object.getOwnPropertyDescriptors(myObj)

/*
{ property1: {…}, property2: {…}, property3: {…}, property4: {…} }
  property1: {value: "foo", writable: true, enumerable: true, configurable: true}
  property2: {value: "bar", writable: true, enumerable: true, configurable: true}
  property3: {value: 42, writable: true, enumerable: true, configurable: true}
  property4: {value: ƒ, writable: true, enumerable: true, configurable: true}
  __proto__: Object
*/
로그인 후 복사

8. let과 const
이전에는 JS에 블록 수준 범위가 없었습니다. const와 let은 모두 블록 수준 범위입니다.

//如果在 async/await中使用循环中去调用异步函数,则不会正常执行
async function demo(arr) {
  for (let i of arr) {
    await handleDo(i);
  }
}

//ES9
async function demo(arr) {
  for await (let i of arr) {
    handleDo(i);
  }
}
로그인 후 복사

ES7 새로운 기능

1. Array.prototype.includes()

includes() 함수는 배열에 지정된 값이 포함되어 있는지 확인하는 데 사용되며, 그렇지 않으면 true를 반환합니다. 거짓.

function doSomething() {
  doSomething1()
    .then(doSomething2)
    .then(doSomething3)
    .catch((err) => {
      console.log(err)
    })
    .finally(() => {})
}
로그인 후 복사

2. 지수 연산자

ES7에 도입된 지수 연산자 **는 Math.pow(...)와 동일한 계산 결과를 갖습니다. +, - 등의 연산자와 마찬가지로 지수 연산자 **를 사용합니다.

//Rest
let { fname, lname, ...rest } = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
fname; //"Hemanth"
lname; //"HM"
rest; // {location: "Earth", type: "Human"}

//Spread
let info = {fname, lname, ...rest};
info; // { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" }
로그인 후 복사

ES8 새로운 기능

1.async/await

Asynchronous 함수는 AsyncFunction 객체를 반환하고 이벤트 루프를 통해 비동기적으로 작동합니다.

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

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

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

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

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]
console.log(arr.flat(Infinity));    // => [10, 20, 30]
로그인 후 복사

2.Object.values()

Object.values()는 Object.keys()와 유사한 새로운 함수이지만 상속된 값을 제외한 객체 자체 속성의 모든 값을 반환합니다.

const str = "   string   ";

console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"
로그인 후 복사
로그인 후 복사

위 코드에서 볼 수 있듯이 Object.values()는 키를 순회하고 이러한 키를 기반으로 값을 얻는 단계를 줄여줍니다.

3. Object.entries()

🎜🎜Object.entries() 함수는 주어진 객체 자체의 열거 가능한 속성의 키-값 쌍 배열을 반환합니다. 🎜
const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}
로그인 후 복사
로그인 후 복사
🎜🎜4. 문자열 패딩🎜🎜🎜ES8에서는 String에 두 개의 새로운 인스턴스 함수인 String.prototype.padStart 및 String.prototype.padEnd가 추가되어 빈 문자열이나 다른 문자열을 원래 문자열의 시작 부분에 추가할 수 있습니다. . 🎜
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// expected output:
// "fulfilled"
// "rejected"
로그인 후 복사
로그인 후 복사
🎜🎜5.Object.getOwnPropertyDescriptors()🎜🎜🎜Object.getOwnPropertyDescriptors() 함수는 객체의 모든 자체 속성에 대한 설명자를 얻는 데 사용됩니다. 자체 속성이 없으면 빈 객체가 반환됩니다. 🎜
const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]
로그인 후 복사
로그인 후 복사
🎜🎜ES9 새로운 기능🎜🎜🎜🎜🎜1. 비동기 반복자🎜🎜🎜ES9에는 비동기 반복자(비동기 반복자)가 도입되었습니다. Wait는 for...of 루프와 함께 사용하여 직렬 방식으로 비동기 작업을 실행할 수 있습니다. 🎜
const promise1 = new Promise((resolve, reject) => reject('我是失败的Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{
  console.log(values);
})
.catch(e=>{
  console.log(e);
});
로그인 후 복사
로그인 후 복사
🎜🎜2. Promise.finally()🎜🎜🎜Promise 호출 체인은 마지막 .then()에 성공적으로 도달하거나 .catch()를 트리거하지 못합니다. 어떤 경우에는 Promise가 성공적으로 실행되거나 실패하는지 여부(예: 대화 지우기, 삭제, 데이터베이스 연결 닫기 등)에 관계없이 동일한 코드를 실행하려고 합니다. 🎜🎜.finally()를 사용하면 최종 논리를 지정할 수 있습니다. 🎜
a ||= b
//等价于
a = a || (a = b)

a &&= b
//等价于
a = a && (a = b)

a ??= b
//等价于
a = a ?? (a = b)
로그인 후 복사
로그인 후 복사
🎜🎜3. Rest/Spread 속성🎜🎜🎜Rest: 객체 구조 분해 할당의 나머지 속성입니다. 🎜🎜Spread: 객체 구조 분해 할당의 확산 속성입니다. 🎜
const str = 'hello world';
str.replaceAll('l', ''); // "heo word"
로그인 후 복사
로그인 후 복사
🎜🎜ES10의 새로운 기능🎜🎜🎜🎜1. Array의 flat() 메소드와 flatMap() 메소드🎜🎜🎜 flat() 메소드는 지정된 깊이에 따라 배열을 재귀적으로 탐색하고 모든 요소를 하위 배열은 새로운 배열로 결합되어 반환됩니다. 🎜🎜 flatMap() 메서드는 먼저 매핑 함수를 사용하여 각 요소를 매핑한 다음 결과를 새 배열로 압축합니다. 깊이 값이 1인 map 및 flat과 거의 동일하지만 flatMap은 일반적으로 하나의 방법으로 결합할 때 약간 더 효율적입니다. 🎜
const money = 1_000_000_000;
//等价于
const money = 1000000000;

1_000_000_000 === 1000000000; // true
로그인 후 복사
로그인 후 복사
🎜🎜2. String의 TrimStart() 메소드와 TrimEnd() 메소드🎜🎜

分别去除字符串首尾空白字符

const str = "   string   ";

console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"
로그인 후 복사
로그인 후 복사

3、Object.fromEntries()

Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for…in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

而 Object.fromEntries() 则是 Object.entries() 的反转,Object.fromEntries() 函数传入一个键值对的列表,并返回一个带有这些键值对的新对象。

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

console.log(obj);    // => {one: 1, two: 2, three: 3}
로그인 후 복사
로그인 후 복사

ES11新增特性

1、Promise.allSettled

Promise.all最大问题就是如果其中某个任务出现异常(reject),所有任务都会挂掉,Promise 直接进入 reject 状态。

Promise.allSettled在并发任务中,无论一个任务正常或者异常,都会返回对应的的状态(fulfilled 或者 rejected)与结果(业务 value 或者 拒因 reason),在 then 里面通过 filter 来过滤出想要的业务逻辑结果,这就能最大限度的保障业务当前状态的可访问性。

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// expected output:
// "fulfilled"
// "rejected"
로그인 후 복사
로그인 후 복사

2、String.prototype.matchAll

matchAll() 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。 在 matchAll出现之前,通过在循环中调用 regexp.exec来获取所有匹配项信息(regexp需使用 /g 标志)。如果使用 matchAll,就可以不必使用 while 循环加 exec 方式(且正则表达式需使用/g标志)。使用 matchAll会得到一个迭代器的返回值,配合 for…of, array spread, or Array.from() 可以更方便实现功能。

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]
로그인 후 복사
로그인 후 복사

ES12新增特性

1、Promise.any

Promise.any() 接收一个Promise可迭代对象,只要其中的一个 promise 成功,就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功(即所有的 promises 都失败/拒绝),就返回一个失败的 promise。

const promise1 = new Promise((resolve, reject) => reject('我是失败的Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{
  console.log(values);
})
.catch(e=>{
  console.log(e);
});
로그인 후 복사
로그인 후 복사

2、逻辑运算符和赋值表达式

逻辑运算符和赋值表达式,新特性结合了逻辑运算符(&&=,||=,??=)。

a ||= b
//等价于
a = a || (a = b)

a &&= b
//等价于
a = a && (a = b)

a ??= b
//等价于
a = a ?? (a = b)
로그인 후 복사
로그인 후 복사

3、replaceAll

返回一个全新的字符串,所有符合匹配规则的字符都将被替换掉。

const str = 'hello world';
str.replaceAll('l', ''); // "heo word"
로그인 후 복사
로그인 후 복사

4、数字分隔符

数字分隔符,可以在数字之间创建可视化分隔符,通过_下划线来分割数字,使数字更具可读性。

const money = 1_000_000_000;
//等价于
const money = 1000000000;

1_000_000_000 === 1000000000; // true
로그인 후 복사
로그인 후 복사

【相关推荐:javascript学习教程

위 내용은 ECmascript에는 어떤 기능이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
Nordhold : Fusion System, 설명
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

자바스크립트에서 insertBefore를 사용하는 방법 자바스크립트에서 insertBefore를 사용하는 방법 Nov 24, 2023 am 11:56 AM

사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

See all articles