对象就是一个由属性构成的无序列合集。

var myObj = {
name: ‘suki’,
age: 21,
interests: [‘guitar’, ‘tennis’]
};

属性是没有顺序的,可以把 age 写在 name 前面也完全没有问题。

对象 V.S. 原始类型


1,对象有属性,原始数据类型从技术角度看是没有属性的;

对象的属性值可以是原始数据类型也可以是对象,属性名-属性值被称为键值对,属性名是键,属性值是值;

2,对象有方法,原始数据类型没有方法;

方法其实就是对象的特殊属性,它的值是一个函数,用以实现某一种功能;

3,对象是可以改变的,原始数据类型是不可变的;

本质上就是某个属性发生了变化;

对象的分类


1, 内部对象:JS 自带的对象,共17个,可以分成以下三类

错误的对象(代表着各种错误,里面也分好多种,但平常开发基本上用得不多);

常用对象(8):Boolean, Number, String, Array, Date, RegExp, Object, Function;

内置对象(3):Math(与数学相关), Global(全局对象), JSON;

2, 宿主对象:JS 运行环境生成的对象,常用的是window和document;

3, 自定义对象(不属于以上两类的对象);

原始数据类型转换成对象


可以使用Object()把原始数据类型转换成对象,这个函数可以接收任何数据类型的参数;

1, 布尔值 => 对象: 转换的结果是一个对象,这个对象有一个名称特殊的属性叫原始值(primitiveValue),它对应的值一个布尔值;

2, 数字 => 对象:与布尔值转换成对象相似,转换后的对象有一个原始值,就是这个数字;

3, 字符串 => 对象:与上面两个不太一样,它也有一个原始值,除此之外还有一个length属性,表示传进去的字符串包含的字符个数,另外,还有一系列数字索引属性,每个属性的值是对应位置的字符;

4, undefined / null => 对象:得到一个空的对象;

toString()


数组 => 字符串: 得到一个数组项以逗号分隔的一个字符串;

函数 => 字符串: 得到当前函数的代码;

日期 => 字符串: 日期和时间字符串;

(new Date()).toString();  // "Wed Jul 04 2018 12:47:45 GMT+0800";

正则表达式 =>字符串: 得到经过转义的正则表达式字符串;

/\d\\/.toString();  // "/\\d\\\\/"

valueOf()


如果对象有原始值则返回原始值,如果没有则返回对象本身;例外:Date ,如果对时间对象调用valueOf() 会得到一串数字,这串数字是系统当前时间与1970/01/01之间时间差的毫秒数;

123.toString() 或 123.valueOf() 的问题


直接对数字字面量调用这两个方法的话,’.’会被误当成是小数点,所以会出错;如果想要对数字字面量直接调用这两个方法的话,可以使用以下方法

123..toString();  // 使用两个点

(123).toString();  // 用括号把数字括起来

123 .toString();  // 数字和点之间空一格

123.0.toString();  // 第一个点被解释成小数点,第二个点就不会弄错了,所以对小数调用这两个方法就没有问题

对象转换成原始数据类型


1, 对象 => 布尔: 可以使用 Boolean() 或 !! 方法,无论是什么对象,结果都是true;注意:

Boolean(new Boolean(false));  // true

2, 对象 => 字符串:

在JS中,如果想把对象转换成字符串,首先会调用toString方法,如果可以得到一个字符串,则把这个结果返回,如果得不到一个字符串,再调用valueOf方法;

3, 对象 => 数字:

如果想把对象转换成数字,则跟字符串正好相反,会先调用valueOf方法,再调用toString方法;

以下代码说明了这点

var myObj = {name:'suki'};

myObj.toString = () => 'suki';
myObj.valueOf = () => 123; Number(myObj); // String(myObj); // "suki"

如果要转换的对象是八种常用对象中的一种,那么每一种都有自己独特的转换方法,它们都重写了toString 和valueOf方法;如果是自定义的对象,通常情况下会自己写一个toString方法。正常开发中很少需要把对象转换成字符串,除了把JSON对象转换成一个字符串用来与后台传输数据。

如何创建对象


1, 对面字面量(虽然属性名都是字符串,但写的时候可以省略引号,除非属性名包含非法字符或关键字);

var myObj = {
‘name’: ‘suki’,
‘3’: true,
‘var’: null
}; // 可以写成这样 var myObj = {
name: ‘suki’,
3: true, // 虽然看起来像数字,但实际上对象的属性名都是字符串
‘var’: null // 因为 var 是 JS 的关键字,所以不可以省略引号
};

2, 构造函数(使用 new 关键字创建)不需要传值时括号可以省略,但不推荐。

var myObj = new Object();  // 写成new Object 也会得到一样的结果

myObj.name = ‘suki’;
myObj.age = 21;

3, Object.create() (ES5的新方法),接受两个参数,第一个是要继承的原型,第二个是对新创建的对象的描述性信息,如confiugration: true;

对象属性查询(. / [])


当解释器遇到一个点或者一个中括号时,会有以下操作

1, 计算这个点或中括号前面的表达式是不是undefined或者null,如果是就直接报错(因为undefined和null是没有任何属性或方法的),如果不是undefined或者null,则进行下一步操作;

2, 判断这个表达式是不是一个对象,如果是,直接进行下一步,如果不是一个对象,就把它转化成一个对象,再进行下一步(这也是原始数据类型为什么可以使用toString等方法,解释器会把原始数据类型转换成对象);

3, 判断是点还是中括号,如果是点的话就直接把点后面对应的属性的值返回,如果属性值或属性不存在,返回undefined;如果是中括号的话,会先计算括号里的内容,不管计算结果如何,先把这个结果转换成字符串,再去对象里查找,找到就返回值,如果属性值或属性不存在,返回undefined;

———整理自沙翼老师的前端音频教程#陪你读书#(喜马拉雅)

JS 中的对象的更多相关文章

  1. js中判断对象具体类型

    大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2" ...

  2. 浅解析js中的对象

    浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...

  3. js中XMLHttpRequest对象实现GET、POST异步传输

    js中XMLHttpRequest对象实现GET.POST异步传输 /* * 统一XHR接口 */ function createXHR() { // IE7+,Firefox, Opera, Chr ...

  4. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  5. js中推断对象详细类型

    大家可能知道js中推断对象类型能够用typeof来推断. 看以下的情况 <script> alert(typeof 1);//number alert(typeof "2&quo ...

  6. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  7. JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘

    一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实 ...

  8. JS中定义对象和集合

    在js中定义对象: 方式一: var obj = {}; obj['a']=1; obj['b']=2; 方式二: var obj=new Object(); obj.a=1; obj.b=2; 在j ...

  9. Js中Map对象的使用

    Js中Map对象的使用 1.定义 键/值对的集合. 2.语法 mapObj = new Map() 3.备注 集合中的键和值可以是任何类型.如果使用现有密钥向集合添加值,则新值会替换旧值. 4.属性 ...

  10. JS中的对象和方法简单剖析

    众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): ...

随机推荐

  1. Struts 2 执行流程 配置信息

    Struts 2 执行流程 首先,浏览器访问,经过Filter,Filter从src/struts.xml中寻找命名空间和action的名字,获取action类,从方法中拿到返回值,接着从result ...

  2. 杂记-python

    1.在cmd输入python -V显示当前python的版本信息,一定是大写的V 2.输入python,进入python解释器里面 3.在解释器中,输入exit()或者quit()会退出,一定要加括号 ...

  3. 第一次java程序设计作业

    通过JAVA语言的学习,使我对计算机语言有了更加深入的认识和理解.知道了许多JAVA语言与其他语言的区别和特性,及其在我们生活中所发挥的重要作用.最后用一句话表明在学习JAVA语言过程中的感受,那就是 ...

  4. ElasticSearch改造研报查询实践

    背景: 1,系统简介:通过人工解读研报然后获取并录入研报分类及摘要等信息,系统通过摘要等信息来获得该研报的URI 2,现有实现:老系统使用MSSQL存储摘要等信息,并将不同的关键字分解为不同字段来提供 ...

  5. iptables命令使用详解

    iptables的主要功能是实现对网络数据包进出设备及转发的控制.当数据包需要进入设备.从设备中流出或者经该设备转发.路由时,都可以使用iptables进行控制. 环境 操作系统:CentOS7.3 ...

  6. 关于PHP的mkdir函数

    问题:dedecms5.7 php5.6 我想项目根目录下的uploads文件夹下动态创建一个文件夹/uploads/imgs $path = '/uploads/imgs'; mkdir($path ...

  7. 移动端遇到的问题小结--video

    本篇主要是针对Android系统,所遇到的问题. 1. video的全屏处理: 这里说的全屏是指针对浏览器的全屏,而不是整个手机的全屏.要想全屏效果只需对video标签加   webkit-plays ...

  8. 一些重要的k8s概念

    1. Pause容器是什么 作为init pod存在,其他pod都会从pause 容器中fork出来 由pause容器管理 pause容器的工作 可知kubernetes的pod抽象基于Linux的n ...

  9. Java容器——List接口

    1. 定义 List是Collection的子接口,元素有序并且可以重复,表示线性表. 2. 常用实现类 ArrayList:它为元素提供了下标,可以看作长度可变的数组,为顺序线性表. LinkedL ...

  10. python小游戏,石头/剪子/布

    #从控制台输入石头(1)/剪子(2)/布(3) player=int(input("玩家出拳 石头(1)/剪子(2)/布(3)")) #电脑随机出拳 computer comput ...