這篇文章帶大家聊聊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 的全域作用域和函數作用域而區塊級作用域的意思其實就是一個{}
(程式碼區塊)，變數只在{} 中有效<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>上面使用了
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中文網其他相關文章！
