JavaScript对象编程（五）
一、JSON与JS对象
1.什么是JSON
JSON（JavaScript Object Notation）， JS对象表示法，是一种轻量级的数据交换格式。使用JavaScript语法来描述数据对象，但是 JSON 仍然独立于语言和平台，可以被任何编程语言读取以及作为数据格式传递。
JSON是目前服务端与客户端交换数据 服务端与客户端交换数据中使用 最为广泛的标准格式。
JSON只是一种数据格式
2.什么是对象
我们常说，万物皆对象，任何一个事物都可以看成是一个对象，然后进一步去分析他的属性和动作，属性转换成代码就是我们定义的对象类的参数，而动作就是我们写在类里的方法。
3.什么是JS对象
JS对象不等于JSON，JS对象 表示类的实例，不能用于数据传输，JS中的对象，可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象。
4.JSON与JS对象对比
JSON只是一种使用JS对象格式的数据，并不是具体的实例对象，是跨平台跨语言传输数据的一种载体，不仅仅限于JS。
| JSON对象 | JS对象 | |
|---|---|---|
| 含义 | 一种数据格式 | 表示类的实例 |
| 传输 | 可以跨平台、跨语言传输 | 不能传输 |
| 格式 | 1、键值对方式，key必须加双引号 2、值不能是方法函数、undefined、NaN | 1、键值对方式，Key不需要加引号 2、值可以是函数、对象、字符串、数字等 |
- JSON
① 外层适用花括号{}包裹
② json 对象的属性名称和字符串值需要用双引号引起来
③ 键值对之间用逗号分割
④ 值不能是方法函数、undefined、NaN
{
"brand" :"苹果", //字符串
"price" : 6799, //数值型
"supportDualSIM" : true, //布尔型
"supportNetwork" :[ "5G","4G","3G","2G"] //数组
}
- JS对象
① 外层适用花括号{}包裹
②键值对方式，key不需要加引号
③ 键值对之间用逗号分割
④ 值可以是函数、对象、字符串、数字等
var phone = {
brand :"苹果", //字符串
price : 6799, //数值型
supportDualSIM : true, //布尔型
supportNetwork :[ "5G","4G","3G","2G"] //数组
}
二、JSON的创建与访问
1.创建JSON（两种格式）
- 对象格式
{
"brand" :"苹果", //字符串
"price" : 6799, //数值型
"supportDualSIM" : true, //布尔型
"supportNetwork" :[ "5G","4G","3G","2G"] //数组
}
- 数组对象格式
① 最外层用“ [ ] ”括起来（方括号保存数组）
② JSON保存在“ { } ”中（花括号保存对象）
③ 键需要用“ " " ”括起来（key要用双引号括起来）
④ 数组中的对象属性需要保持一致
注意：区别与上面的对象格式，多了外层的方括号
[
{
"model": 'iPhone12 ',
"brand" :'苹果',
"price": 6799,
"supportDualSIM": true,
"supprtNetwork" : [ '5G', '4G','3G ','2G' ]
},
{
"model": 'Mate X2 ',
"brand" : '华为',
"price": 17999,
"supportDualSIM": true,
"supprtNetwork" : [ '5G', '4G','3G ','2G' ]
}
]
2.JSON的访问
可以使用点号（.），或中括号（[]）来访问 JSON 对象的值。
① 点号访问对象时，直接使用对象的 key 来访问， key 无须放在双引号中。
② 中括号访问对象时，key必须放在双引号或单引号中。
var Iphone = {
"brand" :"苹果", //字符串
"price" : 6799, //数值型
"supportDualSIM" : true, //布尔型
"supportNetwork" :[ "5G","4G","3G","2G"] //数组
}
console.log(Iphone)
三、JS对象的创建与访问
1.创建JS对象
① 外层适用花括号{}包裹
② key:value 键值对格式
③ 逗号分割
④ 值类型可以是常用的number、string、boolean、object、null
var iPhone12 = {
brand : '苹果',
price: 6799,
supportDualSIM: true,
supportNetwork :[ ' 5G','4G','3G ','2G '],
show:function(){ //函数
console.log(iPhone12.brand+"的价格是"+iPhone12["price"]);
}
}
iPhone12.show();
2.JS对象的访问与赋值
可以使用点号（.），或中括号（[]）来访问 JSON 对象的值。
① 点号访问对象时，直接使用对象的 key 来访问， key 无须放在双引号中。
② 中括号访问对象时，key必须放在双引号或单引号中。同上！
特点：JS对象可以先声明再赋值
var people = {};
people.name = "小红";
3.遍历JS对象
for in 循环遍历
var obj = {
model: 'iPhone12 ' ,
brand : '苹果',
price: 6799,
supprtNetwork:[ ' 5G','4G ','3G', '2G' ],
}
for ( var i in obj) {
console.log("这是键："+ i ) //输出：键
console.log("这是遍历中错误的访问方式："+obj.i) // 输出：undefined
console.log("这是值："+obj[i]) // 输出：值
}
练习：遍历以下数据，按下图格式输出
var phones = [
{
model: 'iPhone12 ',
brand :'苹果',
price: 6799,
supportDualSIM: true,
supprtNetwork : [ '5G', '4G','3G ','2G' ]
},
{
model: 'Mate X2 ',
brand : '华为',
price: 17999,
supportDualSIM: true,
supprtNetwork : [ '5G', '4G','3G ','2G' ]
}
]
四、JSON与JS对象的转换
1.JSON转为JS对象
JSON.parse() 将JSON字符串转换为JS对象
var str = '{"name":"小明" , "age" : 6}'
var obj = JSON. parse( str)
console.log(obj)
2.JS对象转为JSON
JSON.stringify() 将JS对象转换为可传输的JSON格式
var obj = {
name: "小明",
age:9,
}
var JSON_obj = JSON. stringify( obj)
console.log(JSON_obj )
五、JS对象的应用
1.统计数组中元素出现的次数
题目：统计数组中，每个元素出现的次数
① 先将prev初始化为对象（就是最后一行代码）
② 然后判断 当前属性cur 在prev对象中 是否已经存在（cur in prev）
③ 如果不存在就为当前属性赋初始值为 1
如果已经存在，就为当前属性对应的值 +1
var arr = [ 'a ','b ', 'a', 'a ', 'a', 'a', 'c ', 'b'， 'd ', 'b ', 'e']
var result = arr.reduce( function ( prev,cur ) {
if ( cur in prev) {
prev[ cur]++
}else {
prev [ cur] = 1
}
return prev},{})
2.使用sort对JS对象进行排序
例如：这里有一个对象数组，我们需要通过年龄大小对数组中的对象进行排序。
var data = [
{ name: 'Alice ', age: 50 },
{ name: ‘Bob’ , age: 5 },
{ name: 'Cart ’ , age: 15 }
]
data.sort( function (a,b ) {
return a.age - b.age // 调用对象属性值
})
六、本节案例
题目：
更新待办事项程序，添加以下功能
① 每个事项应有两个属性，事项名和时间，以JS对象方式存储在数组中
② 查重功能改为仅对时间查重
③ 增加时间列显示
④ 修改功能需修改事项名和时间
⑤ 删除及修改功能的序号选择为自动生成的下拉框
参考代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#box {
font-size: 50px;
margin: 0;
text-align: center;
}
table {
border-collapse: collapse;
border: 0;
}
td {
border: solid 1px black;
}
#item {
width: 132px;
}
#time {
width: 164px;
}
#delIndex {
width: 102px;
}
#updateIndex {
width: 104px;
}
#updateItem {
width: 62px;
}
#updateTime {
width: 62px;
}
</style>
</head>
<body>
<span>待办事项</span>
<input type="text" name="item" id="item" value="" />
<br>
<span>时间</span>
<input type="text" name="time" id="time" value="" />
<input type="button" name="add" id="add" value="添加" onclick="add()" />
<br>
<br>
<span>删除第</span>
<select id="delIndex">
<option value="0">无</option>
</select>
<span>个项目</span>
<input type="button" name="" id="" value="删除" onclick="del()" />
<br>
<br>
<span>修改第</span>
<select id="updateIndex">
<option value="0">无</option>
</select>
<span>个项目</span>
<br>
<span>事项</span><input type="text" name="updateItem" id="updateItem" value="" />
<span>时间</span><input type="text" name="updateTime" id="updateTime" value="" />
<input type="button" name="" id="" value="更新" onclick="update()" />
<div id="box"></div>
<script>
var toDoList = [];
function add() {
var newItem = document.getElementById("item").value;
var time = document.getElementById("time").value;
var obj = {}
obj.activity = newItem
obj.time = time
var arr = []
for (var i in toDoList) {
arr.push(toDoList[i].time)
}
if (arr.indexOf(time) == -1) {
toDoList.push(obj);
}
showList()
}
function showList() {
var txt = ""
txt += "<table><tr><th>序号</th><th>项目</th><th>时间</th></tr>"
for (var i = 0; i < toDoList.length; i++) {
txt += "<tr><td>" + (i + 1) + "</td><td>" + toDoList[i].activity + "</td><td>" + toDoList[i].time +
"</td></tr>"
}
txt += "</table>"
document.getElementById("box").innerHTML = txt;
document.getElementById("item").value = "";
var txt = ""
for (var i = 1; i <= toDoList.length; i++) {
txt += "<option value='" + i + "'>" + i + "</option>"
}
document.getElementById('delIndex').innerHTML = txt;
document.getElementById('updateIndex').innerHTML = txt;
}
function del() {
var index = document.getElementById('delIndex').value
toDoList.splice(index - 1, 1)
showList()
}
function update() {
var index = document.getElementById('updateIndex').value
var item = document.getElementById('updateItem').value
var time = document.getElementById('updateTime').value
var obj = {}
obj.activity = item
obj.time = time
toDoList.splice(index - 1, 1, obj)
showList()
}
</script>
</body>
</html>
本文章为学习资料，如有内容错误，敬请指正
2560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
