模板字符串

這是我非常喜歡的ES6的特點(diǎn)之一，非常直觀的反應(yīng)出變量和字符串之間的關(guān)系，在ES5中，如果我們想在字符串中添加變量，需要用如下寫法：

animate(box, 'translate(-' + itemWidth * num + 'px,0)', 1000, function () {
  box.style.transitionDuration = '';
  box.style.transform = 'translate(-800px,0)';
  flag = true;
});

現(xiàn)在用ES6的模板字符串，可以直接把字符串和變量相結(jié)合，更加易懂。

animate(box, `translate(-${itemWidth*num}px,0)`, 1000, function() {
  box.style.transitionDuration = '';
  box.style.transform = `translate(-${itemWidth*(item.length-2)}px,0)`;
  flag = true;
});

是不是非常直觀方便，從上面的兩個(gè)簡(jiǎn)單示例中可以看出，在ES6中，字符串用反引號(hào)（``）標(biāo)識(shí)，這一點(diǎn)需要知道。

還有一個(gè)特點(diǎn)，模板字符串可以輸出折行的字符串，這在ES5傳統(tǒng)字符串中是無法做到的，必須借助（\n），且不能在書寫時(shí)候?qū)懭牖剀?，但是在ES6的字符串模板中，可以直接寫入回車，空格，然后在字符串輸出時(shí)候直接輸出，非常方便。

let myString=`abc
de
ffff 
fas`;
console.log(myString);
/*輸出abc
de
ffff 
fas*/

對(duì)函數(shù)的擴(kuò)展

1.給函數(shù)設(shè)置默認(rèn)值

在對(duì)函數(shù)的擴(kuò)展中，添加了一項(xiàng)給函數(shù)設(shè)置默認(rèn)值的功能，這個(gè)功能可以說是非常贊的。是否記得我們?cè)贓S5中是怎么給函數(shù)設(shè)置默認(rèn)值？

function test(a,b,c){
  var a=a||10;
  var a=b||15;
  var c=c||20;
  console.log(a+b+c);
}

這里我們?cè)O(shè)置默認(rèn)值，可以達(dá)到自己的預(yù)期效果，直到有一天，我們把a(bǔ)=0傳入，這時(shí)候，我們這么寫就不對(duì)了，對(duì)于程序來說，0就是false，所以a會(huì)取默認(rèn)值10，從而達(dá)不到我們預(yù)期的效果。但是ES6為我們提供非常好的設(shè)置默認(rèn)值的方式。上面的代碼可以改寫成下面的這樣：

function test(a=10,b=15,c=20){
  console.log(a+b+c);
}

2.箭頭函數(shù)

了解Coffescript的同學(xué)應(yīng)該清楚，Cofficescript的強(qiáng)大之處在于它的無處不在的箭頭函數(shù)，寫起來非常爽，現(xiàn)在，ES6正式引入箭頭函數(shù)，讓我們的程序可以得到簡(jiǎn)化，例如：

//ES5的寫法
var test = function (a,b){
  return a+b;
}
//ES6的箭頭函數(shù)
var test2 = test(a,b)=>a+b;

在寫輪播時(shí)候，需要鼠標(biāo)移動(dòng)到下面的這個(gè)小圓點(diǎn)在小圓點(diǎn)類數(shù)組對(duì)象中是第幾個(gè)，從而才能讓圖運(yùn)動(dòng)到正確位置，在ES5的時(shí)候，我們需要給當(dāng)前這個(gè)對(duì)象添加屬性，寫起來比較繁瑣，寫法如下：

var liList = document.querySelectorAll('li');
for(var i=0;i<liList.length;i++){
  liList[i].index=i;
  liList[i].addEventListener('mouseenter',function(){
    console.log(this.index);
  },false);
}

這個(gè)this.index屬性就是當(dāng)前的鼠標(biāo)放上去的元素的索引，然后根據(jù)這個(gè)索引去得到當(dāng)前的元素。但是在ES6中，我們可以直接使用箭頭函數(shù)以及在數(shù)組中新引入的findIndex來找到當(dāng)前的活動(dòng)元素的索引，代碼如下：

let liList = document.querySelectorAll('li');
let ArrayliList=Array.form(liList);
for(var i=0;i<liList.length;i++){
  liList[i].index=i;
  liList[i].addEventListener('mouseenter',function(){
    let thisIndex = ArrayliList.findIndex((n) => n == this);
  },false);
}

以上代碼得到的thisIndex就是當(dāng)前鼠標(biāo)放上去的索引，這里我對(duì)箭頭函數(shù)中n這個(gè)參數(shù)的理解是，傳入?yún)?shù)n后會(huì)遍歷數(shù)組中的對(duì)象，從而找到與this相等的那個(gè)對(duì)象，然后返回它的索引，這里用到Array.from()，這是一個(gè)ES6中數(shù)組中新增的方法，可以將類數(shù)組轉(zhuǎn)換成數(shù)組。

ES6的for…of循環(huán)

上面的JS代碼循環(huán)用了for，其實(shí)可以用ES6中的for…of循環(huán)去代替，這樣寫法更加簡(jiǎn)潔。是否記得JS中的for…in循環(huán)，這個(gè)循環(huán)可以循環(huán)鍵值對(duì)中的鍵，但是無法循環(huán)值，而for…of的出現(xiàn)正是為了彌補(bǔ)它的不足，for…of循環(huán)可以使用的范圍包括數(shù)組、Set和Map結(jié)構(gòu)、某些類似數(shù)組的對(duì)象（比如arguments對(duì)象、DOM NodeList對(duì)象）、Generator對(duì)象，以及字符串。所以我們可以利用該循環(huán)替代for循環(huán)，但是這里要注意一點(diǎn)如果直接用for…of循環(huán)，在chrome49下會(huì)報(bào)錯(cuò)，官方已證實(shí)這是chrome49的BUG，將會(huì)在chrome51中修復(fù)，所以我在寫的時(shí)候，利用Array.from()將NodeList對(duì)象轉(zhuǎn)換為數(shù)組，這樣可以放心操作，代碼如下：

let liList = document.querySelectorAll('li');
let ArrayliList=Array.form(liList);
for(let li of liList){
  li.addEventListener('mouseenter',function(){
    let thisIndex = ArrayliList.findIndex((n) => n == this);
  },false);
}

總結(jié)

以上就是本文的全部?jī)?nèi)容，是不是非常簡(jiǎn)潔，通過這篇文章感覺僅僅只是這些就已經(jīng)讓我感受到ES6的魅力了，希望對(duì)大家學(xué)習(xí)ES6能有所幫助。

最新評(píng)論