ES6新特性之變量和字符串用法示例
本文實(shí)例講述了ES6新特性之變量和字符串用法。分享給大家供大家參考,具體如下:
一、變量
1. LET
我們都習(xí)慣用var 來(lái)聲明變量,現(xiàn)在還可以用let來(lái)聲明變量,兩者的主要區(qū)別是作用域:var聲明的變量作用域?yàn)榘鼑暮瘮?shù),而let聲明的變量作用域僅在它所在的塊中。(在ES5中是沒(méi)有塊的概念的)。
if(true){ let a=1; } console.log(a);//undifined
這樣使代碼更加干凈,減少滯留的變量,再如我們經(jīng)常用的數(shù)組遍歷:
for(let i=0;i<lists.length;i++){ //do somthing with lists[i] } console.log(i)l//undifined
通常情況下,我們?cè)谕蛔饔糜蚶锸褂米兞縅來(lái)完成另一個(gè)遍歷,但是現(xiàn)在有了let,可以安全的再一次聲明i變量,因?yàn)樗辉诒宦暶鞯膲K中有效。
2.CONST
const也是用于聲明塊作用域變量的方法,使用const可以聲明一個(gè)值得只讀引用,必須直接給一個(gè)變量賦值,如果嘗試該變量或者沒(méi)有立即給變量賦值,都將報(bào)錯(cuò):
const MY_CONSTENT=1; MY_CONSTENT=2;//error const MY_CONSTENT;//error
注意對(duì)象的屬性或數(shù)組成員還是可以改變的
const MY_OBJECT={some:1}; MY_OBJECT.some='body';
3.箭頭函數(shù)
箭頭函數(shù)使得JS代碼更加簡(jiǎn)潔。下面將箭頭函數(shù)和ES5版本的函數(shù)寫(xiě)法:
//箭頭函數(shù) let books=[{"title":"X","price":20},{"title":"Y","price":40}]; let titles=books.map(item=>item.title); //ES5函數(shù) var titles=books.map(function(item){ return item.title; });
觀察箭頭函數(shù)的語(yǔ)法,會(huì)發(fā)現(xiàn)其中并沒(méi)有出現(xiàn)function關(guān)鍵字,只保留零或多個(gè)參數(shù)、“胖箭頭”(“=>”)和函數(shù)表達(dá)式,return聲明被隱式加入。帶有零或者多個(gè)參數(shù)時(shí)必須使用括號(hào):
//no arguments books.map(()=>1);//[1,1] //Mutiple arguments [1,2].map((n,index)=>n*index);//[0,2]
如果需要寫(xiě)更多的邏輯或更多的空格,可以把函數(shù)表達(dá)式放在({})塊中:
let result=[1,2,3,4,5].map(n=>{ n=n%3; retutn n; })
箭頭函數(shù)不單是為了輸入更少的字符,它們的表現(xiàn)也和一般的函數(shù)不同。它的繼承了當(dāng)前上下文的this和arguments,這就意味著你可以避免寫(xiě)var that=this這樣的代碼,也不需要把函數(shù)綁定到正確的上下文了:
//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原型中增添了幾個(gè)新方法,用于簡(jiǎn)化需要用indexOf()方法來(lái)解決的問(wèn)題的復(fù)雜度,并達(dá)到同樣的效果:
'my string'.startsWith('my');//true 'my string'.endsWith('my');//false 'my string'.includes('str');//true
添加了另一個(gè)方法,用于創(chuàng)建重復(fù)字符串:
'my'.repeat(3);//'my my my'
2. 模板字符串
模板字符串提供提供一個(gè)簡(jiǎn)潔的方式來(lái)實(shí)現(xiàn)字符串插值,它基于美元符號(hào)和花括號(hào)${...},模板字符串置于引號(hào)之中:
//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');
以上形式對(duì)比ES5僅僅是便于字符串的拼接,實(shí)際上,模板字符串還可以用于多行字符串(空格也是字符串的一部分):
let x='1... 2... 3 lines long!'; //ES5 var x='1...'+ '2...'+ '3 lines long!'; var x="1...2...3 lines long!';
希望本文所述對(duì)大家ECMAScript程序設(shè)計(jì)有所幫助。
- ES6中非常實(shí)用的新特性介紹
- JavaScript ES6的新特性使用新方法定義Class
- JavaScript中的Reflect對(duì)象詳解(ES6新特性)
- 深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù)
- 簡(jiǎn)單談?wù)凟S6的六個(gè)小特性
- ES6新特性之Symbol類(lèi)型用法分析
- ES6(ECMAScript 6)新特性之模板字符串用法分析
- ES6新特性之模塊Module用法詳解
- ES6新特性之字符串的擴(kuò)展實(shí)例分析
- ES6新特性二:Iterator(遍歷器)和for-of循環(huán)詳解
- ES6新特性六:promise對(duì)象實(shí)例詳解
- ES6新特性七:數(shù)組的擴(kuò)充詳解
- ES6新特性八:async函數(shù)用法實(shí)例詳解
- ES6新特性之類(lèi)(Class)和繼承(Extends)相關(guān)概念與用法分析
- 讓微信小程序支持ES6中Promise特性的方法詳解
- ES6新特性:使用export和import實(shí)現(xiàn)模塊化詳解
- es6新特性之 class 基本用法解析
- ES6 13個(gè)新特性總結(jié)
相關(guān)文章
JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)事件
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02js實(shí)現(xiàn)簡(jiǎn)單的省市縣三級(jí)聯(lián)動(dòng)效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的省市縣三級(jí)聯(lián)動(dòng)效果,以完整實(shí)例形式分析了JavaScript實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果的具體步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-02-02javascript 哈希表(hashtable)的簡(jiǎn)單實(shí)現(xiàn)
javascript中沒(méi)有像c#,java那樣的哈希表(hashtable)的實(shí)現(xiàn)。在js中,object屬性的實(shí)現(xiàn)就是hash表,因此只要在object上封裝點(diǎn)方法,簡(jiǎn)單的使用obejct管理屬性的方法就可以實(shí)現(xiàn)簡(jiǎn)單高效的hashtable。2010-01-01JS實(shí)現(xiàn)掃雷項(xiàng)目總結(jié)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)掃雷項(xiàng)目總結(jié),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05前端layui?table表格勾選事件以及常見(jiàn)模塊詳解
Layui 是一個(gè)非常流行的前端框架,其中的table組件可以幫助您實(shí)現(xiàn)復(fù)選框功能,下面這篇文章主要給大家介紹了關(guān)于前端layui?table表格勾選事件以及常見(jiàn)模塊的相關(guān)資料,需要的朋友可以參考下2024-08-08javaScript實(shí)現(xiàn)滾動(dòng)條事件詳解
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)滾動(dòng)條事件的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09js實(shí)現(xiàn)提交前對(duì)列表數(shù)據(jù)的增刪改查
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)提交前對(duì)列表數(shù)據(jù)的增刪改查,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01javascript高級(jí)學(xué)習(xí)筆記整理
打算做一個(gè)js面向?qū)ο蟮呢澇陨?但是最終是流產(chǎn)了,整理了下廢棄的代碼,回顧了下PPT.想學(xué)習(xí)js面向?qū)ο蟮呐笥岩部梢詤⒖枷隆?/div> 2011-08-08最新評(píng)論