JS对象

目录

1、定义对象的基本语法

2、如何访问对象

 

3、数组对象

4、遍历数组

5、数据类型转换

5.1 object 转换为 string

 

5.2 string 转换为 object

5.3 类型转换的意义

---

JS对象可以用来存储数据

JS中创建对象的方式有多种，字面量方式创建对象是其中最简单的一种

1、定义对象的基本语法

基本语法为：

var obj={"name":"yhb","age":18}; obj 是变量名称{} 用来定义对象对象中的数据以键值对的方式存储，上面对象中有两个键值对键值对语法为 键:值多个键值对之间用逗号分隔按照标准来说，所有的键都应该用双引号包含起来，但是实际编写的时候，经常省略

下面放上几个案例

<script> // 定义对象，用于存储你曾经养过的一个宠物的名字、类别 var pets={name:'花花',type:'狗狗'} // 定义对象，用于存储你今天一日三餐的计划 var food={morning:'牛奶面包',noon:'牛排',dinner:'咖啡'} // 定义对象，用于存储今天演讲同学的姓名、性别、和演讲主题 var speech={name:'李灿',gender:'女',subject:'漫谈'} </script>

2、如何访问对象

下面代码获取对象中某个键的值，很多时候我们不称作键，而是属性

var speech={name:'李灿',gender:'女',subject:'漫谈'} console.log(speech.name);

可见，语法就是 对象.属性名称

也可以通过下面代码改变属性的值

var speech={name:'李灿',gender:'女',subject:'漫谈'} // 改变name属性的值 speech.name='李白' console.log(speech.name);

3、数组对象

也可以使用对象存储复杂的数据

// 定义对象，用于存储你曾经养过的3个宠物的名字、类别 var pets = [ { name: '花花', type: '猫' }, { name: '黑子', type: '狗' }, { name: '单身狗', type: '猫' } ]

是不是和PHP中的二维数组有些像？

通过索引可以访问数组中某个元素

下面代码访问数组中第一个元素

console.log(pets[0])

输出第一个元素的name属性的值

console.log(pets[0].name)

下面代码改变数组中第二个元素中的type值为“狼”

pets[1].type='狼';

趁热打铁，多定义几个看看

// 定义对象，用于存储你未来2天一日三餐计划 var foods = [ { morning: '牛奶面包', noon: '牛排', dinner: '咖啡' }, { morning: '包子', noon: '包子', dinner: '西北风' }, { morning: '西北风', noon: '饺子', dinner: '胡辣汤' } ] // 定义对象，用于存储未来33天演讲同学的姓名、性别、和演讲主题 var speech = [ { name: '李灿', gender: '女', subject: '漫谈' }, { name: '李白', gender: '男', subject: '七律' }, { name: '李商隐', gender: '男', subject: '古诗' } ]

4、遍历数组

var pets = [ { name: '花花', type: '猫' }, { name: '黑子', type: '狗' }, { name: '单身狗', type: '猫' } ] for(var i=0;i<pets.length;i++){ console.log(pets[i]); }

如果向输出每个宠物的名字，稍作修改即可

console.log(pets[i].name);

或者可以使用更简单的forEach函数

var pets = [ { name: '花花', type: '猫' }, { name: '黑子', type: '狗' }, { name: '单身狗', type: '猫' } ] pets.forEach(function(item,index){ console.log(item); })

看到结果，同学们应该可以想到 forEach 函数的运行规则

如果想输出每个宠物的名字，改成下面 这样即可

console.log(item.name);

5、数据类型转换

我们来看一下对象的数据类型

var person={name:'yhb',age:20} console.log(typeof person); // 输出对象的数据类型 object var pets = [ { name: '花花', type: '猫' }, { name: '黑子', type: '狗' }, { name: '单身狗', type: '猫' } ] console.log(typeof pets); // 输出数组对象的数据类型 object

结论：都是 object 类型

5.1 object 转换为 string

某些时候，需要将 object 类型转换为string类型（后面案例会用到）

var person={name:'yhb',age:20} // 将person由 object 转换为 string 类型，返回值就是转换之后的值 var str_person=JSON.stringify(person); console.log(typeof str_person); // 输出数据类型 string var pets = [ { name: '花花', type: '猫' }, { name: '黑子', type: '狗' }, { name: '单身狗', type: '猫' } ] // 将 pets 由 object 转换为 string 类型，返回值就是转换之后的值 var str_pets=JSON.stringify(pets); console.log(typeof str_pets); // 输出的数据类型 string

结论：转换为字符串之后，虽然数据不变，但是就无法使用 .属性的方式获取数据了，如

var person={name:'yhb',age:20} // 将person由 object 转换为 string 类型，返回值就是转换之后的值 var str_person=JSON.stringify(person); // 不能通过下面的方式获取数据 console.log(str_person.name);

5.2 string 转换为 object

某些时候又需要将 string 类型，转换为 object

下面代码先将 person 转换成 字符串类型，再将字符串类型转换为 object 类型

var person={name:"yhb",age:20} // 输出类型 console.log(typeof person); // 将 person 由 object 转换为 string 类型 var str_person=JSON.stringify(person); // 输出类型 console.log(typeof str_person); // 将 str_person 由 string 转换为 object，返回值就是转换后的值 var obj_person=JSON.parse(str_person); console.log(typeof obj_person);

5.3 类型转换的意义

将对象转换为字符串类型，主要是为了存储和数据传输

将字符串类型转换为对象类型，主要是为了获取或者修改其中属性的值方便，可以直接通过 对象.属性 的方式操作其中的属性，而字符串类型是不可以的