一文帶你熟練使用最常用的ES6

前端（vue）入門到精通課程：進入學習

一. 關於ES6

瞭解一門技術或者語言，最好的方法就是知道它能做些什麼

ES6 ， 它是由 ECMA 國際標準化組織，制定的一項指令碼語言的標準化規範

那麼它為什麼會出現呢？

每一次標準的誕生都意味著語言的完善，功能的加強；也就是說隨著時代的發展，JavaScript 語言的某些弊端已經不滿足企業和開發者的需求了。【相關推薦：】

比如：

• 變數提升特性增加了程式執行時的不可預測性
• 語法過於鬆散

而 ES6 新標準的目的是：

使得JS可以用來開發大型的Web應用，成為企業級開發語言

而企業級開發語言就是：適合模組化開發，擁有良好的依賴管理

那麼接下來，我們就來花少量時間，學習開發常用和麵試熱門的 ES6 吧 ?

二. ES6 模板字串

在沒有模板字串前，我們拼接字串變數一般會這樣

let a = '小明'

let b = '?'

let c = a + '愛吃' + b    // 小明愛吃?

而現在我們多了 ES6 提供的 模板字串的方法

let a = '小明'

let b = '?'

let c = ` ${a} 愛吃 ${b}`    // 小明愛吃?

三. ES6 判斷字串裡是否包含某些值

開發中最常用的，就不做過多說明了，把常用的方法通通列舉出來，同學們自取

1. indexOf()

方法可返回某個指定的字串值在字串中首次出現的位置

如果要檢索的字串值沒有出現，則該方法返回 -1

let str = '?????'

console.log( str.indexOf('?') != -1 );   // false

2. includes()

返回布林值，表示是否找到了引數字串

let str = '?????'

str.includes('?') ? console.log( true ) : console.log( false )    // true

3. startsWith()

用來判斷當前字串是否是以另外一個給定的值開頭的，根據判斷結果返回 true 或 false

引數：

str.startsWith( searchString , [position])

searchString : 要搜尋的值

position: 在 str 中搜尋 searchString 的開始位置，預設值為 0


例子：

let str = "前端,熊貓開發團隊"; 

console.log( str.startsWith("前端") );              // true 
console.log( str.startsWith("熊貓開發團隊") );      // false 
console.log( str.startsWith("熊貓開發團隊", 3) );   // true

4. endsWith()

用於判斷字串是否以給定的值結尾，根據判斷結果返回 true 或 false

let str = "熊貓開發團隊"; 

console.log( str.endsWith("隊") );              // true

四. ES6 箭頭函數

箭頭函數的出現簡化了函數的定義，讓程式碼更簡潔，省去關鍵字 function

但是也要注意箭頭函數的侷限性，以及箭頭函數中自身沒有 this，this 指向父級

弊端：

• 箭頭函數沒有原型 prototype，因此箭頭函數沒有 this 指向

• 箭頭函數不會建立自己的 this，如果存在外層第一個普通函數，在定義的時候會繼承它的 this

• 箭頭函數外層沒有函數，嚴格模式和非嚴格模式下它的 this 都會指向 window 全域性物件

基本寫法：

//沒有引數，寫空括號
let getTitle = () => {
    return '熊貓開發團隊'
};

//只有一個引數，可以省去引數括號
let getTitle = title => {
    return title
};

//如果箭頭函數有多個引數，將引數依次用逗號(,)分隔，包裹在括號中
let getTitle = (val1, val2, val3, val4) => {
    return [val1, val2, val3, val4];
}

五. ES6 物件表示式

如果物件屬性和值一樣，那麼複用時可以省略寫值

let a = '?';
let b = '?';

const obj1 = {
    a: a,
    b: b,
}

const obj2 = {
    a,
    b,
}

六. ES6 is 判斷兩個值是否相等

除了最常用的 === 和 == 用來比較兩個值的結果， ES6 又出了新的啦

Object.is(val1,val2)

console.log( Object.is(88, 88) )                // true
console.log( Object.is('熊貓', '?') )         // false

七. ES6 Object.assign() 複製物件

let obj = {};

Object.assign( obj, { name: '熊貓' } );

console.log( obj )    // { name: '熊貓' }

八. ES6 塊級作用域

首先要搞清楚什麼是作用域？

作用域就是一個變數可以使用的範圍

在沒有 ES6 的 let 之前 ，只有 var 的 全域性作用域 和 函數作用域

而塊級作用域的意思其實就是一個 {} (程式碼塊)，變數只在 {} 中有效

{
  let a = '?️?️';
  var b = '1️⃣2️⃣';
  
  console.log( a )   a // '?️?️'
}

console.log( a )   a // ReferenceError: a is not defined.
console.log( b )   b // '1️⃣2️⃣'

上面使用了 var 關鍵字在塊中定義了變數 b ，全域性都可以存取得到

但是在實際應用場景中，我們會擔心變數洩露，或者重名等問題，我們只想這個變數在當前塊中能存取，那麼就需要使用到 let 關鍵字

九. ES6 解構運運算元

比如定義一個陣列 arr ，在沒有 ES6 解構陣列前，我們可能會使用 arr[0] 的方式去存取陣列內部

而現在，我們有了更多的方式

let arr = ['?','?','?']

console.log( arr[0], arr[1], arr[2] );   // '?','?','?'


let [a, b, c] = arr;

console.log( a, b, c );    // '?','?','?'

可能有的同學會問了，既然 ES6 有解構陣列，那有解構物件嗎 ?

那你往下看

let obj = { a: '?', b: '?', c: '?' }

let { a: a,  b: b,  c: c } = obj;

console.log( a, b, c );  // '?', '?', '?'

十. ES6 展開操作符

直接看程式碼啦

let arr = ['☠️', '?', '?'];

console.log(...arr)    // ☠️ ? ?


let obj1 = { name:'熊貓' , job:'前端'}

let obj2 = { hobby:'掘金', ...obj1 }

console.log( ...obj2 )    // { hobby:'掘金', name:'熊貓' , job:'前端'}

（學習視訊分享：、）

以上就是一文帶你熟練使用最常用的ES6的詳細內容，更多請關注TW511.COM其它相關文章！