ES6語法詳解(二)
一)箭頭函式
// ES5寫法
var total = function(a, b) {
return a + b;
};
// ES6寫法
var total = (a, b) => {
// return a + b;
}
console.log(total(1, 2));
this是什麼?
帶有this關鍵詞的箭頭函式行為不同於正常函式,在Javascript中每個函式定義了他自己的this上下文,但是箭頭函式中的this則是獲得最接近(enclosing 封閉者)上下文的值。
function Person() { this.age = 10; // 箭頭的this,向上找,找到非箭頭函式,看一下這個非箭頭函式的this是誰,那麼箭頭函式的 this就是這個非箭頭函式的this。 setInterval(()=>{ // window this.age++; console.log(this.age); }, 1000); } var boy = new Person();
二)字串
1)傳統上,JavaScript只有indexOf方法,可以用來確定一個字串是否包含在另一個字串中。
ES6又提供了三種新方法:
includes():返回布林值,表示是否找到了引數字串。
startsWith():返回布林值,表示引數字串是否在源字串的頭部。
endsWith():返回布林值,表示引數字串是否在源字串的尾部。
var string = "人民的名義"; console.log(string.indexOf("的"));//列印 2 console.log(string.includes('民'));// 列印 true console.log(string.startsWith('人', 0));//列印 true console.log(string.endsWith('人'));//列印 false
2)模板字串
模板字串中所有的空格、新行、縮排,都會原樣輸出在生成的字串中
注意: 模板字串(template string)是增強版的字串,用反引號(`)標識,嵌入的變數名寫在${}之中。
//以前我們將變數和字串進行連線時的寫法是下面這樣:
var a = "夕陽無限好";
var b = "只是近黃昏";
var c = "名言:" + a + "," + b;
console.log(c);
//ES6為我們提供了一種更加簡單的方法:模板字串,上面的程式碼可以改寫為:
var c = `名言: ${a}, ${b}`;
三)物件 Object
1)物件的簡潔表示法
如果你想在物件裡面新增跟已定義的變數名字相同的屬性的話,你可能會這樣寫:
var name = "lgx";
var age = 20;
var Person = {
name:name,
age: age,
hello: function() {
console.log("...");
}
}
ES6為我們提供了一種簡寫方法,就是在物件裡面直接加上這屬性,不需要再指定值,像下面這樣:
var Person = {
name,
age,
hello() {
console.log("...");
}
}
console.log(Person.name);
console.log(Person.age);
2)物件新增函式Object.is()
ES5比較兩個值是否相等,只有兩個運算子:相等運算子(==)和嚴格相等運算子(===)。它們都有缺點,前者會自動轉換資料型別,後者的NaN不等於自身,以及+0等於-0。JavaScript缺乏一種運算,在所有環境中,只要兩個值是一樣的,它們就應該相等。
ES6提出“Same-value equality”演算法,用來解決這個問題。Object.is就是部署這個演算法的新方法。它用來比較兩個值是否嚴格相等,與嚴格比較運算子(===)的行為基本一致。
不同之處只有兩個:
一是:+0不等於-0
二是:NaN等於自身
// 從數學的角度,+0 和 -0不嚴格相等
console.log(+0 === -0);//true
// NaN === NaN應該相同(NaN是number型別的)
console.log(NaN === NaN);//false
//ES6
console.log(Object.is(+0, -0));//false
console.log(Object.is(NaN, NaN));//true
3)物件新增函式Object.assign()
基本用法:
Object.assign方法用於物件的合併,將源物件(source)的所有可列舉屬性,複製到目標物件(target)
var target = {};
var source1 = {
a: 1
}
var source2 = {
b: 2
}
Object.assign(target, source1, source2);
console.log(target);//{a:1,b:2}
如果目標物件與源物件有同名屬性,或多個源物件有同名屬性,則後 面的屬性會覆蓋前面的屬性
var source1 = {
a: 1
}
var source2 = {
a: 3,
b: 2
}
如果只有一個引數,Object.assign會直接返回該引數。
var obj = {a: 1};
Object.assign(obj) === obj // true
如果該引數不是物件,則會先轉成物件,然後返回。
typeof Object.assign(2) // "object"
由於undefined和null無法轉成物件,所以如果它們作為引數,就會報錯。
Object.assign(undefined) // 報錯
Object.assign(null) // 報錯
如果非物件引數出現在源物件的位置(即非首引數),那麼處理規則有所不同。首先,這些引數都會轉成物件,如果無法轉成物件,就會跳過。這意味著,如果undefined和null不在首引數,就不會報錯。
let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true
其他型別的值(即數值、字串和布林值)不在首引數,也不會報錯。但是,除了字串會以陣列形式,拷貝入目標物件,其他值都不會產生效果。 下面程式碼中,v1、v2、v3分別是字串、布林值和數值,結果只有字串合入目標物件(以字元陣列的形式),數值和布林值都會被忽略。這是因為只有字串的包裝物件,會產生可列舉屬性。
var v1 = 'abc';
var v2 = true;
var v3 = 10;
var obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
// //Object.assign拷貝的屬性是有限制的,只拷貝源物件的自身屬性(不拷貝繼承屬性),也不拷貝不可列舉的屬性(enumerable: false)。
Object.assign({b: 'c'},
Object.defineProperty({}, 'invisible', {
enumerable: false,
value: 'hello'
})
)
{ b: 'c' }
上面程式碼中,Object.assign要拷貝的物件只有一個不可列舉屬性invisible,這個屬性並沒有被拷貝進去。 屬性名為Symbol值的屬性,也會被Object.assign拷貝。
Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
{ a: 'b', Symbol(c): 'd' }