es6 javascript對象Object.values() , Object.entries()示例詳解
1 Object.keys()
ES5 引入了Object.keys方法,返回一個數(shù)組,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷( enumerable )屬性的鍵名。
var obj = { foo: "bar", baz: 42 }; Object.keys(obj) // ["foo", "baz"]
目前, ES7 有一個提案,引入了跟Object.keys配套的Object.values和Object.entries。
let {keys, values, entries} = Object; let obj = { a: 1, b: 2, c: 3 }; for (let key of keys(obj)) { console.log(key); // 'a', 'b', 'c' } for (let value of values(obj)) { console.log(value); // 1, 2, 3 } for (let [key, value] of entries(obj)) { console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3] }
2 Object.values()
Object.values方法返回一個數(shù)組,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷( enumerable )屬性的鍵值。
var obj = { foo: "bar", baz: 42 }; Object.values(obj) // ["bar", 42]
返回數(shù)組的成員順序,與本章的《屬性的遍歷》部分介紹的排列規(guī)則一致。
var obj = { 100: 'a', 2: 'b', 7: 'c' }; Object.values(obj) // ["b", "c", "a"]
上面代碼中,屬性名為數(shù)值的屬性,是按照數(shù)值大小,從小到大遍歷的,因此返回的順序是b、c、a。
Object.values只返回對象自身的可遍歷屬性。
var obj = Object.create({}, {p: {value: 42}}); Object.values(obj) // []
上面代碼中,Object.create方法的第二個參數(shù)添加的對象屬性(屬性p),如果不顯式聲明,默認是不可遍歷的。Object.values不會返回這個屬性。
Object.values會過濾屬性名為 Symbol 值的屬性。 Object.values({ [Symbol()]: 123, foo: 'abc' }); // ['abc']
如果Object.values方法的參數(shù)是一個字符串,會返回各個字符組成的一個數(shù)組。
Object.values('foo') // ['f', 'o', 'o']
上面代碼中,字符串會先轉(zhuǎn)成一個類似數(shù)組的對象。字符串的每個字符,就是該對象的一個屬性。因此,Object.values返回每個屬性的鍵值,就是各個字符組成的一個數(shù)組。
如果參數(shù)不是對象,Object.values會先將其轉(zhuǎn)為對象。由于數(shù)值和布爾值的包裝對象,都不會為實例添加非繼承的屬性。所以,Object.values會返回空數(shù)組。
Object.values(42) // [] Object.values(true) // []
3 Object.entries
Object.entries方法返回一個數(shù)組,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷( enumerable )屬性的鍵值對數(shù)組。
var obj = { foo: 'bar', baz: 42 }; Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]
除了返回值不一樣,該方法的行為與Object.values基本一致。
如果原對象的屬性名是一個 Symbol 值,該屬性會被省略。
Object.entries({ [Symbol()]: 123, foo: 'abc' }); // [ [ 'foo', 'abc' ] ]
上面代碼中,原對象有兩個屬性,Object.entries只輸出屬性名非 Symbol 值的屬性。將來可能會有Reflect.ownEntries()方法,返回對象自身的所有屬性。
Object.entries的基本用途是遍歷對象的屬性。
for (let [k, v] of Object.entries(obj)) { console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`); } // "one": 1 // "two": 2
Object.entries方法的一個用處是,將對象轉(zhuǎn)為真正的Map結(jié)構(gòu)。
var obj = { foo: 'bar', baz: 42 }; var map = new Map(Object.entries(obj)); map // Map { foo: "bar", baz: 42 }
自己實現(xiàn)Object.entries方法,非常簡單。
function* entries(obj) { for (let key of Object.keys(obj)) { yield [key, obj[key]]; } } // 非 Generator 函數(shù)的版本 function entries(obj) { let arr = []; for (let key of Object.keys(obj)) { arr.push([key, obj[key]]); } return arr; }
到此這篇關(guān)于es6 javascript對象Object.values() , Object.entries()的文章就介紹到這了,更多相關(guān)es6 javascript對象Object.values()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在vs2010中調(diào)試javascript代碼方法
只在IE瀏覽器中測試成功了,在谷歌瀏覽中沒有測試成功,其他瀏覽器沒有測試。2011-02-02Laydate時間組件在火狐瀏覽器下有多時間輸入框時只能給第一個輸入框賦值的解決方法
這篇文章主要介紹了Laydate時間組件在火狐瀏覽器下有多時間輸入框時只能給第一個輸入框賦值的解決方法,需要的朋友可以參考下2016-08-08JavaScript實現(xiàn)可拖拽的拖動層Div實例
這篇文章主要介紹了JavaScript實現(xiàn)可拖拽的拖動層Div的方法,拖拽頁面中的div塊可實現(xiàn)div塊按照拖動軌跡移動的效果,涉及javascript鼠標事件、頁面元素樣式結(jié)合事件函數(shù)動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-08-08