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)
