JavaScript 标准内置对象 Object 以及常用的方法

前端 · 2020-09-10 ·

1 语法

// 对象初始化或对象字面量, 成对的名称(字符串)与值(任何值),其中名称通过冒号与值分隔。
{[nameValuePair1[,nameValuePair2[,...nameValuePairN]]]}

// 以构造函数形式来调用
new Object([value])

// 以对象方法创建
Object.create([value])

2 描述

在JavaScript中,几乎素有的对象都是Object类型的实例,它们都会从Object.prototype继承属性和方法。Object构造函数为给定值创建一个对象包装器。

2.1 如果给定值是 null 或 undefined,将会创建并返回一个空对象

2.2 如果传进去的是一个基本类型的值,则会构造其包装类型的对象

2.3 如果传进去的是引用类型的值,仍然会返回这个值,经他们复制的变量和源对象相同的引用地址

3 Object常用的方法

3.1 Object.defineProperty()

Object.defineProperty(obj,props)方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

obj:在其上定义或修改属性的对象

props:要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种:数据描述符和访问器描述符。描述符具有以下键:

3.1.1 configurable 默认为falsetrue 当且仅当该属性描述符的类型可以被改变并且该属性可以从对应对象中删除。
3.1.2 enumerable 默认为 falsetrue 当且仅当在枚举相应对象上的属性时该属性显现。
3.1.3 value 默认为 underfined与属性关联的值。可以是任何有效的JavaScript值(数字,对象,函数等)。
3.1.4 writable 默认为 falsetrue当且仅当与该属性相关联的值可以用assignment operator改变时。
3.1.5 get 默认为 undefined作为该属性的 getter 函数,如果没有 getter 则为undefined。函数返回值将被用作属性的值。
3.1.6 set 默认为 undefined作为属性的 setter 函数,如果没有 setter 则为undefined。函数将仅接受参数赋值给该属性的新值。

'use strict'
const object1 = {};

Object.defineProperty(object1, 'property1', {
    value: 42,
    writable: false
});

// object1.property1 = 77;
// 在严格模式下会抛出错误

console.log(object1.property1);
// 42
// set get 相关api
var obj = { __book: '三国演义' }

Object.defineProperty(obj, 'book', {
    get: function() {
        return `<<${this.__book}>>`
    },
    set: function(val) {
        this.__book = val
    }
})
console.log(obj.book);
obj.book = '红楼梦';
console.log(obj.book);

3.2 Object.defineProperties()

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

var obj = {};
Object.defineProperties(obj, {
    'property1': {
        value: true,
        writable: true
    },
    'property2': {
        value: 'Hello',
        writable: false
    }
    // etc. etc.
});

3.3 Object.assign()

通过复制一个或多个对象来创建一个新的对象Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)

const target = { a: 1 }
const source1 = { b: 2 }
const source2 = {}
Object.defineProperties(source2, {
    'c': {
        value: 3,
        enumerable: true // 默认为false
    },
    'd': {
        value: 4
    }
})
const targetNew = Object.assign(target, source1, source2);
console.log(targetNew); // {a: 1, b: 2, c: 3}

3.4 Object.create()

使用指定的原型对象和属性创建一个新对象。

返回值一个新对象,带有指定的原型对象和属性

let parent = {
    x:1,
    y:2
}

let child = Object.create(parent,{
    z:{
        writable:true,
        configurable:true,
        value:3
    }
});
console.log(child); // {z:3,__proto__:x:1 y:1}

通过 Object.create() 创建继承

function A() {
    this.a = 1;
    this.b = 2;
}

A.prototype.getA = function() {
    console.log('getA');
}

// 继承实现1
// 执行了 new,相当于运行了一遍 A ,如果在 A 里做了一些其它事情(如改变全局变量)就会有副作用。
// 用 A 创建的对象实例做原型,里面可能会有一些冗余的属性 A自带的一些属性。
function B() {

}
B.prototype = Object.create(new A(), {
    z: {
        writable: true,
        configurable: true,
        value: 3
    }
});
console.log(B.prototype);
// 继承实现2
// 模拟了 new 的执行过程
function C() {
    A.call(this);
}
C.prototype = Object.create(A.prototype, {
    z: {
        writable: true,
        configurable: true,
        value: 3
    }
});
console.log(C.prototype)

3.5 Object.entries()

返回给定对象自身可枚举属性的 [key, value] 数组。

var obj = {
    name: "mla",
    age: 5,
    des: "我是谁,来自哪"
};
console.log(Object.entries(obj)); // [Array(2), Array(2), Array(2)]

3.6 Object.getOwnPropertyDescriptor()

返回对象指定的属性配置。

'use strict'
const object1 = {};

Object.defineProperty(object1, 'property1', {
    value: 42,
    writable: false
});

const descriptor1 = Object.getOwnPropertyDescriptor(object1, 'property1')
console.log(descriptor1); // {value: 42, writable: false, enumerable: false, configurable: false}

3.7 Object.getOwnPropertyNames()

返回一个数组,它包含了指定对象所有的可枚举或不可枚举的属性名。

let person = {
    name:"mla",
    age:5,
    desc:"我是谁,来自哪"
}
console.log(Object.getOwnPropertyNames(person)); // ["name", "age", "desc"]

Object.getOwnPropertyNames() 和 Object.keys() 方法类似,区别在于Object.keys只适用于可枚举的属性,而Object.getOwnPropertyNames返回对象的全部属性名称。

3.8 Object.keys()

返回一个包含所有给定对象自身可枚举属性名称的数组[]

let person = {
    name:"mla",
    age:5,
    desc:"我是谁,来自哪"
}
console.log(Object.keys(person)); // ["name", "age", "desc"]

3.9 Object.values()

返回给定对象自身可枚举值的数组。

let person = {
    name:"mla",
    age:5,
    desc:"我是谁,来自哪"
}
console.log(Object.values(person)); // ["mla", 5, "我是谁,来自哪"]

3.10 Object.prototype.isPrototypeOf()

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

3.11 Object.prototype.hasOwnProperty()

返回一个布尔值 ,表示某个对象是否含有指定的属性,而且此属性非原型链继承的。

在某个对象是否拥有某个属性,判断的方法有很多,常用的方法就是object.hasOwnProperty('×××'),这个方法是不包括对象原型链上的方法的

let obj = {
    name:"mla"
}

console.log(obj.hasOwnProperty('name')) //true
console.log(obj.hasOwnProperty('valueOf')) //false
下一篇:
%