Javascript学习---对象篇

ps：趁着寒假时间重新系统地学习javascript，由于当初学习javascript的时候是跟着教学视频学的，现在回忆起来有些零零散散，所以现在赶紧捡起来。要感谢这个网站（点击打开链接），很不错：)。下面是学习过程的笔记~~

对象属性

javascript对象使用大括号“{}”括起来并且以键值对的形式声明，例如：

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

这样就声明好了一个对象user，如果要访问对象中的属性值的话，可以使用点号"."来显示调用，例如：

alert( user.name ); // John
alert( user.age ); // 30

当然，我们也可以往对象里添加属性，例如：

user.isAdmin = true;
alert(user.isAdmin);   //true

同时，为了删除对象的属性，我们可以使用"delete"关键字来执行删除操作，例如：

delete user.age;
alert(user.age);  //undefined

对于复杂的属性名，我们可以用双引号""括起来声明，否则会报错，例如：

let user = {
  name: "John",
  age: 30,
  "likes birds": true   // multiword property name must be quoted
};

中括号

对于复杂的属性名，我们都用双引号""括起来，访问的时候我们不能直接用点号"."来访问，必须使用中括号"[]"访问，中括号里面的属性名也必须要用双引号""括起来，例如：

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

当然，我们也可以使用变量来代替属性名，例如：

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

计算型属性

我们可以使用中括号"[]"的方式来对对象的属性进行操作，例如：

let fruit = prompt("Which fruit to buy?", "apple");

let bag = {
  [fruit]: 5, // the name of the property is taken from the variable fruit
};

alert( bag.apple ); // 5 if fruit="apple"

它等价于：

let fruit = prompt("Which fruit to buy?", "apple");
let bag = {};

// take property name from the fruit variable
bag[fruit] = 5;

同时，我们也可以在中括号里使用复杂的表达式，例如：

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

ps

javascript里面的保留字，比如var，let，return等可以用于对象的属性名，例如：

let obj = {
  for: 1,
  let: 2,
  return: 3
}

alert( obj.for + obj.let + obj.return );  // 6

但是有一个特殊的例外，" __proto__"关键字就不可以，这是由于javascript的历史原因，这个留在以后再讲

let obj = {};
obj.__proto__ = 5;
alert(obj.__proto__); // [object Object], didn't work as intended

属性值的简写方式

看这下面的两个例子就明了^_^，代码是生动形象滴~

function makeUser(name, age) {
  return {
    name: name,
    age: age
    // ...other properties
  };
}

let user = makeUser("John", 30);
alert(user.name); // John

简写形式:

function makeUser(name, age) {
  return {
    name, // same as name: name
    age   // same as age: age
    // ...
  };
}

当然，也可混合使用，例如：

let user = {
  name,  // same as name:name
  age: 30
};

属性存在检查

对象中属性是否存在，我们有两种方式来进行检查，第一种是直接访问对象属性，若不存在则会返回undefined，例如：

let user = {};

alert( user.noSuchProperty === undefined ); // true means "no such property"

第二种方法是使用"in"关键字，例如：

let user = { name: "John", age: 30 };

alert( "age" in user ); // true, user.age exists
alert( "blabla" in user ); // false, user.blabla doesn't exist

当然，也可以使用变量来代替直接写属性名，例如：

let user = { age: 30 };

let key = "age";
alert( key in user ); // true, takes the name from key and checks for such property

个人推荐第二种写法，下面这个例子就很生动形象啦~

let obj = {
  test: undefined
};

alert( obj.test ); // it's undefined, so - no such property?

alert( "test" in obj ); // true, the property does exist!

对象属性遍历

使用"for...in"的语法格式来对对象进行属性的遍历，例如：

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for(let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // values for the keys
  alert( user[key] ); // John, 30, true
}

这里要注意的是，遍历出来的只是属性名称，需要进一步访问属性对应的值。

属性遍历的顺序

如果我们的属性名是数字格式的字符串，也就是整形属性，则遍历过程中会将其排序，例如：

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  // ..,
  "1": "USA"
};

for(let code in codes) {
  alert(code); // 1, 41, 44, 49
}

为了避免这种情况，我们可以在属性名前加上"+"，以此来避免排序，例如：

let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA"
};

for(let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}

但如果不是整形属性，则默认按添加属性的顺序遍历出来，不进行排序。

对象的复制（引用复制）

学过其他编程语言都知道浅复制和深复制的区别了吧，记得当年我是在学习C++的时候才知道的，那一段青葱岁月啊，唉~老了老了┭┮﹏┭┮， 其实javascript也一样，如果我们直接用等号"="来复制则是引用复制，也就是浅复制，看例子：

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // changed by the "admin" reference

alert(user.name); // 'Pete', changes are seen from the "user" reference

也可以使用内置方法Object.assign()来复制，它也是浅复制，例如：

let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// copies all properties from permissions1 and permissions2 into user
Object.assign(user, permissions1, permissions2);

// now user = { name: "John", canView: true, canEdit: true }

若user和被复制对象有一样的属性，则user会被覆写。

浅复制必然会导致修改同一个对象的冲突，我们可以手动进行深复制，例如：

let user = {
  name: "John",
  age: 30
};

let clone = {}; // the new empty object

// let's copy all user properties into it
for (let key in user) {
  clone[key] = user[key];
}

// now clone is a fully independant clone
clone.name = "Pete"; // changed the data in it

alert( user.name ); // still John in the original object

不过对于一些复杂的属性，这就显得蛋疼了，例如：

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = Object.assign({}, user);

alert( user.sizes === clone.sizes ); // true, same object

// user and clone share sizes
user.sizes.width++;       // change a property from one place
alert(clone.sizes.width); // 51, see the result from the other one

对此，我们可以使用javascript的库lodash中的_.cloneDeep(obj)方法来进行深复制，这个以后再分析~

第一次写博客，暂时就这样吧O(∩_∩)O~学习的道路还很长，来日方长哈~