2021-6-3 前端達(dá)人
ES6, 全稱 ECMAScript 6.0 ,是 JavaScript 的下一個(gè)版本標(biāo)準(zhǔn),2015.06 發(fā)版
雖然15年就有正式版本了,但是國(guó)內(nèi)普遍商用是在2018年之后去了,甚至到現(xiàn)在有很多前端仍然搞不懂ES6(都2021年了,兄dei~)
ES6 的出現(xiàn)主要是為了解決 ES5 的先天不足,比如 JavaScript 里并沒有類的概念
目前存在少數(shù)低版本瀏覽器的 JavaScript 是 ES5 版本,大多數(shù)的瀏覽器已經(jīng)支持 ES6
ES6提供了大量的語法糖,讓你寫代碼的時(shí)候簡(jiǎn)直不要太爽!
你必須要知道的是:現(xiàn)在各企業(yè)都普遍使用,不會(huì)ES6意味著你很難找到工作,上班了你連別人的代碼都看不懂
1.1 let 與 var
var存在的問題:
// 1.聲明提升 // 此處會(huì)正常打印,但這是錯(cuò)誤的(屬于先上車后買票了!) console.log(name); var name = "大帥比"; // 2. 變量覆蓋 var demo = "小明"; var demo = "小紅"; // 此處會(huì)打印小紅,這也是錯(cuò)誤的(屬于套牌車,違法的啊,兄弟) // 同一個(gè)項(xiàng)目中,發(fā)生變量覆蓋可能會(huì)導(dǎo)致數(shù)據(jù)丟失以及各種不可預(yù)知的bug,原則上來說:變量不能重名 console.log(demo) // 3. 沒有塊級(jí)作用域 function fn2(){ for(var i = 0; i < 5; i++){ // do something } // 此處會(huì)正常打印出 i 的值,這是錯(cuò)誤的 // i是定義在循環(huán)體之內(nèi)的,只能在循環(huán)體內(nèi)打印,當(dāng)前現(xiàn)象叫做紅杏出墻?。?! console.log(i); } fn2();
let不會(huì)存在上述問題:
// 1. 不會(huì)存在聲明提前 // 此處會(huì)報(bào)錯(cuò)(這里必須報(bào)錯(cuò),原則上來說不能先上車后買票) console.log(name); let name = "大帥比"; // 2. 不會(huì)有變量覆蓋 let demo = "小明"; let demo = "小紅"; // 此處會(huì)報(bào)錯(cuò)(不能使用套牌車?。└嬖V你已經(jīng)定義了此變量。避免了項(xiàng)目中存在變量覆蓋的問題 console.log(demo) // 3. 有塊級(jí)作用域 function fn2(){ for(let i = 0; i < 5; i++){ // do something } // 此處會(huì)報(bào)錯(cuò),無法打印,防止紅杏出墻?。?! // i是定義在循環(huán)體之內(nèi)的,循環(huán)體外當(dāng)然無法打印 console.log(i); } fn2();
const
const PI = "3.1415926";
2.1 用在數(shù)組上
let [a, b, c] = [1, 2, 3]; // a = 1,b = 2,c = 3 相當(dāng)于重新定義了變量a,b,c,取值也更加方便 // , = 占位符 let arr = ["小明", "小花", "小魚", "小豬"]; let [,,one] = arr; // 這里會(huì)取到小魚 // 解構(gòu)整個(gè)數(shù)組 let strArr = [...arr]; // 得到整個(gè)數(shù)組 console.log(strArr);
2.2 用在對(duì)象上
let obj = { className : "卡西諾", age: 18 } let {className} = obj; // 得到卡西諾 let {age} = obj; // 得到18 // 剩余運(yùn)算符 let {a, b, ...demo} = {a: 1, b: 2, c: 3, d: 4}; // a = 1 // b = 2 // demo = {c: 3, d: 4}
3.1 普通字符串
// 普通字符串 let string = "hello"+"小兄弟"; // hello小兄弟 // 如果想要換行 let string = "hello'\n'小兄弟" // hello // 小兄弟
3.2 模板字符串
let str1 = "穿堂而過的"; let str2 = "風(fēng)"; // 模板字符串 let newStr = `我是${str1}${str2}`; // 我是穿堂而過的風(fēng) console.log(newStr) // 字符串中調(diào)用方法 function fn3(){ return "帥的不行!"; } let string2= `我真是${fn3 ()}`; console.log(string2); // 我真是帥的不行!
4.1 箭頭函數(shù)
a. 基本用法
let fn = v => v;
//等價(jià)于
let fn = function(num){
return num;
}
fn(100); // 輸出100
b. 帶參數(shù)的寫法
let fn2 = (num1,num2) => {
let result = num1 + num2;
return result;
}
fn2(3,2); // 輸出5
c. 箭頭函數(shù)中的this指向問題
function fn3(){
setTimeout(()=>{
// 定義時(shí),this 綁定的是 fn3 中的 this 對(duì)象
console.log(this.a);
},0)
}
var a = 10;
// fn3 的 this 對(duì)象為 {a: 10},因?yàn)樗赶蛉? window.a
fn3.call({a: 18}); // 改變this指向,此時(shí) a = 18
d. 箭頭函數(shù)適用的場(chǎng)景
let Person1 = {
'age': 18,
'sayHello': function () {
setTimeout(()=>{
console.log(this.age);
});
}
};
var age = 20;
Person1.sayHello(); // 18
4.2 函數(shù)參數(shù)的擴(kuò)展
1. 默認(rèn)參數(shù)
// num為默認(rèn)參數(shù),如果不傳,則默認(rèn)為10 function fn(type, num=10){ console.log(type, num); } fn(1); // 打印 1,10 fn(1,2); // 打印 1,2 (此值會(huì)覆蓋默認(rèn)參數(shù)10)
2. 不定參數(shù)
// 此處的values是不定的,且無論你傳多少個(gè) function f(...values){ console.log(values.length); } f(1,2); // 2 f(1,2,3,4); // 4
5.1 類的定義
// 匿名類 let Demo = class { constructor(a) { this.a = a; } } // 命名類 let Demo = class Demo { constructor(a) { this.a = a; } }
5.2 類的聲明
class Demo { constructor(a) { this.a = a; } }
5.3 類的主體
class Demo{} Demo.prototype.a = 2;
class Demo { a = 2; constructor () { console.log(this.a); } }
class Demo{ constructor(){ console.log('我是構(gòu)造器'); } } new Demo(); // 我是構(gòu)造器
如果不寫constructor,也會(huì)默認(rèn)添加
5.4 實(shí)例化對(duì)象
class Demo { constructor(a, b) { this.a = a; this.b = b; console.log('Demo'); } sum() { return this.a + this.b; } } let demo1 = new Demo(2, 1); let demo2 = new Demo(3, 1); // 兩者原型鏈?zhǔn)窍嗟鹊?/span> console.log(demo1._proto_ == demo2._proto_); // true demo1._proto_.sub = function() { return this.a - this.b; } console.log(demo1.sub()); // 1 console.log(demo2.sub()); // 2
6.1 Maps 和 Objects 的區(qū)別
6.2 Map中的key
// 1. key是字符串 let myMap = new Map(); let keyString = "string"; myMap.set(keyString, "和鍵'string'關(guān)聯(lián)的值"); // keyString === 'string' myMap.get(keyString); // "和鍵'string'關(guān)聯(lián)的值" myMap.get("string"); // "和鍵'string'關(guān)聯(lián)的值" // 2.key是對(duì)象 let myMap = new Map(); let keyObj = {}, myMap.set(keyObj, "和鍵 keyObj 關(guān)聯(lián)的值"); myMap.get(keyObj); // "和鍵 keyObj 關(guān)聯(lián)的值" myMap.get({}); // undefined, 因?yàn)?keyObj !== {} // 3. key也可以是函數(shù)或者NaN
6.3 Map 的迭代
// 1.使用 forEach let myMap = new Map(); myMap.set(0, "zero"); myMap.set(1, "one"); // 0 = zero , 1 = one myMap.forEach(function(value, key) { console.log(key + " = " + value); }, myMap) // 2. 也可以使用 for...of
6.4 Map 與 Array的轉(zhuǎn)換
letkvArray = [["key1", "value1"], ["key2", "value2"]]; // Map 構(gòu)造函數(shù)可以將一個(gè) 二維 鍵值對(duì)數(shù)組轉(zhuǎn)換成一個(gè) Map 對(duì)象 let myMap = new Map(kvArray); // 使用 Array.from 函數(shù)可以將一個(gè) Map 對(duì)象轉(zhuǎn)換成一個(gè)二維鍵值對(duì)數(shù)組 let outArray = Array.from(myMap);
6.5 關(guān)于map的重點(diǎn)面試題
詳細(xì)解析:
性質(zhì)決定了兩者應(yīng)用場(chǎng)景的不同
let arr = ['a', 'b', 'c', 'd']; arr.forEach((val) => { console.log(val); // 依次打印出 a,b,c,d });
let arr = [1, 2, 3, 4, 5]; let arr2 = arr.map(num => num * 2).filter(num => num > 5); // arr2 = [6, 8, 10]
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。
部分借鑒自:csdn
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn