ES6新特性 變數和字串

2022-07-23 14:24:21 字數 2099 閱讀 8902

一、變數

1. let

我們都習慣用var 來宣告變數,現在還可以用let來宣告變數,兩者的主要區別是作用域:var宣告的變數作用域為包圍它的函式,而let宣告的變數作用域僅在它所在的塊中。(在es5中是沒有塊的概念的)。

if(true)

console.log(a);//undifined

這樣使**更加乾淨,減少滯留的變數,再如我們經常用的陣列遍歷:

for(let i=0;i通常情況下,我們在同一作用域裡使用變數j來完成另乙個遍歷,但是現在有了let,可以安全的再一次宣告i變數,因為它只在被宣告的塊中有效。

2.const

const也是用於宣告塊作用域變數的方法,使用const可以宣告乙個值得唯讀引用,必須直接給乙個變數賦值,如果嘗試該變數或者沒有立即給變數賦值,都將報錯:

const my_constent=1;

my_constent=2;//error

const my_constent;//error

注意物件的屬性或陣列成員還是可以改變的

const my_object=;

my_object.some='body';

3.箭頭函式

箭頭函式使得js**更加簡潔。下面將箭頭函式和es5版本的函式寫法:

//箭頭函式

let books=[,];

let titles=books.map(item=>item.title);

//es5函式

var titles=books.map(function(item));

觀察箭頭函式的語法,會發現其中並沒有出現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=>)

箭頭函式不單是為了輸入更少的字元,它們的表現也和一般的函式不同。它的繼承了當前上下文的this和arguments,這就意味著你可以避免寫var that=this這樣的**,也不需要把函式繫結到正確的上下文了:

//es6

let books=

};//es5

var books=)

}};

二、字串

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',

pears=7,

bananas=function();

console.log('this is$');

//es5

以上形式對比es5僅僅是便於字串的拼接,實際上,模板字串還可以用於多行字串(空格也是字串的一部分):

let x='1...

2...

3 lines long!';

//es5

var x='1...'+

'2...'+

'3 lines long!';

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

es6新特性 ES6新特性(一)

var 1 var宣告的是函式作用域 區域性 但在if for等定義的變數是全域性的 2 var 具有變數提公升,預解析 3 在同乙個作用域下,var可以宣告多次 4 var 宣告的變數會掛載到window上 let1 let不存在變數提公升,在變數使用之前,必須要先宣告 2 let在同一作用域下,...

前端 (五)ES6新特性之字串拓展

let name abc let age 18let str my name is name and my age is age 字串模板 let str2 my name is and my age is 查詢是否有banana let str 之前 indexof str.indexof ban...

ES6特性之 模板字串

模板字串為構造多行字串和字串拼接帶來了更加方便的方式。多行字串 之前,我們如果要構造乙個多行,我們需要在字串中自己加入換行符 n,就像這樣 var lines text line one ntext line two text line one text line two 上面的看起來有點亂,讓我們...