JavaScript引用类型---Object

时间 2019-12-05

标签 javascript 引用类型 object 栏目 JavaScript 繁體版

原文原文链接

1、对象初始化

建立对象的两种方法：

1.对象初始化器或对象字面量：{[nameValuePair1[, nameValuePair2[, ...nameValuePairN]]]}数组

参数：nameValuePair1, nameValuePair2, ... nameValuePairNdom

成对的名称（字符串）与值（任何值），其中名称经过冒号与值分隔函数

es2015以后简化了字面量写法性能

let a = "foo", b = 42, c = {};
    let object1 = {
        a: a,
        b: b,
        c: c
    };
    //es2015写法
    let object2 = {
        a, b, c
    };
    console.log(object1.a === object2.a); //true

2.以构造函数形式来调用：new Object([value])
参数：value 任何值测试

let object = new Object({'foo': 123});
    console.log(object.foo); //123

访问对象属性

对象属性能够用下标小圆点标记或者方括号标记访问this

let object = new Object({"b": 42});
    console.log(object["b"]); // 42
    object.b = "baz";
    console.log(object.b); //'baz'

从ECMAScript 2015开始，对象初始化语法开始支持计算属性名，容许在[]中放入表达式，计算结果能够当作属性名prototype

let i = 0;
    let object1 = {
        ["foo" + ++i]: i,
        ["foo" + ++i]: i,
        ["foo" + ++i]: i
    };
    console.log(object1.foo1); // 1
    console.log(object1.foo2); // 2
    console.log(object1.foo3); // 3

    let param = 'size';
    let object2 = {
        [param]: 12,
        ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
    };
    console.log(object2); // { size: 12, mobileSize: 4 }

2、Object静态方法

1.Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象

语法：Object.defineProperty(obj, prop, descriptor)code

参数：对象

obj 要在其上定义属性的对象
prop 要定义或修改的属性的名称
descriptor 将被定义或修改的属性描述符
configurable t当且仅当该属性的 configurable 为 true 时，该属性描述符才可以被改变，同时该属性也能从对应的对象上被删除。默认为 false
enumerable 当且仅当该属性的enumerable为true时，该属性才可以出如今对象的枚举属性中。默认为 false
value 与属性关联的值。能够是任何有效的JavaScript值（数字，对象，函数等）。默认为 undefined.
writable 当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false
get 做为该属性的 getter 函数，若是没有 getter 则为undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，可是会传入this对象。默认为 undefined继承

set 做为属性的 setter 函数，若是没有 setter 则为undefined。当属性值修改时，触发执行该方法，该方法将接受惟一参数，即该属性新的参数值。默认为 undefined

返回值：传递给函数的对象

（1）writable决定一个属性可否被赋值

let object = {};
    Object.defineProperty(object,"a",{
        value: 30,
        writable: true
    });
    console.log(object.a); //30
    object.a = 15;
    console.log(object.a); //15
    Object.defineProperty(object,"b",{
        value: 30,
        writable: false
    });
    console.log(object.b); //30
    object.b = 15; //TypeError: Cannot assign to read only property 'b' of object '#<Object>'

（2）enumerable决定该属性是否能被枚举

let object = {};
    Object.defineProperty(object,"a",{
        value: 15,
        writable: true,
        enumerable: true
    });
    Object.defineProperty(object,"b",{
        value: 16,
        writable: true,
        enumerable: false
    });
    Object.defineProperty(object,"c",{
        value: 17,
        writable: true,
        enumerable: true
    });
    for (let i in object) {
        console.log(i+"=",object[i]); //a=15 c=17
    }
    console.log(Object.keys(object)); //["a", "c"]

    console.log(object.propertyIsEnumerable('a')); // true
    console.log(object.propertyIsEnumerable('b')); // false
    console.log(object.propertyIsEnumerable('c')); // true

（3）configurable

let object = {};
    Object.defineProperty(object,"a",{
        get: () => {
            return 10;
        },
        configurable: false
    });
    Object.defineProperty(object,"a",{
        value: 15
    }); //TypeError: Cannot redefine property: a
    console.log(object.a); //10

    object.b = 5;
    //等同于
    Object.defineProperty(object,'b',{
        value: 5,
        writable: true,
        configurable: true,
        enumerable: true
    });
    Object.defineProperty(object,'d',{
        value: 5
    });
    //等同于
    Object.defineProperty(object,'b',{
        value: 5,
        writable: false,
        configurable: false,
        enumerable: false
    });

（4）set/get

function Test() {
        let x = null;
        let arr = [];
        Object.defineProperty(this,'x',{
            get: () => {
                console.log('get');
                return x;
            },
            set: (value) => {
                console.log('set');
                x = value;
                arr.push(x);
            }
        });
        this.getTest = function () {
            return arr;
        }
    }
    let test = new Test();
    test.x; //get
    test.x = 25; //set
    test.x = 30; //set
    console.log(test.getTest()); //[25, 30]

2.Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象

语法：Object.defineProperties(obj, props)
参数：
obj 要在其上定义属性的对象
props 要定义其可枚举属性或修改的属性描述符的对象
返回值：被传递给函数的对象

let object = {};
    Object.defineProperties(object, {
        'property1': {
            value: true,
            writable: true
        },
        'property2': {
            value: 'Hello',
            writable: false
        }
    });

3.Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符，自有属性指的是直接赋予该对象的属性，不须要从原型链上进行查找的属性

语法：Object.getOwnPropertyDescriptor(obj, prop)

参数：
obj 须要查找的目标对象
prop 目标对象内属性名称（String类型）
返回值：若是指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），不然返回 undefined

let object = {
        bar: 42,
        get foo() { return 17; }
    };
    let foo = Object.getOwnPropertyDescriptor(object, "foo");
    // {
    //   configurable: true,
    //   enumerable: true,
    //   get: /*the getter function*/,
    //   set: undefined
    // }
    let bar = Object.getOwnPropertyDescriptor(object, "bar");
    // {
    //   configurable: true,
    //   enumerable: true,
    //   value: 42,
    //   writable: true
    // }
    Object.defineProperty(object, "baz", {
        value: 8675309,
        writable: false,
        enumerable: false
    });
    let baz = Object.getOwnPropertyDescriptor(object, "baz");
    // {
    //   configurable: false,
    //   enumerable: false,
    //   value: 8675309,
    //   writable: false
    // }

4.Object.getOwnPropertyDescriptors() 方法用来获取一个对象的全部自身属性的描述符

语法：Object.getOwnPropertyDescriptors(obj)###

参数：
obj 任意对象
返回值：所指定对象的全部自身属性的描述符，若是没有任何自身属性，则返回空对象

let object = {
        bar: 42,
        get foo() { return 17; }
    };
    Object.getOwnPropertyDescriptors(object);
    //{
    //  bar: {value: 42, writable: true, enumerable: true, configurable: true},
    //  foo: {get: ƒ, set: undefined, enumerable: true, configurable: true}
    // }
    function SuperClass() {}
    SuperClass.prototype = {
        x: 15,
        y: 20
    };
    let superClass = new SuperClass();
    superClass.a = 50;
    superClass.b = 100;
    function SubClass() {}
    SubClass.prototype = Object.create(SuperClass.prototype, Object.getOwnPropertyDescriptors(superClass));
    let subClass = new SubClass();
    console.log(subClass.a); //50

5.Object.getOwnPropertyNames()方法返回一个由指定对象的全部自身属性的属性名（包括不可枚举属性但不包括Symbol值做为名称的属性）组成的数组

语法：Object.getOwnPropertyNames(obj)

参数：
obj 一个对象，其自身的可枚举和不可枚举属性的名称被返回
返回值：在给定对象上找到的属性对应的字符串数组

let arr = ["a", "b", "c"];
    console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]
    // 类数组对象
    let object = { 0: "a", 1: "b", 2: "c"};
    console.log(Object.getOwnPropertyNames(object).sort()); // ["0", "1", "2"]

6.Object.getOwnPropertySymbols() 方法返回一个给定对象自身的全部 Symbol 属性的数组

语法：Object.getOwnPropertySymbols(obj)

参数：
obj 要返回 Symbol 属性的对象
返回值：在给定对象自身上找到的全部 Symbol 属性的数组

let object = {};
    let a = Symbol("a");
    let b = Symbol.for("b");

    object[a] = "localSymbol";
    object[b] = "globalSymbol";
    let objectSymbols = Object.getOwnPropertySymbols(object);

    console.log(objectSymbols.length); // 2
    console.log(objectSymbols);         // [Symbol(a), Symbol(b)]
    console.log(objectSymbols[0]);      // Symbol(a)

7.Object.create()方法建立一个新对象，使用现有的对象来提供新建立的对象的proto

语法：Object.create(proto, [propertiesObject])

参数：
proto 新建立对象的原型对象
propertiesObject 可选，这些属性对应Object.defineProperties()的第二个参数。
返回值：一个新对象，带着指定的原型对象和属性

function Father() {
        this.x = 0;
        this.y = 0;
    }
    Father.prototype.move = function (x,y) {
        this.x += x;
        this.y += y;
    };
    function Son() {
        Father.call(this); //调用父类构造函数
    }
    Son.prototype = Object.create(Father.prototype);
    Son.prototype.constructor = Son;
    let son = new Son();
    console.log(son instanceof Son); //true
    console.log(son instanceof Father); //true

8.Object.getPrototypeOf() 方法返回指定对象的原型

语法：Object.getPrototypeOf(object)
obj 要返回其原型的对象
返回值：给定对象的原型，若是没有继承属性，则返回 null

let proto = {};
    let object = Object.create(proto);
    Object.getPrototypeOf(object) === proto; // true

    let reg = /a/;
    Object.getPrototypeOf(reg) === RegExp.prototype; // true

9.Object.assign() 方法用于将全部可枚举属性的值从一个或多个源对象复制到目标对象

语法：Object.assign(target, ...sources)

参数：
target 目标对象
sources 源对象
返回值：目标对象

let obj = { a: 1 };
    let copy = Object.assign({}, obj);
    console.log(copy); // { a: 1 }

此方法是浅拷贝，Object.assign()拷贝的是属性值，若是源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值

let obj1 = { a: 0 , b: { c: 0}};
    let obj2 = Object.assign({}, obj1);
    console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
    obj1.b.c = 3;
    console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
    console.log(JSON.stringify(obj2)); // { a: 1, b: { c: 3}}

如何实现深拷贝

let obj1 = { a: 0 , b: { c: 0}};
    let obj2 = JSON.parse(JSON.stringify(obj1));
    obj1.b.c = 4;
    console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

合并两个对象

let obj1 = { a: 1, b: 1, c: 1 };
    let obj2 = { b: 2, c: 2 };
    let obj3 = { c: 3 };
    let newObj = Object.assign({}, obj1, obj2, obj3);
    console.log(newObj); // { a: 1, b: 2, c: 3 }

10.Object.is()方法判断两个值是不是相同的值

语法：Object.is(value1, value2);

参数：
value1 须要比较的第一个值
value2 须要比较的第二个值
返回值：表示两个参数是否相同的Boolean

如下状况返回true：

两个值都是 undefined
两个值都是 null
两个值都是 true 或者都是 false
两个值是由相同个数的字符按照相同的顺序组成的字符串
两个值指向同一个对象
两个值都是数字而且
都是正零 +0
都是负零 -0
都是 NaN
都是除零和 NaN 外的其它同一个数字

console.log(NaN === NaN); //false
    console.log(NaN == NaN); //false
    console.log(Object.is(NaN,NaN)); //true

    console.log(0 == false); //true
    console.log(0 === false); //false
    console.log(Object.is(0,false)); //false

    console.log(-0 == 0); //true
    console.log(-0 === 0); //true
    console.log(Object.is(-0,0)); //false

11.Object.isExtensible() 方法判断一个对象是不是可扩展的（是否能够在它上面添加新的属性）

语法： Object.isExtensible(obj)

参数：
obj 须要检测的对象
返回值：表示给定对象是否可扩展的一个Boolean

12.Object.isSealed() 方法判断一个对象是否被密封

语法：Object.isSealed(obj)

参数：
obj 要被检查的对象
返回值：表示给定对象是否被密封的一个Boolean

13.Object.isFrozen()方法判断一个对象是否被冻结

语法：Object.isFrozen(obj)

参数：
obj 被检测的对象
返回值：表示给定对象是否被冻结的Boolean

14.Object.preventExtensions()方法让一个对象变的不可扩展，也就是永远不能再添加新的属性

语法：Object.preventExtensions(obj)

参数：
obj 将要变得不可扩展的对象
返回值：已经不可扩展的对象
描述：不可扩展对象不能再添加新的属性，可是原有的属性仍然可被编辑、删除

非空对象（其属性的configurable为true，writable为true）：

let object = {
        a:1,
        b:2
    };
    console.log(Object.isExtensible(object)); // true
    Object.preventExtensions(object);
    console.log(Object.isExtensible(object)); //false
    console.log(Object.isSealed(object)); // false
    console.log(Object.isFrozen(object)); // false
    ob.b = 20; //能够赋值
    console.log(ob.b); //20
    delete ob.b; //能够删除
    console.log(ob); //{a: 1}
    Object.defineProperty(ob,'c',{ // 不能够添加属性
        value: 3,
        writable: true
    }); //Cannot define property c, object is not extensible

非空对象（其属性的configurable为false，writable为true）：

let empty = {};
    Object.defineProperty(empty,'foo',{
        value: 'baz',
        writable: true
    });
    Object.preventExtensions(empty);
    console.log(Object.isExtensible(empty)); // false
    console.log(Object.isSealed(empty)); // true
    console.log(Object.isFrozen(empty)); // false

非空对象（其属性的configurable为true，writable为false）：

let empty = {};
    Object.defineProperty(empty,'foo',{
        value: 'baz',
        writable: false,
        configurable: true
    });
    Object.preventExtensions(empty);
    console.log(Object.isExtensible(empty)); // false
    console.log(Object.isSealed(empty)); // false
    console.log(Object.isFrozen(empty)); // false

非空对象（其属性的configurable为false，writable为false）：

let empty = {};
    Object.defineProperty(empty,'foo',{
        value: 'baz'
    });
    Object.preventExtensions(empty);
    console.log(Object.isExtensible(empty)); // false
    console.log(Object.isSealed(empty)); // true
    console.log(Object.isFrozen(empty)); // true

空对象：

let empty1 = {};
    console.log(Object.isExtensible(empty1)); // true
    Object.preventExtensions(empty1);
    console.log(Object.isExtensible(empty1)); //false
    console.log(Object.isSealed(empty1)); // true
    console.log(Object.isFrozen(empty1)); // true

15.Object.seal()方法封闭一个对象，阻止添加新属性并将全部现有属性标记为不可配置。当前属性的值只要可写就能够改变

语法：Object.seal(obj)

参数：
obj 将要被密封的对象
返回值：被密封的对象
描述：密封一个对象会让这个对象变的不能添加新属性，且全部已有属性会变的不可配置

空对象：

let empty = {};
    Object.seal(empt);
    console.log(Object.isExtensible(empty)); // false
    console.log(Object.isSealed(empty)); // true
    console.log(Object.isFrozen(empty)); // true

非空对象：

let object = {
        foo: 'bar'
    };
    Object.seal(object);
    object.foo = 'baz'; //可编辑
    console.log(object.foo); //baz
    delete object.foo; //TypeError: Cannot delete property 'foo' of #<Object>
    console.log(Object.isExtensible(object)); // false
    console.log(Object.isSealed(object)); // true
    console.log(Object.isFrozen(object)); // false

16.Object.freeze() 方法能够冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说，这个对象永远是不可变的

语法：Object.freeze(obj)

参数：
obj 要被冻结的对象
返回值：被冻结的对象
描述：被冻结对象自身的全部属性都不可能以任何方式被修改，若是一个属性的值是个对象，则这个对象中的属性是能够修改的，除非它也是个冻结对象

let object1 = {
        property1: 42
    };
    Object.freeze(object1);
    console.log(Object.isExtensible(object1)); // false
    console.log(Object.isSealed(object1)); // true
    console.log(Object.isFrozen(object1)); // true
    object1.property1 = 33; // TypeError: Cannot assign to read only property 'property1' of object '#<Object>'
    console.log(object1.property1); //42

    let object2 = {
        internal: {}
    };
    Object.freeze(object2);
    object2.internal.a = 'aValue';
    console.log(object2.internal.a); //aValue

17.Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致

语法：Object.entries(obj)

参数：
obj 能够返回其可枚举属性的键值对的对象
返回值：给定对象自身可枚举属性的键值对数组

const object1 = { foo: 'bar', baz: 42 };
    console.log(Object.entries(object1)); // [ ['foo', 'bar'], ['baz', 42] ]
    // array like object
    const object2 = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.entries(object2)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
    // array like object with random key ordering
    const object3 = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.entries(object3)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

18.Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致

语法：Object.keys(obj)

参数：
obj 要返回其枚举自身属性的对象
返回值：一个表示给定对象的全部可枚举属性的字符串数组

let arr = ['a', 'b', 'c'];
    console.log(Object.keys(arr)); // ['0', '1', '2']

    // array like object
    let object = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.keys(object)); // ['0', '1', '2']

19.Object.values()方法返回一个给定对象本身的全部可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同

语法：Object.values(obj)

参数：
obj 被返回可枚举属性值的对象
返回值：一个包含对象自身的全部可枚举属性值的数组

let arr = ['a', 'b', 'c'];
    console.log(Object.values(arr)); // ['a', 'b', 'c']

    // array like object
    let object = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.values(object)); // ['a', 'b', 'c']

3、Object实例方法

1.hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具备指定的属性

语法：obj.hasOwnProperty(prop)

参数：

prop 要检测的属性字符串名称或者 Symbol
返回值：用来判断某个对象是否含有指定的属性的 Boolean

描述：这个方法能够用来检测一个对象是否含有特定的自身属性；和 in 运算符不一样，该方法会忽略掉那些从原型链上继承到的属性

let object = new Object();
    object.prop = 'exists';
    console.log(object.hasOwnProperty('prop'));             // true
    console.log(object.hasOwnProperty('toString'));         // false
    console.log(object.hasOwnProperty('hasOwnProperty'));   // false
    console.log('toString' in object); // true
    console.log('prop' in object); // true
    console.log('hasOwnProperty' in object); // true

2.isPrototypeOf() 方法用于测试一个对象是否存在于另外一个对象的原型链上

语法：prototypeObj.isPrototypeOf(object)

参数：

object 在该对象的原型链上搜寻

返回值：Boolean，表示调用对象是否在另外一个对象的原型链上

function Foo() {}
function Bar() {}
function Baz() {}

Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);

let baz = new Baz();

console.log(Baz.prototype.isPrototypeOf(baz)); // true
console.log(Bar.prototype.isPrototypeOf(baz)); // true
console.log(Foo.prototype.isPrototypeOf(baz)); // true
console.log(Object.prototype.isPrototypeOf(baz)); // true

3.propertyIsEnumerable() 方法返回一个布尔值，表示指定的属性是否可枚举

语法：obj.propertyIsEnumerable(prop)

参数：

prop 须要测试的属性名

返回值：用来表示指定的属性名是否可枚举的Boolean

let o = {};
let a = [];
o.prop = 'is enumerable';
a[0] = 'is enumerable';

o.propertyIsEnumerable('prop');   //  返回 true
a.propertyIsEnumerable(0);        // 返回 true

4.toString() 方法返回一个表示该对象的字符串

语法：object.toString()

返回值：表示该对象的字符串

let object = new Object();
    console.log(object.toString()); //[object Object]
    function Animal(name,age,color,sex) {
        this.name = name;
        this.age = age;
        this.color = color;
        this.sex = sex;
    }
    Animal.prototype.toString = function () {
        let string = this.name + "是一个" + this.age + "岁的" + this.color + "的" + this.sex + "动物";
        return string;
    };
    let animal = new Animal("小可爱",1,"灰色","雌性");
    console.log(animal.toString()); //小可爱是一个1岁的灰色的雌性动物

5.valueOf() 方法返回指定对象的原始值

语法：object.valueOf()
返回值：返回值为该对象的原始值

function Animal(name,age,color,sex) {
        this.name = name;
        this.age = age;
        this.color = color;
        this.sex = sex;
    }
    let animal = new Animal("小可爱",1,"灰色","雌性");
    console.log(animal.valueOf()); //{name: "小可爱", age: 1, color: "灰色", sex: "雌性"}