Object.keys方法詳解
阿新 • • 發佈：2019-10-11
一、官方解釋
Object.keys() 方法會返回一個由一個給定物件的自身可列舉屬性組成的陣列，陣列中屬性名的排列順序和使用 for...in 迴圈遍歷該物件時返回的順序一致 。如果物件的鍵-值都不可列舉，那麼將返回由鍵組成的陣列。
二、語法
Object.keys(obj)
引數：要返回其列舉自身屬性的物件
返回值：一個表示給定物件的所有可列舉屬性的字串陣列
三、處理物件，返回可列舉的屬性陣列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()處理物件，返回可列舉的屬性陣列</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>四、處理陣列，返回索引值陣列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()處理陣列，返回索引值陣列</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>五、處理字串，返回索引值陣列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()處理字串，返回索引值陣列</title>
</head>
<body>
<script type="text/javascript">
let str='hello';
console.log(Object.keys(str));//['0','1','2','3','4']
</script>
</body>
</html>六、實用技巧
<!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];//獲得屬性對應的值，可以進行其它處理
})
</script>
</body>
</html>
七、Object.values()和Object.keys()是相反的操作，把一個物件的值轉換為陣列
注意：在ES5裡，如果此方法的引數不是物件（而是一個原始值），那麼它會丟擲 TypeError。在ES2015中，非物件的引數將被強制轉換為一個物件
Object.keys("foo");
// TypeError: "foo" is not an object (ES5 code)
Object.keys("foo");
// ["0", "1", "2"] (ES2015 code)