ES6的使用方法有哪些

這篇文章主要介紹“ES6的使用方法有哪些”，在日常操作中，相信很多人在ES6的使用方法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”ES6的使用方法有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一. 關于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的使用方法有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！