擁抱ES6 (一）

• • • let和const
    • 解構(gòu)賦值
    • …語法

let和const

• let,const和var一樣，都可用來聲明變量。但let,const聲明的變量在提升過程中不會像var那樣進(jìn)行初始化賦值undefined。
• 此外，let,const所聲明的變量存在塊級作用域和暫時(shí)性死區(qū)，能減少全局變量的污染。
• 值得注意的是，let和const定義的變量在使用前必須先聲明，否則報(bào)錯(cuò)。
• 而對于const來說，定義常量這種說法更為確切，且值定義后無法改變(引用類型除外–內(nèi)容可變，但引用不變)

example-01-塊級作用域

{var a=1;let b=2;}console.log(a);//1console.log(b);//報(bào)錯(cuò) b is not defined

• 為了更好的理解塊級作用域，請看下邊這兩段代碼

var arr = [];for (var i = 0; i < 3; i++) {arr[i] = function () {console.log(i);};}console.log(arr[0]()); // 3console.log(arr[1]()); // 3console.log(arr[2]()); // 3

• 這里不會預(yù)期輸出0，1，2，是因?yàn)橛胿ar聲明的變量沒有塊級作用域，i在循環(huán)外也有效。
• 等執(zhí)行完，僅僅只有全局有一個(gè)i,這個(gè)i此時(shí)已經(jīng)是3。
• 把上邊var定義的i換成let定義試試看

var arr = [];for (let i = 0; i < 10; i++) {arr[i] = function () {console.log(i);};}console.log(arr[0]()); // 0console.log(arr[1]()); // 1console.log(arr[2]()); // 2

• 這就是塊級作用域的體現(xiàn)，此時(shí)在循環(huán)外訪問i是訪問不到的。每次循環(huán)i都各自保存自己的值，所以輸出符合預(yù)期。

example–02-不初始化賦值

// var 的情況console.log(a); // undefinedvar a= 1;// let 的情況console.log(b); // 報(bào)錯(cuò) b is not definedlet b= 2;// const 的情況// const聲明一個(gè)只讀的常量,不可變。const c=1;//報(bào)錯(cuò) Assignment to constant variable.c=2;//const定義的常量必須初始化賦值const d;// SyntaxError: Missing initializer in const declaration console.log(d)

解構(gòu)賦值

• ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。
• 注意模式匹配，只要等號兩邊的模式相同，左邊的變量就會被賦予對應(yīng)的值。
• 如果解構(gòu)不成功，變量的值就等于undefined。

example–03-數(shù)組的解構(gòu)賦值

//快速為變量賦值 var [a, b, c] = [1, 2, 3]; console.log(a);//1 console.log(b);//2 console.log(c);//3//注意模式匹配 var [a, [[b], c]] = [1, [[2], 3]]; console.log(a)// 1 console.log(b)// 2 console.log(c)// 3// 可以只獲取自己想要的 var[ , , c] = ["a", "b", "c"]; console.log(c) // cvar [x, , z] = [1, 2, 3]; console.log(x)// 1 console.log(z)// 3

example-04-字符串的解構(gòu)賦值

const [a, b] = '高芊'; console.log(a) // 高 console.log(b) // 芊

example-05-函數(shù)的解構(gòu)賦值

function add([x, y]){return x + y; }add([1, 2]); // 3

…語法

• 對于數(shù)組和對象而言，…運(yùn)算符超級好用，可將參數(shù)列表或?qū)ο髮傩砸灰徊鸾?#xff0c;也可重新拼湊。
• 值得注意的是:對象的解構(gòu)與數(shù)組有一個(gè)重要的不同,數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；
• 對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

example–06-…語法

//一一拆解后拼湊 var obj={name:"高芊",like:"編程"} var selfObj={...obj}//相當(dāng)于拷貝 console.log(selfObj)//{name:"高芊",like:"編程"} //一一拆解 var { a, b} = { a: "aaa", b: "bbb" }; console.log(a) // aaa console.log(b) // bbb//此時(shí)的b實(shí)際時(shí)剩余項(xiàng)組成的數(shù)組var [a, ...b] = [1, 2, 3, 4]; console.log(a) // 1 console.log(b) // [2, 3, 4]

example-07-復(fù)雜對象解構(gòu)

• 注意，此時(shí)p是一種模式，不是變量，故不會被賦值

var obj = {p: ['Hello',{ b: 'World' }] };var { p: [a, { b }] } = obj; console.log(a) // "Hello" console.log(b) // "World"

• 如果p也要作為變量賦值，可以寫成下面這樣。

var obj = {p: ['Hello',{ b: 'World' }] };var { p,p: [a, { b }] } = obj; console.log(a) // "Hello" console.log(b) // "World" console.log(p) // ['Hello', { b: 'World' } ]

• 下面代碼有4次解構(gòu)賦值，分別是對loc、start、line、column四個(gè)屬性的解構(gòu)賦值。
• 注意，最后一次對line，column屬性的解構(gòu)賦值之中，只有l(wèi)ine，column是變量，loc和start都是模式，不是變量。

var node = {loc: {start: {line: 1,column: 5}} };var { loc, loc: { start }, loc: { start: { line,column }} } = node;console.log(line) // 1 console.log(column) // 5 console.log(start) // {line: 1, column: 5} console.log(loc) //{start: {line: 1, column: 5}}

字符串方法擴(kuò)展

• es5只有indexOf方法，可以用來確定一個(gè)字符串是否包含在另一個(gè)字符串中。
• ES6 又提供了三種新方法:includes, startsWith,endsWith。
• 此外，還有兩個(gè)常用于數(shù)據(jù)處理的padStart,padEnd
• includes()：返回布爾值，判斷是否找到了參數(shù)字符串。
• startsWith()：返回布爾值，判斷參數(shù)字符串是否在原字符串的頭部。
• endsWith()：返回布爾值，判斷參數(shù)字符串是否在原字符串的尾部。
• padStart()：前補(bǔ)位 param1:最大長度; param2:未達(dá)到最大長度情況下補(bǔ)充的內(nèi)容
• padEnd()：后補(bǔ)位 param1:最大長度; param2:未達(dá)到最大長度情況下補(bǔ)充的內(nèi)容

example-08-字符串?dāng)U展方法

var s = 'Hello world!';console.log(s.startsWith('Hello')) // trueconsole.log(s.endsWith('!')) // trueconsole.log(s.includes('o')) // true

時(shí)間處理

function dateFormat(date=new Date()) {let y = date.getFullYear().toString();let m = (date.getMonth() + 1).toString().padStart(2,'0');let d = date.getDate().toString().padStart(2,'0');let h = date.getHours().toString().padStart(2,'0');let M = date.getMinutes().toString().padStart(2,'0');let s = date.getSeconds().toString().padStart(2,'0');return y + m + d + " " +h + ":" + M + ":" +s; } console.log(dateFormat()) //20191208 12:39:38 注意日期:08 前置補(bǔ)了一個(gè)0

總結(jié)

以上是生活随笔為你收集整理的拥抱ES6 (一)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。