ECMAScript簡介

JavaScript是大家所了解的語言名稱， 但它的正式名稱叫做ECMAScript。

1996年11月， JavaScript的創(chuàng)造者網(wǎng)景公司將JavaScript提交給國際化組織 ECMA(歐洲計(jì)算機(jī)制造聯(lián)合會)， 希望這種語言能夠成為國際標(biāo)準(zhǔn)。

隨后 ECMA 發(fā)布了規(guī)定瀏覽器腳本語言的標(biāo)準(zhǔn)， 即ECMAScript。 它的歷史版本：

ES6

目前市面上推薦使用的是ECMAScript 6.0(ES6)， 主要原因在于：

• 兼容性 目前并非所有的瀏覽器相關(guān)都支持最新語言的特性，而ES6已經(jīng)被廣泛支持。并可通過轉(zhuǎn)譯工具可將ES6轉(zhuǎn)換為較低版本的JavaScript，以確保在各種環(huán)境中的運(yùn)行
• 新特性 ES6引入了箭頭函數(shù)，解構(gòu)賦值，類等，使得代碼更加簡潔、易讀和維護(hù)
• 模塊化支持 可以提升代碼的復(fù)用性和可維護(hù)性，使得項(xiàng)目結(jié)構(gòu)更清晰
• 異步編程 引入Promise和async特性， 支持異步編程

ES6的推廣主要還是為了解決ES5的不足，目前瀏覽器的JavaScript雖是ES5版本，但大多數(shù)的高版本瀏覽器支持ES6的使用。

它又被稱為ES2015, 因?yàn)樗?015年發(fā)布的。

ES6所支持的新特性簡要說明下：

• 增加let和const, 可用于塊作用域聲明變量，避免了var變量提升和作用域不明的問題
• 新增的原始數(shù)據(jù)類型Symbol， 可用于定義對象的唯一屬性
• 增加了解構(gòu)賦值的語法， 使得代碼更加簡潔和易于理解
• 拓展了Number，支持二/八進(jìn)制表示，增加了isFinite，整合了parseInt方法等
• 拓展了String，新增了子字符串的識別， 模版字符串的拼接等
• 拓展了Array， 增加了對象轉(zhuǎn)換為數(shù)組，以及查找的方法相關(guān)
• 拓展了函數(shù)的默認(rèn)參數(shù)設(shè)置， 箭頭函數(shù)等
• 新增Map容器和Set對象的使用
• 新增Proxy和Reflect
• 引入class類的支持， 支持extends繼承， super訪問父類規(guī)范， 靜態(tài)方法等
• 引入模塊， 主要分為export導(dǎo)出和import導(dǎo)入
• 引入 Generator , Promise和 async 等異步編程

let、const和Symbol

ES6之前只有全局變量和函數(shù)內(nèi)局部變量。let和const為新增關(guān)鍵字：

• let 必須在聲明之后才能使用， 不可重復(fù)聲明， 塊作用域， 變量不能提升
• const 聲明之后必須初始化，否則會報(bào)錯(cuò)。 且聲明后不允許改變，屬于只讀變量。

// ---------- let -------------
{
    let value = 0;
    console.log(value);     // 0
}
// Error: value is not defined 
console.log(value);

// ---------- let -------------
const value: number = 10;
// Error: Assignment to constant variable
value = 100;

經(jīng)常會拿var與let比較：

/*
var是ES5及之前的JavaScript的關(guān)鍵字，特點(diǎn)：
* 函數(shù)作用域，聲明的變量在整個(gè)函數(shù)體內(nèi)， 而不僅是在塊作用域內(nèi)
* 變量會提升，聲明的變量會提升到函數(shù)的頂部， 即可在聲明之前使用
* 允許重復(fù)聲明
*/
function example() {
  var x = 10;
  if (true) {
    var x = 20; // 在同一函數(shù)作用域內(nèi)重復(fù)聲明變量x
    console.log(x); // 輸出：20
  }
  console.log(x); // 輸出：20
}
example();

/*
let是ES6及之后的JavaScript和TypeScript引入的關(guān)鍵子，特點(diǎn)：
* 塊作用域， 比如if語句，循環(huán)語句，并不是整個(gè)函數(shù)體內(nèi)
* 不存在變量提升，必須聲明之后才能使用
* 不允許重復(fù)聲明，否則會報(bào)錯(cuò)
*/
function example2() {
  let y = 10;
  if (true) {
    let y = 20; // 在塊級作用域內(nèi)聲明變量y
    console.log(y); // 輸出：20
  }
  console.log(y); // 輸出：10
}
example2();

const需要注意，所謂的不允許改變真正指的是：變量或引用所指向的內(nèi)存地址不可改變。

在基礎(chǔ)數(shù)據(jù)類型使用中，值就保存在變量指向的地址。
而對于類似于Array數(shù)組，Object對象等這些復(fù)雜類型， 對象內(nèi)的子元素是可改變的

// ------------ 數(shù)組 ------------
const numData = [1, 2];
// 允許插入數(shù)值
numData.push(3);
console.log(numData);
// 不允許改變對象,Assignment to constant variable
numData = [4, 5];

// ------------ object ------------
const objectData = {
    value: 1,
}
// 允許修改對象內(nèi)部元素
objectData.value = 2;
// 不允許改變對象，Assignment to constant variable
objectData = {value: 2};

Symbol

除了number, string, boolean, object, null, undefined外, Symbol為新增的原始數(shù)據(jù)類型。

它被用于表示獨(dú)一無二的值，可被用于定義對象的唯一屬性名，構(gòu)成：

// lib.es2015.symbol.d.ts
interface SymbolConstructor {
  readonly prototype: Symbol;
  // 創(chuàng)建symbol對象
  (description?: string | number): symbol;
  // 全局搜索指定key字符串的symbol對象
  for(key: string): symbol;
  // 獲取symbol對象的key, 如果沒有則undefined
  keyFor(sym: symbol): string | undefined;
}

declare var Symbol: SymbolConstructor;

基本使用：

let sym = Symbol("a_1");
console.log(typeof(sym), sym);  // "symbol",  Symbol(a_1)

主要用法：

• 定義常量，保證不同常量的唯一性
• 作為對象的屬性名， 使用[]來設(shè)定，不要使用.

簡單的實(shí)例：

let sy = Symbol("key1");

let obj = {
  [sy]: "kk",
  value: 10,
};
// 雖然作為對象的屬性名，但其實(shí)是不可讀的, 結(jié)果是：{"value": 10}
console.log(obj); 

解構(gòu)賦值

它是對賦值運(yùn)算符的擴(kuò)展， 可用于 數(shù)組 或 對象 進(jìn)行模式匹配， 然后對其中的變量進(jìn)行賦值。

// 基本使用
let [a, b, c] = [1,2,3];
console.log(a, b, c);       // 1,  2,  3 
let {a, b, c} = {a:1,b:2,c:3};
console.log(a, b, c);       // 1,  2,  3 

// 嵌套使用
let [a, [b, c]] = [1, [2, 3]];
console.log(a, b, c);  // 1,  2,  3 
let [A, [[B], C]] = [1, [[2], 3]];
console.log(A, B, C);  // 1,  2,  3 

// 忽略
let [a1, , c1] = [1, 2, 3];
console.log(a1, c1);    //  1,  3 
let [, b2, , d2] = [1,2, 3,4];
console.log(b2, d2);    // 2,  4 
let [a3, [, b3], [,,c3]] = [1, [2,3], [4,5,6]];
console.log(a3, b3, c3);    // 1,  3,  6 

支持不完全解構(gòu)，可以做個(gè)簡單了解，但不推薦使用，會有報(bào)錯(cuò)

// Error: Tuple type '[number]' of length '1' has no element at index '1'
let [a1, b1] = [1];
console.log(a1, b1);    // 1,  undefined 

let [a2 = 1, b2] = [];
console.log(a2, b2);    // 1,  undefined 

支持剩余參數(shù)，通過...參數(shù)來設(shè)定，它會用于收集剩余的元素來創(chuàng)建一個(gè)新的數(shù)組。文章來源地址http://www.zghlxwxcb.cn/news/detail-668817.html

// 數(shù)組
let [a, ...b] = [1, 2, 3];
console.log(typeof(a), typeof(b));  // "number",  "object" 
console.log(a, b);                  // 1,  [2, 3] 

// 對象
let {age, ...params} = {
    name: "ES", 
    age: 2023, 
    value: 1,
}
// 參數(shù)age被賦值，其余的都給了params
// 2023,  {"name": "ES", "value": 1} 
console.log(age, params);   

// 函數(shù)參數(shù),比如求和
function AddNum(...numbers: any) {
    let totalValue = 0;
    for (let num of numbers) {
        totalValue += parseInt(num);
    }
    return totalValue;
}
console.log(AddNum(1, 2, 3));       // 6
console.log(AddNum(1, "2", "3"));   // 6

到了這里，關(guān)于ECMAScript6 簡介及拓展的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！