這篇文章給大家分享的是有關(guān)ECMAScript的新特性有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括濟(jì)水街道網(wǎng)站建設(shè)、濟(jì)水街道網(wǎng)站制作、濟(jì)水街道網(wǎng)頁(yè)制作以及濟(jì)水街道網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，濟(jì)水街道網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到濟(jì)水街道省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
ES6成為JavaScript的下一代標(biāo)準(zhǔn)后，標(biāo)準(zhǔn)委員會(huì)（TC39）在每年都會(huì)發(fā)布一個(gè)ES的新版本，每個(gè)版本里都引入了很多實(shí)用的新特性，在日常的項(xiàng)目開發(fā)中，如果我們掌握這些實(shí)用的新特性，將大大的提升開發(fā)效率，下面讓我們?nèi)娴恼莆者@些ES的新特性吧~
之前使用var來定義變量，為我們提供了新的方式
let用來聲明變量，const用來聲明常量。
const TAG = "我是常量";let a; a = 2;console.log(TAG, "a=" + a); //我是常量 a=2復(fù)制代碼
let和const為JavaScript新增了塊級(jí)作用域，通常情況下，{}包裹的代碼擁有的作用域就是塊級(jí)作用域，聲明的變量或常量只在塊級(jí)作用域內(nèi)有效，外部不能訪問。
重慶分公司
重慶分公司
if (true) { //外層塊級(jí)作用域
let a = 1; const A = 1; if (true) { //內(nèi)層塊級(jí)作用域
let a = 2;
} console.log(a,A); //（1）輸出：1 , 1}console.log(a); //（2）Uncaught ReferenceError: a is not defined復(fù)制代碼上面有兩個(gè)塊級(jí)作用域，都聲明了變量a，但外層塊級(jí)作用域與內(nèi)層塊級(jí)作用域無(wú)關(guān)，所以（1）處輸出的是外層的變量值1，（2）處訪問了不在一個(gè)塊級(jí)作用域定義的變量，所以會(huì)報(bào)錯(cuò)。
另外一個(gè)理解塊級(jí)作用域的示例。
//for循環(huán)體內(nèi)的定時(shí)器//在ES6之前，是沒有塊級(jí)作用域的，變量用var聲明，直接掛載在全局作用域上for (var i = 0; i < 3; i++) { setTimeout(function () { console.log(i); //3、3、3
}, 100);
}//使用var聲明，for同步操作優(yōu)先于setTimeout異步操作，在開始執(zhí)行setTimeout的時(shí)候，//for循環(huán)已經(jīng)執(zhí)行完，i為3，則后續(xù)每次setTimeout輸出的i都是3//使用let聲明的話，則會(huì)在循環(huán)體內(nèi)部形成閉包，每次for循環(huán)都會(huì)給閉包提供每次循環(huán)i的值，//并且不被釋放，最終setTimeout里會(huì)分別輸出0、1、2for (let i = 0; i < 3; i++) { setTimeout(function () { console.log(i); //0 1 2
}, 100);
}復(fù)制代碼不能在變量和常量聲明之前使用。
let和const命令會(huì)使區(qū)塊形成封閉作用域，若在聲明之前使用，就會(huì)報(bào)錯(cuò)，這個(gè)在語(yǔ)法上，稱為“暫時(shí)性死區(qū)”（簡(jiǎn)稱TDZ）。
if (true) {
tmp = "abc"; // ReferenceError
let tmp;
}復(fù)制代碼let a = 1;let a = 2;//報(bào)錯(cuò) SyntaxError: Identifier 'a' has already been declared const B=1;const B=2;//報(bào)錯(cuò) SyntaxError: Identifier 'B' has already been declared 復(fù)制代碼
let聲明的變量，全局對(duì)象（window,global,self）不能訪問到
let a = 10;console.log(window.a); //undefined復(fù)制代碼
ES6對(duì)字符串進(jìn)行了一些擴(kuò)展，如下：
ES6新增了模板字符串（字符串）的方式定義字符串，用來解決之前字符串很長(zhǎng)要換行、字符串中有變量或者表達(dá)式遇到的問題，下面是具體的使用場(chǎng)景
//一、打印長(zhǎng)字符串且換行，直接在模板字符串中保留格式即可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ù)制代碼判斷字符串是否包含一個(gè)指定字符串，返回boolean類型。
const str = "ECMAScript"console.log(str.includes("EC")); //true 找不到返回false 復(fù)制代碼startsWith()用來判斷字符串是否以指定字符串作為開頭，返回boolean類型。
endsWith()用來判斷字符串是否以指定字符串作為結(jié)尾，返回boolean類型。
const str = "ECMAScript"console.log(str.startsWith("ECM")); //true console.log(str.endsWith("Script")); //true 復(fù)制代碼將原有字符串重復(fù)n遍，得到一個(gè)新的字符串
const str = "ECMAScript";console.log(str.repeat(3)); //ECMAScriptECMAScriptECMAScript復(fù)制代碼
ES6開始逐步減少全局性方法，使得語(yǔ)言逐步模塊化，所以把一些處理數(shù)值的方法轉(zhuǎn)移到了Number對(duì)象上，功能行為保持不變。
//將目標(biāo)轉(zhuǎn)換為整數(shù)//ES5parseInt("5.6") //5//ES6Number.parseInt("5.6") //5//將目標(biāo)轉(zhuǎn)換為浮點(diǎn)數(shù)//ES5parseFloat("12.45str") //12.45//ES6Number.parseFloat("12.45str") //12.45復(fù)制代碼另外，為了便于開發(fā)，Number還增加了一些方法和屬性
一、判斷一個(gè)數(shù)值是否是整數(shù)Number.isInteger(25) // trueNumber.isInteger(25.1) // false二、獲取JavaScript最大安全值和最小安全值Number.MAX_SAFE_INTEGER=9007199254740991Number.MIN_SAFE_INTEGER=-9007199254740991三、判斷一個(gè)數(shù)值是否是在安全范圍Number.isSafeInteger(9007199254740992) //false復(fù)制代碼
新引入原始數(shù)據(jù)類型，用來表示獨(dú)一無(wú)二的值。
let sym = Symbol();let sym2 = Symbol();console.log(sym == sym2); //false 生成的值是獨(dú)一無(wú)二的，所以不相等console.log(typeof sym); //symbol typeof查看值的類型為symbollet symWithDesc = Symbol("name"); //Symbol()括號(hào)內(nèi)可以添加描述console.log(symWithDesc.toString()); //輸出：Symbol(name) 打印描述需要轉(zhuǎn)換成字符串復(fù)制代碼
一、消除魔術(shù)字符串
假如我們需要做一個(gè)點(diǎn)擊菜單，做不同處理的功能，我們通常會(huì)這樣實(shí)現(xiàn)。
const clickMenu = function (menu) { switch (menu) { case "home": break; case "me": break;
}
};
clickMenu("home")復(fù)制代碼"home"這種可能會(huì)多次出現(xiàn)，與代碼形成強(qiáng)耦合的字符串就是魔術(shù)字符串，在項(xiàng)目中我們應(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ù)制代碼
二、作為對(duì)象獨(dú)一無(wú)二的屬性值
假如我們想生成一個(gè)公司人名對(duì)象，并以每個(gè)人名為key值，這時(shí)候如果有人名重名便會(huì)有問題，而Symbol能解決這個(gè)問題
const scores = {
[Symbol("張三")]: { age: 22,
},
[Symbol("李四")]: { age: 21,
},
[Symbol("張三")]: { age: 20,
},
};復(fù)制代碼注意，通過Symbol定義的屬性，只能通過下面兩種方式進(jìn)行遍歷，否則無(wú)法獲取屬性。
for (let key of Object.getOwnPropertySymbols(scores)) { console.log(key, key);
}for (let key of Reflect.ownKeys(scores)) { console.log(key, scores[key]);
}復(fù)制代碼
為了更方便地實(shí)現(xiàn)數(shù)據(jù)操作，ES6新增了Set和Map兩種數(shù)據(jù)結(jié)構(gòu)。
Set是類似于數(shù)組，但成員的值都是唯一的數(shù)據(jù)結(jié)構(gòu)。
新建一個(gè)存儲(chǔ)月份的Set數(shù)據(jù)結(jié)構(gòu)，可以定義一個(gè)空的Set實(shí)例，也可以是帶有數(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ù)遍歷每個(gè)成員monthSets.forEach((item) => console.log(item)); //一月 二月 三月//for...of:直接遍歷每個(gè)成員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ù)制代碼Set數(shù)據(jù)結(jié)構(gòu)在實(shí)際項(xiàng)目中還有很多應(yīng)用場(chǎng)景。
let monthSets = new Set(["一月", "二月", "三月"]);//一、快速判斷數(shù)據(jù)元素是否存在monthSets.has("一月"); //true//二、統(tǒng)計(jì)數(shù)據(jù)元素個(gè)數(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ù)組差級(jí)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與Set類似，也是不重復(fù)的值的集合，但WeakSet的成員只能是對(duì)象。WeakSet引用的對(duì)象都是弱引用，如果其他對(duì)象不再引用該對(duì)象，那么垃圾回收機(jī)制就會(huì)自動(dòng)回收這些對(duì)象所占用的內(nèi)存，不考慮該對(duì)象還存在于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是一種鍵值對(duì)集合，與對(duì)象類似，但Object只支持“字符串：值”，而Map支持“各種類型的值：值”，map給我們提供了更合適的“鍵值對(duì)”數(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通?？梢杂胒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與Map類似，也是用來生成鍵值對(duì)的集合。但WeakMap只接受對(duì)象作為鍵名，并且鍵名所指向的對(duì)象，屬于弱引用對(duì)象。
ES6對(duì)數(shù)組進(jìn)行了很多的擴(kuò)展，具體如下
擴(kuò)展運(yùn)算符是三個(gè)點(diǎn)(...)，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列，通常用在函數(shù)參數(shù)中。
假如我們需要一個(gè)求和函數(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()方法從一個(gè)類似數(shù)組或可迭代對(duì)象創(chuàng)建一個(gè)新的淺拷貝的數(shù)組實(shí)例，通常有以下四種實(shí)用場(chǎng)景。
//一、克隆一個(gè)數(shù)組let num = [1, 2, 3];let newNum = Array.from(num);console.log(newNum, num === newNum); //[1, 2, 3] false//二、使用指定值，初始化一個(gè)數(shù)組//給定長(zhǎng)度為10，默認(rèn)值是數(shù)組2和對(duì)象{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)建一個(gè)數(shù)組，有下面幾種常用方式
//一、數(shù)組字面量const arr1 = [];//二、構(gòu)造函數(shù)const arr2 = Array(3); //[null,null,null]const arr3 = Array("3"); //["3"]//這時(shí)想要用構(gòu)造函數(shù)創(chuàng)建一個(gè)數(shù)字為7的數(shù)組，發(fā)現(xiàn)上面方式是無(wú)法滿足的，而ES6提供了Array.of()能滿足我們的需求const arr3 = Array.of(7); //[7]復(fù)制代碼
find()方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值，若沒有找到對(duì)應(yīng)元素返回undefined
findIndex()方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引，若沒有找到對(duì)應(yīng)元素則返回-1。
假如我們想要在一個(gè)成績(jī)數(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ù)制代碼
ES6新增 for...of 數(shù)組遍歷方式
const score = [34, 23, 66, 12,];for (let value of score) { console.log(value); // 34, 23, 66, 12}復(fù)制代碼
ES6對(duì)函數(shù)進(jìn)行了很多的擴(kuò)展，具體如下
ES6允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值，即可以直接寫在參數(shù)定義的后面。
//參數(shù)b設(shè)置了默認(rèn)值為2，在方法調(diào)用的時(shí)候并沒有傳值，所以b直接使用默認(rèn)值function sum(a, b = 2) { return a + b;
}console.log(sum(1)); //3復(fù)制代碼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屬性返回函數(shù)名，length屬性返回沒有指定默認(rèn)值的參數(shù)個(gè)數(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ù)制代碼ES6允許使用箭頭(=>)的方式定義函數(shù)，有下面幾種箭頭函數(shù)實(shí)現(xiàn)形式。
想要實(shí)現(xiàn)一個(gè)加法函數(shù)，ES5的形式如下
function sum(a, b) { return a + b;
}復(fù)制代碼而如果使用箭頭函數(shù)實(shí)現(xiàn)的話，則如下
sumArrow = (a, b) => { return a + b;
};復(fù)制代碼上面是箭頭函數(shù)的基本變現(xiàn)形式，不同的場(chǎng)景還有不同的實(shí)現(xiàn)形式。
//對(duì)于上面的sumArrow函//一、如果只有一個(gè)參數(shù),可以省略括號(hào)sumArrow = a => { return a;
};
二、如果返回值是表達(dá)式，可以省略return和{}
sumArrow = a => a;
三、如果返回值是字面量對(duì)象，一定要用小括號(hào)包起來
sumArrow = () => ({ a: 1, b: 2 });復(fù)制代碼箭頭函數(shù)與普通函數(shù)除了實(shí)現(xiàn)方式不同外，還有個(gè)不同的點(diǎn)就是對(duì)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不一致。對(duì)于普通函數(shù)，this指向的是調(diào)用sum方法的math對(duì)象，所以this.name打印的是“mathName”。而對(duì)于箭頭函數(shù)，this指向的是定義sum方法的全局對(duì)象，所以this.name打印的是“globalName”。
在后續(xù)的開發(fā)過程中，我們將會(huì)經(jīng)常使用到箭頭函數(shù)，在使用的過程中，我們需要有以下幾點(diǎn)注意
解構(gòu)賦值是一種表達(dá)式，可以將屬性和值從對(duì)象和數(shù)組中取出，賦值給其他變量。
假如我們拿到一個(gè)對(duì)象，需要獲取指定的屬性值。則解構(gòu)賦值讓我們無(wú)需通過調(diào)用屬性的方式賦值，而是通過指定一個(gè)與對(duì)象結(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)賦值的方式，代碼會(huì)更加的清晰簡(jiǎn)單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//二、取值時(shí)，重新定義變量名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"}//五、嵌套對(duì)象取值const people = { name: "ES6", address: { province: "江蘇",
},
};const { address: { province }} = people;console.log(province); //江蘇復(fù)制代碼假如我們拿到一個(gè)數(shù)組，需要獲取指定的元素值。
const [a, b, c] = [1, 2, 3];console.log(a, b, c); //1 2 3復(fù)制代碼
除了上面這種基本用法，還有其他使用方式
//一、待解構(gòu)的除了是數(shù)組，還可以是任意可遍歷的對(duì)象const [a, b, c] = new Set([1, 2, 3]);console.log(a, b, c); //1 2 3//二、被賦值的變量還可以是對(duì)象的屬性，不局限于單純的變量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)賦值可以當(dāng)成數(shù)組解構(gòu)賦值
const [a, b, c, d] = "ECMAScript2015";console.log(a, b, c, d); //E C M A復(fù)制代碼
ES6對(duì)對(duì)象進(jìn)行了很多的擴(kuò)展，具體如下
從ES6開始，如果對(duì)象的屬性名和屬性值相同，則有簡(jiǎn)寫的方式。
let province = "江蘇";const address = {
province, //等同于 province: province
city: "南京",
};復(fù)制代碼從ES6開始，可以使用變量或表達(dá)式定義對(duì)象的屬性。
let key = "province";const address = {
[key]: "省份", city: "南京",
};console.log(address); //{province: "省份", city: "南京"}復(fù)制代碼判斷兩個(gè)值是否是同一個(gè)值。在Object.is()之前，有“==”和“===”兩種方式判斷值是否相等，但這兩個(gè)方式都有一定缺陷，如下
//== 在判斷相等前會(huì)對(duì)不是同一類型的變量進(jìn)行強(qiáng)制轉(zhuǎn)換，最終導(dǎo)致“”與false相等console.log("" == false); //true//=== 會(huì)將-0與+0視為相等，而將Number.NaN與NaN視為不相等console.log(-0 === +0); //trueconsole.log(Number.NaN === NaN); //false復(fù)制代碼所以，需要一種運(yùn)算，在所有場(chǎng)景下，只要兩個(gè)值是一樣的，那么就應(yīng)該相等，在實(shí)際項(xià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 對(duì)象都是同一個(gè)引用才相等復(fù)制代碼
用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象，它將返回目標(biāo)對(duì)象。
語(yǔ)法：
Object.assign(target, ...sources) 參數(shù)說明： target：目標(biāo)對(duì)象 sources:源對(duì)象 返回值：合并后的目標(biāo)對(duì)象
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)對(duì)象與源對(duì)象屬性具有相同值，則源對(duì)象屬性值會(huì)覆蓋目標(biāo)對(duì)象屬性值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)對(duì)象的b屬性值被覆蓋//二、源對(duì)象可以有多個(gè)值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)遍歷一個(gè)對(duì)象的鍵與值，則可以使用下面幾種方式進(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ù)制代碼JavaScript是一種基于對(duì)象的語(yǔ)言，我們遇到的所有東西幾乎都是對(duì)象，但ES6之前是沒有class的，而在ES6版本中正式引入了class，讓JavaScript成為了一種真正的面向?qū)ο笳Z(yǔ)言，我們可以像下面這樣在JavaScript中進(jìn)行面向?qū)ο缶幊獭?/p>
//通過class關(guān)鍵字定義類class People{
//類的構(gòu)造函數(shù)
constructor(name, age) { this.name = name; this.age = age;
} //實(shí)例方法
getName() { return this.name;
} //靜態(tài)方法
static say() { console.log("Hello ES6");
}
}//繼承class Student extends People { constructor(name, age) { super(name, age);
}
}//對(duì)象創(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做對(duì)象初始化。
class People{
constructor() { //初始化
}
}復(fù)制代碼Class對(duì)象中有兩種對(duì)象屬性，分別是實(shí)例屬性和靜態(tài)屬性。實(shí)例屬性必須定義在類的方法里，而靜態(tài)屬性必須定義在類的外面。
class People{ constructor() { //定義實(shí)例屬性
this.name = ""; this.age = 0;
}
}
People.desc="類描述"; //定義的靜態(tài)屬性//訪問People people=new People();console.log(people.name);console.log(People.name);復(fù)制代碼類中定義的屬性，默認(rèn)都是可讀可寫的，但是如果這時(shí)候我們想指定屬性不可被修改該如何實(shí)現(xiàn)呢？那么便要用到set和get了,set和get可以定義一個(gè)屬性，但是如果只有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 # which has only a getter復(fù)制代碼 Class對(duì)象中有三種方法，分別是構(gòu)造方法、實(shí)例方法還有靜態(tài)方法。
class People { //構(gòu)造方法
constructor(name, age) { this.nameA = name; this.age = age;
} //實(shí)例方法
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(yǔ)言很重要的一大特征，ES6新加入了extends和super關(guān)鍵字來實(shí)現(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對(duì)象中super調(diào)用了父類的構(gòu)造函數(shù)，并傳遞了name參數(shù)，因?yàn)槔^承的特性，student也擁有了父類的getName（）方法let student = new Student("ES6");console.log(student.getName());復(fù)制代碼
通過以上對(duì)class的學(xué)習(xí)，我們得知道其實(shí)class并不是新引入的數(shù)據(jù)類型，其實(shí)class只是一種語(yǔ)法糖，它的實(shí)質(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ù)制代碼異步編程其實(shí)就是處理異步任務(wù)，在進(jìn)行異步編程之前，我們需要了解JavaScript是單線程的，在同一時(shí)間只能做一件事。
JavaScript之所以設(shè)計(jì)成單線程，是與它的用途有關(guān)。作為瀏覽器腳本語(yǔ)言，JavaScript的主要用途是與用戶互動(dòng)以及操作DOM。這決定了它只能是單線程，否則會(huì)帶來很多復(fù)雜的同步問題。例如，如果JavaScript同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器就不曉得以哪個(gè)線程為準(zhǔn)。所以，為了避免復(fù)雜，從一誕生，JavaScript就是單線程的。
單線程就意味著，所有任務(wù)都需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，后一個(gè)任務(wù)才會(huì)執(zhí)行。那么如果前一個(gè)任務(wù)很長(zhǎng)的話，那么后面一個(gè)任務(wù)不是就一直需要等待了嗎？于是乎，JS將所有任務(wù)分成了兩類，同步和異步。
同步：只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù)
異步：當(dāng)同步任務(wù)執(zhí)行到某個(gè)需要耗時(shí)執(zhí)行的運(yùn)行環(huán)境API時(shí)，就會(huì)觸發(fā)異步任務(wù)，此時(shí)運(yùn)行環(huán)境（瀏覽器或Node）就會(huì)單獨(dú)開線程去處理這些異步任務(wù)。
下面是JavaScript運(yùn)行原理圖，同步任務(wù)在JS主線程完成，異步任務(wù)則新開一個(gè)線程
疑問：不是說JavaScript是單線程的嗎，那為什么又新開了一條線程處理任務(wù)呢，這不是多線程方式嗎？
有這個(gè)疑問不奇怪，我們需要清楚JavaScript單線程其實(shí)說的是JavaScript引擎是單線程的，開發(fā)者只能通過單線程的方式進(jìn)行JavaScript開發(fā)，而新開了一條線程處理任務(wù)是底層執(zhí)行環(huán)境決定的，JavaScript執(zhí)行環(huán)境是多線程。
在實(shí)際項(xiàng)目中，異步編程使用場(chǎng)景極其之多，請(qǐng)求個(gè)接口數(shù)據(jù)、創(chuàng)建個(gè)定時(shí)器、緩存?zhèn)€數(shù)據(jù)都離不開異步編程的身影，為了更好的處理異步任務(wù)，ES6給我們提供兩種新的方式，分別是Promise和Generator。
Promise 是一個(gè)代理對(duì)象，代表了一個(gè)異步任務(wù)的最終成功或者失敗狀態(tài)。Promise允許你為異步任務(wù)的成功或失敗分別設(shè)置對(duì)應(yīng)的處理方法，以類似同步的方式便捷的進(jìn)行異步編程。
一個(gè)Promise有三種狀態(tài)：
const promise = new Promise(function (resolve, reject) { let result=執(zhí)行異步任務(wù); if(result){ //如果異步任務(wù)成功完成
resolve()
}else{ //如果異步任務(wù)執(zhí)行失敗
reject();
}
});復(fù)制代碼創(chuàng)建Promise對(duì)象需要傳遞一個(gè)executor參數(shù)，executor是帶有resolve和reject兩個(gè)參數(shù)的函數(shù)，這兩個(gè)參數(shù)是JavaScript引擎提供的兩個(gè)函數(shù)，Promise構(gòu)造函數(shù)執(zhí)行會(huì)立即調(diào)用executor函數(shù)。
.jpg)
實(shí)例好promise對(duì)象后，我們可以使用下面的語(yǔ)法來對(duì)異步任務(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ù)制代碼但在具體的項(xiàng)目開發(fā)中，我們通常都是使用已經(jīng)存在的Promise對(duì)象，下面我們就通過使用常用的promise對(duì)象fetch獲取接口數(shù)據(jù)。
我們需要調(diào)用接口，獲取一個(gè)用戶列表數(shù)據(jù)
fetch("http://jsonplaceholder.typicode.com/users")
.then(function (response) { return response.json();
})
.then(function (res) { console.log(res); // [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
});復(fù)制代碼response是一個(gè)包含響應(yīng)結(jié)果的Response對(duì)象，它只是一個(gè)HTTP響應(yīng)，而不是真正的JSON。為了獲取JSON的內(nèi)容，需要使用json()方法獲取一個(gè)Promise對(duì)象，然后再使用then獲取JSON數(shù)據(jù)。
Promise提供了catch()方法，用來捕獲異步操作過程中遇到的錯(cuò)誤異常，使用場(chǎng)景如下
const CatchPromise = new Promise(function (resolve, reject) {
reject(new Error("error msg"));
});
CatchPromise.then().catch((e) => { console.error(e); //Error: error msg});復(fù)制代碼在Promise對(duì)象中，除了可以使用reject(new Error())的方式觸發(fā)異常，還可以使用throw new Error()的方式觸發(fā)異常，但不建議使用throw new Error()的方式，因?yàn)檫@種方式不會(huì)改變Promise的狀態(tài)。
Promise.all()用于處理多個(gè)異步任務(wù)，例如處理多張圖片上傳。Promise.all()接受一個(gè)promise對(duì)象數(shù)組作為參數(shù)，執(zhí)行完畢返回一個(gè)Promise對(duì)象。
Promise.all()的狀態(tài)變化：
傳入的promise對(duì)象數(shù)組全部變?yōu)閒ulfill狀態(tài)則返回成功，調(diào)用resolve()
傳入的promise對(duì)象數(shù)組有一個(gè)變?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.race()也是用于處理多個(gè)異步任務(wù)，與Promise.all()一樣，Promise.race()接受一個(gè)promise對(duì)象數(shù)組作為參數(shù)，執(zhí)行完畢返回一個(gè)Promise對(duì)象。
Promise.race()的狀態(tài)變化：
傳入的promise對(duì)象數(shù)組有一個(gè)變?yōu)閞esolve狀態(tài)則返回成功，調(diào)用resolve()
傳入的promise對(duì)象數(shù)組有一個(gè)變?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ù)是用來處理異步任務(wù)的函數(shù)，函數(shù)內(nèi)部包裹的就是異步任務(wù)的處理。Generator不同于普通函數(shù)，當(dāng)執(zhí)行到異步任務(wù)，可以暫停，直到異步任務(wù)執(zhí)行完畢再繼續(xù)往下執(zhí)行，類似同步的方法進(jìn)行異步編程。
Generator函數(shù)在使用上具體有以下特點(diǎn)
那么具體如何使用generator函數(shù)實(shí)現(xiàn)異步編程呢，在學(xué)習(xí)Promise的時(shí)候，我們實(shí)現(xiàn)了一個(gè)獲取一個(gè)用戶列表數(shù)據(jù)的案例，下面我們看看如何使用generator函數(shù)實(shí)現(xiàn)吧。
function* loadUsers() { const API = "http://jsonplaceholder.typicode.com/users"; console.log("等待數(shù)據(jù)請(qǐng)求"); yield fetch(API); //暫停，開始執(zhí)行異步任務(wù)
console.log("數(shù)據(jù)請(qǐng)求完成"); 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ù)請(qǐng)求完成 繼續(xù)其他邏輯操作。異步任務(wù)執(zhí)行完畢后調(diào)用next()，繼續(xù)執(zhí)行g(shù)enerator函數(shù)中后續(xù)代碼
});復(fù)制代碼Proxy翻譯過來叫代理，Proxy可以通過自定義行為來改變對(duì)象的基本操作，例如屬性賦值、查找、枚舉、函數(shù)調(diào)用等。
const p=new Proxy(target,handler); 參數(shù)說明： target：需要使用Proxy包裝的目標(biāo)對(duì)象（可以是任何類型的對(duì)象，包括原生數(shù)組，函數(shù)，甚至是另外一個(gè)代理） handler：代理目標(biāo)對(duì)象基本操作的對(duì)象 返回值： p：target被代理后不可以直接訪問，而只能訪問
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ù)制代碼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ù)制代碼//handler.apply()用于攔截函數(shù)的調(diào)用function sum(a, b) { console.log(a + b); return a + b;
}////對(duì)于sum方法，關(guān)注的是處理數(shù)據(jù)相加的邏輯//通過代理則可以處理在調(diào)用方法時(shí)候，對(duì)參數(shù)的校驗(yàn)，數(shù)據(jù)打點(diǎn)等const sumProxy = new Proxy(sum, { apply: function (target, thisArg, argumentsList) { console.log("調(diào)用了方法", "打點(diǎn)");
},
});
sumProxy(1, 2);復(fù)制代碼**
ES6在語(yǔ)言標(biāo)準(zhǔn)上，通過Module實(shí)現(xiàn)了模塊功能，現(xiàn)階段幾乎取代之前用來實(shí)現(xiàn)JavaScript模塊化的CommonJS和AMD規(guī)范，成為了瀏覽器環(huán)境和node環(huán)境通用的模塊化解決方案。
Module實(shí)現(xiàn)的模塊化屬于“編譯時(shí)加載”，即在編譯時(shí)就完成了模塊之間的加載，通過這種“編譯時(shí)加載”的方式，使得在不運(yùn)行代碼的情況下就可以通過詞法分析、語(yǔ)法分析等對(duì)程序代碼進(jìn)行掃描，以驗(yàn)證代碼的規(guī)范性、安全性和可維護(hù)性，讓靜態(tài)分析成為了可能。
Module實(shí)現(xiàn)的模塊化功能主要有兩個(gè)命令構(gòu)成：
一個(gè)模塊就是一個(gè)獨(dú)立的文件，該文件內(nèi)的所有變量，外部無(wú)法獲取，如果想要外部獲取模塊內(nèi)的某些變量，就必須使用export關(guān)鍵字導(dǎo)出變量，在需要引入該導(dǎo)出變量的的模塊中必須使用import關(guān)鍵字引入變量。
下面舉例說明export命令導(dǎo)出對(duì)外接口的幾種方式，在ExportDemo.js文件中，
//方法一export let a = 1;//方法二let b = 2;export { b };復(fù)制代碼//方法一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)出時(shí)重命名對(duì)外的接口名。
//方法一export class People {
say() { console.log("Hello Module");
}
}//方法二export { People };復(fù)制代碼使用export導(dǎo)出了模塊中的對(duì)外接口后，其他JS文件就可以通過import關(guān)鍵字加載這個(gè)模塊，使用如下。
//大括號(hào)中的變量名必須與被導(dǎo)出對(duì)外接口名一致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)入的時(shí)候重命名newTest();//導(dǎo)入People類let people = new People();
people.say();復(fù)制代碼
其他使用方式**
在日常開發(fā)過程中，Module模塊化還有下面幾種常見的使用方式。
//import { a, b, test, People } from "./ExportDemo";//上面的導(dǎo)入方式可以改寫成下面方式import * as ExportModule from "./ExportModule";//使用的使用，加上前綴即可ExportModule.test()復(fù)制代碼//導(dǎo)出const People = { say: function () { console.log("Hello Module");
},
};export default People;//導(dǎo)入import People from "./ExportModule";
People.say(); //Hello Module復(fù)制代碼//假如有a、b、c三個(gè)文件模塊，//c文件模塊如下 c.jslet people={name:"mango",age:27};let address="南京";export { people, address };//有下面幾種使用場(chǎng)景//一、在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的時(shí)候，并可以使用【默認(rèn)接口改為具名接口】export {default as NewPeople} from 'c'復(fù)制代碼感謝各位的閱讀！關(guān)于ECMAScript的新特性有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
