ES7+ES8學習筆記

Object.entries()

1：作用

作用：將一個對象中可枚舉屬性的鍵名和鍵值按照二維數組的方式返回。
若對象是數組，則會將數組的下標作爲鍵值返回。

Object.entries({ one: 1, two: 2 })    //[['one', 1], ['two', 2]]
Object.entries([1, 2])                //[['0', 1], ['1', 2]]

2：要點
1.若是鍵名是Symbol，編譯時會被自動忽略

Object.entries({[Symbol()]:1, two: 2})  //[['two', 2]]

2.entries()返回的數組順序和for循環一樣，即如果對象的key值是數字，則返回值會對key值進行排序，返回的是排序後的結果

Object.entries({ 3: 'a', 4: 'b', 1: 'c' })    //[['1', 'c'], ['3', 'a'], ['4', 'b']]

3.利用Object.entries()創建一個真正的Map

	var obj = { foo: 'bar', baz: 42 };
    
    var map1 = new Map([['foo', 'bar'], ['baz', 42]]); //原本的創建方式
    var map2 = new Map(Object.entries(obj));    //等同於map1

    console.log(map1);// Map { foo: "bar", baz: 42 }
    console.log(map2);// Map { foo: "bar", baz: 42 }

3：自定義Object.entries()
Object.entries的原理其實就是將對象中的鍵名和值分別取出來然後推進同一個數組中

	//自定義entries()
    var obj = { foo: 'bar', baz: 42 };
    function myEntries(obj) {
        var arr = []
        for (var key of Object.keys(obj)) {
            arr.push([key, obj[key]])
        }
        return arr
    }
    console.log(myEntries(obj))
    
    //Generator版本
    function* genEntryies(obj) {
        for (let key of Object.keys(obj)) {
            yield [key, obj[key]]
        }
    }
    var entryArr = genEntryies(obj);
    console.log(entryArr.next().value) //["foo", "bar"]
    console.log(entryArr.next().value) //["baz", 42]

Object.values()

作用

作用：只返回自己的鍵值對中屬性的值。它返回的數組順序，也跟Object.entries()保持一致

Object.values({ one: 1, two: 2 })            //[1, 2]
Object.values({ 3: 'a', 4: 'b', 1: 'c' })    //['c', 'a', 'b']

與Object.keys()比較

ES6中的Object.keys()返回的是鍵名

	var obj = { foo: 'bar', baz: 42 };
    console.log(Object.keys(obj)) //["foo", "baz"]
    console.log(Object.values(obj)) //["bar", 42]
    
    //Object.keys()的作用就類似於for...in
    function myKeys() {
        let keyArr = []
        for (let key in obj1) {
            keyArr.push(key)
            console.log(key)
        }
        return keyArr
    }
    console.log(myKeys(obj1)) //["foo", "baz"]

entries()、values()總結

	var obj = { foo: 'bar', baz: 42 };
    console.log(Object.keys(obj)) //["foo", "baz"]
    console.log(Object.values(obj)) //["bar", 42]
    console.log(Object.entries(obj)) //[["foo", "bar"], ["baz", 42]]

字符串填充

padStart()和padEnd()

字符串填充padStart()和padEnd()

用法
String.padStart(targetLength, padding)
參數：字符串目標長度和填充字段

'Vue'.padStart(10)           //'       Vue'
'React'.padStart(10)         //'     React'
'JavaScript'.padStart(10)    //'JavaScript'

要點
填充函數只有在字符長度小於目標長度時纔有效,而且目標長度如果小於字符串本身長度時，字符串也不會做截斷處理，只會原樣輸出

'Vue'.padEnd(10, '_*')           //'Vue_*_*_*_'
'React'.padEnd(10, 'Hello')      //'ReactHello'
'JavaScript'.padEnd(10, 'Hi')    //'JavaScript'
'JavaScript'.padEnd(8, 'Hi')     //'JavaScript'

後語

摘自Javascript之ES7詳解