1. 程式人生 > >ES6語法詳解(二)

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