亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

ES6新特性之變量和字符串用法示例

 更新時間:2017年04月01日 10:40:34   作者:晴天碧日  
這篇文章主要介紹了ES6新特性之變量和字符串用法,結(jié)合具體實例形式分析了ES6中變量與字符串的特性、使用方法與相關(guān)注意事項,需要的朋友可以參考下

本文實例講述了ES6新特性之變量和字符串用法。分享給大家供大家參考,具體如下:

一、變量

1. LET

我們都習(xí)慣用var 來聲明變量,現(xiàn)在還可以用let來聲明變量,兩者的主要區(qū)別是作用域:var聲明的變量作用域為包圍它的函數(shù),而let聲明的變量作用域僅在它所在的塊中。(在ES5中是沒有塊的概念的)。

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

通常情況下,我們在同一作用域里使用變量J來完成另一個遍歷,但是現(xiàn)在有了let,可以安全的再一次聲明i變量,因為它只在被聲明的塊中有效。

2.CONST

const也是用于聲明塊作用域變量的方法,使用const可以聲明一個值得只讀引用,必須直接給一個變量賦值,如果嘗試該變量或者沒有立即給變量賦值,都將報錯:

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

注意對象的屬性或數(shù)組成員還是可以改變的

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

3.箭頭函數(shù)

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

//箭頭函數(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ù)的語法,會發(fā)現(xiàn)其中并沒有出現(xiàn)function關(guān)鍵字,只保留零或多個參數(shù)、“胖箭頭”(“=>”)和函數(shù)表達式,return聲明被隱式加入。帶有零或者多個參數(shù)時必須使用括號:

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

如果需要寫更多的邏輯或更多的空格,可以把函數(shù)表達式放在({})塊中:

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

箭頭函數(shù)不單是為了輸入更少的字符,它們的表現(xiàn)也和一般的函數(shù)不同。它的繼承了當(dāng)前上下文的this和arguments,這就意味著你可以避免寫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原型中增添了幾個新方法,用于簡化需要用indexOf()方法來解決的問題的復(fù)雜度,并達到同樣的效果:

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

添加了另一個方法,用于創(chuàng)建重復(fù)字符串:

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

2. 模板字符串

模板字符串提供提供一個簡潔的方式來實現(xiàn)字符串插值,它基于美元符號和花括號${...},模板字符串置于引號之中:

//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程序設(shè)計有所幫助。

相關(guān)文章

  • JavaScript canvas實現(xiàn)跟隨鼠標(biāo)事件

    JavaScript canvas實現(xiàn)跟隨鼠標(biāo)事件

    這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)跟隨鼠標(biāo)事件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • js實現(xiàn)簡單的省市縣三級聯(lián)動效果實例

    js實現(xiàn)簡單的省市縣三級聯(lián)動效果實例

    這篇文章主要介紹了js實現(xiàn)簡單的省市縣三級聯(lián)動效果,以完整實例形式分析了JavaScript實現(xiàn)省市縣三級聯(lián)動效果的具體步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2016-02-02
  • javascript 哈希表(hashtable)的簡單實現(xiàn)

    javascript 哈希表(hashtable)的簡單實現(xiàn)

    javascript中沒有像c#,java那樣的哈希表(hashtable)的實現(xiàn)。在js中,object屬性的實現(xiàn)就是hash表,因此只要在object上封裝點方法,簡單的使用obejct管理屬性的方法就可以實現(xiàn)簡單高效的hashtable。
    2010-01-01
  • 巧用canvas

    巧用canvas

    作為一項有意思的新技術(shù),canvas給我們帶來了對網(wǎng)頁繪圖和網(wǎng)頁動畫的新革命。本文簡單介紹下canvas實用的功能,下面跟著小編一起來看下吧
    2017-01-01
  • JS實現(xiàn)掃雷項目總結(jié)

    JS實現(xiàn)掃雷項目總結(jié)

    這篇文章主要為大家詳細介紹了JS實現(xiàn)掃雷項目總結(jié),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • 前端layui?table表格勾選事件以及常見模塊詳解

    前端layui?table表格勾選事件以及常見模塊詳解

    Layui 是一個非常流行的前端框架,其中的table組件可以幫助您實現(xiàn)復(fù)選框功能,下面這篇文章主要給大家介紹了關(guān)于前端layui?table表格勾選事件以及常見模塊的相關(guān)資料,需要的朋友可以參考下
    2024-08-08
  • javaScript實現(xiàn)滾動條事件詳解

    javaScript實現(xiàn)滾動條事件詳解

    這篇文章主要為大家詳細介紹了javaScript實現(xiàn)滾動條事件的相關(guān)資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-09-09
  • js實現(xiàn)提交前對列表數(shù)據(jù)的增刪改查

    js實現(xiàn)提交前對列表數(shù)據(jù)的增刪改查

    這篇文章主要為大家詳細介紹了js實現(xiàn)提交前對列表數(shù)據(jù)的增刪改查,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • javascript高級學(xué)習(xí)筆記整理

    javascript高級學(xué)習(xí)筆記整理

    打算做一個js面向?qū)ο蟮呢澇陨?但是最終是流產(chǎn)了,整理了下廢棄的代碼,回顧了下PPT.想學(xué)習(xí)js面向?qū)ο蟮呐笥岩部梢詤⒖枷隆?/div> 2011-08-08
  • 原生JS實現(xiàn)可拖拽登錄框

    原生JS實現(xiàn)可拖拽登錄框

    這篇文章主要為大家詳細介紹了原生JS實現(xiàn)可拖拽登錄框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10

最新評論