欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中Object的常用方法總結(jié)

 更新時間：2023年02月10日 11:33:54   作者：山水有輕音  
這篇文章主要為大家整理了7個JavaScript中Object的常用方法的使用，文中的示例代碼講解詳細，對我們掌握JavaScript有一點的幫助，感興趣的可以了解一下

1、Object.keys方法

Object.keys方法是JavaScript中用于遍歷對象屬性的一個方法 。它傳入的參數(shù)是一個對象，返回的是一個數(shù)組，數(shù)組中包含的是該對象所有的屬性名。 如：

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

這里有一道關(guān)于Object.keys的題目 輸出對象中值大于2的key的數(shù)組

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

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

2、Object.values()方法

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

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

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

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

如果Object.values方法的參數(shù)是一個字符串，會返回各個字符組成的一個數(shù)組。

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

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

3、Object.create()

Object.create()方法創(chuàng)建一個新對象，使用現(xiàn)有的對象來提供新創(chuàng)建的對象的__proto__。 語法

Object.create(proto, [propertiesObject]) 參數(shù) proto 新創(chuàng)建對象的原型對象。 propertiesObject 可選。如果沒有指定為 undefined，則是要添加到新創(chuàng)建對象的可枚舉屬性（即其自身定義的屬性，而不是其原型鏈上的枚舉屬性）對象的屬性描述符以及相應(yīng)的屬性名稱。這些屬性對應(yīng)Object.defineProperties()的第二個參數(shù)。 返回值 一個新對象，帶著指定的原型對象和屬性。 如：

var parent = {
    x : 1,
    y : 1
}
var child = Object.create(parent,{
    z : {                           // z會成為創(chuàng)建對象的屬性
        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 一個實例
//方式2
function C(){
  A.call(this);
}
C.prototype = Object.create(A.prototype) //

這里使用的是父類的原型 以上兩種方式有什么區(qū)別?

1的缺點： 執(zhí)行了 new，相當于運行了一遍 A ，如果在 A 里做了一些其它事情（如改變?nèi)肿兞浚┚蜁懈弊饔谩?用 A 創(chuàng)建的對象做原型，里面可能會有一些冗余的屬性。

2模擬了 new 的執(zhí)行過程

4、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屬性的時候，調(diào)用這個方法才是返回true，我們知道其實每個對象實例的原型鏈上存在toString方法，在這里打印false，說明這個方法只是表明實例對象的屬性，不包括原型鏈上的屬性。

5、Object.getOwnPropertyNames()方法

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

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返回對象自動的全部屬性名稱。

'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 一個ladygaga
    var gaga = new person('ladygaga', 26, 'girl');

    //給嘎嘎發(fā)放一個不可枚舉的身份證
    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的區(qū)別，不可枚舉的id沒有輸出
    var arr1 = Object.keys(gaga);
    document.write(arr1); //output: name,age,sex,sing
})();

6、es6 javascript對象方法Object.assign()

Object.assign方法用于對象的合并，將源對象（ source ）的所有可枚舉屬性，復(fù)制到目標對象（ 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、如果只有一個參數(shù)，Object.assign會直接返回該參數(shù)。

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

3、如果該參數(shù)不是對象，則會先轉(zhuǎn)成對象，然后返回。

4、由于undefined和null無法轉(zhuǎn)成對象，所以如果它們作為參數(shù)，就會報錯。

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 () {  
···  
};

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

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

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

const merge =(target, ...sources) => Object.assign(target, ...sources);  
//如果希望合并后返回一個新對象，可以改寫上面函數(shù)，對一個空對象合并。

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

（ 5 ）為屬性指定默認值

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

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

7、Object.defineProperty()方法理解

Object.defineProperty可以用來定義新屬性或修改原有的屬性

使用構(gòu)造函數(shù)定義對象和屬性

var obj = new Object; //obj = {}
obj.name = "張三"; //添加描述
obj.say = function(){}; //添加行為

語法

Object.defineProperty(obj, prop, descriptor)

參數(shù)說明

  • obj：必需。目標對象
  • prop：必需。需定義或修改的屬性的名字
  • descriptor：必需。目標屬性所擁有的特性

給對象的屬性添加特性描述，目前提供兩種形式：數(shù)據(jù)描述和存取器描述

數(shù)據(jù)描述 修改或定義對象的某個屬性的時候，給這個屬性添加一些特性， 數(shù)據(jù)描述中的屬性都是可選的

var obj = {
test:"hello"
}
//對象已有的屬性添加特性描述Object.defineProperty(obj,"test",{
configurable:true | false,
enumerable:true | false,
value:任意類型的值,
writable:true | false
});
//對象新添加的屬性的特性描述Object.defineProperty(obj,"newKey",{
configurable:true | false,
enumerable:true | false,
value:任意類型的值,
writable:true | false
});
//value: 設(shè)置屬性的值
//writable: 值是否可以重寫。true | false
//enumerable: 目標屬性是否可以被枚舉。true | false
//configurable: 目標屬性是否可以被刪除或是否可以再次修改特性 true | false

//存取器描述
//使用存取器描述屬性的特性的時候，允許設(shè)置以下特性屬性， 當使用了getter或setter方法，不允許使用writable和value這兩個屬性

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屬性來定義對應(yīng)的方法

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
get:function (){
//當獲取值的時候觸發(fā)的函數(shù)
return initValue;
},
set:function (value){
//當設(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • JavaScript中this詳解

    JavaScript中this詳解

    都說 JavaScript 是一種很靈活的語言，這其實也可以說它是一個混亂的語言。它把函數(shù)式編程和面向?qū)ο缶幊挑酆弦黄穑偌由蟿討B(tài)語言特性，簡直強大無比，下面小編給大家介紹Javascript中this詳解，需要的小伙伴可以來參考下
    2015-09-09
  • js實現(xiàn)小星星游戲

    js實現(xiàn)小星星游戲

    這篇文章主要為大家詳細介紹了js實現(xiàn)小星星游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-03-03
  • javascript對象的property和prototype是這樣一種關(guān)系

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

    javascript對象的property和prototype是這樣一種關(guān)系...
    2007-03-03
  • JavaScript實現(xiàn)購物車案例

    JavaScript實現(xiàn)購物車案例

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)購物車案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-01-01

    • 最新評論