JavaScript学习(五)对象 基础知识

对象

对象可以通过花括号 {…} 和其中包含一些可选的属性来创建。属性是一个键值对,键是一个字符串(也叫做属性名),值可以是任何类型

我们可以把对象想象成存放文件的橱柜。文件按照他们的名字来排列。这样根据文件名我们就很容易找到、添加或删除一个文件了。

JavaScript学习(五)对象 基础知识_第1张图片

我们可以用下面两种语法的任一种来创建一个空的对象(“空柜子”):

let user = new Object(); // “构造函数” 的语法
let user = {};  // “字面量” 的语法

JavaScript学习(五)对象 基础知识_第2张图片

通常,我们用花括号。这种方式我们叫做字面量

文本和属性

我们可以在创建的时候立即给对象一些属性,在 {...} 里面放置一些键值对。

let user = {     // 一个对象
  name: "John",  // 键 "name",值 "John"
  age: 30        // 键 "age",值 30
};

属性有键(或者也可以叫做名字,标识符),在冒号的前面 ":",值在冒号的右边。

user 对象中, 有两个属性:

  1. 第一个的键是 "name" 值是 "John"
  2. 第二个的键是 "age" 值是 30

是一个陈列着标记有两个 “name” 和 “age” 签名文件的橱柜。

JavaScript学习(五)对象 基础知识_第3张图片

任何时候我们都可以添加,删除,读取文件。

移除一个属性,我们用 delete 操作:

delete user.age;

 

存在值检查

有一个特别的操作符 "in" 来检查是否属性存在。

"key" in object

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

alert( "age" in user ); // true,user.age 存在
alert( "blabla" in user ); // false,user.blabla 不存在。

“for…in” 循环

为了使用对象所有的属性,就可以利用 for..in 循环。这跟 for(;;) 是完全不一样的东西。

for(key in object) {
  // 各个属性键值的执行区
}

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

for(let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 属性键的值
  alert( user[key] ); // John, 30, true
}

 

复制和合并,Object.assign

如果我们真的想这么做,就需要创建一个新的对象,遍历现有对象的属性,在原始值的状态下复制给新的对象。

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

let clone = {}; // 新的空对象

// 复制所有的属性值
for (let key in user) {
  clone[key] = user[key];
}

// 现在复制是独立的复制了
clone.name = "Pete"; // 改变它的值

alert( user.name ); // 原对象属性值不变

我们也可以用Object.assign 来实现。

Object.assign(dest[, src1, src2, src3...])
//参数 dest 和 src1, ..., srcN(可以有很多个)是对象。

let user = { name: "John" };

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

// 把 permissions1 和 permissions2 的所有属性都拷贝给 user
Object.assign(user, permissions1, permissions2);

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


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

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

 

总结

对象是具有一些特殊特性的关联数组。

他们存储键值对:

  • 属性的键必须是字符串或者符号(通常是字符串)。
  • 值可以是任何类型。

我们可以用下面的方法获取属性:

  • 点符号: obj.property
  • 方括号 obj["property"],方括号中可以使用变量 obj[varWithKey]

其他操作:

  • 删除属性:delete obj.prop
  • 检查属性是否存在:"key" in obj
  • 遍历对象:for(let key in obj) 循环。

对象根据引用来赋值或者复制。换句话说,变量存的不是对象的"值",而是值的 “引用”(内存地址)。 所以复制变量或者传递变量到方法中只是复制了对象的引用。 所有的引用操作(像增加,删除属性)都作用于同一个对象。

深拷贝的话我们可以使用 Object.assign 或者 _.cloneDeep(obj)。

我们在这一章学习的叫做“基本对象” — 对象。

JavaScript 中还有很多其他类型的对象:

  • Array 存储有序数据集合。
  • Date 存储时间日期。
  • Error 存储错误信息

构造函数和操作符 "new"

构造函数

构造函数在技术上是常规函数。不过有两个约定:

  1. 他们首先用大写字母命名。
  2. 它们只能用 "new" 操作符来执行。
function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false

构造函数 Return

return 语句,那么规则很简单:

  • 如果 return 对象,则返回它,而不是 this
  • 如果 return 一个原函数,则忽略。
function BigUser() {

  this.name = "John";

  return { name: "Godzilla" };  // <-- returns 一个 object
}

alert( new BigUser().name );  // 哇哦,得到了对象,name 属性值为 Godzilla ^^


function SmallUser() {

  this.name = "John";

  return; // 完成执行,returns this

  // ...

}

alert( new SmallUser().name );  // John

总结

  • 构造函数或简言之,就是常规函数,但构造函数有个共同的约定,命名它们首字母要大写。
  • 构造函数只能使用 new 来调用。这样的调用意味着在开始时创建空的 this,并在最后返回填充的对象。

你可能感兴趣的:(前端学习)