es6 javascript對象Object.values() , Object.entries()示例詳解
1 Object.keys()
ES5 引入了Object.keys方法,返回一個(gè)數(shù)組,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷( enumerable )屬性的鍵名。
var obj = { foo: "bar", baz: 42 }; Object.keys(obj) // ["foo", "baz"]
目前, ES7 有一個(gè)提案,引入了跟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方法返回一個(gè)數(shù)組,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷( enumerable )屬性的鍵值。
var obj = { foo: "bar", baz: 42 }; Object.values(obj) // ["bar", 42]
返回?cái)?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方法的第二個(gè)參數(shù)添加的對象屬性(屬性p),如果不顯式聲明,默認(rèn)是不可遍歷的。Object.values不會(huì)返回這個(gè)屬性。
Object.values會(huì)過濾屬性名為 Symbol 值的屬性。 Object.values({ [Symbol()]: 123, foo: 'abc' }); // ['abc']
如果Object.values方法的參數(shù)是一個(gè)字符串,會(huì)返回各個(gè)字符組成的一個(gè)數(shù)組。
Object.values('foo') // ['f', 'o', 'o']
上面代碼中,字符串會(huì)先轉(zhuǎn)成一個(gè)類似數(shù)組的對象。字符串的每個(gè)字符,就是該對象的一個(gè)屬性。因此,Object.values返回每個(gè)屬性的鍵值,就是各個(gè)字符組成的一個(gè)數(shù)組。
如果參數(shù)不是對象,Object.values會(huì)先將其轉(zhuǎn)為對象。由于數(shù)值和布爾值的包裝對象,都不會(huì)為實(shí)例添加非繼承的屬性。所以,Object.values會(huì)返回空數(shù)組。
Object.values(42) // [] Object.values(true) // []
3 Object.entries
Object.entries方法返回一個(gè)數(shù)組,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷( enumerable )屬性的鍵值對數(shù)組。
var obj = { foo: 'bar', baz: 42 }; Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]
除了返回值不一樣,該方法的行為與Object.values基本一致。
如果原對象的屬性名是一個(gè) Symbol 值,該屬性會(huì)被省略。
Object.entries({ [Symbol()]: 123, foo: 'abc' }); // [ [ 'foo', 'abc' ] ]
上面代碼中,原對象有兩個(gè)屬性,Object.entries只輸出屬性名非 Symbol 值的屬性。將來可能會(huì)有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方法的一個(gè)用處是,將對象轉(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 }
自己實(shí)現(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時(shí)間組件在火狐瀏覽器下有多時(shí)間輸入框時(shí)只能給第一個(gè)輸入框賦值的解決方法
這篇文章主要介紹了Laydate時(shí)間組件在火狐瀏覽器下有多時(shí)間輸入框時(shí)只能給第一個(gè)輸入框賦值的解決方法,需要的朋友可以參考下2016-08-08JS實(shí)現(xiàn)雙擊編輯可修改狀態(tài)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)雙擊編輯可修改狀態(tài)的方法,涉及javascript針對頁面元素的動(dòng)態(tài)創(chuàng)建及設(shè)置技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-0818個(gè)JavaScript編寫簡潔高效代碼的技巧分享
在這篇文章中,小編將和大家分享18個(gè)JavaScript技巧,以及一些你應(yīng)該知道的示例代碼,以編寫簡潔高效的代碼,感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2024-01-01JavaScript實(shí)現(xiàn)可拖拽的拖動(dòng)層Div實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)可拖拽的拖動(dòng)層Div的方法,拖拽頁面中的div塊可實(shí)現(xiàn)div塊按照拖動(dòng)軌跡移動(dòng)的效果,涉及javascript鼠標(biāo)事件、頁面元素樣式結(jié)合事件函數(shù)動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-08-08