js裏面Object的一些方法

時間 2020-06-29

原文原文鏈接

一、Object.freeze()javascript

阻止修改現有屬性的特性和值，並阻止添加新屬性
兩種用法：Object.freeze( { } ) 和 Object.freeze( object )html

<script type="text/javascript"> let a = {}; a.sex = '男'; console.log(a.sex, 111);//男 111
 Object.freeze(a); a.sex = '女'; console.log(a.sex, 222);//男 222 修改屬性無效
</script>
<script type="text/javascript"> let b = Object.freeze({ name: "piter", age: 10 }); console.log(b.name,333); //piter 333
    b.name = "bob"; console.log(b.name,444); //piter 444 修改屬性無效
</script>

二、Object.assign(target,source1,source2,...)java

該方法主要用於對象的合併，將源對象source的全部可枚舉屬性合併到目標對象target上,此方法只拷貝源對象的自身屬性，不拷貝繼承的屬性。
Object.assign方法實行的是淺拷貝，而不是深拷貝。也就是說，若是源對象某個屬性的值是對象，那麼目標對象拷貝獲得的是這個對象的引用。同名屬性會替換。
Object.assign只能進行值的複製，若是要複製的值是一個取值函數，那麼將求值後再複製。
Object.assign能夠用來處理數組，可是會把數組視爲對象。數組

<script type="text/javascript"> let target = { age: 10, page: 1 }; let objA = { age: 12, year: 20, newObj: { sex: '男' } }; Object.assign(target, objA); console.log(target, '拷貝以後') // {
    // age:12,
    // newObj: {
    // sex: '女'
    // },
    // page: 1
    // year: 20,
    // } 
    //拷貝以後
    // 同名屬性會被覆蓋
    target.newObj.sex = '女'; // 拷貝爲對象引用
    console.log(target.newObj.sex, '修改拷貝後對象裏面的屬性') //女 修改拷貝後對象裏面的屬性

    function Person() { this.name = 'bob' }; Person.prototype.age = 20; let man = new Person(); man.age = 29; let obj = { sex: '男' }; Object.assign(obj, man); console.log(obj, '構造函數拷貝後的屬性===') //{sex: "男", name: "bob", age: 29} "構造函數拷貝後的屬性==="
    // 只能拷貝自身的屬性，不能拷貝prototype
 Object.assign([1, 2, 3], [4, 5]) console.log(Object.assign([1, 2, 3], [4, 5]), '數組使用該方法===') // [4, 5, 3]
    // 把數組看成對象來處理
</script>

三、Object.create() --- Object.create(prototype[,propertiesObject]) 和 new Object()的區別
Object.create(null) 建立的對象是一個空對象，在該對象上沒有繼承 Object.prototype 原型鏈上的屬性或者方法,例如：toString(), hasOwnProperty()等方法
Object.create()方法接受兩個參數:Object.create(obj,propertiesObject) ;
propertiesObject：可選。該參數對象是一組屬性與值，該對象的屬性名稱將是新建立的對象的屬性名稱，值是屬性描述符（這些屬性描述符的結構與Object.defineProperties()的第二個參數同樣）。注意：該參數對象不能是 undefined，另外只有該對象中自身擁有的可枚舉的屬性纔有效，也就是說該對象的原型鏈上屬性是無效的。函數

<script type="text/javascript">
    var o = Object.create(Object.prototype, { // foo會成爲所建立對象的---數據屬性
 foo: { enumerable:false,//對象屬性是否可經過for-in循環，flase爲不可循環，默認值爲true
            writable: true,////對象屬性是否可修改,flase爲不可修改，默認值爲true
            configurable: true,////可否使用delete、可否需改屬性特性、或可否修改訪問器屬性、，false爲不可從新定義，默認值爲true
            value: "goodnice" }, // bar會成爲所建立對象的 ---訪問器屬性
 bar: { configurable: false, get: function() { return 10 }, set: function(value) { console.log("Setting `o.bar` to", value); } } }); console.log(o, '對象'); //{foo:'goodnice'}
    var test = Object.create(null); console.log(test); // {} No Properties
    //也就是在對象自己不存在屬性跟方法，原型鏈上也不存在屬性和方法;
</script>

四、Object.defineProperties(obj,props)測試

直接在一個對象上定義新的屬性或修改現有屬性，並返回該對象。this

<script type="text/javascript">
var obj = {}; Object.defineProperties(obj, { 'property1': { value: true, writable: true }, 'property2': { value: 'Hello,word', writable: false } }); console.log(obj) // {property1: true, property2: "Hello,word"}
</script>

四、Object.defineProperty(obj,prop,descriptor)spa

obj---須要定義屬性的對象；
prop---需定義或修改的屬性的名字；
descriptor---將被定義或修改的屬性的描述符；prototype

在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，並返回這個對象。code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
        <div id="test">這是一個測試</div>
        <script>
            var test = document.getElementById("test"); var data = {}; var i = 0; Object.defineProperty(data, "b", { set: function(newValue) { //當data.b的值改變的時候更新＃test的視圖 
 test.textContent = newValue; }, get: function() {} }); setInterval(function() { i++; data["b"] = "data.b的值更新了，視圖更新" + i; }, 1000); </script>
    </body>
</html>

configurable
當且僅當該屬性的 configurable 爲 true 時，該屬性描述符纔可以被改變，也可以被刪除。默認爲 false。

enumerable
當且僅當該屬性的 enumerable 爲 true 時，該屬性纔可以出如今對象的枚舉屬性中。默認爲 false。
數據描述符同時具備如下可選鍵值：

value
該屬性對應的值。能夠是任何有效的 JavaScript 值（數值，對象，函數等）。默認爲 undefined。

writable
當且僅當該屬性的 writable 爲 true 時，該屬性才能被賦值運算符改變。默認爲 false。

存取描述符（第三個參數對象）同時具備如下可選鍵值：

get
一個給屬性提供 getter 的方法，若是沒有 getter 則爲undefined。當咱們讀取某個屬性的時候，實際上是在對象內部調用了該方法，此方法必需要有return語句。該方法返回值被用做屬性值。默認爲 undefined。

set
一個給屬性提供 setter 的方法，若是沒有 setter 則爲 undefined。該方法將接受惟一參數，並將該參數的新值分配給該屬性。默認爲 undefined。也就是說，當咱們設置某個屬性的時候，其實是在對象的內部調用了該方法。
要注意的一點是：在 descriptor 中不能同時設置訪問器（get 和 set）和 wriable 或 value，不然會錯，就是說想用 get 和 set，就不能用 writable 或 value 中的任何一個。

五、hasOwnProperty()
判斷對象自身屬性中是否具備指定的屬性。

obj.hasOwnProperty('name')

六、Object.getOwnPropertyDescriptor(obj,prop)

返回指定對象上一個自有屬性對應的屬性描述符。（自有屬性指的是直接賦予該對象的屬性，不須要從原型鏈上進行查找的屬性）

若是指定的屬性存在於對象上，則返回其屬性描述符對象（property descriptor），不然返回 undefined。

七、Object.getOwnPropertyDescriptors(obj)

獲取一個對象的全部自身屬性的描述符。

<script>
    var obj = { name: 'bob', age: 18 } console.log(Object.getOwnPropertyDescriptors(obj)) </script>

八、Object.getOwnPropertyNames()

返回一個由指定對象的全部自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值做爲名稱的屬性）組成的數組。

<script>
    var obj = { age: 10, sex: "男", name: "bob" }; Object.getOwnPropertyNames(obj).forEach(function(val) { console.log(val,'遍歷的值');// age sex name 拿到的是實際是對象的鍵key
 }); var obj = { x: 1, y: 2 } Object.defineProperty(obj, 'z', { enumerable: false }) console.log(Object.getOwnPropertyNames(obj)) // ["x", "y", "z"] 包含不可枚舉屬性 。
    console.log(Object.keys(obj)) // ["x", "y"] 只包含可枚舉屬性 。
</script>

九、Object.is()
判斷兩個值是否相同。
若是下列任何一項成立，則兩個值相同：
兩個值都是 undefined
兩個值都是 null
兩個值都是 true 或者都是 false
兩個值是由相同個數的字符按照相同的順序組成的字符串
兩個值指向同一個對象
兩個值都是數字而且
都是正零 +0
都是負零 -0
都是 NaN
都是除零和 NaN 外的其它同一個數字

<script> Object.is('foo', 'foo'); console.log(Object.is('foo', 'foo'))// true
 Object.is(window, window); console.log(Object.is(window, window))// true
    Object.is('foo', 'bar'); console.log(Object.is('foo', 'bar'))// false
 Object.is([], []); console.log(Object.is([], []))// false
    var test = { a: 1 }; Object.is(test, test); console.log(Object.is(test, test))// true
    Object.is(null, null); console.log(Object.is(null, null))// true
    // 特例
    Object.is(0, -0); console.log(Object.is(0, -0))// false
    Object.is(-0, -0); console.log(Object.is(-0, -0))// true
    Object.is(NaN, 0 / 0); console.log(Object.is(NaN, 0 / 0))// true
</script>

十、Object.keys(obj)

返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in 循環遍歷該對象時返回的順序一致（二者的主要區別是一個 for-in 循環還會枚舉其原型鏈上的屬性）。

<script>
    let arr = ["a", "b", "c"];
    console.log(Object.keys(arr));
    //["0", "1", "2"]
    /* Object 對象 */
    let obj = {
            age: 20,
            sex: '男'
        },
    keys = Object.keys(obj);
    console.log(keys);
    //["age", "sex"]
</script>

十一、Object.values()

方法返回一個給定對象本身的全部可枚舉屬性值的數組，值的順序與使用for...in循環的順序相同 ( 區別在於 for-in 循環枚舉原型鏈中的屬性 )。

<script>
    var obj = {
        10: 'a',
        1: 'b',
        2: 'c'
    };
    console.log(Object.values(obj));
    // ['b', 'c', 'a']

    var obj1 = {
        0: 'a',
        1: 'b',
        2: 'c'
    };
    console.log(Object.values(obj1));
    // ['a', 'b', 'c']
</script>