diff --git a/04-JavaScript基础/09-对象简介和对象的基本操作.md b/04-JavaScript基础/09-对象简介.md similarity index 100% rename from 04-JavaScript基础/09-对象简介和对象的基本操作.md rename to 04-JavaScript基础/09-对象简介.md diff --git a/04-JavaScript基础/20-内置对象:Math.md b/04-JavaScript基础/11-内置对象:Math.md similarity index 100% rename from 04-JavaScript基础/20-内置对象:Math.md rename to 04-JavaScript基础/11-内置对象:Math.md diff --git a/04-JavaScript基础/21-内置对象:Date.md b/04-JavaScript基础/12-内置对象:Date.md similarity index 100% rename from 04-JavaScript基础/21-内置对象:Date.md rename to 04-JavaScript基础/12-内置对象:Date.md diff --git a/04-JavaScript基础/22-内置对象:String.md b/04-JavaScript基础/13-内置对象:String.md similarity index 100% rename from 04-JavaScript基础/22-内置对象:String.md rename to 04-JavaScript基础/13-内置对象:String.md diff --git a/04-JavaScript基础/18-数组简介.md b/04-JavaScript基础/14-数组简介.md similarity index 100% rename from 04-JavaScript基础/18-数组简介.md rename to 04-JavaScript基础/14-数组简介.md diff --git a/04-JavaScript基础/19-数组的常见方法&数组的遍历.md b/04-JavaScript基础/15-数组的常见方法&数组的遍历.md similarity index 100% rename from 04-JavaScript基础/19-数组的常见方法&数组的遍历.md rename to 04-JavaScript基础/15-数组的常见方法&数组的遍历.md diff --git a/04-JavaScript基础/10-函数.md b/04-JavaScript基础/16-函数.md similarity index 100% rename from 04-JavaScript基础/10-函数.md rename to 04-JavaScript基础/16-函数.md diff --git a/04-JavaScript基础/11-作用域和变量提升.md b/04-JavaScript基础/17-作用域和变量提升.md similarity index 100% rename from 04-JavaScript基础/11-作用域和变量提升.md rename to 04-JavaScript基础/17-作用域和变量提升.md diff --git a/04-JavaScript基础/12-预编译.md b/04-JavaScript基础/18-预编译.md similarity index 100% rename from 04-JavaScript基础/12-预编译.md rename to 04-JavaScript基础/18-预编译.md diff --git a/04-JavaScript基础/13-执行期上下文.md b/04-JavaScript基础/19-执行期上下文.md similarity index 100% rename from 04-JavaScript基础/13-执行期上下文.md rename to 04-JavaScript基础/19-执行期上下文.md diff --git a/04-JavaScript基础/14-this.md b/04-JavaScript基础/20-this.md similarity index 100% rename from 04-JavaScript基础/14-this.md rename to 04-JavaScript基础/20-this.md diff --git a/04-JavaScript基础/16-对象的创建&构造函数.md b/04-JavaScript基础/21-对象的创建&构造函数.md similarity index 86% rename from 04-JavaScript基础/16-对象的创建&构造函数.md rename to 04-JavaScript基础/21-对象的创建&构造函数.md index f32e732..75e3814 100644 --- a/04-JavaScript基础/16-对象的创建&构造函数.md +++ b/04-JavaScript基础/21-对象的创建&构造函数.md @@ -1,6 +1,6 @@ - > 在看本文之前,可以先复习前面的一篇文章:《04-JavaScript基础/09-对象简介和对象的基本操作.md》 + > 在看本文之前,可以先复习前面的一篇文章:《04-JavaScript基础/09-对象简介.md》 ## 创建自定义对象的几种方法 @@ -12,24 +12,62 @@ - 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)。 + + + + +使用对象字面量来创建一个对象,非常简洁,举例如下:: + +```javascript + var obj = {}; +``` + + +使用对象字面量,可以在创建对象时,直接指定对象中的属性。语法:{属性名:属性值,属性名:属性值....} + 例如: ```javascript -var o = { + var obj2 = { + + name: "猪八戒", + age: 13, + gender: "男", + test: { + name: "沙僧" + } + sayName: function(){ + console.log('smyhvae'); + } + }; +``` + + +例如: + +```javascript +var obj = { name: "千古壹号", age: 26, isBoy: true, - sayHi: function() { + // 还可以存放一个签到的对象 + test: { + id: 123, + tel: 180 + } + //我们还可以在对象中增加一个方法。以后可以通过obj.sayName()的方式调用这个方法 + sayName: function() { console.log(this.name); } }; -console.log(o); +console.log(JSON.stringify(obj)); ``` -控制台输出: +对象字面量的属性名可以加引号也可以不加,建议不加。如果要使用一些特殊的名字,则必须加引号。 + +属性名和属性值是一组一组的键值对结构,键和值之间使用`:`连接,多个值对之间使用`,`隔开。如果一个属性的后面没有其他的属性了,就不要写`,`,因为它是对象的最后一个属性。 -![](http://img.smyhvae.com/20180125_1834.png) ### 方式二:工厂模式 diff --git a/04-JavaScript基础/22-对象的基本操作.md b/04-JavaScript基础/22-对象的基本操作.md new file mode 100644 index 0000000..7a71513 --- /dev/null +++ b/04-JavaScript基础/22-对象的基本操作.md @@ -0,0 +1,230 @@ + +## 对象的基本操作 + +### 创建对象 + +使用new关键字调用的函数,是构造函数constructor。**构造函数是专门用来创建对象的函数**。 + +例如: + +```javascript + var obj = new Object(); +``` + +记住,使用`typeof`检查一个对象时,会返回`object`。 + +关于常见对象的更多方式,可以看上一篇文章《对象的创建&构造函数》。 + +### 向对象中添加属性 + +在对象中保存的值称为属性。 + +向对象添加属性的语法: + +```javascript + 对象.属性名 = 属性值; +``` + +举例: + +```javascript + var obj = new Object(); + + //向obj中添加一个name属性 + obj.name = "孙悟空"; + + //向obj中添加一个gender属性 + obj.gender = "男"; + + //向obj中添加一个age属性 + obj.age = 18; + + console.log(JSON.stringify(obj)); // 将 obj 以字符串的形式打印出来 +``` + + +打印结果: + +``` + { + "name":"孙悟空", + "gender":"男", + "age":18 + } +``` + +### 获取对象中的属性 + +**方式1**: + +语法: + +```javascript + 对象.属性名 +``` + +如果获取对象中没有的属性,不会报错而是返回`undefined`。 + +举例: + +```javascript + var obj = new Object(); + + //向obj中添加一个name属性 + obj.name = "孙悟空"; + + //向obj中添加一个gender属性 + obj.gender = "男"; + + //向obj中添加一个age属性 + obj.age = 18; + + // 获取对象中的属性,并打印出来 + console.log(obj.gender); // 打印结果:男 + console.log(obj.color); // 打印结果:undefined +``` + + +**方式2**:可以使用`[]`这种形式去操作属性 + +对象的属性名不强制要求遵守标识符的规范,不过我们尽量要按照标识符的规范去做。 + +但如果确实要使用特殊的属性名,就不能采用`.`的方式来操作对象的属性。比如说,`123`这种属性名,如果我们直接写成`obj.123 = 789`来操作属性,是会报错的。那怎么办呢?办法如下: + +语法格式如下:(读取时,也是采用这种方式) + +```javascript +// 注意,括号里的属性名,必须要加引号 +对象['属性名'] = 属性值 + +``` + +上面这种语法格式,举例如下: + +```javascript + obj['123'] = 789; +``` + + +**重要**:使用`[]`这种形式去操作属性,更加的灵活,因为,我们可以在`[]`中直接传递一个**变量**。 + + +### 修改对象的属性值 + +语法: + +```javascript + 对象.属性名 = 新值 +``` + + +```javascript + obj.name = "tom"; +``` + + +### 删除对象的属性 + +语法: + +```javascript + delete obj.name; +``` + + +### in 运算符 + +通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回true,没有则返回false。 + +语法: + +```javascript + "属性名" in 对象 +``` + +举例: + +```javascript + //检查obj中是否含有name属性 + console.log("name" in obj); +``` + + +我们平时使用的对象不一定是自己创建的,可能是别人提供的,这个时候,in 运算符可以派上用场。 + +## 遍历对象中的属性:for ... in + +语法: + +```javascript +for (var 变量 in 对象名) { + +} +``` + +解释:对象中有几个属性,循环体就会执行几次。每次执行时,会将对象中的**每个属性的 属性名 赋值给变量**。 + +语法举例: + +```javascript +for (var key in obj) { + console.log(key); // 这里的 key 是:对象属性的键 + console.log(obj[key]); // 这里的 obj[key] 是:对象属性的值 +} +``` + +举例: + +```html + + + +
+ +