【殷实基础系列】请查收,所有的对象方法都在这里了....

959 阅读12分钟

写在前面

掌握对象方法同样是前端开发中必会的技能,熟练掌握对象方法会快速处理好数据、快速解决开发工作中遇到的问题。这篇文章将整理所有的对象方法。

查看所有的对象方法

众所周知,对象的方法也都在自己的原型链上,所以可在浏览器中直接查看。

  • Object.prototype方法
  • dir(Object)

对象方法讲解

Object.assign()

方法将n个对象复制到目标对象(浅复制)。

  • 参数

    • target:目标对象。

    • source:源对象。

  • 返回值

返回目标对象。

  • 示例
var target = {name'小红'age22};

var source1 = {job'前端开发'};

var source2 = {age24say: {name'小丽'}};

console.log(Object.assign(target, source1, source2));  // { name: '小红', age: 24, job: '前端开发', say: { name: '小丽' } }

// 如果属性相同,后面的会覆盖前面的属性

Object.getOwnPropertyDescriptor()

获取对象上一个自有属性的属性描述。

  • 参数

    • obj:需要查找的对象。

    • prop:目标对象的某个自有属性。

  • 返回值

返回对象上自有属性的属性描述,如果没有该属性,则返回undefined

  • 示例
var person = {name'小红'};

var descriptor1 = Object.getOwnPropertyDescriptor(person, "name");

var descriptor2 = Object.getOwnPropertyDescriptor(person, "age");

console.log(descriptor1);  // { value: '小红', writable: true, enumerable: true, configurable: true }
console.log(descriptor2);  // undefined

Object.getOwnPropertyDescriptors()

获取对象上所有属性的属性描述。

  • 参数

    • obj:要获取属性描述的对象
  • 返回值

返回对象的所有属性的描述,如果没有属性,则返回空对象。

  • 示例
var person = {name'小红'age11};

var person1 = {};

console.log(Object.getOwnPropertyDescriptors(person)); 
// { 
        name: { 
            value'小红',
            writabletrue,
            enumerabletrue,
            configurabletrue 
        },
        age: { value11,
             writabletrue,
             enumerabletrue,
             configurabletrue 

        } 
    }
console.log(Object.getOwnPropertyDescriptors(person1)); // {}

Object.getOwnPropertyNames()

获取一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。

  • 参数

    • obj:要获取属性名的对象。
  • 返回值

在给定对象上找到的自身属性对应的字符串数组。

  • 示例
var person = {name'小红'age11};

console.log(Object.getOwnPropertyNames(person));  // ['name', 'age']

consoel.log(Object.getOwnPropertyNames({}));      // []

Object.getOwnPropertySymbols()

获取一个给定对象自身的所有Symbol属性。

  • 参数

    • obj:任何一个对象。
  • 返回值

返回所有Symbol属性的数组。

  • 示例
var person = {name'小红'};
var a = Symbol("a");
person[a] = 11;

console.log(Object.getOwnPropertySymbols(person));  // [Symbol(a)]

Object.is()

判断两个值是否为相同的值。

  • 参数

    • value1:第一个需要比较的值。

    • value2:第二个需要比较的值。

  • 返回值

如果两个值相同,返回true;如果不同,则返回false

  • 示例
console.log(Object.is(nullnull));               // true
console.log(Object.is(undefinedundefined));     // true
console.log(Object.is(11));                     // true
console.log(Object.is(1"1"));                   // false
console.log(Object.is("a""a"));                 // true
console.log(Object.is(truetrue));               // true
console.log(Object.is(0-0));                    // false

Object.preventExtensions()

让一个对象变的不可扩展,也就是永远不能再添加新的属性。

  • 参数

    • obj: 一个对象。
  • 返回值

已经变为不可拓展的对象。

  • 示例
var person = {name'小红'};

var person1 = Object.preventExtensions(person);

person.age = 11;   // 此时对象已不可拓展,所以添加属性会不成功

console.log(person, person1);  // {name: '小红'} {name: '小红'}

Object.isExtensible()

判断一个对象是否可以拓展

  • 参数

    • obj:任意一个对象。
  • 返回值

返回Boolean,如果可拓展,返回true,否则为false

  • 示例
var person = {name'小红'};

console.log(Object.isExtensible(person));    // true

Object.preventExtensions(person);

console.log(Object.isExtensible(person));    // false 

Object.seal()

使对象封印,对象封印也可以创建一个不可扩展的对象,被封印的对象不可扩展并且所有属性都不可配置。对象封印使对象不能添加属性,也不能删除、改变类型(只能读写)

  • 参数

    • obj:要封印的对象。
  • 返回值

返回被封印的对象。

  • 示例
var person = {
    name'熊大'
}

Object.seal(person);

person.age = 11;
person.name = '熊二';

console.log(person.name);                       // 熊二

delete person.name;

console.log(person);                            // {name: '熊二'}

Object.isSealed()

判断一个对象是否被封印

  • 参数

    • obj:任意一个对象。
  • 返回值

返回Boolean,如果被封印,返回true,否则为false

  • 示例
var person = {
    name'熊大'
}

console.log(Object.isSealed(person));            // false

Object.seal(person);

console.log(Object.isSealed(person));           // true

Object.freeze()

使对象冻结,对象冻结也是扩展对象的一种方法,一个被冻结的对象只为可读,被冻结的对象无法解冻。

  • 参数

    • obj:任意一个对象。
  • 返回值

返回被冻结的对象

  • 示例
var person = {
    name'熊大'
}

Object.freeze(person);

person.age = 11;
person.name = '熊二';

delete person.name;

console.log(person);                         // {name: '熊大'}  

Object.isFrozen()

判断一个对象是否被冻结

  • 参数

    • obj:任意一个对象。
  • 返回值

返回Boolean,如果被冻结,返回true,否则为false

  • 示例
var person = {
    name'熊大'
}

console.log(Object.isFrozen(person));          // false

Object.freeze(person);

console.log(Object.isFrozen(person));         // true

Object.create()

创建一个新对象。

  • 参数

    • proto:创建对象的原型对象。

    • propertiesObject(可选):为新创建的对象设置属性描述。

  • 返回值

返回带有指定原型对象和属性的新对象。

  • 示例
var person = Object.create(Object.prototype);

console.log(person);  // 输出结果为图1

var person1 = Object.create(Object.prototype, {
    name: {
        configurabletrue,
        enumerabletrue,
        value'小红',
        writabletrue,
    }
})

console.log(person1); // 输出结果为图2

Object.defineProperty()

直接在一个对象上定义一个新属性,或者修改一个对象的现有属性。

  • 参数

    • obj:要定义属性的对象。

    • prop:要定义或修改的属性名称。

    • descriptor:要定义或修改的属性描述。

  • 返回值

返回新对象。

  • 示例
var person = {};

var person1 = Object.defineProperty(person, "name", {
    configurabletrue,
    enumerabletrue,
    value'小红',
    writabletrue,
})

console.log(person1);   // {name: '小红'}

Object.defineProperties()

在一个对象上定义新的属性或修改现有属性。

  • 参数

    • obj:要定义属性的对象。

    • props:要定义其可枚举属性或修改的属性描述符的对象。

      • configurable

      • enumerable

      • value

      • writable

      • get

      • set

  • 返回值

返回新对象。

  • 示例
var person = {};

var person1 = Object.defineProperties(person, {
    name: {
        configurable: true,
        enumerable: true,
        value'小红',
        writable: true,
    },
    age: {
        configurable: true,
        enumerable: true,
        value11,
        writable: true,
    }
})

console.log(person, person1);  // { name: '小红', age: 11 } { name: '小红', age: 11 }

Object.setPrototypeOf()

设置一个指定的对象的原型到另一个对象或null

  • 参数

    • obj:要设置其原型的对象。

    • prototype:该对象的新原型。

  • 示例

var person = Object.create({}, {name: {value'小红'}});
var person1 = {};

Object.setPrototypeOf(person1, person);

console.log(person1);

Object.getPrototypeOf()

获取指定对象的原型。

  • 参数

    • obj:要返回原型的对象。
  • 返回值

给定对象的原型。如果没有,返回null

  • 示例
var person = Object.create(null);
var person1 = {};

console.log(Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person1));

Object.keys()

获取对象的自身可枚举属性。

  • 参数

    • obj:要获取自身可枚举属性的对象。
  • 返回值

返回一个对象的自身可枚举属性数组。

  • 示例
var person = Object.defineProperties({}, {
    name: {
        value'小红',
        enumerabletrue
    },
    age: {
        value11
    }
});

var person1 = {name'小丽'age11};

console.log(Object.keys(person));      // ["name"]
console.log(Object.keys(person1));     // ["name", "age"]

Object.entries()

获取一个给定对象自身可枚举属性的键值对。

  • 参数

    • obj:要获取自身可枚举属性键值对的对象。
  • 返回值

返回一个对象的自身可枚举属性键值对的数组。

  • 示例
var person = Object.defineProperties({}, {
    name: {
        value: '小红',
        enumerable: true
    },
    age: {
        value: 11
    }
});

var person1 = {name: '小丽', age: 11};

console.log(Object.entries(person));      // [["name", "小红"]]
console.log(Object.entries(person1));     // [["name", "小丽"] ["age", 11]]

Object.fromEntries()

该方法将键值对列表转换为一个对象。

  • 参数

    • iterable:可迭代对象
  • 返回值

返回一个由该迭代对象条目提供对应属性的新对象。

  • 示例
var person = {name'小丽'age11};

var entries = Object.entries(person);

console.log(Object.fromEntries(entries));   // {name: "小丽", age: 11}

Object.values()

获取一个给定对象自身的所有可枚举属性值。

  • 参数

    • obj:要获取的对象
  • 返回值

一个包含对象自身的所有可枚举属性值的数组。

  • 示例
var person = {name'小红'age11};

console.log(Object.values(person));     // ["小红", 11]

Object.hasOwnProperty()

判断一个对象自身属性中是否具有指定的属性。

  • 参数

    • prop:要判断的属性。
  • 返回值

返回Boolean值,如果包含,返回true,如果不包含,返回false

  • 示例
var person = {name'小红'};

console.log(person.hasOwnProperty("name"));   // true
console.log(person.hasOwnProperty("age"));    // false

Object.isPrototypeOf()

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

  • 参数

    • obj:要检测的对象。
  • 返回值

返回Boolean值,如果包含,返回true,如果不包含,返回false。如果被检测对象是nullundefined,则会报错(TypeError)。

  • 示例
var person = {};

console.log(person.isPrototypeOf(Object));   // false

var person1 = null;

console.log(person1.isPrototypeOf(Object));

Object.propertyIsEnumerable()

判断指定属性是否可枚举。

  • 参数

    • prop:要检测的属性名。
  • 返回值

返回Boolean值,如果可枚举,返回true,如果不,返回false

  • 示例
var person = Object.defineProperties({}, {
    name: {
        value'小红',
        enumerabletrue
    },
    age: {
        value11
    }
});

console.log(person.propertyIsEnumerable("name"));   // true
console.log(person.propertyIsEnumerable("age"));    // false

Object.toString()

将对象转换为字符串格式。

  • 返回值

返回对象的字符串格式。

  • 示例
var person = {name'小红'};

console.log(person.toString());  // "[object Object]"

Object.valueOf()

获取一个对象的原始值。

  • 返回值

返回对象的字符串格式。

对象 返回值
Object 对象本身
Array 数组本身
Boolean 布尔值
Date 返回至1970.1.1 00:00:00的毫秒数
Function 函数本身
Number 数字值
String 字符串值
Math 无valueOf方法
Error 无 valueOf 方法

  • 示例
var person = {name'小红'};
var bool = true;
var date = new Date();
var func = function({
    console.log(1);
}
var str = '前端开发';
var num = 1;

console.log(person.valueOf()); 
console.log(bool.valueOf());
console.log(date.valueOf()); 
console.log(func.valueOf());
console.log(str.valueOf()); 
console.log(num.valueOf());

Object.toLocaleString()

返回一个对象的字符串表示,在特定语言环境中使用。

  • 返回值

调用Object.toString()的结果,返回对象的字符串格式。

  • 示例
var person = {name: '小红'};
var num = 78930207;
....

console.log(person.toLocaleString());   // "[object Object]"
console.log(num.toLocaleString());      // 78,930,207
....

写在最后

上一篇文章,我们总结了数组的所有方法,需要查看的小伙伴可以移步这里。传送门:【殷实基础系列】请查收,所有的数组方法都在这里了…

到这里,对象方法已经整理完毕,希望这些对大家能有所帮助~有哪里写错的地方,也请大家指点出来,我们共同学习,共同进步~

最后,分享一下我的公众号「web前端日记」,小伙伴们可以关注一波~