JavaScript中Object的常用方法總結(jié)
1、Object.keys方法
Object.keys方法是JavaScript中用于遍歷對(duì)象屬性的一個(gè)方法 。它傳入的參數(shù)是一個(gè)對(duì)象,返回的是一個(gè)數(shù)組,數(shù)組中包含的是該對(duì)象所有的屬性名。 如:
var cat= { name:'mini', age:2, color:'yellow', desc:'cute' } console.log(Object.keys(cat)); // ["name", "age", "color", "desc"]
這里有一道關(guān)于Object.keys的題目 輸出對(duì)象中值大于2的key的數(shù)組
var data = {a: 1, b: 2, c: 3, d: 4}; Object.keys(data).filter(function(x) { return 1 ;}) //期待輸出:[“c”,”d”]
請(qǐng)問1處填什么?
正確答案:1 :data[x]>2
Object.keys是es5中新增的方法,用來獲取對(duì)象自身所有的可枚舉的屬性名,但不包括原型中的屬性,然后返回一個(gè)由屬性名組成的數(shù)組。注意它同for..in一樣不能保證屬性按對(duì)象原來的順序輸出。 Object.getOwnPropertyNames也是es5中新增的方法,返回對(duì)象的所有自身屬性的屬性名(包括不可枚舉的屬性)組成的數(shù)組,但不會(huì)獲取原型鏈上的屬性。
Array.filter(function)對(duì)數(shù)組進(jìn)行過濾返回符合條件的數(shù)組。
2、Object.values()方法
Object.values方法返回一個(gè)數(shù)組,成員是參數(shù)對(duì)象自身的(不含繼承的)所有可遍歷( enumerable )屬性的鍵值。
var obj = { foo: "bar", baz: 42 }; Object.values(obj) // ["bar", 42]
返回?cái)?shù)組的成員順序,屬性名為數(shù)值的屬性,是按照數(shù)值大小,從小到大遍歷的,因此返回的順序是b、c、a。Object.values只返回對(duì)象自身的可遍歷屬性。
var obj = { 100: 'a', 2: 'b', 7: 'c' }; Object.values(obj) // ["b", "c", "a"]
如果Object.values方法的參數(shù)是一個(gè)字符串,會(huì)返回各個(gè)字符組成的一個(gè)數(shù)組。
Object.values('foo') // ['f', 'o', 'o']
上面代碼中,字符串會(huì)先轉(zhuǎn)成一個(gè)類似數(shù)組的對(duì)象。字符串的每個(gè)字符,就是該對(duì)象的一個(gè)屬性。因此,Object.values返回每個(gè)屬性的鍵值,就是各個(gè)字符組成的一個(gè)數(shù)組。 如果參數(shù)不是對(duì)象,Object.values會(huì)先將其轉(zhuǎn)為對(duì)象。由于數(shù)值和布爾值的包裝對(duì)象,都不會(huì)為實(shí)例添加非繼承的屬性。所以,Object.values會(huì)返回空數(shù)組。
3、Object.create()
Object.create()方法創(chuàng)建一個(gè)新對(duì)象,使用現(xiàn)有的對(duì)象來提供新創(chuàng)建的對(duì)象的__proto__。 語(yǔ)法
Object.create(proto, [propertiesObject]) 參數(shù) proto 新創(chuàng)建對(duì)象的原型對(duì)象。 propertiesObject 可選。如果沒有指定為 undefined,則是要添加到新創(chuàng)建對(duì)象的可枚舉屬性(即其自身定義的屬性,而不是其原型鏈上的枚舉屬性)對(duì)象的屬性描述符以及相應(yīng)的屬性名稱。這些屬性對(duì)應(yīng)Object.defineProperties()的第二個(gè)參數(shù)。 返回值 一個(gè)新對(duì)象,帶著指定的原型對(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)//{z: "newAdd"}z: "newAdd"__proto__: x: 1y: 1__proto__: Object Object.create()創(chuàng)建繼承 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 一個(gè)實(shí)例 //方式2 function C(){ A.call(this); } C.prototype = Object.create(A.prototype) //
這里使用的是父類的原型 以上兩種方式有什么區(qū)別?
1的缺點(diǎn): 執(zhí)行了 new,相當(dāng)于運(yùn)行了一遍 A ,如果在 A 里做了一些其它事情(如改變?nèi)肿兞浚┚蜁?huì)有副作用。 用 A 創(chuàng)建的對(duì)象做原型,里面可能會(huì)有一些冗余的屬性。
2模擬了 new 的執(zhí)行過程
4、Object.hasOwnProperty()方法
判斷對(duì)象自身屬性中是否具有指定的屬性。
obj.hasOwnProperty('name')
在某個(gè)對(duì)象是否擁有某個(gè)屬性,判斷的方法有很多,常用的方法就是object.hasOwnProperty('×××'),這個(gè)方法是不包括對(duì)象原型鏈上的方法的
var obj = { name:'fei' } console.log(obj.hasOwnProperty('name'))//true console.log(obj.hasOwnProperty('toString'))//false
以上,obj對(duì)象存在的name屬性的時(shí)候,調(diào)用這個(gè)方法才是返回true,我們知道其實(shí)每個(gè)對(duì)象實(shí)例的原型鏈上存在toString方法,在這里打印false,說明這個(gè)方法只是表明實(shí)例對(duì)象的屬性,不包括原型鏈上的屬性。
5、Object.getOwnPropertyNames()方法
Object.getOwnPropertyNames()方法返回對(duì)象的所有自身屬性的屬性名(包括不可枚舉的屬性)組成的數(shù)組,但不會(huì)獲取原型鏈上的屬性。
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區(qū)別 Object.getOwnPropertyNames和Object.keys的區(qū)別,即Object.keys只適用于可枚舉的屬性,而Object.getOwnPropertyNames返回對(duì)象自動(dòng)的全部屬性名稱。 'use strict'; (function(){ if(!Object.getOwnPropertyNames){ console.log('瀏覽器不支持getOwnPropertyNames'); return; } //人類的構(gòu)造函數(shù) var person = function(name, age, sex){ this.name = name; this.age = age; this.sex = sex; this.sing = function(){ console.log('sing'); } } //new 一個(gè)ladygaga var gaga = new person('ladygaga', 26, 'girl'); //給嘎嘎發(fā)放一個(gè)不可枚舉的身份證 Object.defineProperty(gaga, 'id', { value : '1234567890', enumerable : false }); //查看gaga的個(gè)人信息 var arr = Object.getOwnPropertyNames(gaga); document.write(arr); //output: name,age,sex,sing,id document.write('</br>'); //注意和getOwnPropertyNames的區(qū)別,不可枚舉的id沒有輸出 var arr1 = Object.keys(gaga); document.write(arr1); //output: name,age,sex,sing })();
6、es6 javascript對(duì)象方法Object.assign()
Object.assign方法用于對(duì)象的合并,將源對(duì)象( source )的所有可枚舉屬性,復(fù)制到目標(biāo)對(duì)象( 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、如果目標(biāo)對(duì)象與源對(duì)象有同名屬性,或多個(gè)源對(duì)象有同名屬性,則后面的屬性會(huì)覆蓋前面的屬性。
2、如果只有一個(gè)參數(shù),Object.assign會(huì)直接返回該參數(shù)。
var obj = {a: 1}; Object.assign(obj) === obj // true
3、如果該參數(shù)不是對(duì)象,則會(huì)先轉(zhuǎn)成對(duì)象,然后返回。
4、由于undefined和null無法轉(zhuǎn)成對(duì)象,所以如果它們作為參數(shù),就會(huì)報(bào)錯(cuò)。
5、Object.assign方法實(shí)行的是淺拷貝,而不是深拷貝。也就是說,如果源對(duì)象某個(gè)屬性的值是對(duì)象,那么目標(biāo)對(duì)象拷貝得到的是這個(gè)對(duì)象的引用。
var obj1 = {a: {b: 1}}; var obj2 = Object.assign({}, obj1); obj1.a.b = 2; obj2.a.b // 2
上面代碼中,源對(duì)象obj1的a屬性的值是一個(gè)對(duì)象,Object.assign拷貝得到的是這個(gè)對(duì)象的引用。這個(gè)對(duì)象的任何變化,都會(huì)反映到目標(biāo)對(duì)象上面。
常見用途
( 1 )為對(duì)象添加屬性
class Point { constructor(x, y) { Object.assign(this, {x, y}); } }
上面方法通過Object.assign方法,將x屬性和y屬性添加到Point類的對(duì)象實(shí)例。
( 2 )為對(duì)象添加方法
Object.assign(SomeClass.prototype, { someMethod(arg1, arg2) { ··· }, anotherMethod() { ··· } }); // 等同于下面的寫法 SomeClass.prototype.someMethod = function (arg1, arg2) { ··· }; SomeClass.prototype.anotherMethod = function () { ··· };
上面代碼使用了對(duì)象屬性的簡(jiǎn)潔表示法,直接將兩個(gè)函數(shù)放在大括號(hào)中,再使用 assign 方法添加到 SomeClass.prototype 之中。 ( 3 )克隆對(duì)象
function clone(origin) { return Object.assign({}, origin); }
上面代碼將原始對(duì)象拷貝到一個(gè)空對(duì)象,就得到了原始對(duì)象的克隆。 不過,采用這種方法克隆,只能克隆原始對(duì)象自身的值,不能克隆它繼承的值。 ( 4 )合并多個(gè)對(duì)象 將多個(gè)對(duì)象合并到某個(gè)對(duì)象。
const merge =(target, ...sources) => Object.assign(target, ...sources); //如果希望合并后返回一個(gè)新對(duì)象,可以改寫上面函數(shù),對(duì)一個(gè)空對(duì)象合并。 const merge =(...sources) => Object.assign({}, ...sources);
( 5 )為屬性指定默認(rèn)值
const DEFAULTS = { logLevel: 0, outputFormat: 'html' }; function processContent(options) { let options = Object.assign({}, DEFAULTS, options); }
上面代碼中,DEFAULTS對(duì)象是默認(rèn)值,options對(duì)象是用戶提供的參數(shù)。Object.assign方法將DEFAULTS和options合并成一個(gè)新對(duì)象,如果兩者有同名屬性,則option的屬性值會(huì)覆蓋DEFAULTS的屬性值。 注意,由于存在深拷貝的問題,DEFAULTS對(duì)象和options對(duì)象的所有屬性的值,都只能是簡(jiǎn)單類型,而不能指向另一個(gè)對(duì)象。否則,將導(dǎo)致DEFAULTS對(duì)象的該屬性不起作用。
7、Object.defineProperty()方法理解
Object.defineProperty可以用來定義新屬性或修改原有的屬性
使用構(gòu)造函數(shù)定義對(duì)象和屬性
var obj = new Object; //obj = {} obj.name = "張三"; //添加描述 obj.say = function(){}; //添加行為
語(yǔ)法
Object.defineProperty(obj, prop, descriptor)
參數(shù)說明
- obj:必需。目標(biāo)對(duì)象
- prop:必需。需定義或修改的屬性的名字
- descriptor:必需。目標(biāo)屬性所擁有的特性
給對(duì)象的屬性添加特性描述,目前提供兩種形式:數(shù)據(jù)描述和存取器描述
數(shù)據(jù)描述 修改或定義對(duì)象的某個(gè)屬性的時(shí)候,給這個(gè)屬性添加一些特性, 數(shù)據(jù)描述中的屬性都是可選的
var obj = { test:"hello" } //對(duì)象已有的屬性添加特性描述Object.defineProperty(obj,"test",{ configurable:true | false, enumerable:true | false, value:任意類型的值, writable:true | false }); //對(duì)象新添加的屬性的特性描述Object.defineProperty(obj,"newKey",{ configurable:true | false, enumerable:true | false, value:任意類型的值, writable:true | false }); //value: 設(shè)置屬性的值 //writable: 值是否可以重寫。true | false //enumerable: 目標(biāo)屬性是否可以被枚舉。true | false //configurable: 目標(biāo)屬性是否可以被刪除或是否可以再次修改特性 true | false //存取器描述 //使用存取器描述屬性的特性的時(shí)候,允許設(shè)置以下特性屬性, 當(dāng)使用了getter或setter方法,不允許使用writable和value這兩個(gè)屬性 var obj = {}; Object.defineProperty(obj,"newKey",{ get:function (){} | undefined, set:function (value){} | undefined configurable: true | false enumerable: true | false }); //getter/setter //getter 是一種獲得屬性值的方法 //setter是一種設(shè)置屬性值的方法。 //使用get/set屬性來定義對(duì)應(yīng)的方法 var obj = {}; var initValue = 'hello'; Object.defineProperty(obj,"newKey",{ get:function (){ //當(dāng)獲取值的時(shí)候觸發(fā)的函數(shù) return initValue; }, set:function (value){ //當(dāng)設(shè)置值的時(shí)候觸發(fā)的函數(shù),設(shè)置的新值通過參數(shù)value拿到 initValue = value; } }); //獲取值console.log( obj.newKey ); //hello //設(shè)置值 obj.newKey = 'change value'; console.log( obj.newKey ); //change value
到此這篇關(guān)于JavaScript中Object的常用方法總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript Object常用方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
完美實(shí)現(xiàn)js選項(xiàng)卡切換效果(二)
這篇文章主要為大家詳細(xì)介紹如何完美實(shí)現(xiàn)js選項(xiàng)卡切換效果,通過設(shè)置定時(shí)器實(shí)現(xiàn)延時(shí)0.5s切換選項(xiàng)卡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03js中switch case循環(huán)實(shí)例代碼
這篇文章主要介紹了js中switch case循環(huán)實(shí)例代碼,有需要的朋友可以參考一下2013-12-12javascript基礎(chǔ)語(yǔ)法學(xué)習(xí)筆記
這篇文章主要為大家分享了javascript基礎(chǔ)語(yǔ)法學(xué)習(xí)筆記,幫助大家夯實(shí)javascript基礎(chǔ)知識(shí),感興趣的小伙伴們可以參考一下2016-01-01

javascript對(duì)象的property和prototype是這樣一種關(guān)系

JavaScript實(shí)現(xiàn)購(gòu)物車案例