ES6新語法特性收錄

let const 聲明變量


1. let變量聲明

? let的特點是不會變量提升漫试,

2. const 變量聲明

const雖然是常量肃拜,不允許修改默認賦值团甲,但如果定義的是對象Object挎春,數(shù)組旗唁,那么可以修改對象內(nèi)部的屬性值仑嗅。

3.const和let的異同點

**相同點:** const和let都是在當前塊內(nèi)有效宴倍,執(zhí)行到塊外會被銷毀,也不存在變量提升(TDZ)仓技,不能重復聲明鸵贬。

**不同點:** ?const不能再賦值,let聲明的變量可以重復賦值脖捻。

變量的解構(gòu)賦值

ES6 允許按照一定模式阔逼,從數(shù)組和對象中提取值,對變量進行賦值地沮,這被稱為解構(gòu)(Destructuring)嗜浮。


ES6 允許寫成下面這樣。

1. 數(shù)組的解構(gòu)

let[a,b,c]=[1,2,3];

let[x,,y]=[1,2,3]

;x// 1

y// 3

2. 對象的解構(gòu)?

let{bar,foo}={foo:"aaa",bar:"bbb"};

foo// "aaa"

bar// "bbb"

3. 字符串 函數(shù)參數(shù)也可以解構(gòu) 詳見ES6語法


字符串的擴展


1. includes(), startsWith(), endsWith()

includes():返回布爾值摩疑,表示是否找到了參數(shù)字符串危融。

startsWith():返回布爾值,表示參數(shù)字符串是否在源字符串的頭部雷袋。

endsWith():返回布爾值专挪,表示參數(shù)字符串是否在源字符串的尾部。


var s='Hello world!';

s.startsWith('Hello')// trues.

endsWith('!')// trues.

includes('o')// true

2. repeat()

repeat方法返回一個新字符串,表示將原字符串重復n次寨腔。

'x'.repeat(3)// "xxx"

'hello'.repeat(2)// "hellohello"

'na'.repeat(0)// ""

參數(shù)如果是小數(shù)速侈,會被取整。

3. padStart()迫卢,padEnd()

padStart()用于頭部補全倚搬,padEnd()用于尾部補全。

'x'.padStart(5,'ab')// 'ababx'

'x'.padStart(4,'ab')// 'abax'

padStart的常見用途是為數(shù)值補全指定位數(shù)乾蛤。下面代碼生成10位的數(shù)值字符串每界。

'1'.padStart(10,'0')// "0000000001"

另一個用途是提示字符串格式。

'12'.padStart(10,'YYYY-MM-DD')// "YYYY-MM-12"

'09-12'.padStart(10,'YYYY-MM-DD')// "YYYY-09-12"

4. 模板字符串

如果使用模板字符串表示多行字符串家卖,所有的空格和縮進都會被保留在輸出之中眨层。

模板字符串中嵌入變量,需要將變量名寫在${}之中上荡。


ES6對象新增方法


1趴樱、Object.assign()

實現(xiàn)了拷貝一個對象給另外一個對象,返回一個新的對象酪捡。

console.log(Object.assign(a, b))

// 將對象b拷貝給對象a,并且返回以一個新對象 a可以繼承b的所以屬性叁征,而且是深拷貝,如果對象出現(xiàn)重復逛薇,不會報錯捺疼,后面的會覆蓋前面的


函數(shù)的擴展


1. ES6 允許為函數(shù)的參數(shù)設(shè)置默認值,即直接寫在參數(shù)定義的后面永罚。

functionlog(x,y='World')

? ? ?{console.log(x,y);}

log('Hello')// Hello World

2.箭頭函數(shù)中的this指向

長期以來啤呼,JavaScript語言的this對象一直是一個令人頭痛的問題,在對象方法中使用this呢袱,必須非常小心媳友。例如:

運行上面的代碼會報錯,這是因為setTimeout中的this指向的是全局對象产捞。所以為了讓它能夠正確的運行醇锚,傳統(tǒng)的解決方法有兩種:

classAnimal {

?constructor(){this.type ='animal'}?

? ? says(say){? ? ? ?

? ? ? setTimeout(function(){

? ? ? ? ? ?console.log(this.type +' says '+ say)? ? ? ?

? ? },1000)? ? }}

var animal =new Animal()

animal.says('hi') //undefined says hi

第一種是將this傳給self,再用self來指代this

says(say){

? ?var self = this;? ? ?

? ? ?setTimeout( ?function(){

? ? ? ? console.log(self.type +' says '+ say)? ? ??

?},1000)

2.第二種方法是用bind(this),即

says(say){? ? ?

? ? ?setTimeout(function(){

? ? ? ? ?console.log(this.type +' says '+ say)? ?

? ? ? }.bind(this),1000)

當我們使用箭頭函數(shù)時,函數(shù)體內(nèi)的this對象坯临,就是定義時所在的對象焊唬,而不是使用時所在的對象。

并不是因為箭頭函數(shù)內(nèi)部有綁定this的機制看靠,實際原因是箭頭函數(shù)根本沒有自己的this赶促,它的this是繼承外面的,因此內(nèi)部的this就是外層代碼塊的this挟炬。

數(shù)組的擴展


1. 擴展運算符

擴展運算符(spread)是三個點(...)鸥滨。它好比 rest 參數(shù)的逆運算嗦哆,將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。

console.log(...[1,2,3]) // 1 2 3

應用Math.max方法婿滓,簡化求出一個數(shù)組最大元素的寫法老速。

Math.max(...[14,3,77])

合并數(shù)組

[...arr1,...arr2,...arr3] ?// [ 'a', 'b', 'c', 'd', 'e' ]

2. Array.from()

Array.from可以將偽數(shù)組轉(zhuǎn)為真正的數(shù)組。

3. Array.of()

Array.of(3,11,8)// [3,11,8]

4. 數(shù)組實例的 find() 和 findIndex()

find():傳入一個回調(diào)函數(shù)凸主,找到數(shù)組中符合當前搜索規(guī)則的第一個元素橘券,返回它,并且終止搜索卿吐。

findIndex():傳入一個回調(diào)函數(shù)旁舰,找到數(shù)組中符合當前搜索規(guī)則的第一個元素,返回它的下標嗡官,終止搜索箭窜。

[1,5,10,15].find(function(value,index,arr){

returnvalue>9;})// 10

5. 數(shù)組實例的fill()

fill方法用于空數(shù)組的初始化非常方便。數(shù)組中已有的元素衍腥,會被全部抹去磺樱。

fill方法還可以接受第二個和第三個參數(shù),用于指定填充的起始位置和結(jié)束位置紧阔。

['a','b','c'].fill(7) // [7, 7, 7]

['a','b','c'].fill(7,1,2) // ['a', 7, 'c']

7. 強大的for-of循環(huán)

for (var value of myArray ){?

console.log(value);}

or-of循環(huán)不僅支持數(shù)組坊罢,還支持大多數(shù)類數(shù)組對象


module


export 命令

1. 寫法1 等于于 寫法2

寫法1

export var firstName = 'Michael';

export var lastName = 'Jackson';

export var year = 1958;

寫法2?

var firstName = 'Michael';

var lastName = 'Jackson';

var year = 1958;

export { firstName, lastName, year};

2. 通常情況下续担,export輸出的變量就是本來的名字擅耽,但是可以使用as關(guān)鍵字重命名。

functionv1(){...}

functionv2(){...}

export{

v1 as streamV1,

v2 as streamV2

,v2 as streamLatestVersion

};

3. 使用export default命令物遇,為模塊指定默認輸出乖仇。其他模塊加載該模塊時,import命令可以為該匿名函數(shù)指定任意名字询兴。


set 函數(shù)


const s = new Set(arr)

Set 函數(shù)可以接受一個數(shù)組(或者具有 iterable 接口的其他數(shù)據(jù)結(jié)構(gòu))作為參數(shù)乃沙,用來初始化。

Array.from 可以講 Set 轉(zhuǎn)換為數(shù)組

數(shù)組的map和filter方法也可以用于 Set 诗舰。 // 我表示懷疑這個說法


1. Set 的幾個比較重要的方法

? add(value):添加某個值警儒,返回Set結(jié)構(gòu)本身。

? delete(value):刪除某個值眶根,返回一個布爾值蜀铲,表示刪除是否成功。

? has(value):返回一個布爾值属百,表示該值是否為Set的成員记劝。

? clear():清除所有成員,沒有返回值

2. Set 的一個布爾運算

let a = new Set([1, 2, 3]);

let b = new Set([4, 3, 2]);

// 并集

let union = new Set([...a, ...b]);

// Set {1, 2, 3, 4}

// 交集

let intersect = new Set([...a].filter(x => b.has(x)));

// set {2, 3}

// 差集

let difference = new Set([...a].filter(x => !b.has(x)));























最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末族扰,一起剝皮案震驚了整個濱河市厌丑,隨后出現(xiàn)的幾起案子定欧,更是在濱河造成了極大的恐慌,老刑警劉巖怒竿,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件砍鸠,死亡現(xiàn)場離奇詭異,居然都是意外死亡愧口,警方通過查閱死者的電腦和手機睦番,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來耍属,“玉大人托嚣,你說我怎么就攤上這事『衿” “怎么了示启?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長领舰。 經(jīng)常有香客問我夫嗓,道長,這世上最難降的妖魔是什么冲秽? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任舍咖,我火速辦了婚禮,結(jié)果婚禮上锉桑,老公的妹妹穿的比我還像新娘排霉。我一直安慰自己,他們只是感情好民轴,可當我...
    茶點故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布攻柠。 她就那樣靜靜地躺著,像睡著了一般后裸。 火紅的嫁衣襯著肌膚如雪瑰钮。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天微驶,我揣著相機與錄音浪谴,去河邊找鬼。 笑死因苹,一個胖子當著我的面吹牛苟耻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播容燕,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼梁呈,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蘸秘?” 一聲冷哼從身側(cè)響起官卡,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蝗茁,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后寻咒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體哮翘,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年毛秘,在試婚紗的時候發(fā)現(xiàn)自己被綠了饭寺。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡叫挟,死狀恐怖艰匙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情抹恳,我是刑警寧澤员凝,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站奋献,受9級特大地震影響健霹,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜瓶蚂,卻給世界環(huán)境...
    茶點故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一糖埋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧窃这,春花似錦瞳别、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽倍奢。三九已至朴上,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間卒煞,已是汗流浹背痪宰。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留畔裕,地道東北人衣撬。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像扮饶,于是被迫代替她去往敵國和親具练。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,077評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 一甜无、ES6簡介 ? 歷時將近6年的時間來制定的新 ECMAScript 標準 ECMAScript 6(亦稱 ...
    一歲一枯榮_閱讀 6,078評論 8 25
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,237評論 0 4
  • 其實胸大也是一種煩惱扛点,只是你不知道而已哥遮。 比如穿一些大圖案修身的T恤,很容易撐大變形陵究。 穿襯衫時眠饮,紐扣總是被彈開…...
    Dora香識女人閱讀 576評論 0 1
  • 適應年齡20歲——30歲 整體板墻我以條紋為主,藍色為輔助色铜邮,紅色為點綴色仪召。 整個板墻是調(diào)的時尚休閑風,...
    臺東一店高悅閱讀 134評論 3 0
  • 如何擺脫又窮又忙的生活狀態(tài)松蒜? 匱乏陷阱扔茅,仿佛說的就是人窮志短,鼠目寸光的狀態(tài)秸苗,深陷其中咖摹,怎能不受影響,以致產(chǎn)生稀缺...
    小小火紅閱讀 116評論 0 0