這篇文章給大家分享的是有關(guān)ECMAScript的新特性有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站服務(wù)項目包括濟(jì)水街道網(wǎng)站建設(shè)、濟(jì)水街道網(wǎng)站制作、濟(jì)水街道網(wǎng)頁制作以及濟(jì)水街道網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，濟(jì)水街道網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到濟(jì)水街道省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

ES6成為JavaScript的下一代標(biāo)準(zhǔn)后，標(biāo)準(zhǔn)委員會（TC39）在每年都會發(fā)布一個ES的新版本，每個版本里都引入了很多實用的新特性，在日常的項目開發(fā)中，如果我們掌握這些實用的新特性，將大大的提升開發(fā)效率，下面讓我們?nèi)娴恼莆者@些ES的新特性吧~

Let 和Const

之前使用var來定義變量，為我們提供了新的方式
let用來聲明變量，const用來聲明常量。

如何使用

const TAG = "我是常量";let a;
a = 2;console.log(TAG, "a=" + a); //我是常量   a=2復(fù)制代碼

四個特點

一、只在塊級作用域內(nèi)有效

let和const為JavaScript新增了塊級作用域，通常情況下，{}包裹的代碼擁有的作用域就是塊級作用域，聲明的變量或常量只在塊級作用域內(nèi)有效，外部不能訪問。

if (true) { //外層塊級作用域
  let a = 1;  const A = 1;  if (true) {   //內(nèi)層塊級作用域
    let a = 2;
  }  console.log(a,A); //（1）輸出：1 , 1}console.log(a); //（2）Uncaught ReferenceError: a is not defined復(fù)制代碼

上面有兩個塊級作用域，都聲明了變量a，但外層塊級作用域與內(nèi)層塊級作用域無關(guān)，所以（1）處輸出的是外層的變量值1，（2）處訪問了不在一個塊級作用域定義的變量，所以會報錯。

另外一個理解塊級作用域的示例。

//for循環(huán)體內(nèi)的定時器//在ES6之前，是沒有塊級作用域的，變量用var聲明，直接掛載在全局作用域上for (var i = 0; i < 3; i++) {  setTimeout(function () {    console.log(i); //3、3、3
  }, 100);
}//使用var聲明，for同步操作優(yōu)先于setTimeout異步操作，在開始執(zhí)行setTimeout的時候，//for循環(huán)已經(jīng)執(zhí)行完，i為3，則后續(xù)每次setTimeout輸出的i都是3//使用let聲明的話，則會在循環(huán)體內(nèi)部形成閉包，每次for循環(huán)都會給閉包提供每次循環(huán)i的值，//并且不被釋放，最終setTimeout里會分別輸出0、1、2for (let i = 0; i < 3; i++) {  setTimeout(function () {    console.log(i); //0 1 2
  }, 100);
}復(fù)制代碼

二、暫時性死區(qū)

不能在變量和常量聲明之前使用。
let和const命令會使區(qū)塊形成封閉作用域，若在聲明之前使用，就會報錯，這個在語法上，稱為“暫時性死區(qū)”（簡稱TDZ）。

if (true) {
  tmp = "abc"; // ReferenceError
  let tmp; 
}復(fù)制代碼

三、不能重復(fù)聲明

let a = 1;let a = 2;//報錯  SyntaxError: Identifier 'a' has already been declared const B=1;const B=2;//報錯  SyntaxError: Identifier 'B' has already been declared 復(fù)制代碼

四、不屬于頂層對象

let聲明的變量，全局對象（window,global,self）不能訪問到

let a = 10;console.log(window.a);  //undefined復(fù)制代碼

String

ES6對字符串進(jìn)行了一些擴(kuò)展，如下：

模板字符串

ES6新增了模板字符串（字符串）的方式定義字符串，用來解決之前字符串很長要換行、字符串中有變量或者表達(dá)式遇到的問題，下面是具體的使用場景

//一、打印長字符串且換行，直接在模板字符串中保留格式即可let welcome=`
  你好
    歡迎來到ES6
      ——謝謝
`console.log(welcome);/*
    輸出結(jié)果為：
  你好
    歡迎來到ES6
      ——謝謝
*///二、字符串中有變量或者表達(dá)式，直接在模板字符串中使用${變量/表達(dá)式}即可let type = "ES6";let name1 = "mango";let name2 = "和goman";let welcome = `歡迎${name1 + name2}來到${type}世界`;  

console.log(welcome);   //learn1.js?c1a0:7 歡迎mango和goman來到ES6世界復(fù)制代碼

方法

String.prototype.includes()

判斷字符串是否包含一個指定字符串，返回boolean類型。

const str = "ECMAScript"console.log(str.includes("EC")); //true 找不到返回false  復(fù)制代碼

startsWith()和endsWith()

startsWith()用來判斷字符串是否以指定字符串作為開頭，返回boolean類型。
endsWith()用來判斷字符串是否以指定字符串作為結(jié)尾，返回boolean類型。

const str = "ECMAScript"console.log(str.startsWith("ECM")); //true console.log(str.endsWith("Script")); //true 復(fù)制代碼

String.prototype.repeat()

將原有字符串重復(fù)n遍，得到一個新的字符串

const str = "ECMAScript";console.log(str.repeat(3)); //ECMAScriptECMAScriptECMAScript復(fù)制代碼

Number

ES6開始逐步減少全局性方法，使得語言逐步模塊化，所以把一些處理數(shù)值的方法轉(zhuǎn)移到了Number對象上，功能行為保持不變。

//將目標(biāo)轉(zhuǎn)換為整數(shù)//ES5parseInt("5.6") //5//ES6Number.parseInt("5.6")  //5//將目標(biāo)轉(zhuǎn)換為浮點數(shù)//ES5parseFloat("12.45str")  //12.45//ES6Number.parseFloat("12.45str")   //12.45復(fù)制代碼

另外，為了便于開發(fā)，Number還增加了一些方法和屬性

一、判斷一個數(shù)值是否是整數(shù)Number.isInteger(25) // trueNumber.isInteger(25.1) // false二、獲取JavaScript最大安全值和最小安全值Number.MAX_SAFE_INTEGER=9007199254740991Number.MIN_SAFE_INTEGER=-9007199254740991三、判斷一個數(shù)值是否是在安全范圍Number.isSafeInteger(9007199254740992)  //false復(fù)制代碼

Symbol

新引入原始數(shù)據(jù)類型，用來表示獨一無二的值。

聲明方式

let sym = Symbol();let sym2 = Symbol();console.log(sym == sym2); //false   生成的值是獨一無二的，所以不相等console.log(typeof sym);  //symbol  typeof查看值的類型為symbollet symWithDesc = Symbol("name"); //Symbol()括號內(nèi)可以添加描述console.log(symWithDesc.toString()); //輸出：Symbol(name)   打印描述需要轉(zhuǎn)換成字符串復(fù)制代碼

項目中應(yīng)用

一、消除魔術(shù)字符串
假如我們需要做一個點擊菜單，做不同處理的功能，我們通常會這樣實現(xiàn)。

const clickMenu = function (menu) {  switch (menu) {    case "home":      break;    case "me":      break;
  }
};

clickMenu("home")復(fù)制代碼

"home"這種可能會多次出現(xiàn)，與代碼形成強(qiáng)耦合的字符串就是魔術(shù)字符串，在項目中我們應(yīng)該盡量消除魔術(shù)字符串，下面使用Symbol消除魔術(shù)字符串

const MENU_TYPE = {  home: Symbol(),  me: Symbol(),
};const clickMenu = function () {  switch (menu) {    case MENU_TYPE.home:      break;    case MENU_TYPE.me:      break;
  }
};

clickMenu(MENU_TYPE.home);復(fù)制代碼

二、作為對象獨一無二的屬性值
假如我們想生成一個公司人名對象，并以每個人名為key值，這時候如果有人名重名便會有問題，而Symbol能解決這個問題

const scores = {
  [Symbol("張三")]: {    age: 22,
  },
  [Symbol("李四")]: {    age: 21,
  },
  [Symbol("張三")]: {    age: 20,
  },
};復(fù)制代碼

注意，通過Symbol定義的屬性，只能通過下面兩種方式進(jìn)行遍歷，否則無法獲取屬性。

for (let key of Object.getOwnPropertySymbols(scores)) {  console.log(key, key);
}for (let key of Reflect.ownKeys(scores)) {  console.log(key, scores[key]);
}復(fù)制代碼

Set和Map

為了更方便地實現(xiàn)數(shù)據(jù)操作，ES6新增了Set和Map兩種數(shù)據(jù)結(jié)構(gòu)。

Set

Set是類似于數(shù)組，但成員的值都是唯一的數(shù)據(jù)結(jié)構(gòu)。

新建

新建一個存儲月份的Set數(shù)據(jù)結(jié)構(gòu)，可以定義一個空的Set實例，也可以是帶有數(shù)組形式的默認(rèn)數(shù)據(jù)。

let monthSets = new Set();let monthSets2 = new Set(["一月","二月","三月"]);復(fù)制代碼

基本使用

//添加數(shù)據(jù)monthSets.add("一月");
monthSets.add("二月").add("三月");console.log(monthSets); //Set(3) {"一月", "二月", "三月"}//遍歷集合Set//forEach（）：使用回調(diào)函數(shù)遍歷每個成員monthSets.forEach((item) => console.log(item)); //一月 二月  三月//for...of:直接遍歷每個成員for (const item of monthSets) {  console.log(item);    //一月 二月  三月}//刪除數(shù)據(jù)monthSets.delete("二月");console.log(monthSets); // Set(2) {"一月", "三月"}monthSets.clear(); //console.log(monthSets); // Set(0) {}復(fù)制代碼

常見應(yīng)用

Set數(shù)據(jù)結(jié)構(gòu)在實際項目中還有很多應(yīng)用場景。

let monthSets = new Set(["一月", "二月", "三月"]);//一、快速判斷數(shù)據(jù)元素是否存在monthSets.has("一月"); //true//二、統(tǒng)計數(shù)據(jù)元素個數(shù)monthSets.size; //3console.log(monthSets.size); //3//三、數(shù)組去重let arr = [1, 2, 3, 2, 3, 4, 5];let set = new Set(arr);console.log(set); // {1, 2, 3, 4, 5}//四、合并去重let arr = [1, 2, 3];let arr2 = [2, 3, 4];let set = new Set([...arr, ...arr2]);console.log(set); // {1, 2, 3, 4}//五、取數(shù)組交集let arr1 = [1, 2, 3];let arr2 = [2, 3, 4];let set1 = new Set(arr1);let set2 = new Set(arr2);let resultSet = new Set(arr1.filter((item) => set2.has(item)));console.log(Array.from(resultSet)); // [2, 3]//六、取數(shù)組差級let arr1 = [1, 2, 3];let arr2 = [2, 3, 4];let set1 = new Set(arr1);let set2 = new Set(arr2);let arr3 = arr1.filter((item) => !set2.has(item));let arr4 = arr2.filter((item) => !set1.has(item));console.log([...arr3, ...arr4]);  //[1, 4]復(fù)制代碼

WeakSet

WeakSet與Set類似，也是不重復(fù)的值的集合，但WeakSet的成員只能是對象。WeakSet引用的對象都是弱引用，如果其他對象不再引用該對象，那么垃圾回收機(jī)制就會自動回收這些對象所占用的內(nèi)存，不考慮該對象還存在于WeakSet之中。
React源碼中有很多地方使用到了WeakSet，例如在react-reconciler/src/ReactFiberHotReloading.new.js中。

export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) {  if (__DEV__) {    if (resolveFamily === null) {      // Hot reloading is disabled.
      return;
    }    if (typeof WeakSet !== 'function') {      return;
    }    if (failedBoundaries === null) {
      failedBoundaries = new WeakSet();
    }
    failedBoundaries.add(fiber);
  }
}復(fù)制代碼

Map

Map是一種鍵值對集合，與對象類似，但Object只支持“字符串：值”，而Map支持“各種類型的值：值”，map給我們提供了更合適的“鍵值對”數(shù)據(jù)結(jié)構(gòu)。

基本使用

//定義let map = new Map();//添加數(shù)據(jù)let address = { address: "江蘇" };
map.set("name", "ES6");
map.set(27, "年齡信息");
map.set(address, "地址信息");console.log(map); //{"name" => "ES6", 27 => "年齡信息", {…} => "地址信息"}//獲取數(shù)據(jù)let name = map.get("name");let age = map.get(27);let addressObj = map.get(address);console.log(name, age, addressObj);//獲取成員數(shù)量console.log(map.size);  //3//判斷是否指定key成員console.log(map.has("name")); //true復(fù)制代碼

Map的遍歷

map通?？梢杂胒orEach和for...of的方式進(jìn)行遍歷。

//定義let map = new Map();

map.set("id", 1);
map.set("name", "mango");
map.set("address", {  province: "江蘇",  city: "南京",
});


map.forEach((key, value) => console.log(key, value));for (const [key, value] of map) {  console.log(key, value);
}//輸出  id 1      name mango      address {province: "江蘇", city: "南京"}復(fù)制代碼

WeakMap

WeakMap與Map類似，也是用來生成鍵值對的集合。但WeakMap只接受對象作為鍵名，并且鍵名所指向的對象，屬于弱引用對象。

數(shù)組的擴(kuò)展

ES6對數(shù)組進(jìn)行了很多的擴(kuò)展，具體如下

擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符是三個點(...)，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列，通常用在函數(shù)參數(shù)中。
假如我們需要一個求和函數(shù)，并且支持傳入任意數(shù)量的值。

function sum(...params) {  let sum = arr.reduce(function (prev, cur) {    return prev + cur;
  });  return sum;
}let arr = [1, 2, 3, 4, 5];console.log(sum(arr)); //輸出 15復(fù)制代碼

Array.from()

Array.from()方法從一個類似數(shù)組或可迭代對象創(chuàng)建一個新的淺拷貝的數(shù)組實例，通常有以下四種實用場景。

//一、克隆一個數(shù)組let num = [1, 2, 3];let newNum = Array.from(num);console.log(newNum, num === newNum);  //[1, 2, 3] false//二、使用指定值，初始化一個數(shù)組//給定長度為10，默認(rèn)值是數(shù)組2和對象{key:1}let length = 4;let defaultValue = 2;let defaultObj = { key: 1 };let arrValue = Array.from({ length }, (item,index) => defaultValue);let arrObj = Array.from({ length }, (item,index) => defaultObj);console.log(arrValue); // [2, 2, 2, 2]console.log(JSON.stringify(arrObj)); //[{"key":1},{"key":1},{"key":1},{"key":1}]//三、生成值范圍數(shù)組function range(end) {  return Array.from({ length: end }, (item, index) => index);
}let arr = range(4);console.log(arr); // [0, 1, 2, 3]//四、數(shù)組去重,結(jié)合set使用let arr = [1, 1, 2, 3, 3];let set = new Set(arr);console.log(Array.from(set));復(fù)制代碼

創(chuàng)建數(shù)組

如何創(chuàng)建一個數(shù)組，有下面幾種常用方式

//一、數(shù)組字面量const arr1 = [];//二、構(gòu)造函數(shù)const arr2 = Array(3);  //[null,null,null]const arr3 = Array("3");  //["3"]//這時想要用構(gòu)造函數(shù)創(chuàng)建一個數(shù)字為7的數(shù)組，發(fā)現(xiàn)上面方式是無法滿足的，而ES6提供了Array.of()能滿足我們的需求const arr3 = Array.of(7);  //[7]復(fù)制代碼

數(shù)組查找

find()方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值，若沒有找到對應(yīng)元素返回undefined
findIndex()方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的索引，若沒有找到對應(yīng)元素則返回-1。

假如我們想要在一個成績數(shù)組中，找到達(dá)到及格分?jǐn)?shù)的最低分。

const score = [34, 23, 66, 12, 90, 88, 77, 40];const passMin = score.find((value) => value > 60);console.log(passMin); //66const pass = score.findIndex((value) => value > 60);console.log(pass); //2復(fù)制代碼

數(shù)組遍歷

ES6新增 for...of 數(shù)組遍歷方式

const score = [34, 23, 66, 12,];for (let value of score) {  console.log(value); //  34, 23, 66, 12}復(fù)制代碼

函數(shù)的擴(kuò)展

ES6對函數(shù)進(jìn)行了很多的擴(kuò)展，具體如下

函數(shù)參數(shù)設(shè)置默認(rèn)值

ES6允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值，即可以直接寫在參數(shù)定義的后面。

//參數(shù)b設(shè)置了默認(rèn)值為2，在方法調(diào)用的時候并沒有傳值，所以b直接使用默認(rèn)值function sum(a, b = 2) {  return a + b;
}console.log(sum(1)); //3復(fù)制代碼

Rest參數(shù)

ES6引入reset參數(shù)，形式為...變量名，可以用來獲取傳遞給函數(shù)的多余參數(shù)。

function sum(a, ...values) {  console.log(a, values); //1   [2, 3, 4, 5]}

sum(1, 2, 3, 4, 5);復(fù)制代碼

name和length屬性

name屬性返回函數(shù)名，length屬性返回沒有指定默認(rèn)值的參數(shù)個數(shù)。

function sum(a, b, c, d = 1) {  console.log(a, values); //1   [2, 3, 4, 5]}console.log(sum.name);  //sumconsole.log(sum.length);  //3復(fù)制代碼

箭頭函數(shù)

ES6允許使用箭頭(=>)的方式定義函數(shù)，有下面幾種箭頭函數(shù)實現(xiàn)形式。
想要實現(xiàn)一個加法函數(shù)，ES5的形式如下

function sum(a, b) {  return a + b;
}復(fù)制代碼

而如果使用箭頭函數(shù)實現(xiàn)的話，則如下

sumArrow = (a, b) => {  return a + b;
};復(fù)制代碼

上面是箭頭函數(shù)的基本變現(xiàn)形式，不同的場景還有不同的實現(xiàn)形式。

//對于上面的sumArrow函//一、如果只有一個參數(shù),可以省略括號sumArrow = a => {  return a;
};

二、如果返回值是表達(dá)式，可以省略return和{}
sumArrow = a => a;

三、如果返回值是字面量對象，一定要用小括號包起來
sumArrow = () => ({ a: 1, b: 2 });復(fù)制代碼

箭頭函數(shù)與普通函數(shù)除了實現(xiàn)方式不同外，還有個不同的點就是對this的處理方式。

//普通函數(shù)let math = {  name: "mathName",  sum: function (a, b) {    console.log(this.name); //math
    return a + b;
  },
};

math.sum();//箭頭函數(shù)globalThis.name = "globalName";let math = {  name: "mathName",  sum: (a, b) => {    console.log(this.name); //globalName
    return a + b;
  },
};

math.sum();復(fù)制代碼

從上面示例可以看到，箭頭函數(shù)和普通函數(shù)最終打印的this.name不一致。對于普通函數(shù)，this指向的是調(diào)用sum方法的math對象，所以this.name打印的是“mathName”。而對于箭頭函數(shù)，this指向的是定義sum方法的全局對象，所以this.name打印的是“globalName”。

在后續(xù)的開發(fā)過程中，我們將會經(jīng)常使用到箭頭函數(shù)，在使用的過程中，我們需要有以下幾點注意

1. 箭頭函數(shù)中this指向定義時所在的對象，而不是調(diào)用時所在的對象
2. 不可以當(dāng)作構(gòu)造函數(shù)
3. 不可以使用yield命令，不能作用generator函數(shù)

解構(gòu)賦值

解構(gòu)賦值是一種表達(dá)式，可以將屬性和值從對象和數(shù)組中取出，賦值給其他變量。

如何使用

對象解構(gòu)賦值

假如我們拿到一個對象，需要獲取指定的屬性值。則解構(gòu)賦值讓我們無需通過調(diào)用屬性的方式賦值，而是通過指定一個與對象結(jié)構(gòu)相同模板的方式，獲取想要的屬性值。

const people = {  name: "ES6",  age: 27,  sex: "male",
};//如果通過調(diào)用屬性賦值，則需要這么做let name = people.name;let age = people.age;let sex = people.sex;console.log(name, age, sex); //ES6 27 male//而使用解構(gòu)賦值的方式，代碼會更加的清晰簡單const { name, age } = People;console.log(name, age); //ES6 27 male復(fù)制代碼

除了上面這種基本用法，還有其他使用方式

const people = {  name: "ES6",  age: 27,  sex: "male",
};// 一、屬性順序不需保持一致，名稱相同即可const { age, name, sex } = people;console.log(name, age, sex);  //ES6 27 male//二、取值時，重新定義變量名const { age: newAge, name: newName, sex: newSex } = people;console.log(name, age, sex); //Uncaught ReferenceError: age is not definedconsole.log(newName, newAge, newSex); //ES6 27 male//三、賦值過程中設(shè)置默認(rèn)值const { nickName = "昵稱", age } = people;console.log(nickName, age); //昵稱 27//四、reset運(yùn)算符。只獲取想要的屬性，其他屬性都放在新的變量里。const { name, ...peopleParams } = people;console.log(name, peopleParams); //ES6 {age: 27, sex: "male"}//五、嵌套對象取值const people = {  name: "ES6",  address: {    province: "江蘇",
  },
};const { address: { province }} = people;console.log(province); //江蘇復(fù)制代碼

數(shù)組解構(gòu)賦值

假如我們拿到一個數(shù)組，需要獲取指定的元素值。

const [a, b, c] = [1, 2, 3];console.log(a, b, c);   //1 2 3復(fù)制代碼

除了上面這種基本用法，還有其他使用方式

//一、待解構(gòu)的除了是數(shù)組，還可以是任意可遍歷的對象const [a, b, c] = new Set([1, 2, 3]);console.log(a, b, c); //1 2 3//二、被賦值的變量還可以是對象的屬性，不局限于單純的變量const num = {};
[num.a, num.b, num.c] = [1, 2, 3];console.log(num); //{a: 1, b: 2, c: 3}//三、解構(gòu)賦值在循環(huán)體中的應(yīng)用const num = {  a: 10,  b: 20,  c: 30,
};for (const [key, value] of Object.entries(num)) {  console.log(key, value); //a 10    b 20    c 30}//四、跳過賦值元素const [a, , c] = [1, 2, 3]; //存在空位的數(shù)組叫稀疏數(shù)組console.log(a, c);  //1 3//五、rest 參數(shù)const [a,...other] = [1, 2, 3];console.log(a, other);  //1    [2, 3]//六、賦值過程中設(shè)置默認(rèn)值const [a, , , d = 10] = [1, 2, 3];console.log(d); //10復(fù)制代碼

字符串解構(gòu)賦值

字符串解構(gòu)賦值可以當(dāng)成數(shù)組解構(gòu)賦值

const [a, b, c, d] = "ECMAScript2015";console.log(a, b, c, d); //E C M A復(fù)制代碼

對象的擴(kuò)展

ES6對對象進(jìn)行了很多的擴(kuò)展，具體如下

屬性的簡潔表示法

從ES6開始，如果對象的屬性名和屬性值相同，則有簡寫的方式。

let province = "江蘇";const address = {
  province, //等同于 province: province
  city: "南京",
};復(fù)制代碼

屬性名表達(dá)式

從ES6開始，可以使用變量或表達(dá)式定義對象的屬性。

let key = "province";const address = {
  [key]: "省份",  city: "南京",
};console.log(address); //{province: "省份", city: "南京"}復(fù)制代碼

Object.is()

判斷兩個值是否是同一個值。在Object.is()之前，有“==”和“===”兩種方式判斷值是否相等，但這兩個方式都有一定缺陷，如下

//== 在判斷相等前會對不是同一類型的變量進(jìn)行強(qiáng)制轉(zhuǎn)換，最終導(dǎo)致“”與false相等console.log("" == false);   //true//=== 會將-0與+0視為相等，而將Number.NaN與NaN視為不相等console.log(-0 === +0); //trueconsole.log(Number.NaN === NaN);    //false復(fù)制代碼

所以，需要一種運(yùn)算，在所有場景下，只要兩個值是一樣的，那么就應(yīng)該相等，在實際項目開發(fā)過程中，推薦使用Object.is()來判斷值相等。

console.log(Object.is(-0, +0)); //falseconsole.log(Object.is(Number.NaN, NaN)); //truelet a = { value: 1 };let b = { value: 1 };console.log(Object.is(a, b)); //false  對象都是同一個引用才相等復(fù)制代碼

Object.assign()

用于將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標(biāo)對象，它將返回目標(biāo)對象。

語法：

Object.assign(target, ...sources)     參數(shù)說明： target：目標(biāo)對象 sources:源對象 返回值：合并后的目標(biāo)對象

const target = { a: 1,};const source = { b: "B", c: "C" };const assignObj = Object.assign(target, source);console.log(assignObj); //{a: 1, b: "B", c: "C"}  //其他應(yīng)用//一、如果目標(biāo)對象與源對象屬性具有相同值，則源對象屬性值會覆蓋目標(biāo)對象屬性值const target = { a: 1,b: 2};const source = { b: "B", c: "C" };const assignObj = Object.assign(target, source);console.log(assignObj); //{a: 1, b: "B", c: "C"}    //目標(biāo)對象的b屬性值被覆蓋//二、源對象可以有多個值const target = { a: 1 };const source1 = { b: "B", c: "C" };const source2 = { d: "D", e: "E" };const assignObj = Object.assign(target, source1, source2);console.log(assignObj); //{a: 1, b: "B", c: "C", d: "D", e: "E"}復(fù)制代碼

對象遍歷

假如我們想要循環(huán)遍歷一個對象的鍵與值，則可以使用下面幾種方式進(jìn)行遍歷

const score = {  name: "mango",  age: "25",  score: 80,
};//for...infor (let key in score) {  console.log(key, score[key]); // 分別輸出：name mango 、 age 25 、score 80}//Object.keys()用來獲取所有key組成的數(shù)組Object.keys(scoreObj).forEach(key => {  console.log(key, scoreObj[key]) //分別輸出：name mango 、 age 25 、score 80})//Object.getOwnPropertyNames()用來獲取所有key組成的數(shù)組Object.getOwnPropertyNames(scoreObj).forEach(key => {  console.log(key, scoreObj[key]) //分別輸出：name mango 、 age 25 、score 80})//Reflect.ownKeys()用來獲取所有key組成的數(shù)組Reflect.ownKeys(scoreObj).forEach(key => {  console.log(key, scoreObj[key]) //分別輸出：name mango 、 age 25 、score 80})復(fù)制代碼

Class

JavaScript是一種基于對象的語言，我們遇到的所有東西幾乎都是對象，但ES6之前是沒有class的，而在ES6版本中正式引入了class，讓JavaScript成為了一種真正的面向?qū)ο笳Z言，我們可以像下面這樣在JavaScript中進(jìn)行面向?qū)ο缶幊獭?/p>

//通過class關(guān)鍵字定義類class People{  
  //類的構(gòu)造函數(shù)
  constructor(name, age) {    this.name = name;    this.age = age;
  }  //實例方法
  getName() {    return this.name;
  }  //靜態(tài)方法
  static say() {    console.log("Hello ES6");
  }
}//繼承class Student extends People {  constructor(name, age) {    super(name, age);
  }
}//對象創(chuàng)建與調(diào)用let student = new Student("mango", "27");
student.getName();
Student.say();復(fù)制代碼

通過上面的代碼，我們具體說明下JavaScript中進(jìn)行面向?qū)ο缶幊獭?/p>

類的聲明

通過class關(guān)鍵字聲明類，支持構(gòu)造函數(shù)construct做對象初始化。

class People{  
  constructor() {    //初始化
  }
}復(fù)制代碼

屬性

Class對象中有兩種對象屬性，分別是實例屬性和靜態(tài)屬性。實例屬性必須定義在類的方法里，而靜態(tài)屬性必須定義在類的外面。

class People{  constructor() {    //定義實例屬性
    this.name = "";    this.age = 0;
  }
}

People.desc="類描述";  //定義的靜態(tài)屬性//訪問People people=new People();console.log(people.name);console.log(People.name);復(fù)制代碼

類中定義的屬性，默認(rèn)都是可讀可寫的，但是如果這時候我們想指定屬性不可被修改該如何實現(xiàn)呢？那么便要用到set和get了,set和get可以定義一個屬性，但是如果只有g(shù)et而沒有set，則屬性不可以進(jìn)行修改。

class People {  get sex() {    return "男";
  }
}let people = new People();console.log(people.sex);
people.sex="女" //Uncaught TypeError: Cannot set property sex of #<People> which has only a getter復(fù)制代碼

方法

Class對象中有三種方法，分別是構(gòu)造方法、實例方法還有靜態(tài)方法。

class People {  //構(gòu)造方法
  constructor(name, age) {    this.nameA = name;    this.age = age;
  }  //實例方法
  getName() {    return this.nameA;
  }  //靜態(tài)方法
  static say() {    console.log("Hello " + People.desc);
  }
}

People.desc = "類描述";let people = new People("mango", "27");let name = people.getName();console.log(name); //mangoPeople.say(); //Hello 類描述復(fù)制代碼

繼承

繼承是面向?qū)ο笳Z言很重要的一大特征，ES6新加入了extends和super關(guān)鍵字來實現(xiàn)繼承。

class People {  constructor(name) {    this.name = name;
  }

  getName() {    return this.name;
  }
}//繼承class Student extends People {  constructor(name, age) {    super(name, age);
  }
}//Student類繼承了People類，student對象中super調(diào)用了父類的構(gòu)造函數(shù)，并傳遞了name參數(shù)，因為繼承的特性，student也擁有了父類的getName（）方法let student = new Student("ES6");console.log(student.getName());復(fù)制代碼

通過以上對class的學(xué)習(xí)，我們得知道其實class并不是新引入的數(shù)據(jù)類型，其實class只是一種語法糖，它的實質(zhì)完全可以看作構(gòu)造函數(shù)的另一種寫法。

class People {  constructor(name) {    this.name = name;
  }

  getName() {    return this.name;
  }
}console.log(typeof People); //functionconsole.log(People.prototype);  //{constructor: ?, getName: ?}復(fù)制代碼

JS是單線程的

異步編程其實就是處理異步任務(wù)，在進(jìn)行異步編程之前，我們需要了解JavaScript是單線程的，在同一時間只能做一件事。

JavaScript之所以設(shè)計成單線程，是與它的用途有關(guān)。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動以及操作DOM。這決定了它只能是單線程，否則會帶來很多復(fù)雜的同步問題。例如，如果JavaScript同時有兩個線程，一個線程在某個DOM節(jié)點上添加內(nèi)容，另一個線程刪除了這個節(jié)點，這時瀏覽器就不曉得以哪個線程為準(zhǔn)。所以，為了避免復(fù)雜，從一誕生，JavaScript就是單線程的。

單線程就意味著，所有任務(wù)都需要排隊，前一個任務(wù)結(jié)束，后一個任務(wù)才會執(zhí)行。那么如果前一個任務(wù)很長的話，那么后面一個任務(wù)不是就一直需要等待了嗎？于是乎，JS將所有任務(wù)分成了兩類，同步和異步。
同步：只有前一個任務(wù)執(zhí)行完畢，才能執(zhí)行后一個任務(wù)
異步：當(dāng)同步任務(wù)執(zhí)行到某個需要耗時執(zhí)行的運(yùn)行環(huán)境API時，就會觸發(fā)異步任務(wù)，此時運(yùn)行環(huán)境（瀏覽器或Node）就會單獨開線程去處理這些異步任務(wù)。

JavaScript運(yùn)行原理

下面是JavaScript運(yùn)行原理圖，同步任務(wù)在JS主線程完成，異步任務(wù)則新開一個線程



疑問：不是說JavaScript是單線程的嗎，那為什么又新開了一條線程處理任務(wù)呢，這不是多線程方式嗎？
有這個疑問不奇怪，我們需要清楚JavaScript單線程其實說的是JavaScript引擎是單線程的，開發(fā)者只能通過單線程的方式進(jìn)行JavaScript開發(fā)，而新開了一條線程處理任務(wù)是底層執(zhí)行環(huán)境決定的，JavaScript執(zhí)行環(huán)境是多線程。


在實際項目中，異步編程使用場景極其之多，請求個接口數(shù)據(jù)、創(chuàng)建個定時器、緩存?zhèn)€數(shù)據(jù)都離不開異步編程的身影，為了更好的處理異步任務(wù)，ES6給我們提供兩種新的方式，分別是Promise和Generator。

Promise

Promise 是一個代理對象，代表了一個異步任務(wù)的最終成功或者失敗狀態(tài)。Promise允許你為異步任務(wù)的成功或失敗分別設(shè)置對應(yīng)的處理方法，以類似同步的方式便捷的進(jìn)行異步編程。

一個Promise有三種狀態(tài)：

• pending：初始狀態(tài)，既不是成功，也不是失敗狀態(tài)。
• fulfilled：成功狀態(tài)，代表著任務(wù)執(zhí)行完成
• rejected：失敗狀態(tài)，代表著任務(wù)執(zhí)行失敗

基本使用

創(chuàng)建Promise對象

const promise = new Promise(function (resolve, reject) {    let result=執(zhí)行異步任務(wù);    if(result){        //如果異步任務(wù)成功完成
        resolve()
    }else{        //如果異步任務(wù)執(zhí)行失敗
        reject();
    }
});復(fù)制代碼

創(chuàng)建Promise對象需要傳遞一個executor參數(shù)，executor是帶有resolve和reject兩個參數(shù)的函數(shù)，這兩個參數(shù)是JavaScript引擎提供的兩個函數(shù)，Promise構(gòu)造函數(shù)執(zhí)行會立即調(diào)用executor函數(shù)。

• 當(dāng)Promise中的異步任務(wù)執(zhí)行成功時，調(diào)用resolve()，將Promise對象的狀態(tài)從pending改為fulfilled（未完成到成功）
• 當(dāng)Promise中的異步任務(wù)執(zhí)行失敗時，調(diào)用reject()，將Promise對象的狀態(tài)從pending改為rejected（未完成到失?。?/li>

如何使用

實例好promise對象后，我們可以使用下面的語法來對異步任務(wù)完成后的狀態(tài)進(jìn)行處理。

promise.then(onFulfilled,onRejected)

promise.then(  (result) => {    console.log("異步任務(wù)處理成功，執(zhí)行相應(yīng)方法");
  },  (error) => {    console.log("異步任務(wù)處理失敗，執(zhí)行相應(yīng)方法");
  }
);復(fù)制代碼

但在具體的項目開發(fā)中，我們通常都是使用已經(jīng)存在的Promise對象，下面我們就通過使用常用的promise對象fetch獲取接口數(shù)據(jù)。

案例實現(xiàn)

我們需要調(diào)用接口，獲取一個用戶列表數(shù)據(jù)

fetch("http://jsonplaceholder.typicode.com/users")
  .then(function (response) {    return response.json();
  })
  .then(function (res) {    console.log(res);   // [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  });復(fù)制代碼

response是一個包含響應(yīng)結(jié)果的Response對象，它只是一個HTTP響應(yīng)，而不是真正的JSON。為了獲取JSON的內(nèi)容，需要使用json()方法獲取一個Promise對象，然后再使用then獲取JSON數(shù)據(jù)。

其他使用

Promise.prototype.catch()

Promise提供了catch()方法，用來捕獲異步操作過程中遇到的錯誤異常，使用場景如下

const CatchPromise = new Promise(function (resolve, reject) {
  reject(new Error("error msg"));
});

CatchPromise.then().catch((e) => {  console.error(e); //Error: error msg});復(fù)制代碼

在Promise對象中，除了可以使用reject(new Error())的方式觸發(fā)異常，還可以使用throw new Error()的方式觸發(fā)異常，但不建議使用throw new Error()的方式，因為這種方式不會改變Promise的狀態(tài)。

Promise.prototype.all()

Promise.all()用于處理多個異步任務(wù)，例如處理多張圖片上傳。Promise.all()接受一個promise對象數(shù)組作為參數(shù)，執(zhí)行完畢返回一個Promise對象。

Promise.all()的狀態(tài)變化：
傳入的promise對象數(shù)組全部變?yōu)閒ulfill狀態(tài)則返回成功，調(diào)用resolve()
傳入的promise對象數(shù)組有一個變?yōu)閞eject狀態(tài)則返回失敗，調(diào)用reject()

const promise1 = new Promise(function (resolve, reject) {  setTimeout(function () {
    resolve("promise1");
  }, 2000);
});const promise2 = new Promise(function (resolve, reject) {  setTimeout(function () {
    resolve("promise2");
  }, 1000);
});const promise3 = new Promise(function (resolve, reject) {  setTimeout(function () {
    resolve("promise3");
  }, 3000);
});const promiseAll = Promise.all([promise1, promise2, promise3]);
promiseAll.then(function (results) {  console.log(results); // ["promise1", "promise2", "promise3"]});復(fù)制代碼

Promise.prototype.race()

Promise.race()也是用于處理多個異步任務(wù)，與Promise.all()一樣，Promise.race()接受一個promise對象數(shù)組作為參數(shù)，執(zhí)行完畢返回一個Promise對象。

Promise.race()的狀態(tài)變化：
傳入的promise對象數(shù)組有一個變?yōu)閞esolve狀態(tài)則返回成功，調(diào)用resolve()
傳入的promise對象數(shù)組有一個變?yōu)閞eject狀態(tài)則返回失敗，調(diào)用reject()

const promise1 = new Promise(function (resolve, reject) {  setTimeout(function () {
    reject("promise1");
  }, 2000);
});const promise2 = new Promise(function (resolve, reject) {  setTimeout(function () {
    resolve("promise2");
  }, 1000);
});const promise3 = new Promise(function (resolve, reject) {  setTimeout(function () {
    resolve("promise3");
  }, 3000);
});const promiseAll = Promise.race([promise1, promise2, promise3]);
promiseAll.then(function (results) {  console.log(results); // promise2});復(fù)制代碼

Generator函數(shù)

Generator函數(shù)是用來處理異步任務(wù)的函數(shù)，函數(shù)內(nèi)部包裹的就是異步任務(wù)的處理。Generator不同于普通函數(shù)，當(dāng)執(zhí)行到異步任務(wù)，可以暫停，直到異步任務(wù)執(zhí)行完畢再繼續(xù)往下執(zhí)行，類似同步的方法進(jìn)行異步編程。

如何使用

Generator函數(shù)在使用上具體有以下特點

• ：定義generator函數(shù)時，function后面需要加上星號，例如function generatorFuncName()
• yield：需要暫停去執(zhí)行異步任務(wù)時，需要在代碼前面加上yield標(biāo)識，例如yield fetch()
• next()：調(diào)用generator函數(shù)后獲得的是一個指針對象，調(diào)用指針的next方法，可以用來分階段逐步執(zhí)行g(shù)enerator函數(shù)。

那么具體如何使用generator函數(shù)實現(xiàn)異步編程呢，在學(xué)習(xí)Promise的時候，我們實現(xiàn)了一個獲取一個用戶列表數(shù)據(jù)的案例，下面我們看看如何使用generator函數(shù)實現(xiàn)吧。

function* loadUsers() {  const API = "http://jsonplaceholder.typicode.com/users";  console.log("等待數(shù)據(jù)請求");  yield fetch(API); //暫停，開始執(zhí)行異步任務(wù)
  console.log("數(shù)據(jù)請求完成");  console.log("繼續(xù)其他邏輯操作");
}const generator = loadUsers();const promise = generator.next().value;console.log(promise);

promise
  .then(function (response) {    return response.json();
  })
  .then(function (result) {    console.log(result); //[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
    generator.next(); //打?。簲?shù)據(jù)請求完成  繼續(xù)其他邏輯操作。異步任務(wù)執(zhí)行完畢后調(diào)用next()，繼續(xù)執(zhí)行g(shù)enerator函數(shù)中后續(xù)代碼
  });復(fù)制代碼

Proxy

Proxy翻譯過來叫代理，Proxy可以通過自定義行為來改變對象的基本操作，例如屬性賦值、查找、枚舉、函數(shù)調(diào)用等。

基本語法

const p=new Proxy(target,handler); 參數(shù)說明： target：需要使用Proxy包裝的目標(biāo)對象（可以是任何類型的對象，包括原生數(shù)組，函數(shù)，甚至是另外一個代理） handler：代理目標(biāo)對象基本操作的對象 返回值： p：target被代理后不可以直接訪問，而只能訪問

Proxy使用場景

設(shè)置對象屬性的讀寫權(quán)限

let people = {  name: "mango",  //設(shè)置屬性不可讀
  age: 27,  //設(shè)置屬性不可被修改};let peopleHandler = {  //設(shè)置屬性值讀取的捕捉器
  get: function (target, prop, receiver) {    if (Object.is(prop, "name")) {      return prop + "屬性不可讀";
    }
  },  //設(shè)置屬性值操作的捕捉器
  set: function (target, prop, value) {    if (Object.is(prop, "age")) {      throw new Error(prop + "屬性不可寫");
    }
  },
};let peopleProxy = new Proxy(people, peopleHandler);
peopleProxy.age = 10; // Uncaught Error: age屬性不可寫console.log(peopleProxy.name); //輸出：name屬性不可讀復(fù)制代碼

給接口返回的對象中字段為null的屬性設(shè)置默認(rèn)值

let people = {  address: null,
};let peopleHandler = {  //設(shè)置屬性值讀取的捕捉器
  get: function (target, prop, receiver) {    return target[prop] ?? "默認(rèn)值";  //空值合并操作符
  },
};let peopleProxy = new Proxy(people, peopleHandler);console.log(peopleProxy.address); //輸出：默認(rèn)值復(fù)制代碼

攔截函數(shù)調(diào)用

//handler.apply()用于攔截函數(shù)的調(diào)用function sum(a, b) {  console.log(a + b);  return a + b;
}////對于sum方法，關(guān)注的是處理數(shù)據(jù)相加的邏輯//通過代理則可以處理在調(diào)用方法時候，對參數(shù)的校驗，數(shù)據(jù)打點等const sumProxy = new Proxy(sum, {  apply: function (target, thisArg, argumentsList) {    console.log("調(diào)用了方法", "打點");
  },
});

sumProxy(1, 2);復(fù)制代碼

**

Module

ES6在語言標(biāo)準(zhǔn)上，通過Module實現(xiàn)了模塊功能，現(xiàn)階段幾乎取代之前用來實現(xiàn)JavaScript模塊化的CommonJS和AMD規(guī)范，成為了瀏覽器環(huán)境和node環(huán)境通用的模塊化解決方案。
Module實現(xiàn)的模塊化屬于“編譯時加載”，即在編譯時就完成了模塊之間的加載，通過這種“編譯時加載”的方式，使得在不運(yùn)行代碼的情況下就可以通過詞法分析、語法分析等對程序代碼進(jìn)行掃描，以驗證代碼的規(guī)范性、安全性和可維護(hù)性，讓靜態(tài)分析成為了可能。

如何使用

Module實現(xiàn)的模塊化功能主要有兩個命令構(gòu)成：

• export：導(dǎo)出命令，用于提供模塊的對外接口
• import：導(dǎo)入命令，用于引入其他模塊提供的接口

一個模塊就是一個獨立的文件，該文件內(nèi)的所有變量，外部無法獲取，如果想要外部獲取模塊內(nèi)的某些變量，就必須使用export關(guān)鍵字導(dǎo)出變量，在需要引入該導(dǎo)出變量的的模塊中必須使用import關(guān)鍵字引入變量。

export

下面舉例說明export命令導(dǎo)出對外接口的幾種方式，在ExportDemo.js文件中，

• 導(dǎo)出變量

//方法一export let a = 1;//方法二let b = 2;export { b };復(fù)制代碼

• 導(dǎo)出函數(shù)

//方法一export function test(){    console.log("name");
}//方法二let test2=function test(){    console.log("name");
}export {test2 as newName}復(fù)制代碼

注意在方法二中，使用了as關(guān)鍵字，as關(guān)鍵字可以在導(dǎo)出時重命名對外的接口名。

• 導(dǎo)出類

//方法一export class People {
  say() {      console.log("Hello Module");
  }
}//方法二export { People };復(fù)制代碼

import

使用export導(dǎo)出了模塊中的對外接口后，其他JS文件就可以通過import關(guān)鍵字加載這個模塊，使用如下。

//大括號中的變量名必須與被導(dǎo)出對外接口名一致import { a, b, test as newTest, People } from "./ExportDemo";//導(dǎo)入a和b的變量console.log(a, b);//導(dǎo)入test方法,同樣可以使用as關(guān)鍵字在導(dǎo)入的時候重命名newTest();//導(dǎo)入People類let people = new People();
people.say();復(fù)制代碼

其他使用方式**
在日常開發(fā)過程中，Module模塊化還有下面幾種常見的使用方式。

• 使用*指定一個對象，加載模塊中的所有導(dǎo)出

//import { a, b, test, People } from "./ExportDemo";//上面的導(dǎo)入方式可以改寫成下面方式import * as ExportModule from "./ExportModule";//使用的使用，加上前綴即可ExportModule.test()復(fù)制代碼

• 通過export default，為模塊指定默認(rèn)導(dǎo)出名

//導(dǎo)出const People = {  say: function () {    console.log("Hello Module");
  },
};export default People;//導(dǎo)入import People from "./ExportModule";

People.say(); //Hello Module復(fù)制代碼

• export和import一起使用，處理先輸入后輸出的情況

//假如有a、b、c三個文件模塊，//c文件模塊如下 c.jslet people={name:"mango",age:27};let address="南京";export { people, address };//有下面幾種使用場景//一、在b中導(dǎo)入c中的people和address，并導(dǎo)出給a使用export {people,address} from 'c'//二、在b中整體導(dǎo)入c，并導(dǎo)出給a使用export * from 'c'//三、在b中導(dǎo)入people,并作為b的導(dǎo)出名稱【具名接口改為默認(rèn)接口】export {people as default} from 'c'//當(dāng)c的導(dǎo)出方式為export default的時候，并可以使用【默認(rèn)接口改為具名接口】export {default as NewPeople} from 'c'復(fù)制代碼

感謝各位的閱讀！關(guān)于ECMAScript的新特性有哪些就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文名稱：ECMAScript的新特性有哪些
本文來源：http://aaarwkj.com/article12/gjopdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、建站公司、外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)、商城網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)