Object.keys()的用法示例詳解
Object.keys()的用法
Object.keys()的用法
作用：遍歷對(duì)象
返回結(jié)果：返回對(duì)象中每一項(xiàng)key的數(shù)組
例子1：
// 1. 定義一個(gè)對(duì)象
var obj = { 0:'熊大',1:'熊二',2:'光頭強(qiáng)' }
// 2. 使用Object.keys()方法
var keyValue = Object.keys(obj)
// 3. 打印結(jié)果
console.log(keyValue) // 得到是：["0","1","2"]例子2：
var obj2 = {'name':'a','list':{'a':'value1','b':'value2'},'num':13}
var keyValue2 = Object.keys(obj2)
console.log(keyValue2) // 得到是：["name","list","num"]也可以結(jié)合forEach來使用Object.keys(要遍歷的對(duì)象).forEach((v,i) => {})例子3：
Object.keys(obj2).forEach(function(key){
console.log(key, obj2[key]);
})
// 得到的是：name---a
// list---{a:"value",b:"value"}
// num----13 Object.keys()方法詳解
一、官方解釋
Object.keys() 方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和使用 for…in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致 。如果對(duì)象的鍵-值都不可枚舉，那么將返回由鍵組成的數(shù)組。
二、語(yǔ)法
Object.keys(obj)參數(shù)：要返回其枚舉自身屬性的對(duì)象返回值：一個(gè)表示給定對(duì)象的所有可枚舉屬性的字符串?dāng)?shù)組
三、處理對(duì)象，返回可枚舉的屬性數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()處理對(duì)象，返回可枚舉的屬性數(shù)組</title>
</head>
<body>
<script type="text/javascript">
let person={
name:'一只流浪的kk',
age:20,
eat:function(){}
}
console.log(Object.keys(person));// ['name','age','eat']
</script>
</body>
</html>
四、處理數(shù)組，返回索引值數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()處理數(shù)組，返回索引值數(shù)組</title>
</head>
<body>
<script type="text/javascript">
let arr=[1,2,3,4,5];
console.log(Object.keys(arr));//['0','1','2','3','4','5']
</script>
</body>
</html>
五、處理字符串，返回索引值數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()處理字符串，返回索引值數(shù)組</title>
</head>
<body>
<script type="text/javascript">
let str='hello';
console.log(Object.keys(str));//['0','1','2','3','4']
</script>
</body>
</html>
六、實(shí)用技巧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let person={
name:'一只流浪的kk',
age:18,
eat:function(){
}
}
Object.keys(person).map((key)=>{
person[key];//獲得屬性對(duì)應(yīng)的值，可以進(jìn)行其它處理
})
</script>
</body>
</html>七、Object.values()和Object.keys()是相反的操作，把一個(gè)對(duì)象的值轉(zhuǎn)換為數(shù)組
注意：在ES5里，如果此方法的參數(shù)不是對(duì)象（而是一個(gè)原始值），那么它會(huì)拋出 TypeError。在ES2015中，非對(duì)象的參數(shù)將被強(qiáng)制轉(zhuǎn)換為一個(gè)對(duì)象
Object.keys("foo");
// TypeError: "foo" is not an object (ES5 code)
Object.keys("foo");
// ["0", "1", "2"] (ES2015 code)到此這篇關(guān)于Object.keys()的用法的文章就介紹到這了,更多相關(guān)Object.keys()用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Mozilla中顯示textarea中選擇的文字...2006-09-09
TypeScript?中?omit?和?record?用法小結(jié)
TypeScript中Omit和Record工具類型可以組合使用實(shí)現(xiàn)靈活的類型操作,Record創(chuàng)建鍵為K、值為T的對(duì)象類型,Omit從T中移除指定鍵,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-05-05
詳解小程序之簡(jiǎn)單登錄注冊(cè)表單驗(yàn)證
這篇文章主要介紹了小程序之簡(jiǎn)單登錄注冊(cè)表單驗(yàn)證，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
使用JavaScript?+?HTML5?Canvas實(shí)現(xiàn)互動(dòng)愛心雨完整代碼
canvas是HTML5中推出的新功能,可以在頁(yè)面上生成一個(gè)畫布,使用js可以在畫布上繪制一些圖形,這篇文章主要介紹了使用JavaScript?+?HTML5?Canvas實(shí)現(xiàn)互動(dòng)愛心雨的相關(guān)資料,需要的朋友可以參考下2025-03-03
select由左邊框移動(dòng)到右邊，下面有個(gè)不錯(cuò)的示例，大家可以參考下2013-12-12
全面了解構(gòu)造函數(shù)繼承關(guān)鍵apply call
下面小編就為大家?guī)硪黄媪私鈽?gòu)造函數(shù)繼承關(guān)鍵apply call。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
JavaScript實(shí)現(xiàn)頁(yè)面實(shí)時(shí)顯示當(dāng)前時(shí)間的簡(jiǎn)單實(shí)例
這篇文章介紹了頁(yè)面實(shí)時(shí)顯示當(dāng)前時(shí)間的簡(jiǎn)單實(shí)例，有需要的朋友可以參考需要2013-07-07
這篇文章主要介紹了JavaScript操作表單實(shí)例講解(上)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JS實(shí)現(xiàn)遮罩層效果的簡(jiǎn)單實(shí)例
這篇文章介紹了JS實(shí)現(xiàn)遮罩層效果的簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下2013-11-11
這篇文章主要為大家詳細(xì)介紹了laydate時(shí)間日歷插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11