都2021年了，再不學(xué)ES6你就out了 —— 一文搞懂ES6

2021-6-3    前端達(dá)人

導(dǎo)語：ES6是什么？用來做什么？

  • ES6， 全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標(biāo)準(zhǔn)，2015.06 發(fā)版

  • 雖然15年就有正式版本了，但是國內(nèi)普遍商用是在2018年之后去了，甚至到現(xiàn)在有很多前端仍然搞不懂ES6（都2021年了，兄dei~）
    在這里插入圖片描述

  • ES6 的出現(xiàn)主要是為了解決 ES5 的先天不足，比如 JavaScript 里并沒有類的概念

  • 目前存在少數(shù)低版本瀏覽器的 JavaScript 是 ES5 版本，大多數(shù)的瀏覽器已經(jīng)支持 ES6

  • ES6提供了大量的語法糖，讓你寫代碼的時候簡直不要太爽！

  • 你必須要知道的是：現(xiàn)在各企業(yè)都普遍使用，不會ES6意味著你很難找到工作，上班了你連別人的代碼都看不懂
    在這里插入圖片描述

1. let 與 const

1.1 let 與 var

  • let：ES6新增，用于聲明變量，有塊級作用域
  • var：ES5中用于聲明變量的關(guān)鍵字，存在各種問題（例如：紅杏出墻~）
  • 如果你的代碼里還存在 var，那你的良心就大大的壞了！

var存在的問題： 

 // 1.聲明提升 // 此處會正常打印，但這是錯誤的（屬于先上車后買票了！） console.log(name); var name = "大帥比"; // 2. 變量覆蓋 var demo = "小明"; var demo = "小紅"; // 此處會打印小紅，這也是錯誤的（屬于套牌車，違法的啊，兄弟） // 同一個項目中，發(fā)生變量覆蓋可能會導(dǎo)致數(shù)據(jù)丟失以及各種不可預(yù)知的bug，原則上來說：變量不能重名 console.log(demo) // 3. 沒有塊級作用域 function fn2(){ for(var i = 0; i < 5; i++){ // do something } // 此處會正常打印出 i 的值，這是錯誤的 // i是定義在循環(huán)體之內(nèi)的，只能在循環(huán)體內(nèi)打印，當(dāng)前現(xiàn)象叫做紅杏出墻?。。?/span> console.log(i); } fn2(); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    •

let不會存在上述問題： 

 // 1. 不會存在聲明提前 // 此處會報錯（這里必須報錯，原則上來說不能先上車后買票） console.log(name); let name = "大帥比"; // 2. 不會有變量覆蓋 let demo = "小明"; let demo = "小紅"; // 此處會報錯（不能使用套牌車?。└嬖V你已經(jīng)定義了此變量。避免了項目中存在變量覆蓋的問題 console.log(demo) // 3. 有塊級作用域 function fn2(){ for(let i = 0; i < 5; i++){ // do something } // 此處會報錯，無法打印，防止紅杏出墻！??！ // i是定義在循環(huán)體之內(nèi)的，循環(huán)體外當(dāng)然無法打印  console.log(i); } fn2(); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    •

const

  • const 聲明一個只讀的常量，一旦聲明，常量的值就不能改變
  • 一般用于全局變量
  • 通常變量名全部大寫（請按照規(guī)則來，不要亂搞，容易出事情） 
const PI = "3.1415926"; 

    

    
  • 
        1
    
    •

2. 解構(gòu)賦值

  • 解構(gòu)賦值是對賦值運算符的擴展
  • 針對數(shù)組或者對象進(jìn)行模式匹配，然后對其中的變量進(jìn)行賦值
  • 代碼簡潔且易讀，語義更加清晰明了，方便了復(fù)雜對象中數(shù)據(jù)字段獲取（簡而言之：用起來很爽！）

在這里插入圖片描述

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; // 這里會取到小魚 // 解構(gòu)整個數(shù)組 let strArr = [...arr]; // 得到整個數(shù)組 console.log(strArr); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    •

2.2 用在對象上 

let obj = { className : "卡西諾", age: 18 } let {className} = obj; // 得到卡西諾 let {age} = obj; // 得到18 // 剩余運算符 let {a, b, ...demo} = {a: 1, b: 2, c: 3, d: 4}; // a = 1 // b = 2 // demo = {c: 3, d: 4} 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    •

3. 模板字符串

  • 模板字符串相當(dāng)于加強版的字符串，用反引號 ``
  • 除了作為普通字符串，還可以用來定義多行字符串，可以在字符串中加入變量和表達(dá)式

3.1 普通字符串 

// 普通字符串 let string = "hello"+"小兄弟"; // hello小兄弟 // 如果想要換行 let string = "hello'\n'小兄弟" // hello // 小兄弟 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

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); // 我真是帥的不行！ 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    •

4. ES6 函數(shù)（升級后更爽）

4.1 箭頭函數(shù)

  • 箭頭函數(shù)是一種更加簡潔的函數(shù)書寫方式
  • 箭頭函數(shù)本身沒有作用域（無this）
  • 箭頭函數(shù)的this指向上一層，上下文決定其this
  • 基本語法：參數(shù) => 函數(shù)體

a. 基本用法 

let fn = v => v;
//等價于
let fn = function(num){
 return num;
}
fn(100);  // 輸出100 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

b. 帶參數(shù)的寫法 

let fn2 = (num1,num2) => {
 let result = num1 + num2;
 return result;
}
fn2(3,2);  // 輸出5 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •

c. 箭頭函數(shù)中的this指向問題

  • 箭頭函數(shù)體中的 this 對象，是定義函數(shù)時的對象，而不是使用函數(shù)時的對象。在函數(shù)定義的時候就已經(jīng)決定了 
function fn3(){
  setTimeout(()=>{
    // 定義時，this 綁定的是 fn3 中的 this 對象
    console.log(this.a);
  },0)
}
var a = 10;
// fn3 的 this 對象為 {a: 10}，因為它指向全局: window.a
fn3.call({a: 18});  // 改變this指向，此時 a = 18 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    •

d. 箭頭函數(shù)適用的場景

  • 當(dāng)我們代碼里存在這樣的代碼：let self = this;
  • 需要新建變量去保存this的時候
  • 案例如下： 
let Person1 = {
    'age': 18,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    •

4.2 函數(shù)參數(shù)的擴展

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 （此值會覆蓋默認(rèn)參數(shù)10） 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •
  • 需要注意的是：只有在未傳遞參數(shù)，或者參數(shù)為 undefined 時，才會使用默認(rèn)參數(shù)，null 值被認(rèn)為是有效的值傳遞。

2. 不定參數(shù) 

// 此處的values是不定的，且無論你傳多少個 function f(...values){ console.log(values.length); } f(1,2); // 2 f(1,2,3,4); // 4 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

在這里插入圖片描述

5. Class類

  • class (類)作為對象的模板被引入，可以通過 class 關(guān)鍵字定義類
  • class 的本質(zhì)是 function，同樣可以看成一個塊
  • 可以看作一個語法糖，讓對象原型的寫法更加清晰
  • 更加標(biāo)準(zhǔn)的面向?qū)ο缶幊?/span>語法

5.1 類的定義 

// 匿名類 let Demo = class { constructor(a) { this.a = a; } } // 命名類 let Demo = class Demo { constructor(a) { this.a = a; } } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    •

5.2 類的聲明 

class Demo { constructor(a) { this.a = a; } } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •
  • 請注意，類不能重復(fù)聲明
  • 類定義不會被提升，必須在訪問前對類進(jìn)行定義，否則就會報錯。
  • 類中方法不需要 function 關(guān)鍵字。
  • 方法間不能加分號

5.3 類的主體

  • 公共屬性（依然可以定義在原型上） 
class Demo{} Demo.prototype.a = 2; 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    •
  • 實例屬性 
class Demo { a = 2; constructor () { console.log(this.a); } } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •
  • 方法：constructor 
class Demo{ constructor(){ console.log('我是構(gòu)造器'); } } new Demo(); // 我是構(gòu)造器 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

如果不寫constructor，也會默認(rèn)添加

5.4 實例化對象 

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 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    •

6. Map()

6.1 Maps 和 Objects 的區(qū)別

  • 一個 Object 的鍵只能是字符串或者 Symbols，但一個 Map 的鍵可以是任意值
  • Map 中的鍵值是有序的（FIFO 原則），而添加到對象中的鍵則不是
  • Map 的鍵值對個數(shù)可以從 size 屬性獲取，而 Object 的鍵值對個數(shù)只能手動計算
    在這里插入圖片描述

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是對象 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, 因為 keyObj !== {} // 3. key也可以是函數(shù)或者NaN  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    •

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 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    •

6.4 Map 與 Array的轉(zhuǎn)換 

letkvArray = [["key1", "value1"], ["key2", "value2"]]; // Map 構(gòu)造函數(shù)可以將一個 二維 鍵值對數(shù)組轉(zhuǎn)換成一個 Map 對象 let myMap = new Map(kvArray); // 使用 Array.from 函數(shù)可以將一個 Map 對象轉(zhuǎn)換成一個二維鍵值對數(shù)組 let outArray = Array.from(myMap); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

6.5 關(guān)于map的重點面試題

  • 請談一下 Map和ForEach 的區(qū)別（問到map，必定問到此題）

詳細(xì)解析：

  1. forEach()方法不會返回執(zhí)行結(jié)果，而是undefined
  2. map()方法會得到一個新的數(shù)組并返回
  3. 同樣的一組數(shù)組，map()的執(zhí)行速度優(yōu)于 forEach()（map() 底層做了深度優(yōu)化）

性質(zhì)決定了兩者應(yīng)用場景的不同

  • forEach() 適合于你并不打算改變數(shù)據(jù)的時候，而只是想用數(shù)據(jù)做一些事情（比如存入數(shù)據(jù)庫） 
let arr = ['a', 'b', 'c', 'd']; arr.forEach((val) => { console.log(val); // 依次打印出 a,b,c,d }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •
  • map() 適用于你要改變數(shù)據(jù)值的時候，它更快，而且返回一個新的數(shù)組

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è)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png


部分借鑒自：csdn  

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


日歷

鏈接

個人資料

存檔