js object常見方法總結


Object.keys方法

Object.keys方法是JavaScript中用於遍歷對象屬性的一個方法 。它傳入的參數是一個對象,返回的是一個數組,數組中包含的是該對象所有的屬性名。
如:

var cat= { 
name:’mini’, age:2, color:’yellow’, desc:”cute” } console.log(Object.keys(cat)); // ["name", "age", "color", "desc"] 

這里有一道關於Object.keys的題目

輸出對象中值大於2的key的數組

var data = {a: 1, b: 2, c: 3, d: 4}; Object.keys(data).filter(function(x) { return 1 ;}) 

期待輸出:[“c”,”d”]
請問1處填什么?

正確答案:1 :data[x]>2

Object.keys是es5中新增的方法,用來獲取對象自身所有的可枚舉的屬性名,但不包括原型中的屬性,然后返回一個由屬性名組成的數組。注意它同for..in一樣不能保證屬性按對象原來的順序輸出。
Object.getOwnPropertyNames也是es5中新增的方法,返回對象的所有自身屬性的屬性名(包括不可枚舉的屬性)組成的數組,但不會獲取原型鏈上的屬性。

Array.filter(function)對數組進行過濾返回符合條件的數組。

Object.values()方法

Object.values方法返回一個數組,成員是參數對象自身的(不含繼承的)所有可遍歷( enumerable )屬性的鍵值。

var obj = { foo: "bar", baz: 42 }; Object.values(obj) // ["bar", 42] 

返回數組的成員順序,屬性名為數值的屬性,是按照數值大小,從小到大遍歷的,因此返回的順序是b、c、a。Object.values只返回對象自身的可遍歷屬性。

var obj = { 100: 'a', 2: 'b', 7: 'c' }; Object.values(obj) // ["b", "c", "a"] 

如果Object.values方法的參數是一個字符串,會返回各個字符組成的一個數組。

Object.values('foo') // ['f', 'o', 'o'] 

上面代碼中,字符串會先轉成一個類似數組的對象。字符串的每個字符,就是該對象的一個屬性。因此,Object.values返回每個屬性的鍵值,就是各個字符組成的一個數組。
如果參數不是對象,Object.values會先將其轉為對象。由於數值和布爾值的包裝對象,都不會為實例添加非繼承的屬性。所以,Object.values會返回空數組。

Object.create()

Object.create()方法創建一個新對象,使用現有的對象來提供新創建的對象的__proto__。
語法
Object.create(proto, [propertiesObject])
參數
proto
新創建對象的原型對象。
propertiesObject
可選。如果沒有指定為 undefined,則是要添加到新創建對象的可枚舉屬性(即其自身定義的屬性,而不是其原型鏈上的枚舉屬性)對象的屬性描述符以及相應的屬性名稱。這些屬性對應Object.defineProperties()的第二個參數。
返回值
一個新對象,帶着指定的原型對象和屬性。
如:

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

Object.create()創建繼承

function A(){ this.a = 1; this.b = 2; } A.prototype.drive = function(){ console.log('drivvvvvvvvvv'); } //方式1 function B(){} B.prototype = Object.create(new A()); //這里采用了new 一個實例 //方式2 function C(){ A.call(this); } C.prototype = Object.create(A.prototype) //這里使用的是父類的原型 

以上兩種方式有什么區別?
1的缺點:
執行了 new,相當於運行了一遍 A ,如果在 A 里做了一些其它事情(如改變全局變量)就會有副作用。
用 A 創建的對象做原型,里面可能會有一些冗余的屬性。
2模擬了 new 的執行過程

Object.hasOwnProperty()方法

判斷對象自身屬性中是否具有指定的屬性。
obj.hasOwnProperty('name')
在某個對象是否擁有某個屬性,判斷的方法有很多,常用的方法就是object.hasOwnProperty('×××'),這個方法是不包括對象原型鏈上的方法的

var obj = { name:'fei' } console.log(obj.hasOwnProperty('name'))//true console.log(obj.hasOwnProperty('toString'))//false 

以上,obj對象存在的name屬性的時候,調用這個方法才是返回true,我們知道其實每個對象實例的原型鏈上存在toString方法,在這里打印false,說明這個方法只是表明實例對象的屬性,不包括原型鏈上的屬性。

Object.getOwnPropertyNames()方法

Object.getOwnPropertyNames()方法返回對象的所有自身屬性的屬性名(包括不可枚舉的屬性)組成的數組,但不會獲取原型鏈上的屬性

function A(a,aa) { this.a = a; this.aa = aa; this.getA = function() { return this.a; } } // 原型方法 A.prototype.aaa = function () {}; var B = new A('b', 'bb'); B.myMethodA = function() {}; // 不可枚舉方法 Object.defineProperty(B, 'myMethodB', { enumerable: false, value: function() {} }); Object.getOwnPropertyNames(B); // ["a", "aa", "getA", "myMethodA", "myMethodB"] 

Object.getOwnPropertyNames和Object.keysq區別

Object.getOwnPropertyNames和Object.keys的區別,即Object.keys只適用於可枚舉的屬性,而Object.getOwnPropertyNames返回對象自動的全部屬性名稱

'use strict'; (function(){ if(!Object.getOwnPropertyNames){ console.log('瀏覽器不支持getOwnPropertyNames'); return; } //人類的構造函數 var person = function(name, age, sex){ this.name = name; this.age = age; this.sex = sex; this.sing = function(){ console.log('sing'); } } //new 一個ladygaga var gaga = new person('ladygaga', 26, 'girl'); //給嘎嘎發放一個不可枚舉的身份證 Object.defineProperty(gaga, 'id', { value : '1234567890', enumerable : false }); //查看gaga的個人信息 var arr = Object.getOwnPropertyNames(gaga); document.write(arr); //output: name,age,sex,sing,id document.write('</br>');    //注意和getOwnPropertyNames的區別,不可枚舉的id沒有輸出 var arr1 = Object.keys(gaga); document.write(arr1); //output: name,age,sex,sing })(); 

es6 javascript對象方法Object.assign()

Object.assign方法用於對象的合並,將源對象( source )的所有可枚舉屬性,復制到目標對象( target )。

var target = { a: 1 }; var source1 = { b: 2 }; var source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3} 

1、如果目標對象與源對象有同名屬性,或多個源對象有同名屬性,則后面的屬性會覆蓋前面的屬性。
2、如果只有一個參數,Object.assign會直接返回該參數。

var obj = {a: 1}; Object.assign(obj) === obj // true 

3、如果該參數不是對象,則會先轉成對象,然后返回。
4、由於undefined和null無法轉成對象,所以如果它們作為參數,就會報錯。
5、Object.assign方法實行的是淺拷貝,而不是深拷貝。也就是說,如果源對象某個屬性的值是對象,那么目標對象拷貝得到的是這個對象的引用。

var obj1 = {a: {b: 1}}; var obj2 = Object.assign({}, obj1); obj1.a.b = 2; obj2.a.b // 2 

上面代碼中,源對象obj1的a屬性的值是一個對象,Object.assign拷貝得到的是這個對象的引用。這個對象的任何變化,都會反映到目標對象上面。

常見用途

( 1 )為對象添加屬性

class Point { constructor(x, y) { Object.assign(this, {x, y}); } } 

上面方法通過Object.assign方法,將x屬性和y屬性添加到Point類的對象實例。

( 2 )為對象添加方法

Object.assign(SomeClass.prototype, { someMethod(arg1, arg2) { ··· }, anotherMethod() { ··· } }); // 等同於下面的寫法 SomeClass.prototype.someMethod = function (arg1, arg2) { ··· }; SomeClass.prototype.anotherMethod = function () { ··· }; 

上面代碼使用了對象屬性的簡潔表示法,直接將兩個函數放在大括號中,再使用 assign 方法添加到 SomeClass.prototype 之中。
( 3 )克隆對象

function clone(origin) { return Object.assign({}, origin); } 

上面代碼將原始對象拷貝到一個空對象,就得到了原始對象的克隆。
不過,采用這種方法克隆,只能克隆原始對象自身的值,不能克隆它繼承的值。
( 4 )合並多個對象
將多個對象合並到某個對象。

const merge =(target, ...sources) => Object.assign(target, ...sources); 

如果希望合並后返回一個新對象,可以改寫上面函數,對一個空對象合並。

const merge =(...sources) => Object.assign({}, ...sources); 

( 5 )為屬性指定默認值

const DEFAULTS = { logLevel: 0, outputFormat: 'html' }; function processContent(options) { let options = Object.assign({}, DEFAULTS, options); } 

上面代碼中,DEFAULTS對象是默認值,options對象是用戶提供的參數。Object.assign方法將DEFAULTS和options合並成一個新對象,如果兩者有同名屬性,則option的屬性值會覆蓋DEFAULTS的屬性值。
注意,由於存在深拷貝的問題,DEFAULTS對象和options對象的所有屬性的值,都只能是簡單類型,而不能指向另一個對象。否則,將導致DEFAULTS對象的該屬性不起作用。

參考https://blog.csdn.net/qq_30100043/article/details/53422657


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM