文章導讀：

這篇文章給大家講解在 ES5 中對象新增的兩個常用方法：defineProperty()，keys()，

這兩個方法可以讓我們更方便的操作對象，獲取對象屬性，賦值修改等等操作，最重要的是，這些方法可以讓我們設置無法修改對象屬性值，下面跟我一起了解一下吧！

一：Object.defineProperty() 

   Object.defineProperty() 可以用來定義對象的新屬性和修改屬性值，設置屬性值是否可修改（重點）等等，該方法共有三個參數(shù)

1.1 參數(shù)說明

Object.defineProperty( obj, prop, descriptor )

1.2 第三個參數(shù) descriptor 的說明

其參數(shù)以對象形式書寫，其內部有四個特性，例如修改值的操作，設置是否可重寫，設置是否可枚舉，是否可修改特性等等......

1.3 實際使用

1.3.1 writable 特性

writeable 特性可以設置一個屬性是否可被重寫，true 為可重寫，false 為不可重寫，使用 defineProperty 新添加的屬性默認為 false

    <script>
       var dog={
          'name':'旺財',
          'age':5
       }
       Object.defineProperty(dog,'sex',{
          value:'公',
          writable:false
       })
       dog.sex='母'    //更改屬性值看其是否改變
       console.log(dog);
    </script>

可以看到我們雖然更改了 sex 的值，但是打印結果沒有被更改 ，說明 writable ： false 屬性成功使其屬性值不能重寫，功能十分強大是不是！

注意事項：如果是使用 defineProperty 新添加的屬性，那么 writable 默認為 false 不可修改，如果是本身就有的屬性而去修改值，那其仍可以修改

1.3.2 enumerable 特性

enumerable 特性可以設置某個屬性是否可被枚舉，true 為可枚舉，false 為不可枚舉，使用 defineProperty 新添加的屬性默認為 false

    <script>
        var dog={
            'name':'旺財',
            'age':5
        }
        Object.defineProperty(dog,'sex',{
            value:'公',
            enumerable:false
        })
        console.log(Object.keys(dog));
    </script>

可以看到我們遍歷得不到設置過 enumerable：false 特性的屬性 sex，證明了 false 不可枚舉

注意事項：如果是使用 defineProperty 新添加的屬性，那么 enumerable 默認為 false 不可枚舉，如果是本身就有的屬性而去修改值，那其仍可以枚舉

1.3.3 configurable 特性

 configurable 特性可以設置某個屬性是否可被修改（刪除），true 為可修改，false 為不可修改，使用 defineProperty 新添加的屬性默認為 false

configurable 特性的參數(shù)只能設置一次，第二次設置會無效！！

    <script>
        var dog={
            'name':'旺財',
            'age':5,
        }
        Object.defineProperty(dog,'sex',{
            value:'公',
            configurable : false
        })
        delete dog.sex
        console.log(dog);
    </script>

可以看到我們刪除不了設置過 configurable：false 特性的屬性 sex，證明了 false 不可修改

注意事項：如果是使用 defineProperty 新添加的屬性，那么 configurable 默認為 false 不可修改，如果是本身就有的屬性而去修改值，那其仍可以修改

二：Object.keys()

keys() 可以用來獲取對象的屬性名，參數(shù)為要操作的對象名稱。其返回一個數(shù)組元素為屬性名的新數(shù)組（故需要定義一個數(shù)組去接收）

Object.keys( obj )

    <script>
        var dog={
            'name':'旺財',
            'age':5,
            'sex':'公'
        }
        var arr=Object.keys(dog)
        console.log(arr);
    </script>

成功返回了對象的屬性名稱 

到此這篇關于JavaScript 對象新增方法 defineProperty 與 keys 的使用說明的文章就介紹到這了,更多相關JS defineProperty與keys 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論