JavaScript对象及操作

概念

JS对象是一种比较特殊的数据结构，可以用来描述我们生活中的某种具体的事物，这种结构内部还可以存储其他复杂的数据结构，具有强大的封装性。

注意：我们暂时可以这样理解JS对象，之前我们学习了很多基本数据类型，当时我们说出了基本数据类型以外，还有一种叫做引用类型，到现在为止，我们可以说这些引用类型所创建（声明）出来的'变量'，都可以叫做'对象'。

内置的各种类型（引用类型）对象

• window窗口对象
• document文档对象
• Math数学类型对象
• String字符串类型对象
• Array数组类型对象
• Date日期类型对象
• RegExp正则表达式类型对象
• ...

以上这些都是我们之前学过的各种'对象'，我们发现这些对象都有一个共同的特点，就是每个对象都提供了各式各样的功能（就是我们日后学习的方法）以及有一定的层级结构（在浏览器中可以测试一下）。

我们会随着这几天深入的学习，回头在来看这些对象，自然很清晰。

自定义对象

创建方式

构造函数创建

通过构造函数创建（这种方式暂时作为了解，明天我们会详细讲解这种形式）

// 使用构造函数new Object(); 来创建一个对象，然后定义一个obj变量来指向这个对象的内存地址，从而可以操作这个对象
var obj = new Object();

new Array()

new RegExp()

new Date()

new String()

… 都是构造函数形式来创建不同类型的对象。

字面量语法创建

字面量语法是声明某种数据结构的简单写法，这种形式在很多编程语言中都适用。

"str"

[10, 20, 30]

/^abc$/

… 这都是字面量形式来创建的不同类型的对象。

自定义JS对象的字面量

语法规则

1、对象的整体用大括号表示{}

var obj = {};  // 表示创建一个对象字面量，对象内部没有任何属性和方法

2、对象内部由很多组属性（键）和值组成，每组属性和值之间用冒号:关联, 在对象字面量内部，每组属性值后一定不要加分号;

var obj = {
    name: '小雪'
}

3、如果有多组属性和值的话，每组属性值用逗号,隔开，注意：最后一组属性值最好不要加逗号,

var obj = {
    name: '小雪',
    age: 18,
    sex: '女'
}

4、属性（键）：一般来说，如果我们写的是合法标识符的话，就不需要添加任何双引号"" 或 单引号''，但如果是非合法标识符（除去数字和汉字。。）的话，就需要使用双引号"" 或 单引号''括起来。

值：可以是JS中任何类型数据。（甚至还可以是数组、函数或者是另外一个对象结构）

var obj = {
  name: '小雪',
  "{2": true,
  4: '哈哈',
  张: 333
}

5、对象的属性是不能重复的，值可以任意重复。属性如果重复的话，后面的属性对应的值会覆盖前面属性对应的值。

var obj = {
    name: 'liu',
    name: 'sheng'
}

对象的操作

这里的操作指的是，类似于像对学习数组那样，有一套对对象进行增、删、查、改的对应操作。

查

在对象里的查我们一般是指通过某个属性，来获取对应的值。因为我们当时定义对象时候的属性顺序和最后显示是不一样的，所以这里我们不能通过以前那种"索引、下标"机制来获取某个值，我们这里会通过属性名来获取值。

点语法

var obj = {
  name: 'liu',
  age: 18
}

// 获取这个对象的name属性对应的值 (以后简称获取name)
console.log(obj.name);
// 获取age
console.log(obj.age);

中括号语法

var obj = {
  name: 'liu',
  age: 18
}

// 获取name
console.log(obj['name']);
// 获取age
console.log(obj['age']);

两种语法区别

当属性不是合法标识符的时候，我们无法使用点.语法来获取对应的值，这时候只能通过中括号[]语法来获取

var obj = {
  'v-#': 'liu'
}

// console.log(obj.v-#); 这种写法是语法错误的
// console.log(obj.'v-#'); 使用点语法的时候无法添加单引号或者双引号，也是错误的

// 这时候只能使用中括号语法
console.log(obj['v-#']);

当我们不知道要获取的属性名字的时候（意思是一个变量），我们是无法使用点.语法，只能通过中括号[]语法获取

var obj = {
  name: 'liu',
  age: 18
}

// 假如某个函数具有一个通过某个对象获取某个属性对应的值的功能
var obj = {
  name: 'liu',
  age: 18
}

function objGetValueByProp (obj, prop) {
  // 这样获取方式，在语法上是没有错的，它被解析为，要获取属性名字为prop的属性，因为obj中没有该属性，所以结果是undefined。
  // 注意：这里结果不是xxx is not defined，这是一般变量和对象属性的区别
  // return obj.prop;
  // 而改成使用中括号语法后就好了。就会把这个prop解析成一个变量，我们获取的是这个prop变量对应的值的属性
  // 同理，我们也不要在prop上添加双引号或者单引号，否则会变成和点语法一样的解释
  // return obj['prop'];
  return obj[prop];
}

console.log(objGetValueByProp(obj, 'name'));

增

意思就是对某个对象进行添加属性和值的操作。

注意：添加的时候属性和值是成对儿出现的，否则会语法错误

点语法

var obj = {
  
}

// 添加了一个属性名字为name的属性，对应的值是'liu'
obj.name = 'liu';
console.log(obj);

中括号语法

var obj = {
  
}

// 添加了一个属性名字为name的属性，对应的值是'liu'
obj['name'] = 'liu';
// 中括号语法可以使用变量的形式以及非合法标识符
obj['#-#'] = 'liu';
var a = 'age';
obj[a] = 18;
console.log(obj);

改

意思就是对某个对象的属性进行修改对应值的操作。

点语法

var obj = {
  name: 'liu'
}

// 其实修改的操作和新增完全一样，就是如果对象内如果有该属性，则对应值会被修改掉而已，如果没有就是新增操作
obj.name = 'zhang';
console.log(obj);

中括号语法

var obj = {
  name: 'zhang',
  '#-#': 'a'
}

// 修改name属性
obj['name'] = 'liu';
// 中括号语法可以使用变量的形式以及非合法标识符
obj['#-#'] = 'b';
var a = 'name';
obj[a] = 'li';
console.log(obj);

删

意思就是通过某个属性来删除对应的属性和值，这里需要delete关键字来删除

点语法

var obj = {
  name: 'liu'
}

// 这里我们要配合delete关键字来
delete obj.name;
// 如果删除一个不存在的属性，不会有任何效果
delete obj.age;
console.log(obj);

中括号语法

var obj = {
  name: 'liu'
}

delete obj['name'];
console.log(obj);

遍历

遍历对象，我们指的就是通过循环得到对象中每个属性对应的值

在我们学过的循环中，目前为止只能通过for in循环来遍历

var obj = {
  name: 'liu',
  age: 18
}

for (var prop in obj) {
  console.log(prop + ": " + obj[prop]);
}

对象深入研究

理解内存

我们平时电脑运行后，我们使用的软件都是由代码编写的，都会运行在内存当中。

js中的变量分为两种，原始值和引用值。原始值指的是原始数据类型的值，比如undefined, null, number, string, boolean类型所表示的值。引用值指的是复合数据类型的值，即Object, Function, Array等。

原始值和引用值存储在内存中的位置分别为栈 和 堆。原始值是存储在栈中的简单数据段，他们的值直接存储在变量访问的位置。引用值是存储在堆中的对象。

存储区别

刚我们知道基本数据类型存储在栈 ，引用数据类型存储在堆，在平时使用的时候有很大的区别

基本类型的特点

1、如果大家的"值"都相同，那么我们使用运算符===比较的时候是相等的。因为这里单纯比较的就是具体值。

var a = 10;
var c = 10;
console.log(a === c); // true

2、如果某个变量赋值给某个变量，那么只是单纯的值一样，其中改变某一方的变量值，对另外一方并没有影响。

var a = 10;
var b = a;
a = 20;
console.log(a, b);

引用类型的特点

1、如果大家都"长的一样"，无论怎么比较都是不相等的。因为这里比较的是引用地址

var obj = {};
var obj2 = {};
console.log(obj === obj2);

2、如果引用类型的某个变量赋值给另外一个变量，和基本类型完全不一样，这里相当于这两个变量所指向的引用地址是相同的，换句话说，就是这两个变量操作的对象是同一个。

var obj = {
  name: 'liu'
};
var obj2 = obj;
console.log(obj === obj2);

// 修改obj或者obj2，对方都会跟着改变，因为操作的是同一个对象
obj.name = 'zhang';