本文實例講述了ES6新特性之變量和字符串用法。分享給大家供大家參考,具體如下:
一、變量
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) }) } };
二、字符串
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!';
希望本文所述對大家ECMAScript程序設計有所幫助。