當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

【前端基础进阶】JS-Object 功能详解

發布時間：2023/12/6 HTML 34 豆豆

生活随笔收集整理的這篇文章主要介紹了【前端基础进阶】JS-Object 功能详解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

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

Object.assign只能進行值的復制，如果要復制的值是一個取值函數，那么將求值后再復制。

Object.assign可以用來處理數組，但是會把數組視為對象。

Object.create(prototype[,propertiesObject])

使用指定的原型對象及其屬性去創建一個新的對象

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

Object.defineProperties(obj,props)

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

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)

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

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)// 注意不能同時設置(writable，value) 和 get，set方法，否則瀏覽器會報錯： Invalid property descriptor. Cannot both specify accessors and a value or writable attribute

Object.getOwnPropertyDescriptor()

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

語法: Object.getOwnPropertyDescriptor(obj, prop)
obj: 需要查找的目標對象
prop: 目標對象內屬性名稱

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

ps

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

例如

在對象中添加存取描述符屬性 var obj = {}; var aValue; //如果不初始化變量, 不給下面的a屬性設置值,直接讀取會報錯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, 當讀取屬性值時，調用get方法,返回undefined obj.a = 2; // 當設置屬性值時,調用set方法,aValue為2console.log(obj.a) // 2 讀取屬性值,調用get方法,此時aValue為2 console.log(b) // 3 再給obj.a賦值時,執行set方法,b的值被修改為2,額外說一句,vue中的計算屬性就是利用setter來實現的

vue的核心正是如此

簡易的數據雙向綁定

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)

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

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()

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

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()

返回一個給定對象自身可枚舉屬性的鍵值對數組，其排列與使用 for...in 循環遍歷該對象時返回的順序一致（區別在于 for-in 循環也枚舉原型鏈中的屬性）。

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)

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

如果指定的屬性存在于對象上，則返回其屬性描述符對象（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)

獲取一個對象的所有自身屬性的描述符。

Object.getOwnPropertyNames()

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

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

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

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

Object.setPrototypeOf(obj,prototype)
設置對象的原型對象

Object.is()

判斷兩個值是否相同。
如果下列任何一項成立，則兩個值相同：

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

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

Object.freeze()

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

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

Object.isFrozen()
判斷一個對象是否被凍結 .

Object.preventExtensions()
對象不能再添加新的屬性。可修改，刪除現有屬性，不能添加新屬性。

Object.isExtensible()

判斷對象是否是可擴展的，Object.preventExtensions，Object.seal 或 Object.freeze 方法都可以標記一個對象為不可擴展（non-extensible）

Object.seal()

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

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

總結

以上是生活随笔為你收集整理的【前端基础进阶】JS-Object 功能详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： c++的进制转换函数
下一篇： js怎么获取一个元素与屏幕右边的距离_j