这次的分享,主要还是想跟大家聊聊Javascript语言中很重要的概念之一,对象。为什么说之一呢?因为Javascript其他重要概念还包括:作用域 作用域链 继承 闭包 函数 继承 数组 ...... 有机会会跟大家分享这些概念的。

以下的介绍会分为如下:

1:前言
2:概述    

  2.1:对象创建    

  2.2:对象键名与键值    

  2.3:对象属性    

  2.4:对象引用
3:对象属性    

  3.1:读取属性    

  3.2:属性赋值    

  3.3:查看所有属性    

  3.4:删除属性    

  3.5:遍历属性
  

1:前言
Javascript拥有七种数据类型,其中分为两类。原始数据和复杂数据类型。原始数据类型:包括 字符串,数组,数字,布尔值,Null,Undefined。复杂数据类型:包括 对象。

对象是Javascript的核心概念,也是最重要的数据类型。Javascript所有数据都可以视为对象。都可以使用内置的方法。但是除了两个例外,就是Null和Undefined。

代码如下:

1 [1,2,3].toString()  // "1,2,3"
2 "ha".toString() // "ha"
3 false.toString() // ‘false‘


一个对象就是一系列属性的集合,一个属性包含一个名字和一个值。一个属性也可以是函数,这种情况下这个属性被称为方法,可以拿汽车来做一个形象化的对比。
汽车是一个对象,拥有属性颜色,重量,车型,方法便是可以开上马路了。
写在代码中,就是:

1 var car = {
2 "color": "red",
3 "weight": "1.4吨",
4 "module": "SUV"
5 "use": function() {
6 return "drive";
7 }
8 };

2:概述

2.1:对象创建

1 var o = {
2 "p": "Hello World",
3 "name": "Keith Chou"
4 };

上面的代码中,大括号就定义了一个对象,它被赋值给全局变量o。这个对象(对象的名字随便定义)内部包含一个键值对,p是键名,字符串Hello World是键值。键名和键值用":"分离,不同键值对之前通过","分离,最后一个键值可不用逗号。但是我建议最后都不要加上。右花括号" } "后边要加上分号";"。

对象创建有三种方法:

1 var o1 = {};
2 var o2 = new Object();
3 var o3 = Object.crete(null);

上面三行语句都是等价的。第一种使用花括号来创建一个对象,这是最简便的方法。第二种采用构造函数的写法清晰的表明了意图。第三种写法多用于对象继承的场合。

2.2 键名与键值

1 var o = {?
2 "say": "Hello World",
3 ?"name": "Keith Chou",
4 ?"height": "180",
5 ?"age": 21
6 };

以上用第一种方法创建对象,并赋值给全局变量o。键名即如下值:"say","name","height","weight"。键值即如下值:"Hello World","Keith Chou" ...

对象的所有键名都是字符串,加不加双引号都可以。对象的键值如果是英文,则必须加引号,否则会当成变量处理。如果是数字,加了引号则当成字符串处理,不加引号当成数字类型处理。

1 var o = {?
2 o1: 180,
3 ?o2: "180"
4 };
5 o.o1 // 180,数字类型
6 o.o2 // "180" ,字符串类型

注意,Javascript的保留字可以不加引号当作键名。

1 var o = {?
2 for: 1,
3 ?class: 2
4 };
5
6 o.for //1
7 o.class //

2.3 对象属性
对象的每一个“键名”又称为“属性”(property),它的“键值”又称为属性值,可以是任何数据类型。如果一个属性值为函数,通常把这个属性称为“方法”,它可以像函数那样调用。

1 var o = {?
2 p: function(x) {??
3 return 2 * x;?
4 }
5 };
6 o.p(2) //

上面对象申明了一个方法p,它就是一个函数。这里简单说一下,函数声明的三个步骤:function,函数名,函数参数,函数体。其中函数名和函数参数都是可选的,即也可以不使用。不使用的情况下称为匿名函数。

属性可以动态创建,不必在对象声明的时候就指定。

1 var obj = {};
2 obj.keith = 123;
3 obj.rascal = false;
4 obj.keith; //


因为对象的方法就是函数,所以也有name属性。

 

1 var obj = {?
2 m1: function f() {},
3 ?m2: function() {}
4 };
5 obj.m1.name // "f"
6 obj.m2.name // " " , 空字符串



2.4 对象引用
对于复杂数据类型,如果不同的变量名指向同一个对象,那么它们都是这个对象的引用,也就是说指向同一个内存地址。修改其中一个变量,会影响到其他所有变量。也就是 传址传递。

var o1 = {? a : 1};
var o2 = o1;
o1.a; // 1
o2.a; // 1
o2.a = 11;
o1.a //

上面o1和o2都指向了同一个对象,当o2修改了o1的属性a时,访问o1的属性a变成11。复杂数据类型的传址传递的特点就是当修改其中一个变量,会影响到其他对象对该变量的访问。
此时,如果取消某一个变量对于原对象的引用,不会影响到另一个变量。

1 var o1 = {};
2 var o2 = o1;
3 var o1 = 1;
4 o2 // { }

上面代码中,o1和o2指向同一个对象,然后o1的值变为1,这时不会对o2产生影响,o2还是指向原来的那个对象。

但是,对于原始数据类型的值,则是传值传递。传值传递的特点就是修改其中一个变量,不会影响到其他变量。也就是只是对该变量copy一份而已。

1     var x = 1;
2 var y = x;
3 x = 2;
4 y; // 1

上面的代码中,全局变量x发生变化,y的值并不变。也就是上面所说的copy了x的值,没有指向同一个内存地址。

3 :对象属性

3.1:读取属性

1     var o = {
2 name: "Keith Chou",
3 born: "1995"
4 };


访问属性有两种方法。

1     o.name //  "Keith Chou"
2 o["name"] // "Keith Chou"


第二种方法访问属性的时候必须加上引号,单引号双引号都可以。

3.2:属性的赋值
点运算符和方括号运算符,不仅可以用来读取值,还可以用来赋值。

1     var o = {};
2 o.p = "abc";
3 o["p"] = "abc";


3.3:查看所有属性
查看一个对象本身的所有属性,可以使用Object.keys 方法。

1     var o = {
2 "say": "Hello World",
3 "name": "Keith Chou",
4 "height": "180",
5 "weight": "120"
6 };
7 Object.keys(o);
8 // ["say","name","height","weight"]

可以看出,js返回一个数组对象。

3.4:删除属性
Javascript使用delete来删除属性。delete操作符只能用来删除对象本身的属性,而不能用于删除继承自原型的属性。

1     var o = { p: 1 };
2 Object.keys(o);
3 // ["p"]
4 delete o.p;
5 o.p;
6 // undefined;
7 Object.keys(o);
8 // [ ]

delete删除了o对象的p属性。删除后,再次访问属性就会返回undefined。而且使用Object.keys访问对象属性时,o对象也不再包括任何属性。

toString()方法是对象o继承自原型Object.prototype的一个方法,虽然delete命令返回true,但该属性并没有被删除。

1     var o = {};
2 delete o.toString(); // true
3 o.toString();

注意,delele也可以用于删除一个不存在的属性,不过也不会报错,会返回true。不过这个看起来好像没有什么用处阿。

1     var o = {};
2 delete o.p // true

最后,delete操作符也不能用于删除var命令声明的变量,只能用来删除对象本身的属性。

1     var o = 1;
2 delete o; // false
3 delete window.o // false

上面代码中,o是在全局作用域下声明的一个全局变量,全局变量默认是window对象的属性,默认情况下delete不得删除。

3.5:遍历属性
for...in循环用来遍历一个对象的所有属性。

1     var o = {?
2 a: 1,
3 ?b: 2,
4 ?c: 3
5 };?
6 for (var i in o) {?
7 console.log(i);
8 } // a , b , c

上面代码中,定义了一个对象o,使用for..in循环来在控制台输出o对象中的每一个属性。 var i in o 是指 声明一个变量i,用于遍历o对象中的所有属性。
for...in循环有两个使用注意点:

    1. 它遍历的是所有对象可遍历的属性,会跳过不可遍历的属性。
    2. 它不仅会遍历对象自身的属性,还会遍历继承的属性。

Javascript的重要数据类型-对象的更多相关文章

  1. JavaScript的 基本数据类型---对象

    第一:Javascript对象是 第二:Javascript中 第三:Javascript的对象是数据: 第四:JavaScript 中的对象可以简单理解成"名称:值"对(name ...

  2. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  3. JavaScript变量和数据类型

    变量 变量就是一个元素,类似于数学中的概念,用来指定表示一个对象.在JavaScript中,用来指定变量的关键字为var.当声明新变量时,可以使用关键词 "new" 来声明其类型 ...

  4. javaScript中的数据类型

    一.综述 javaScript中的数据类型分为两类: 简单类型:Boolean,Number,String 引用类型:Object 其他:undefined代表变量没有初始化,null代表引用类型为空 ...

  5. Javascript中的数据类型之旅

    虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number.String.Boolean.Object.Udefined.Null.其中,Object属于复杂数据类型, ...

  6. JavaScript基础:数据类型的中的那些少见多怪

    原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...

  7. 【译】Javascript中的数据类型

    这篇文章通过四种方式获取Javascript中的数据类型:通过隐藏的内置[[Class]]属性:通过typeof运算符:通过instanceof运算符:通过函数Array.isArray().我们也会 ...

  8. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...

  9. ArcGIS API for JavaScript 中的数据类型【vs】GPServer的数据类型

    熟悉GPServer的同学肯定知道,GPServer在10.1的ArcMap后需要执行成功一次才能发布. 发布GPServer,可以是ArcMap的工具箱的工具,也可以是自己写的模型. 不管是ArcM ...

随机推荐

  1. Day7前端学习之路——多栏布局

    该文章主要讨论两栏布局和三栏布局,三栏布局包括很著名的圣杯布局和双飞翼布局 一.两栏布局的七种方法(左边固定,右边自适应) 原理: block水平元素宽度能够跟随父容器调节的流动特性,block级别的 ...

  2. 基于 webGL 的元素周期表 3D 交互展示

    前言 之前在网上看到别人写的有关元素周期表的文章,深深的勾起了一波回忆,记忆里初中时期背的“氢氦锂铍硼,碳氮氧氟氖,钠镁铝硅磷,硫氯氩钾钙”.“养(氧)龟(硅)铝铁盖(钙),哪(钠)家(钾)没(镁)青 ...

  3. 作为一个Java工程师,你应该要知道SPI机制

    什么是 SPI SPI是Service Provider Interface的简称,是JDK默认提供的一种将接口和实现类进行分离的机制.这种机制能将接口和实现进行解耦,大大提升系统的可扩展性. SPI ...

  4. Sublime Text3添加到右键菜单,"用 SublimeText3 打开"

    在Sublime Text3安装目录下新建一个文件 sublime_addright.inf 文件内容: [Version] Signature="$Windows NT$" [D ...

  5. linux 基础入门(9) 系统服务 systemctl 与 xinted的运用

    9.系统服务 9.1系统服务 可以把计算机理解为一个地点比如中关村大街系统服务理解为中关村大街的理发店.饭店.商场等等,每一个都是一个系统服务,为客户提供不同内容的服务 服务:常驻在内存中的程序,且可 ...

  6. DolphinScheduler1.2.1源码分析

    DolphinScheduler在2020年2月24日发布了新版本1.2.1,从版本号就可以看出,这是一个小版本.主要涉及BUG修复.功能增强.新特性三个方面,我们会根据其发布内容,做简要的源码分析. ...

  7. 4.python流程控制语句介绍

    流程控制语句分类 1).顺序结构 2).判断结构 3).循环结构 判断结构 特点:如果 ... 否则 ... 格式一:                 ①                 if 条件表 ...

  8. SqlServer视图查询效率测试

    一.  测试背景开发一个项目,数据库用的是sqlserver.帐号表数据有一两百万,不算大,也不算小.在考虑是否要使用视图,担心效率,百度了下资料,众说纷纭,好吧,实践是最好的证明,那么我们就来测试吧 ...

  9. JavaScript 浅复制和深复制

    浅复制只会复制第一层的元素,嵌套的元素还是原来的引用. const obj = { a: 1, b: 2 } const copyObj = Object.assign({}, obj) const ...

  10. sqlserver2014部署安装

    百度云网址链接: https://pan.baidu.com/s/1BwgdnESI8Fqlos9EIOLv1A 提取码: wsy5 1.解压ISO镜像文件,点击setup安装程序 2.进入安装界面 ...