ES6的使用方法有哪些

這篇文章主要介紹“ES6的使用方法有哪些”，在日常操作中，相信很多人在ES6的使用方法有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”ES6的使用方法有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

一. 關(guān)于ES6

了解一門技術(shù)或者語(yǔ)言，最好的方法就是知道它能做些什么

ES6 ， 它是由 ECMA 國(guó)際標(biāo)準(zhǔn)化組織，制定的一項(xiàng)腳本語(yǔ)言的標(biāo)準(zhǔn)化規(guī)范

那么它為什么會(huì)出現(xiàn)呢？

每一次標(biāo)準(zhǔn)的誕生都意味著語(yǔ)言的完善，功能的加強(qiáng)；也就是說(shuō)隨著時(shí)代的發(fā)展，JavaScript 語(yǔ)言的某些弊端已經(jīng)不滿足企業(yè)和開發(fā)者的需求了。

比如：

• 變量提升特性增加了程序運(yùn)行時(shí)的不可預(yù)測(cè)性

• 語(yǔ)法過(guò)于松散

而 ES6 新標(biāo)準(zhǔn)的目的是：

使得JS可以用來(lái)開發(fā)大型的Web應(yīng)用，成為企業(yè)級(jí)開發(fā)語(yǔ)言

而企業(yè)級(jí)開發(fā)語(yǔ)言就是：適合模塊化開發(fā)，擁有良好的依賴管理

那么接下來(lái)，我們就來(lái)花少量時(shí)間，學(xué)習(xí)開發(fā)常用和面試熱門的 ES6 吧 ?

二. ES6 模板字符串

在沒(méi)有模板字符串前，我們拼接字符串變量一般會(huì)這樣

let a = '小明'

let b = '?'

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

而現(xiàn)在我們多了 ES6 提供的 模板字符串的方法

let a = '小明'

let b = '?'

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

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

開發(fā)中最常用的，就不做過(guò)多說(shuō)明了，把常用的方法通通列舉出來(lái)，同學(xué)們自取

1. indexOf()

方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置

如果要檢索的字符串值沒(méi)有出現(xiàn)，則該方法返回 -1

let str = '?????'

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

2. includes()

返回布爾值，表示是否找到了參數(shù)字符串

let str = '?????'

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

3. startsWith()

用來(lái)判斷當(dāng)前字符串是否是以另外一個(gè)給定的值開頭的，根據(jù)判斷結(jié)果返回 true 或 false

參數(shù)：

str.startsWith( searchString , [position])

searchString : 要搜索的值

position: 在 str 中搜索 searchString 的開始位置，默認(rèn)值為 0


例子：

let str = "前端,熊貓開發(fā)團(tuán)隊(duì)"; 

console.log( str.startsWith("前端") );              // true 
console.log( str.startsWith("熊貓開發(fā)團(tuán)隊(duì)") );      // false 
console.log( str.startsWith("熊貓開發(fā)團(tuán)隊(duì)", 3) );   // true

4. endsWith()

用于判斷字符串是否以給定的值結(jié)尾，根據(jù)判斷結(jié)果返回 true 或 false

let str = "熊貓開發(fā)團(tuán)隊(duì)"; 

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

四. ES6 箭頭函數(shù)

箭頭函數(shù)的出現(xiàn)簡(jiǎn)化了函數(shù)的定義，讓代碼更簡(jiǎn)潔，省去關(guān)鍵字 function

但是也要注意箭頭函數(shù)的局限性，以及箭頭函數(shù)中自身沒(méi)有 this，this 指向父級(jí)

弊端：

• 箭頭函數(shù)沒(méi)有原型 prototype，因此箭頭函數(shù)沒(méi)有 this 指向

• 箭頭函數(shù)不會(huì)創(chuàng)建自己的 this，如果存在外層第一個(gè)普通函數(shù)，在定義的時(shí)候會(huì)繼承它的 this

• 箭頭函數(shù)外層沒(méi)有函數(shù)，嚴(yán)格模式和非嚴(yán)格模式下它的 this 都會(huì)指向 window 全局對(duì)象

基本寫法：

//沒(méi)有參數(shù)，寫空括號(hào)
let getTitle = () => {
    return '熊貓開發(fā)團(tuán)隊(duì)'
};

//只有一個(gè)參數(shù)，可以省去參數(shù)括號(hào)
let getTitle = title => {
    return title
};

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

五. ES6 對(duì)象表達(dá)式

如果對(duì)象屬性和值一樣，那么復(fù)用時(shí)可以省略寫值

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

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

const obj2 = {
    a,
    b,
}

六. ES6 is 判斷兩個(gè)值是否相等

除了最常用的 === 和 == 用來(lái)比較兩個(gè)值的結(jié)果， ES6 又出了新的啦

Object.is(val1,val2)

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

七. ES6 Object.assign() 復(fù)制對(duì)象

let obj = {};

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

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

八. ES6 塊級(jí)作用域

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

作用域就是一個(gè)變量可以使用的范圍

在沒(méi)有 ES6 的 let 之前 ，只有 var 的 全局作用域 和 函數(shù)作用域

而塊級(jí)作用域的意思其實(shí)就是一個(gè) {} (代碼塊)，變量只在 {} 中有效

{
  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  關(guān)鍵字在塊中定義了變量 b ，全局都可以訪問(wèn)得到

但是在實(shí)際應(yīng)用場(chǎng)景中，我們會(huì)擔(dān)心變量泄露，或者重名等問(wèn)題，我們只想這個(gè)變量在當(dāng)前塊中能訪問(wèn)，那么就需要使用到 let 關(guān)鍵字

九. ES6 解構(gòu)運(yùn)算符

比如定義一個(gè)數(shù)組 arr ，在沒(méi)有 ES6 解構(gòu)數(shù)組前，我們可能會(huì)使用 arr[0] 的方式去訪問(wèn)數(shù)組內(nèi)部

而現(xiàn)在，我們有了更多的方式

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

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


let [a, b, c] = arr;

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

可能有的同學(xué)會(huì)問(wèn)了，既然 ES6 有解構(gòu)數(shù)組，那有解構(gòu)對(duì)象嗎 ?

那你往下看

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

到此，關(guān)于“ES6的使用方法有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！