ecmascript的特性有：1、class（類別）；2、模組化；3、箭頭函數；4、模板字串；5、解構賦值；6、延展操作符；7、Promise；8 、let與const；9、指數運算子「**」；10、「async/await」等等。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
什麼是ECMAScript
ECMAScript 是一種由 ECMA國際（前身為歐洲電腦製造商協會）透過 ECMA-262 標準化的腳本程式設計語言。
Ecma國際（Ecma International）是一家國際性會員制度的資訊和電信標準組織。 1994年以前，名為歐洲電腦製造商協會（European Computer Manufacturers Association）。因為電腦的國際化，組織的標準牽涉到許多其他國家，因此組織決定改名表明其國際性。現名稱已不屬於首字母縮寫。
與國家政府標準機構不同，Ecma國際是企業會員制的組織。組織的標準化過程較為商業化，自稱這種營運方式減少官僚追求效果。
其實 Ecma國際負責了許多標準的製定，例如有以下這些規範。大家可以看到這裡面有我們今天的主角，ECMAScript 規範、 C#語言規範、 C /CLI語言規範等。
ECMAScript 和JavaScript 的關係
1996 年11 月，JavaScript 的創造者Netscape 公司，決定將JavaScript 提交給標準化組織ECMA，希望這種語言能夠成為國際標準。隔年，ECMA 發布 262 號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，並將這種語言稱為 ECMAScript，這個版本就是 1.0 版。
這個標準從一開始就是針對 JavaScript 語言制定的，但是之所以不叫 JavaScript，有兩個原因。一是商標，Java 是 Sun 公司的商標，根據授權協議，只有 Netscape 公司可以合法地使用 JavaScript 這個名字，而 JavaScript 本身也已經被 Netscape 公司註冊為商標。二是想體現這門語言的製定者是 ECMA，不是 Netscape，這樣有利於確保這門語言的開放性和中立性。
因此，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 既是歷史名詞，也是一個泛指，意義是5.1 版以後的JavaScript 的下一代標準，涵蓋了ES2015、ES2016、ES2017 等等，而ES2015 則是正式名稱，特指該年發布的正式版本的語言標準。
ECMAScript 的歷史
1996年11月，Netscape公司將Js提交給國際化標準組織ECMA，當初語言能夠成為國際化標準。
1997年，ECMAScript 1.0版本推出。 （在這年，ECMA發布262號標準文件（ECMA-262）的第一版，規定瀏覽器腳本語言的標準，並將這種語言稱為ECMAScript，也就是ES1.0版本。）
1998年6月，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 引進了 class（類別），讓 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 和 import 組成。每一個模組都有自己單獨的作用域，模組之間的相互呼叫關係是透過 export 來規定模組對外暴露的接口，透過 import 來引用其它模組提供的介面。同時也為模組創造了命名空間，防止函數的命名衝突。
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、箭頭函數
=>不只是關鍵字 function 的簡寫，它也帶來了其它好處。箭頭函數與包圍它的程式碼共用同一個 this,能幫你很好的解決this的指向問題。例如 var self = this;或 var that =this這種引用外圍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()為我們省去了遍歷 key，並根據這些 key 取得 value 的步驟。
3、Object.entries()
Object.entries()函數傳回一個給定物件本身可枚舉屬性的鍵值對的陣列。
//不使用 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登入後複製
4、String padding
在ES8 中String 新增了兩個實例函數String.prototype.padStart和String.prototype.padEnd，允許將空字符串或其他字串添加到原始字串的開頭或結尾。
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'))
登入後複製
5、Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors()函數用來取得一個物件的所有自身屬性的描述子,如果沒有任何自身屬性，則傳回空物件。
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
*/登入後複製
ES9新增特性
1、async iterators
ES9 引入非同步迭代器（asynchronous iterators ）， await可以和for…of循環一起使用，以串列的方式運行非同步操作。
//如果在 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);
}
}登入後複製
2、Promise.finally()
一個 Promise 呼叫鏈要麼成功到達最後一個 .then()，要麼失敗觸發 .catch()。在某些情況下，你想要在無論 Promise 運行成功或失敗，運行相同的程式碼，例如清除，刪除對話，關閉資料庫連接等。
.finally()允許你指定最終的邏輯。
function doSomething() {
doSomething1()
.then(doSomething2)
.then(doSomething3)
.catch((err) => {
console.log(err)
})
.finally(() => {})
}登入後複製
3、Rest/Spread屬性
Rest：物件解構賦值的其餘屬性。
Spread：物件解構賦值的傳播屬性。
//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" }登入後複製
ES10新增特性
1、Array的flat()方法和flatMap()方法
flat( ) 方法會依照一個可指定的深度遞歸遍歷數組，並將所有元素與遍歷到的子數組中的元素合併為一個新數組傳回。
flatMap() 方法首先使用映射函數來映射每個元素，然後將結果壓縮成一個新陣列。它與 map 和 深度值1的 flat 幾乎相同，但 flatMap通常在合併成一種方法的效率稍微高一些。
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、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中文網其他相關文章！
