ES7+ES8學習筆記
阿新 • • 發佈:2018-12-24
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'