ecmascript의 기능은 다음과 같습니다: 1. 클래스, 3. 화살표 함수, 5. 구조화 연산자, 7. 지수 연산자, "**"; 10. "비동기/대기" 등.
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
ECMAScript는 ECMA International(구 유럽 컴퓨터 제조업체 협회)에서 ECMA-262를 통해 표준화한 스크립팅 프로그래밍 언어입니다.
Ecma International은 국제 회원 기반의 정보 통신 표준 기관입니다. 1994년 이전에는 유럽컴퓨터제조협회(European Computer Manufacturer Association)로 불렸습니다. 컴퓨터의 국제화로 인해 조직의 표준에는 다른 많은 국가가 포함되므로 조직은 국제성을 보여주기 위해 이름을 변경하기로 결정했습니다. 그 이름은 더 이상 약어가 아닙니다.
에크마인터내셔널은 국가정부표준기관과 달리 기업회원제 조직입니다. 조직의 표준화 프로세스는 보다 상업적이며 이러한 운영 모드는 관료주의적인 결과 추구를 감소시킨다고 주장합니다.
실제로 Ecma International은 다음과 같은 사양을 포함한 많은 표준의 공식화를 담당하고 있습니다. 오늘날 우리의 주역인 ECMAScript 사양, C# 언어 사양, C++/CLI 언어 사양 등이 있다는 것을 알 수 있습니다.
1996년 11월, JavaScript의 창시자인 Netscape는 이 언어가 국제 표준이 되기를 바라며 표준화 기관인 ECMA에 JavaScript를 제출하기로 결정했습니다. 이듬해 ECMA는 브라우저 스크립팅 언어의 표준을 규정하고 이 언어를 ECMAScript라고 부르는 표준 문서 262(ECMA-262)의 첫 번째 버전을 출시했습니다.
이 표준은 처음부터 JavaScript 언어용으로 개발되었지만 JavaScript라고 부르지 않는 데에는 두 가지 이유가 있습니다. 하나는 상표입니다. Java는 라이센스 계약에 따라 Netscape만이 합법적으로 JavaScript라는 이름을 사용할 수 있으며 JavaScript 자체는 Netscape에 의해 상표로 등록되었습니다. 둘째, 나는 이 언어의 개발자가 Netscape가 아닌 ECMA임을 보여주고 싶습니다. 이는 이 언어의 개방성과 중립성을 보장하는 데 도움이 될 것입니다.
따라서 ECMAScript와 JavaScript의 관계는 전자가 후자의 사양이고 후자는 전자의 구현이라는 것입니다.
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는 구체적으로 출시된 버전을 지칭하는 공식 명칭입니다. 그 해의 언어 표준의 공식 버전입니다.
의 역사 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입니다.
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"; } }
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
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 */
//如果在 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(() => {}) }
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" }
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}
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"
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"]
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); });
a ||= b //等价于 a = a || (a = b) a &&= b //等价于 a = a && (a = b) a ??= b //等价于 a = a ?? (a = b)
const str = 'hello world'; str.replaceAll('l', ''); // "heo word"
const money = 1_000_000_000; //等价于 const money = 1000000000; 1_000_000_000 === 1000000000; // true
分别去除字符串首尾空白字符
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}
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"]
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!