【前端基础进阶】JS-Object 功能详解
Object.assign(target,source1,source2,...)
該方法主要用于對象的合并，將源對象source的所有可枚舉屬性合并到目標(biāo)對象target上,此方法只拷貝源對象的自身屬性，不拷貝繼承的屬性。
Object.assign方法實行的是淺拷貝，而不是深拷貝。也就是說，如果源對象某個屬性的值是對象，那么目標(biāo)對象拷貝得到的是這個對象的引用。同名屬性會替換。
Object.assign只能進行值的復(fù)制，如果要復(fù)制的值是一個取值函數(shù)，那么將求值后再復(fù)制。
Object.assign可以用來處理數(shù)組，但是會把數(shù)組視為對象。
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}} // 同名屬性會被覆蓋 // source {x : 1, z : 2, fn : {number : 1}} target.fn.number = 2; // 拷貝為對象引用 // 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} // 只能拷貝自身的屬性，不能拷貝prototypeObject.assign([1, 2, 3], [4, 5]) // 把數(shù)組當(dāng)作對象來處理 // [4, 5, 3]Object.create(prototype[,propertiesObject])
使用指定的原型對象及其屬性去創(chuàng)建一個新的對象
var parent = {x : 1,y : 1 } var child = Object.create(parent,{z : { // z會成為創(chuàng)建對象的屬性writable:true,configurable:true,value: "newAdd"} }); console.log(child)
Object.defineProperties(obj,props)
直接在一個對象上定義新的屬性或修改現(xiàn)有屬性，并返回該對象。
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)
在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性， 并返回這個對象。
Object.defineProperty(obj, 'is', {value: function(x, y) {if (x === y) {// 針對+0 不等于 -0的情況return x !== 0 || 1 / x === 1 / y;}// 針對NaN的情況return x !== x && y !== y;},configurable: true, //是否可刪除enumerable: false, //是否可forin枚舉writable: true //是否為只讀 }); console.log(obj)// 注意不能同時設(shè)置(writable，value) 和 get，set方法，否則瀏覽器會報錯 ： Invalid property descriptor. Cannot both specify accessors and a value or writable attributeObject.getOwnPropertyDescriptor()
功能:
該方法返回指定對象上一個自有屬性對應(yīng)的屬性描述符。（自有屬性指的是直接賦予該對象的屬性，不需要從原型鏈上進行查找的屬性）
語法: Object.getOwnPropertyDescriptor(obj, prop)
obj: 需要查找的目標(biāo)對象
prop: 目標(biāo)對象內(nèi)屬性名稱
ps
Object的defineProperty和defineProperties這兩個方法在js中的重要性十分重要，主要功能就是用來定義或修改這些內(nèi)部屬性,與之相對應(yīng)的getOwnPropertyDescriptor和getOwnPropertyDescriptors就是獲取這行內(nèi)部屬性的描述。例如
在對象中添加存取描述符屬性 var obj = {}; var aValue; //如果不初始化變量, 不給下面的a屬性設(shè)置值,直接讀取會報錯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)讀取屬性值時，調(diào)用get方法,返回undefined obj.a = 2; // 當(dāng)設(shè)置屬性值時,調(diào)用set方法,aValue為2console.log(obj.a) // 2 讀取屬性值,調(diào)用get方法,此時aValue為2 console.log(b) // 3 再給obj.a賦值時,執(zhí)行set方法,b的值被修改為2,額外說一句,vue中的計算屬性就是利用setter來實現(xiàn)的vue的核心正是如此
簡易的數(shù)據(jù)雙向綁定html代碼:
<body><p>input1=><input type="text" id="input1"></p><p>input2=><input type="text" id="input2"></p><div>我每次比input1的值加1=><span id="span"></span></div> </body> 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)
返回一個由一個給定對象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和使用 for...in 循環(huán)遍歷該對象時返回的順序一致 （兩者的主要區(qū)別是 一個 for-in 循環(huán)還會枚舉其原型鏈上的屬性）。
let arr = ["a", "b", "c"]; console.log(Object.keys(arr)); // ['0', '1', '2']/* Object 對象 */ let obj = { foo: "bar", baz: 42 },keys = Object.keys(obj); console.log(keys); // ["foo","baz"]Object.values()
方法返回一個給定對象自己的所有可枚舉屬性值的數(shù)組，值的順序與使用for...in循環(huán)的順序相同 ( 區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性 )。
Object.values會過濾屬性名為 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()
返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組，其排列與使用 for...in 循環(huán)遍歷該對象時返回的順序一致（區(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() 判斷對象自身屬性中是否具有指定的屬性。obj.hasOwnProperty('name')
Object.getOwnPropertyDescriptor(obj,prop)
返回指定對象上一個自有屬性對應(yīng)的屬性描述符。（自有屬性指的是直接賦予該對象的屬性，不需要從原型鏈上進行查找的屬性）.
如果指定的屬性存在于對象上，則返回其屬性描述符對象（property descriptor），否則返回 undefined。
var arr = ['name','age'] ; arr.forEach(val => console.log(Object.getOwnPropertyDescriptor(obj,val)))// {value: "js", writable: true, enumerable: true, configurable: true} // undefinedObject.getOwnPropertyDescriptors(obj)
獲取一個對象的所有自身屬性的描述符。
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()
返回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括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()
返回一個給定對象自身的所有 Symbol 屬性的數(shù)組。
Object.getPrototypeOf()
返回指定對象的原型（內(nèi)部[[Prototype]]屬性的值，即__proto__，而非對象的prototype）。
Object.isPrototypeOf()
判斷一個對象是否存在于另一個對象的原型鏈上。
Object.setPrototypeOf(obj,prototype)
設(shè)置對象的原型對象
Object.is()
判斷兩個值是否相同。
如果下列任何一項成立，則兩個值相同：
兩個值都是 undefined
兩個值都是 null
兩個值都是 true 或者都是 false
兩個值是由相同個數(shù)的字符按照相同的順序組成的字符串
兩個值指向同一個對象
兩個值都是數(shù)字并且
都是正零 +0
都是負(fù)零 -0
都是 NaN
都是除零和 NaN 外的其它同一個數(shù)字
Object.freeze()
凍結(jié)一個對象，凍結(jié)指的是不能向這個對象添加新的屬性，不能修改其已有屬性的值，不能刪除已有屬性，以及不能修改該對象已有屬性的可枚舉性、可配置性、可寫性。也就是說，這個對象永遠是不可變的。該方法返回被凍結(jié)的對象。
var obj = {prop: function() {},foo: 'bar' };// 新的屬性會被添加, 已存在的屬性可能 // 會被修改或移除 obj.foo = 'baz'; obj.lumpy = 'woof'; delete obj.prop;// 作為參數(shù)傳遞的對象與返回的對象都被凍結(jié) // 所以不必保存返回的對象（因為兩個對象全等） var o = Object.freeze(obj);o === obj; // true Object.isFrozen(obj); // === true// 現(xiàn)在任何改變都會失效 obj.foo = 'quux'; // 靜默地不做任何事 // 靜默地不添加此屬性 obj.quaxxor = 'the friendly duck'; console.log(obj)Object.isFrozen()
判斷一個對象是否被凍結(jié) .
Object.preventExtensions()
對象不能再添加新的屬性?？尚薷?#xff0c;刪除現(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()
判斷對象是否是可擴展的，Object.preventExtensions，Object.seal 或 Object.freeze 方法都可以標(biāo)記一個對象為不可擴展（non-extensible）
Object.seal()
Object.seal() 方法可以讓一個對象密封，并返回被密封后的對象。密封一個對象會讓這個對象變的不能添加新屬性，且所有已有屬性會變的不可配置。屬性不可配置的效果就是屬性變的不可刪除，以及一個數(shù)據(jù)屬性不能被重新定義成為訪問器屬性，或者反之。但屬性的值仍然可以修改。嘗試刪除一個密封對象的屬性或者將某個密封對象的屬性從數(shù)據(jù)屬性轉(zhuǎn)換成訪問器屬性，結(jié)果會靜默失敗或拋出TypeError 異常. 不會影響從原型鏈上繼承的屬性。但 proto ( ) 屬性的值也會不能修改。
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);// 仍然可以修改密封對象上的屬性的值. obj.foo = "quux";// 但你不能把一個數(shù)據(jù)屬性重定義成訪問器屬性. Object.defineProperty(obj, "foo", { get: function() { return "g"; } }); // 拋出TypeError異常// 現(xiàn)在,任何屬性值以外的修改操作都會失敗. obj.quaxxor = "the friendly duck"; // 靜默失敗,新屬性沒有成功添加 delete obj.foo; // 靜默失敗,屬性沒有刪除成功// ...在嚴(yán)格模式中,會拋出TypeError異常 function fail() {"use strict";delete obj.foo; // 拋出TypeError異常obj.sparky = "arf"; // 拋出TypeError異常 } fail();// 使用Object.defineProperty方法同樣會拋出異常 Object.defineProperty(obj, "ohai", { value: 17 }); // 拋出TypeError異常 Object.defineProperty(obj, "foo", { value: "eit" }); // 成功將原有值改變Object.isSealed()
判斷一個對象是否被密封
總結(jié)
以上是生活随笔為你收集整理的【前端基础进阶】JS-Object 功能详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c++的进制转换函数
- 下一篇： js怎么获取一个元素与屏幕右边的距离_j