JavaScript 入门 Day 6

大概还有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/Z25p8gkZWx

aow

JavaScript 入门 Day 6

aow