【前端基礎(chǔ)進(jìn)階】JS-Object 功能詳解

tangr206 發(fā)布于2019-08-23 15:25 / 2736人閱讀

摘要：可以用來處理數(shù)組，但是會(huì)把數(shù)組視為對(duì)象。返回指定對(duì)象的原型內(nèi)部屬性的值，即，而非對(duì)象的。判斷一個(gè)對(duì)象是否存在于另一個(gè)對(duì)象的原型鏈上。該方法返回被凍結(jié)的對(duì)象。密封一個(gè)對(duì)象會(huì)讓這個(gè)對(duì)象變的不能添加新屬性，且所有已有屬性會(huì)變的不可配置。

Object.assign(target,source1,source2,...)

該方法主要用于對(duì)象的合并，將源對(duì)象source的所有可枚舉屬性合并到目標(biāo)對(duì)象target上,此方法只拷貝源對(duì)象的自身屬性，不拷貝繼承的屬性。
Object.assign方法實(shí)行的是淺拷貝，而不是深拷貝。也就是說，如果源對(duì)象某個(gè)屬性的值是對(duì)象，那么目標(biāo)對(duì)象拷貝得到的是這個(gè)對(duì)象的引用。同名屬性會(huì)替換。

Object.assign只能進(jìn)行值的復(fù)制，如果要復(fù)制的值是一個(gè)取值函數(shù)，那么將求值后再復(fù)制。

Object.assign可以用來處理數(shù)組，但是會(huì)把數(shù)組視為對(duì)象。

const target = {
    x : 0,
    y : 1
};
const source = {
    x : 1,
    z : 2 ,
    fn : {
        number : 1
    }
};
Object.assign(target, source);  
// target  {x : 1, y : 1, z : 2, fn : {number : 1}}    // 同名屬性會(huì)被覆蓋
// source  {x : 1, z : 2, fn : {number : 1}}
target.fn.number = 2;                                  // 拷貝為對(duì)象引用
// source  {x : 1, z : 2, fn : {number : 2}}
 
 
function Person(){
    this.name = 1
};
Person.prototype.country = "china";
let student = new Person();
student.age = 29 ;
const young = {insterst : "sport"};
Object.assign(young,student);
// young {instest : "sport" , age : 29, name: 1}               // 只能拷貝自身的屬性，不能拷貝prototype
 
 
Object.assign([1, 2, 3], [4, 5])                      // 把數(shù)組當(dāng)作對(duì)象來處理
// [4, 5, 3]

Object.create(prototype[,propertiesObject])

使用指定的原型對(duì)象及其屬性去創(chuàng)建一個(gè)新的對(duì)象

var parent = {
    x : 1,
    y : 1
}
var child = Object.create(parent,{
    z : {                           // z會(huì)成為創(chuàng)建對(duì)象的屬性
        writable:true,
        configurable:true,
        value: "newAdd"
    }
});
console.log(child)

Object.defineProperties(obj,props)

直接在一個(gè)對(duì)象上定義新的屬性或修改現(xiàn)有屬性，并返回該對(duì)象。

var obj = {};
Object.defineProperties(obj, {
  "property1": {
    value: true,
    writable: true
  },
  "property2": {
    value: "Hello",
    writable: false
  }
  // etc. etc.
});
console.log(obj)   // {property1: true, property2: "Hello"}

Object.defineProperty(obj,prop,descriptor)

在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性，并返回這個(gè)對(duì)象。

Object.defineProperty(obj, "is", {
  value: function(x, y) {
    if (x === y) {
      // 針對(duì)+0 不等于 -0的情況
      return x !== 0 || 1 / x === 1 / y;
    }
    // 針對(duì)NaN的情況
    return x !== x && y !== y;
  },
  configurable: true, //是否可刪除
  enumerable: false, //是否可forin枚舉
  writable: true //是否為只讀
}); 
console.log(obj)
 
// 注意不能同時(shí)設(shè)置(writable，value) 和 get，set方法，否則瀏覽器會(huì)報(bào)錯(cuò) ： Invalid property descriptor. Cannot both specify accessors and a value or writable attribute

Object.getOwnPropertyDescriptor()

功能:
該方法返回指定對(duì)象上一個(gè)自有屬性對(duì)應(yīng)的屬性描述符。（自有屬性指的是直接賦予該對(duì)象的屬性，不需要從原型鏈上進(jìn)行查找的屬性）

語法: Object.getOwnPropertyDescriptor(obj, prop)
obj: 需要查找的目標(biāo)對(duì)象
prop: 目標(biāo)對(duì)象內(nèi)屬性名稱

var person = {
    name: "張三",
    age: 18
}

var desc = Object.getOwnPropertyDescriptor(person, "name"); 
console.log(desc)  結(jié)果如下
// {
//     configurable: true,
//     enumerable: true,
//     writable: true,
//     value: "張三"
// }

Object的defineProperty和defineProperties這兩個(gè)方法在js中的重要性十分重要，主要功能就是用來定義或修改這些內(nèi)部屬性,與之相對(duì)應(yīng)的getOwnPropertyDescriptor和getOwnPropertyDescriptors就是獲取這行內(nèi)部屬性的描述。

例如

在對(duì)象中添加存取描述符屬性
var obj = {};
var aValue; //如果不初始化變量, 不給下面的a屬性設(shè)置值,直接讀取會(huì)報(bào)錯(cuò)aValue is not defined
var b;
Object.defineProperty(obj, "a", {
    configurable : true,
    enumerable : true,
    get: function() {
        return aValue
    },
    set: function(newValue) {
        aValue = newValue;
        b = newValue + 1
    }
})
console.log(b) // undefined
console.log(obj.a)  // undefined, 當(dāng)讀取屬性值時(shí)，調(diào)用get方法,返回undefined
obj.a = 2;  // 當(dāng)設(shè)置屬性值時(shí),調(diào)用set方法,aValue為2

console.log(obj.a) // 2  讀取屬性值,調(diào)用get方法,此時(shí)aValue為2
console.log(b) // 3  再給obj.a賦值時(shí),執(zhí)行set方法,b的值被修改為2,額外說一句,vue中的計(jì)算屬性就是利用setter來實(shí)現(xiàn)的

vue的核心正是如此

簡易的數(shù)據(jù)雙向綁定

html代碼:


    
        input1=>
    
    
        input2=>
        
    
    
        我每次比input1的值加1=>
        
    

js代碼:

var oInput1 = document.getElementById("input1");
var oInput2 = document.getElementById("input2");
var oSpan = document.getElementById("span");
var obj = {};
Object.defineProperties(obj, {
    val1: {
        configurable: true,
        get: function() {
            oInput1.value = 0;
            oInput2.value = 0;
            oSpan.innerHTML = 0;
            return 0
        },
        set: function(newValue) {
            oInput2.value = newValue;
            oSpan.innerHTML = Number(newValue) ? Number(newValue) : 0
        }
    },
    val2: {
        configurable: true,
        get: function() {
            oInput1.value = 0;
            oInput2.value = 0;
            oSpan.innerHTML = 0;
            return 0
        },
        set: function(newValue) {
            oInput1.value = newValue;
            oSpan.innerHTML = Number(newValue)+1;
        }
    }
})
oInput1.value = obj.val1;
oInput1.addEventListener("keyup", function() {
    obj.val1 = oInput1.value;
}, false)
oInput2.addEventListener("keyup", function() {
    obj.val2 = oInput2.value;
}, false)

Object.keys(obj)

返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致（兩者的主要區(qū)別是一個(gè) for-in 循環(huán)還會(huì)枚舉其原型鏈上的屬性）。

let arr = ["a", "b", "c"];
console.log(Object.keys(arr));
// ["0", "1", "2"]
 
/* Object 對(duì)象 */
let obj = { foo: "bar", baz: 42 },
    keys = Object.keys(obj);
console.log(keys);
// ["foo","baz"]

Object.values()

方法返回一個(gè)給定對(duì)象自己的所有可枚舉屬性值的數(shù)組，值的順序與使用for...in循環(huán)的順序相同 ( 區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性 )。

Object.values會(huì)過濾屬性名為 Symbol 值的屬性。

var an_obj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.values(an_obj)); // ["b", "c", "a"]
 
var obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.values(obj)); // ["a", "b", "c"]

Object.entries()

返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組，其排列與使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致（區(qū)別在于 for-in 循環(huán)也枚舉原型鏈中的屬性）。

const obj = { foo: "bar", baz: 42 };
console.log(Object.entries(obj)); // [ ["foo", "bar"], ["baz", 42] ]
 
const simuArray = { 0: "a", 1: "b", 2: "c" };
console.log(Object.entries(simuArray)); // [ ["0", "a"], ["1", "b"], ["2", "c"] ]

hasOwnProperty() 判斷對(duì)象自身屬性中是否具有指定的屬性。
obj.hasOwnProperty("name")

Object.getOwnPropertyDescriptor(obj,prop)

返回指定對(duì)象上一個(gè)自有屬性對(duì)應(yīng)的屬性描述符。（自有屬性指的是直接賦予該對(duì)象的屬性，不需要從原型鏈上進(jìn)行查找的屬性）.

如果指定的屬性存在于對(duì)象上，則返回其屬性描述符對(duì)象（property descriptor），否則返回 undefined。

var arr = ["name","age"] ;
arr.forEach(val => console.log(Object.getOwnPropertyDescriptor(obj,val)))
 
// {value: "js", writable: true, enumerable: true, configurable: true}
// undefined

Object.getOwnPropertyDescriptors(obj)

獲取一個(gè)對(duì)象的所有自身屬性的描述符。

var obj = {
    name : "js",
    age : 20
}
console.log(Object.getOwnPropertyDescriptors(obj))

const source = {
  set foo(value) {
    console.log(value);
  }
};
 
const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
Object.getOwnPropertyDescriptor(target2, "foo")
 
 
const obj = Object.create(
  some_obj,
  Object.getOwnPropertyDescriptors({
    foo: 123,
  })
);

Object.getOwnPropertyNames()

返回一個(gè)由指定對(duì)象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）組成的數(shù)組。

var obj = { 0: "a", 1: "b", 2: "c"};
 
Object.getOwnPropertyNames(obj).forEach(function(val) {
  console.log(val);
});
 
 
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"]      只包含可枚舉屬性 。

Object.getOwnPropertySymbols()
返回一個(gè)給定對(duì)象自身的所有 Symbol 屬性的數(shù)組。

Object.getPrototypeOf()
返回指定對(duì)象的原型（內(nèi)部[[Prototype]]屬性的值，即__proto__，而非對(duì)象的prototype）。

Object.isPrototypeOf()
判斷一個(gè)對(duì)象是否存在于另一個(gè)對(duì)象的原型鏈上。

Object.setPrototypeOf(obj,prototype)
設(shè)置對(duì)象的原型對(duì)象

Object.is()

判斷兩個(gè)值是否相同。
如果下列任何一項(xiàng)成立，則兩個(gè)值相同：

兩個(gè)值都是 undefined
兩個(gè)值都是 null
兩個(gè)值都是 true 或者都是 false
兩個(gè)值是由相同個(gè)數(shù)的字符按照相同的順序組成的字符串
兩個(gè)值指向同一個(gè)對(duì)象
兩個(gè)值都是數(shù)字并且
都是正零 +0
都是負(fù)零 -0
都是 NaN
都是除零和 NaN 外的其它同一個(gè)數(shù)字

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

Object.freeze()

凍結(jié)一個(gè)對(duì)象，凍結(jié)指的是不能向這個(gè)對(duì)象添加新的屬性，不能修改其已有屬性的值，不能刪除已有屬性，以及不能修改該對(duì)象已有屬性的可枚舉性、可配置性、可寫性。也就是說，這個(gè)對(duì)象永遠(yuǎn)是不可變的。該方法返回被凍結(jié)的對(duì)象。

var obj = {
  prop: function() {},
  foo: "bar"
};
 
// 新的屬性會(huì)被添加, 已存在的屬性可能
// 會(huì)被修改或移除
obj.foo = "baz";
obj.lumpy = "woof";
delete obj.prop;
 
// 作為參數(shù)傳遞的對(duì)象與返回的對(duì)象都被凍結(jié)
// 所以不必保存返回的對(duì)象（因?yàn)閮蓚€(gè)對(duì)象全等）
var o = Object.freeze(obj);
 
o === obj; // true
Object.isFrozen(obj); // === true
 
// 現(xiàn)在任何改變都會(huì)失效
obj.foo = "quux"; // 靜默地不做任何事
// 靜默地不添加此屬性
obj.quaxxor = "the friendly duck";
console.log(obj)

Object.isFrozen()
判斷一個(gè)對(duì)象是否被凍結(jié) .

Object.preventExtensions()
對(duì)象不能再添加新的屬性?？尚薷?，刪除現(xiàn)有屬性，不能添加新屬性。

var obj = {
    name :"lilei",
    age : 30 ,
    sex : "male"
}
 
obj = Object.preventExtensions(obj);
console.log(obj);    // {name: "lilei", age: 30, sex: "male"}
obj.name = "haha";
console.log(obj)     // {name: "haha", age: 30, sex: "male"}
delete obj.sex ;
console.log(obj);    // {name: "haha", age: 30}
obj.address  = "china";
console.log(obj)     // {name: "haha", age: 30}

Object.isExtensible()

判斷對(duì)象是否是可擴(kuò)展的，Object.preventExtensions，Object.seal 或 Object.freeze 方法都可以標(biāo)記一個(gè)對(duì)象為不可擴(kuò)展（non-extensible）

Object.seal()

Object.seal() 方法可以讓一個(gè)對(duì)象密封，并返回被密封后的對(duì)象。密封一個(gè)對(duì)象會(huì)讓這個(gè)對(duì)象變的不能添加新屬性，且所有已有屬性會(huì)變的不可配置。屬性不可配置的效果就是屬性變的不可刪除，以及一個(gè)數(shù)據(jù)屬性不能被重新定義成為訪問器屬性，或者反之。但屬性的值仍然可以修改。嘗試刪除一個(gè)密封對(duì)象的屬性或者將某個(gè)密封對(duì)象的屬性從數(shù)據(jù)屬性轉(zhuǎn)換成訪問器屬性，結(jié)果會(huì)靜默失敗或拋出TypeError 異常. 不會(huì)影響從原型鏈上繼承的屬性。但 proto ( ) 屬性的值也會(huì)不能修改。

var obj = {
    prop: function () {},
    foo: "bar"
  };
 
// 可以添加新的屬性,已有屬性的值可以修改,可以刪除
obj.foo = "baz";
obj.lumpy = "woof";
delete obj.prop;
 
var o = Object.seal(obj);
 
assert(o === obj);
assert(Object.isSealed(obj) === true);
 
// 仍然可以修改密封對(duì)象上的屬性的值.
obj.foo = "quux";
 
// 但你不能把一個(gè)數(shù)據(jù)屬性重定義成訪問器屬性.
Object.defineProperty(obj, "foo", { get: function() { return "g"; } }); // 拋出TypeError異常
 
// 現(xiàn)在,任何屬性值以外的修改操作都會(huì)失敗.
obj.quaxxor = "the friendly duck"; // 靜默失敗,新屬性沒有成功添加
delete obj.foo; // 靜默失敗,屬性沒有刪除成功
 
// ...在嚴(yán)格模式中,會(huì)拋出TypeError異常
function fail() {
  "use strict";
  delete obj.foo; // 拋出TypeError異常
  obj.sparky = "arf"; // 拋出TypeError異常
}
fail();
 
// 使用Object.defineProperty方法同樣會(huì)拋出異常
Object.defineProperty(obj, "ohai", { value: 17 }); // 拋出TypeError異常
Object.defineProperty(obj, "foo", { value: "eit" }); // 成功將原有值改變

Object.isSealed()
判斷一個(gè)對(duì)象是否被密封

云服務(wù)器 GPU云服務(wù)器 webrtc demo 功能詳解基礎(chǔ)大數(shù)據(jù)平臺(tái)功能前端基礎(chǔ) 前端基礎(chǔ)教程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102014.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

tangr206

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

震驚了！鴻蒙又多了一種開發(fā)方式Ets，讓更多的人趕上紅利！

閱讀 3168·2021-10-12 10:11
#大硬盤#AlphaVPS：2核/2G/1T HDD/3T流量/1Gbps/保加利亞/月付€5

閱讀 1877·2021-08-16 10:59
《CSS揭秘》-背景與邊框

閱讀 2886·2019-08-30 15:55
HTML拾遺

閱讀 1253·2019-08-30 14:19
使用Hexo+Github搭建屬于自己的博客

閱讀 2064·2019-08-29 17:03
mpvue的自定義組件中運(yùn)行$emit函數(shù)時(shí)輸入框光標(biāo)抖動(dòng)的解決辦法

閱讀 2499·2019-08-29 16:28
如何不花錢實(shí)現(xiàn)簡單的短信驗(yàn)證功能

閱讀 3246·2019-08-26 13:47
異步的JavaScript

閱讀 2917·2019-08-26 13:36

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

【前端基礎(chǔ)進(jìn)階】JS-Object 功能詳解

相關(guān)文章

**前端基礎(chǔ)進(jìn)階目錄**

**【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門**

關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

發(fā)表評(píng)論

0條評(píng)論

tangr206

男|高級(jí)講師

TA的文章

震驚了！鴻蒙又多了一種開發(fā)方式Ets，讓更多的人趕上紅利！

#大硬盤#AlphaVPS：2核/2G/1T HDD/3T流量/1Gbps/保加利亞/月付€5

《CSS揭秘》-背景與邊框

HTML拾遺

使用Hexo+Github搭建屬于自己的博客

mpvue的自定義組件中運(yùn)行$emit函數(shù)時(shí)輸入框光標(biāo)抖動(dòng)的解決辦法

如何不花錢實(shí)現(xiàn)簡單的短信驗(yàn)證功能

異步的JavaScript

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

【前端基礎(chǔ)進(jìn)階】JS-Object 功能詳解

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！