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

這篇文章帶大家聊聊ES6，帶你30分鐘熟練使用最常用的ES6，還不學是等著被捲死？

一. 關於ES6

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

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

##那麼它為什麼會出現呢？

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

javascript學習教學】

例如：

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

而

ES6 新標準的目的是：

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

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

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

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 的全域作用域和函數作用域而區塊級作用域的意思其實就是一個{}

(程式碼區塊)，變數只在

{} 中有效<pre class="brush:php;toolbar:false">{   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️⃣'</pre>上面使用了

var

 關鍵字在區塊中定義了變數b ，全域都可以存取得到

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

關鍵字

1 . 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:'前端'}

（学习视频分享：web前端开发、编程基础视频）

以上是一文帶你熟練使用最常用的ES6的詳細內容。更多資訊請關注PHP中文網其他相關文章！