ES6新特性-----變量和字符串

1、變量

1. LET

　　咱們都習慣用var 來聲明變量，如今還能夠用let來聲明變量，二者的主要區別是做用域：var聲明的變量做用域爲包圍它的函數，而let聲明的變量做用域僅在它所在的塊中。（在ES5中是沒有塊的概念的）。

if(true){
   let a=1;
}
console.log(a);//undifined

　　這樣使代碼更加乾淨，減小滯留的變量，再如咱們常常用的數組遍歷：

for(let i=0;i<lists.length;i++){
   //do somthing with lists[i]
}
console.log(i)l//undifined

　　一般狀況下，咱們在同一做用域裏使用變量J來完成另外一個遍歷，可是如今有了let，能夠安全的再一次聲明i變量，由於它只在被聲明的塊中有效。

2.CONST

　　const也是用於聲明塊做用域變量的方法，使用const能夠聲明一個值得只讀引用，必須直接給一個變量賦值，若是嘗試該變量或者沒有當即給變量賦值，都將報錯：

const MY_CONSTENT=1;
MY_CONSTENT=2;//error
const MY_CONSTENT;//error

　　注意對象的屬性或數組成員仍是能夠改變的

const MY_OBJECT={some:1};
MY_OBJECT.some='body';

3.箭頭函數

　　箭頭函數使得JS代碼更加簡潔。下面將箭頭函數和ES5版本的函數寫法：

//箭頭函數
let books=[{"title":"X","price":20},{"title":"Y","price":40}];
let titles=books.map(item=>item.title);

//ES5函數
var titles=books.map(function(item){
    return item.title;
});

　　觀察箭頭函數的語法，會發現其中並無出現function關鍵字，只保留零或多個參數、「胖箭頭」（「=>」）和函數表達式，return聲明被隱式加入。帶有零或者多個參數時必須使用括號：

//no arguments
books.map(()=>1);//[1,1]

//Mutiple arguments
[1,2].map((n,index)=>n*index);//[0,2]

　　若是須要寫更多的邏輯或更多的空格，能夠把函數表達式放在（{}）塊中：

let result=[1,2,3,4,5].map(n=>{
   n=n%3;
   retutn n;
})

　　箭頭函數不單是爲了輸入更少的字符，它們的表現也和通常的函數不一樣。它的繼承了當前上下文的this和arguments，這就意味着你能夠避免寫var that=this這樣的代碼，也不須要把函數綁定到正確的上下文了：

//ES6

let books={
   title‘X’,
   sellers:['A','B'],
   printSellers(){
       this.sellers.forEach(seller=>console.log(seller+'seller'+this.title))
   }
};

//ES5 
var books={
   title='X',
   sellers:['A','B'],
   printSellers:function(){
      var that=this;
      this.sellers.forEach(function(seller){
         console.log(seller+'seller'+that.title)
     })
   }
};

 

2、字符串

1.方法

　　字符串String原型中增添了幾個新方法，用於簡化須要用indexOf()方法來解決的問題的複雜度，並達到一樣的效果：

‘my string’.startsWith('my');//true
‘my string’.endsWith('my');//false
‘my string’.includes('str');//true

　　添加了另外一個方法，用於建立重複字符串：

‘my’.repeat(3);//'my my my'

　　

2. 模板字符串　　

　　模板字符串提供提供一個簡潔的方式來實現字符串插值，它基於美圓符號和花括號${...},模板字符串置於引號之中：

//ES6
let name='json',
    apples=5,
    pears=7,
    bananas=function(){return 3};
console.log('this is${name}');

console.log('he carries ${apples} apples,${pears} pears,and ${bananas()} bananas');

//ES5

console.log('he carries'+ ${apples}+' apples,'+${pears}+' pears,and '+${bananas()}+' bananas');

　　以上形式對比ES5僅僅是便於字符串的拼接，實際上，模板字符串還能夠用於多行字符串（空格也是字符串的一部分）：

let x='1...
    2...
    3 lines long!';

//ES5
var x='1...'+
    '2...'+
    '3 lines long!';

var x="1...2...3 lines long!';