這篇文章帶大家聊聊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()
方法可傳回某個指定的字串值在字串中首次出現的位置如果要檢索的字串值沒有出現，則該方法傳回-1let str = '?????'
console.log( str.indexOf('?') != -1 ); // false2. 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 或falselet str = "熊猫开发团队";
console.log( str.endsWith("队") ); // true四.ES6箭頭函數
箭頭函數的出現簡化了函數的定義，讓程式碼更簡潔，省去關鍵字function##但也要注意箭頭函數的局限性，以及箭頭函數中本身沒有
this，this 指向父級弊端：
##箭頭函數沒有原型this 指向
箭頭函數不會建立自己的this
#箭頭函數外層沒有函數，嚴格模式和非嚴格模式下它的window 全域物件
基本寫法：//没有参数，写空括号
let getTitle = () => {
return '熊猫开发团队'
};
//只有一个参数，可以省去参数括号
let getTitle = title => {
return title
};
//如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中
let getTitle = (val1, val2, val3, val4) => {
return [val1, val2, val3, val4];
}如果物件屬性和值一樣，那麼複用時可以省略寫值
let a = '?';
let b = '?';
const obj1 = {
a: a,
b: b,
}
const obj2 = {
a,
b,
}除了最常用的===
和== 用來比較兩個值的結果， ES6 又出了新的啦
Object.is(val1,val2)
console.log( Object.is(88, 88) ) // true
console.log( Object.is('熊猫', '?') ) // falselet obj = {};
Object.assign( obj, { name: '熊猫' } );
console.log( obj ) // { name: '熊猫' }
首先要搞清楚什麼是作用域？
作用域就是一個變數可以使用的範圍
在沒有關鍵字在區塊中定義了變數b ，全域都可以存取得到ES6
的let 之前，只有var 的全域作用域和函數作用域而區塊級作用域的意思其實就是一個{}
(程式碼區塊)，變數只在{}
var中有效<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登入後複製</div></div>上面使用了
但是在實際應用場景中，我們會擔心變數洩露，或重名等問題，我們只想這個變數在當前區塊中能訪問，那麼就需要使用到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:'前端'}以上是一文帶你熟練使用最常用的ES6的詳細內容。更多資訊請關注PHP中文網其他相關文章！
