浅析 JavaScript 数据类型 | Object 基础

这是我参与8月更文挑战的第3天，活动详情查看8月更文挑战数组

前言

上次咱们对基本数据类型有了基础的认识，今天咱们主要了解一下引用数据类型中的 Object 对象的基础知识，以普通对象做为例子，开启探索之旅。浏览器

定义

为了了解 Object，咱们使用普通对象进行讲解：markdown

普通对象有如下特色：app

有大括号包裹起来的
有零到多组属性名和属性值（键值对）组成，用逗号分隔
key 不能是引用数据类型，value 能够是任何的数据类型

到底何为属性？是用来作什么的？post

属性就是用来描述当前对象特征/特色的，属性名是当前具有这个特征，属性值是对这个特征的描述（专业语法：属性名称为键【key】，属性值称为值【value】，一组属性名和属性值称为一组键值对）ui

不知道你们，看了上面关于“属性名”和属性值的描述，是否理解？不理解的话，能够看下这个例子：url

想象咱们在制做一个策略类战争游戏，玩家能够操做一堆士兵攻击敌方。一个士兵，就比如如是一个对象，那咱们看看士兵有什么属性，以下图：上面的兵种、攻击力、生命值，就是属性，属性也不过如此。spa

let person = {
    name: '追梦玩家',
    age: 18
};
// person 就是一个对象，name 和 age 是 person 的属性 
复制代码

属性的操做

其实就是对键值对的增删查改，简称“CURD”3d

获取

语法：code

对象.属性名 . 能够理解成的，对象的属性名都是字符串格式的
对象[属性]

person.name // => 点操做符
person['name'] 
// 硬核玩家的操做 通常来讲，对象的属性名都是字符串格式的（属性值不固定，任何格式均可以）
复制代码

增/改

JS对象中，一个对象当中的属性名是不容许重复的（利用这点，能够实现数组去重），是惟一的。若是重复的话，有可能会报错的，有可能不报错！！！

增：对原有对象不存在的属性进行操做就是增长
改：对原有对象存在的属性进行操做就是修改

var obj = { name: '追梦玩家', age: 18 };
obj.name = '砖家'; // => 原有对象中存在name属性，此处属于「修改」属性值
obj.sex = '男'; // => 原有对象中**不存在**sex属性，此处至关于给当前对象「新增」一个属性 sex
obj[age] // 这样写不行，会报错，为何呢？能够尝试一下，后面会讲解
obj['age'] = 28;
复制代码

删除

注：delete 是关键字

完全删除：对象中不存在这个属性了

delete obj['age'];
obj.age // undefined
复制代码

不完全（假）删除：并无移除这个属性，只是让当前属性的值为空

obj['sex'] = null;
// obj下的 sex 属性仍是存在的，只不过它的值设置为 null 而已
复制代码

在获取属性值的时候，若是当前对象有这个属性名，则能够正常获取到值（哪怕是 null ），可是若是没有这个属性，则获取的结果是 undefined

obj.age // obj 对象没有 age 属性，返回 undefined
obj.sex // obj 对象有 sex 属性，可是赋值为 null，返回 null
复制代码

对象的属性名说明

一个对象中的属性名不只仅是字符串格式的，还有多是数字格式的「类数组」

当咱们存储的属性名不是字符串也不是数字的时候，浏览器会把这个值转换为字符串（toString方法），而后再进行存储

var obj = {
    name: '追梦玩家',
    0: 100
};

obj[0] // => 100
obj['0'] // => 100
// 错误写法：obj.0 => Uncaught SyntaxError: Unexpected number
// SyntaxError => 语法错误

// 存储的属性名为 true
obj[true] = false;
// 能够在控制台输出 obj，看看
复制代码

咱们怎么验证存储的属性不是字符串也不是数字的时候呢？咱们能够在控制台输出 obj，看看。

经过运行 Object.keys(obj) 这个方法，能够看到 obj 的属性名，都是字符串类型的

不知道你们还记不记得，文章开头说，key 不能是引用数据类型。这个要怎么理解呢？

咱们能够用一个例子来理解下：

var obj = {
    name: '追梦玩家'
};

obj[{}] = 500;
console.log(obj[{xxx:'xxx'}]); // 请问，输出结果？
console.log(obj[{}] === obj[{xxx:'xxx'}]); // 请问，输出结果？ 
复制代码

结果，如图：为何 obj[{}] === obj[{xxx:'xxx'}] 的结果是 true？

若是理解上面对象的属性名的相关处理，就好理解了。

其实就是会将对象转换为字符串 '[object Object]'，做为属性名进行存储。

obj[{}] = 500;
// 先把({}).toString()后的结果做为对象的属性名存储进来 obj['[object Object]'] = 500
obj[{xxx:'xxx'}];
// => 获取的时候也是先把对象转换为字符串'[object Object]'，而后获取以前存储的 500，因此存储对象没有用
复制代码

数组也是对象

属性名是数字，数字从零开始，逐级递增，每个数字表明着当前项的位置=>咱们把这种数字属性名叫作“索引”
默认有一个 length 属性存储数组的长度，调用数组方法，length 都会自动更新

var obj = {
    a : 12
}
var ary = [12,23]; // => 12和23都是属性值，属性名呢？

// 经过观察结果，咱们发现数组对象的「属性名」是数字（咱们把数字属性名称为当前对象的索引）
// 获取属性值，跟普通对象获取是同样的。
ary[0] // 12
ary['0'] // 12
ary.0 // => 报错 => Uncaught SyntaxError: Unexpected number
ary.length // => 2
ary['length'] // => 2
复制代码

怎么理解数组和对象的关系呢？

数组是对象的一种细分，对象包含数组。对象拥有的，数组一样能够有，只不过数组在某些形式上特殊一点。数组的属性名是数字，数组是一种特殊的对象，对象有的，它也有，对象没有的，它也有。好比数组，有 push 方法，而对象没有。

关于对象的一点细节知识

先看一下，下面这个代码，输出结果是？

var obj = {
  name: '追梦玩家',
  age: 18
};
var name = '砖家';

console.log(obj.name);
console.log(obj['name']);
console.log(obj[name]);
复制代码

结果，如图：若是没有答对的话，就说明你没有理解'name' 和 name 的区别

// 'name'和name的区别
// => 'name'是一个字符串值，它表明的是自己
// => name（代名词/容器）是一个变量不是字符串值，它表明的是自己存储的这个值

obj.name // => 获取的是 name 属性的值
obj['name'] // => 获取的是 name 属性的值
obj[name] // => 此处的 name 是一个变量，咱们要获取的属性名不叫作 name ，是 name 存储的值'砖家' => obj['砖家'] => 没有这个属性，属性值是 undefined 
复制代码

总的来讲，就是

obj['key'] 获取属性名为 key 的属性值
obj.key 获取属性名为 key 的属性值
obj[key] 获取 key 这个变量存储的那个值，做为属性名对应的属性值