let和const
- let,const和var一樣,都可用來聲明變量。但let,const聲明的變量在提升過程中不會像var那樣進行初始化賦值undefined。
- 此外,let,const所聲明的變量存在塊級作用域和暫時性死區,能減少全局變量的污染。
- 值得注意的是,let和const定義的變量在使用前必須先聲明,否則報錯。
- 而對於const來說,定義常量這種說法更爲確切,且值定義後無法改變(引用類型除外–內容可變,但引用不變)
example-01-塊級作用域
{
var a=1;
let b=2;
}
console.log(a);//1
console.log(b);//報錯 b is not defined
- 爲了更好的理解塊級作用域,請看下邊這兩段代碼
var arr = [];
for (var i = 0; i < 3; i++) {
arr[i] = function () {
console.log(i);
};
}
console.log(arr[0]()); // 3
console.log(arr[1]()); // 3
console.log(arr[2]()); // 3
- 這裏不會預期輸出0,1,2,是因爲用var聲明的變量沒有塊級作用域,i在循環外也有效。
- 等執行完,僅僅只有全局有一個i,這個i此時已經是3。
- 把上邊var定義的i換成let定義試試看
var arr = [];
for (let i = 0; i < 10; i++) {
arr[i] = function () {
console.log(i);
};
}
console.log(arr[0]()); // 0
console.log(arr[1]()); // 1
console.log(arr[2]()); // 2
- 這就是塊級作用域的體現,此時在循環外訪問i是訪問不到的。每次循環i都各自保存自己的值,所以輸出符合預期。
example–02-不初始化賦值
// var 的情況
console.log(a); // undefined
var a= 1;
// let 的情況
console.log(b); // 報錯 b is not defined
let b= 2;
// const 的情況
// const聲明一個只讀的常量,不可變。
const c=1;
//報錯 Assignment to constant variable.
c=2;
//const定義的常量必須初始化賦值
const d;
// SyntaxError: Missing initializer in const declaration
console.log(d)
解構賦值
- ES6 允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱爲解構(Destructuring)。
- 注意模式匹配,只要等號兩邊的模式相同,左邊的變量就會被賦予對應的值。
- 如果解構不成功,變量的值就等於undefined。
example–03-數組的解構賦值
//快速爲變量賦值
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) // c
var [x, , z] = [1, 2, 3];
console.log(x)// 1
console.log(z)// 3
example-04-字符串的解構賦值
const [a, b] = '高芊';
console.log(a) // 高
console.log(b) // 芊
example-05-函數的解構賦值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
…語法
- 對於數組和對象而言,…運算符超級好用,可將參數列表或對象屬性一一拆解,也可重新拼湊。
- 值得注意的是:對象的解構與數組有一個重要的不同,數組的元素是按次序排列的,變量的取值由它的位置決定;
- 對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。
example–06-…語法
//一一拆解後拼湊
var obj={name:"高芊",like:"編程"}
var selfObj={...obj}//相當於拷貝
console.log(selfObj)//{name:"高芊",like:"編程"}
//一一拆解
var { a, b} = { a: "aaa", b: "bbb" };
console.log(a) // aaa
console.log(b) // bbb
//此時的b實際時剩餘項組成的數組
var [a, ...b] = [1, 2, 3, 4];
console.log(a) // 1
console.log(b) // [2, 3, 4]
example-07-複雜對象解構
- 注意,此時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次解構賦值,分別是對loc、start、line、column四個屬性的解構賦值。
- 注意,最後一次對line,column屬性的解構賦值之中,只有line,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}}
字符串方法擴展
- es5只有indexOf方法,可以用來確定一個字符串是否包含在另一個字符串中。
- ES6 又提供了三種新方法:includes, startsWith,endsWith。
- 此外,還有兩個常用於數據處理的padStart,padEnd
- includes():返回布爾值,判斷是否找到了參數字符串。
- startsWith():返回布爾值,判斷參數字符串是否在原字符串的頭部。
- endsWith():返回布爾值,判斷參數字符串是否在原字符串的尾部。
- padStart():前補位 param1:最大長度; param2:未達到最大長度情況下補充的內容
- padEnd():後補位 param1:最大長度; param2:未達到最大長度情況下補充的內容
example-08-字符串擴展方法
var s = 'Hello world!';
console.log(s.startsWith('Hello')) // true
console.log(s.endsWith('!')) // true
console.log(s.includes('o')) // true
時間處理
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 前置補了一個0