JS 中的对象

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

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);  // 123

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；

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

猜你喜欢