JavaScript 对象 | 完整指南

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

JavaScript 对象

与其他编程语言类似，JavaScript 对象是键值对的集合，其中每个键都是一个字符串，每个值可以是任何数据类型。

创建 JavaScript 对象的方法

对象字面量表示法
98% 的时间里，你会使用最简单的方法。
```
    const scorcism = {
        name: "Abhishek",
        age:21
    }
```
键值对用花括号括起来。{}

使用new关键字
创建带有构造函数的对象new。您只会在 1.8% 的情况下使用此关键字。

    function About(name, age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }   

    const me = new About("Abhishek", 21, "Mumbai");

“new”会创建一个包含内部“this”的对象。如果省略“new”，则“this”是全局上下文，因此属性将在对象外部创建。~ Eckehard

使用 Object.create()
方法可以创建一个具有指定原型对象的新对象。
您只有 0.2% 的时间会用到它。

    const aboutData = {
        greet:function(){
                return `Hello, my is ${this.name}`; // {this.name} is the key of this object
            }
    }
    const me = Object.create(aboutData);
    me.name = 'Abhishek'
    me.age = 21;

别太担心 :)

访问对象属性

可以使用点号表示法和括号表示法访问 JS 对象的属性。

    const me = {
            name: "Abhishek",
            age:21
    }
    console.log(me.name);   
    console.log(me["age"]);

尝试运行以下代码片段。

（undefined每次控制台输出的都是函数本身的返回值console.log。别担心，没什么好担心的🕺）

对象原型和继承

JS 的核心概念是原型。JS 中的每个对象都关联着一个原型对象，该原型对象充当了该对象的蓝图。

简而言之，对象原型是创建新对象的模板。

这个原型对象包含可供所有由此创建的实例访问的属性和方法。🍰

继承是通过对象原型相互链接来实现的。
例如，我们上面用到的Object.create()方法，它用于创建一个新对象。

静态方法

（试试😃）

Object.keys()

返回给定对象自身可枚举属性名称的数组。

简而言之，Object.keys() 方法将返回键的列表。

注意：自有枚举对象指的是对象自身拥有的属性（不是从其属性链继承的）。
```
    const aboutMe= {
        name: "Abhishek",
        age:21
    }
    let aboutMeKeys = Object.keys(aboutMe);
    // Expected Output: [ 'name', 'age' ]
```

Object.values()

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

简而言之，Object.values() 方法将返回一个值列表。

            const aboutMe= {
                name: "Abhishek",
                age:21
            }
            let aboutMeKeys = Object.values(aboutMe);
            // Expected Output: [ 'Abhishek', 21 ]

Object.assign()

将一个或多个源对象中所有可枚举自身属性的值复制到目标对象。

    const target = {age: 21}
    const source = {name: "Abhishek"}
    const merged = Object.assign(target, source);
    console.log(merged)
    // Expected Output: { age: 21, name: 'Abhishek' }

注意：您可以添加任意数量的源参数。

目标位置将包含修改后的对象。

    console.log(merged === target)
    // Expected Output: true

Object.create()

以现有对象为原型创建新对象。

    const me = {
          name: "Abhishek",
          eatsAppleDaily: false,
          printAbout: function(){
            console.log(`I am ${this.name}. and I ${this.eatsAppleDaily ? "eat" :"don't eat"} 
                            apple daily.`);
          }
        };

    // Creating a myFriend Object inheriting from me. 
    const myFriend = Object.create(me); // He is my child now😃.  

    myFriend.name = "Ladoo";
    myFriend.eatsAppleDaily = true;

    console.log(me.printAbout());
    // Expected Output: I am Abhishek. and I don't eat apple daily.
    console.log(myFriend.printAbout());
    // Expected Output: I am Ladoo. and I eat apple daily.

对象.entries()

返回给定对象自身可枚举的字符串键属性键值对数组😒。

它返回一个数组，其中每个元素都是对象的一个键值对。每个键值对都表示为一个包含两个元素的数组：第一个元素是键，第二个元素是对应的值。
```
    const me = { name:"Abhishek", age:21 }
    console.log(Object.entries(me))
    // Expected output: [ [ 'name', 'Abhishek' ], [ 'age', 21 ] ]
```

Object.fromEntries()

Object.fromEntries 将键值对列表转换为对象。

TL;DR 与 Object.entries() 相反。

    const me = [ [ 'name', 'Abhishek' ], [ 'age', 21 ] ]
    console.log(Object.fromEntries(me))
    // Expected output: { name: 'Abhishek', age: 21 }

对象.冻结()

The Object.freeze() is a method that "freezes" an object.

冻结对象时，可以防止向其添加新属性，防止删除或更改现有属性，还可以防止更改原型。

        const me = { name:"Abhishek", age:21 }
        Object.freeze(me); // Freezing the object
        me.name = "scorcism";
        me.age = 22;
        console.log(me) 
        // Expected output: { name: "Abhishek", age: 21 }

对象不会受到影响。

对象已冻结()

 Determines if the object is frozen

    const me = { name:"Abhishek", age:21 }
    Object.freeze(me); 
    console.log(Object.isFrozen(me))
    // Expected output: true

对象.密封()

Object.seal() 是一个用于“密封”对象的方法。

密封对象会阻止向其添加新属性，并将所有现有属性标记为不可配置（即阻止删除它们或更改其属性）。
```
     const me = { name:"Abhishek", age:21 }
     Object.seal(me); 
    me.name = "scorcism"; // This change will be affected 
    delete me.age; // This deleting will not take effect
    console.log(me)
    // Expected Output: { name: 'scorcism', age: 21 }
```
注意： Object.freeze()阻止对对象进行任何更改，而Object.seal()允许更改现有属性，但阻止添加或删除属性。

Object.isSealed()
判断对象是否被密封。

    const me = { name:"Abhishek", age:21 }
     Object.seal(me);   
     console.log(Object.isSealed(me));
     // Expected output: true

继承静态方法

在学习实例静态方法之前，让我们先了解一下this对象关键字的概念。

假设我们有一个对象

    const person = { name: 'Abhishek' };

因此，如果我们在对象中添加一个函数，this它将引用同一对象的所有属性。

    const person = { 
        name: 'Abhishek',
        sayMyName: function() {
            return `My name is ${this.name}`;
        }
    };

    console.log(person.sayMyName());
    // Expected Output: My name is Abhishek

如您所见，这里this.name被替换成了键值name。

现在您已经了解了this关键词的使用场景，让我们继续往下看。

1. prototype.bind()

该bind()方法会创建一个新函数，当调用该函数时，其this关键字会被设置为提供的值。
当我们想从一个对象借用一个方法并在另一个对象的上下文中使用它时，这非常有用。

    function sayMyName (){
        return `My name is ${this.name}`
    }

    const person = { 
        name: 'Abhishek',
        sayMyName: sayMyName
    };

    console.log(person.sayMyName());
    // Expected Output: My name is Abhishek

    const person2 = {
        name: 'Walter'
    }

    const person2NameFunc = sayMyName.bind(person2);

    console.log(person2NameFunc());
    // Expected Output: My name is Walter

对于 person2NameFunc，person 对象this.name取自 person2 对象，因为我们已经将该sayMyName函数与 person2 对象绑定。

2. prototype.call()

该call()方法用于调用一个函数，并this分别提供给定的值和参数。

        function introduce(language) {
              console.log(`I code in ${language}. My name is ${this.name}.`);
        }

        const mySelf = {
            name: "Abhishek"
        }

        introduce.call(mySelf, 'Java');
        // Expected output: I code in Java. My name is Abhishek.

这里，introduce函数接受一个语言参数，并记录有关该语言和人名的信息。

call ()方法用于调用此函数，并将 mySelf 对象作为 this 值，从而允许访问其属性。

bind()与创建一个具有指定值的新函数不同this，它直接使用指定的值以及各个参数call()调用函数。this

3. prototype.apply()

该apply()方法与类似call()，但它不是单独接受参数，而是接受数组形式的参数。

        function add(...args){
            let sum = args.reduce((acc, curr)=> acc + curr, 0 );
            console.log(sum);
        }
        const numbers = [1,2,3,4,5];
        add.apply(null, numbers)
        // Expected output: 15

何时使用 call、bind 和 apply

调用：call用于立即执行函数并指定this要引用的内容。
绑定：bind用于创建一个新函数，该函数在稍后执行时具有预先确定的this值。
apply ”apply当你有一个参数数组想要传递给一个函数时使用。

PS：我到处都用我的名字，是因为这样你在阅读时，每当看到我的名字，你也会忍不住想用自己的名字代替。

这些是最常用的几种方法，您可以在这里了解更多。

如果这篇文章对您有帮助，请点赞、关注或做任何您觉得有意义的事情🙂。

您可以在LinkedIn、GitHub、Dev.to和hashnode上关注我。

拜拜🍕

文章来源：https://dev.to/scorcism/objects-in-js-complete-guide-3gl8

菜单

分享

JavaScript 对象 | 完整指南 DEV 全球展示挑战赛，由 Mux 呈现：展示你的项目！

JavaScript 对象 | 完整指南

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！