# JavaScript 入门 Day 6

By [aow](https://paragraph.com/@ashonthewall) · 2022-03-20

---

大概还有30个练习我们就能学完JS的基础知识了。

**Build JavaScript Objects**

object是一个非常重要的概念，它很像array，不同点在于array里面装的data是通过排序(Index)来标注，比如myArray\[0\], myArray\[8\]等等，而object是通过命名来标注，比如

猫【名字：kitty，年龄：2，性别：公】这样子，更符合我们现实世界中对物品属性的标注。

    const cat = {
      "name": "Whiskers",
      "legs": 4,
      "tails": 1,
      "enemies": ["Water", "Dogs"]
    };
    

// object中的各种“标签”，比如上面的”name”, “legs”等，都是属于string，所以别忘了加 “ ”。

**Accessing Object Properties with Dot Notation**

**Accessing Object Properties with Bracket Notation**

access array中的data需要用\[ \]，而在object中，由于有了“标签”，可以用 .标签的方式和 \[ \]对方式都ok。

当标签中带空格的时候，比如 “ family name”，那么用\[“family name”\]，而不能用.family name,因为计算机无法识别后者。

**Accessing Object Properties with Variables**

在object中，除了直接引用标签外，还可以用variable赋值。

    const testObj = {
      12: "Namath",
      16: "Montana",
      19: "Unitas"
    };
    
    const playerNumber = 16; 
    const player = testObj[playerNumber];  
    

这样就可以找到testObj这个object中标签为16的项。

同样的，只需要重新赋值playNumer = 19, 就可以找到标签为19的项。以此类推。

**Updating Object Properties**

object里面的property是可以被修改的。比如

    const myDog = {
      "name": "Coder",
      "legs": 4,
      "tails": 1,
      "friends": ["freeCodeCamp Campers"]
    };
    
    myDog.name = "Happy Coder";
    

修改方式有两种，可以用.property 或者 \[“property”\]，和之前说的一样。

**Add New Properties to a JavaScript Object**

增加property和修改的操作是一样的。

**Delete Properties from a JavaScript Object**

删除怎么办呢？我们使用delete这个命令。

    const myDog = {
      "name": "Happy Coder",
      "legs": 4,
      "tails": 1,
      "friends": ["freeCodeCamp Campers"],
      "bark": "woof"
    };
    
    delete myDog.tails;
    

很简单。

**Using Objects for Lookups** 一个非常有意思的练习。可以把它理解成object可以当作词典使用。

当我们明确知道检索对象是一个有限的目录时，与其通过if statement或者switch去循环验证条件，还不如把整个检索对象编译成一个object，然后通过一个function的关键词去检索找到结果。

    function phoneticLookup(val) {
      let result = "";
      const lookup = {
        "alpha": "Adams",
        "bravo": "Boston",
        "charlie": "Chicago",
        "delta": "Denver",
        "echo": "Easy",
        "foxtrot": "Frank"
      };
    
      result = lookup[val];
      return result;
    }
    
    phoneticLookup("charlie");
    

这里，我们通过把result赋值给object lookup的一个检索项，来返回function phoneticLookup的数据。

**Testing Objects for Properties**

这里讲到一个验证property是否存在的方式 ： .hasOwnProperty(propname)

如果存在，会返回true，不存在，返回false。

然后练习部分通过一个function的方式，两个arguments一个是object,另一个是待验证的property，来使用这个.hasOwnProperty命令，得到简洁的结果。

    function checkObj(obj, checkProp) {
      if (obj.hasOwnProperty(checkProp)){
        return obj[checkProp];
      } else {
        return "Not Found";
      }
    }
    

**Manipulating Complex Objects**

**Accessing Nested Objects**

**Accessing Nested Arrays**

**Record Collection**

obejct中可以放很多不同类型的data type，比如arrays, booleans, number, string, function甚至嵌套object。

总之，object就是一个大词典，什么都能装。

这里，无论access array还是objects, 方法之前都讲过，很简单，唯一需要的是细心。

个人感觉代码入门之后，语法什么的都不是问题，和财务有点像，大部分时候都是在解决因为粗心或者思路错误带来的问题。

好了，今天的练习先到这里，object这个概念初体验完成，概念很简单，但是基础很重要。

明天学习loops，然后所有的基础知识应该能学完。

在这里和这里也可以找到我。

[https://discord.gg/madnfts](https://discord.gg/madnfts)

[https://discord.gg/Z25p8gkZWx](https://discord.gg/Z25p8gkZWx)

---

*Originally published on [aow](https://paragraph.com/@ashonthewall/javascript-day-6)*