javascript學習總結之Object.keys()方法詳解

時間 2019-11-05

標籤 javascript 學習總結 object.keys object keys 方法詳解欄目 JavaScript 简体版

原文原文鏈接

1、官方解釋

Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in 循環遍歷該對象時返回的順序一致。若是對象的鍵-值都不可枚舉，那麼將返回由鍵組成的數組。javascript

2、語法

Object.keys(obj)
參數：要返回其枚舉自身屬性的對象
返回值：一個表示給定對象的全部可枚舉屬性的字符串數組

3、處理對象，返回可枚舉的屬性數組

<!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>

4、處理數組，返回索引值數組

<!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>

5、處理字符串，返回索引值數組

<!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>

6、實用技巧

<!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>

7、Object.values()和Object.keys()是相反的操做，把一個對象的值轉換爲數組

注意：在ES5裏，若是此方法的參數不是對象（而是一個原始值），那麼它會拋出 TypeError。在ES2015中，非對象的參數將被強制轉換爲一個對象html

Object.keys("foo");
// TypeError: "foo" is not an object (ES5 code)

Object.keys("foo");
// ["0", "1", "2"]                   (ES2015 code)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。