1 JavaScript

html完成了架子，css做了美化，但是网页是死的，我们需要给他注入灵魂，所以接下来我们需要学习JavaScript，这门语言会让我们的页面能够和用户进行交互。

1.5.1.3 JSON对象

自定义对象

在 JavaScript 中自定义对象特别简单，其语法格式如下：

var 对象名 = {属性名1: 属性值1, 属性名2: 属性值2,属性名3: 属性值3,函数名称: function(形参列表){}
};

我们可以通过如下语法调用属性：

对象名.属性名

通过如下语法调用函数：

对象名.函数名()

接下来，我们再VS Code中创建名为04. JS-对象-JSON.html的文件演示自定义对象

<script>//自定义对象var user = {name: "Tom",age: 10,gender: "male",eat: function(){console.log("用膳~");}}console.log(user.name);user.eat();
<script>

浏览器控制台结果如下：

其中上述函数定义的语法可以简化成如下格式：

    var user = {name: "Tom",age: 10,gender: "male",// eat: function(){//      console.log("用膳~");//  }eat(){console.log("用膳~");}}

json对象

JSON对象：JavaScript Object Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：

{"key":value,"key":value,"key":value
}

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

例如我们可以直接百度搜索“json在线解析”，随便挑一个进入，然后编写内容如下：

{"name": "李传播"
}

但是当我们将双引号切换成单引号，再次校验，则报错，如下图所示：

那么json这种数据格式的文本到底应用在企业开发的什么地方呢？-- 经常用来作为前后台交互的数据载体

如下图所示：前后台交互时，我们需要传输数据，但是java中的对象我们该怎么去描述呢？我们可以使用如图所示的xml格式，可以清晰的描述java中需要传递给前端的java对象。

但是xml格式存在如下问题：

标签需要编写双份，占用带宽，浪费资源
解析繁琐

所以我们可以使用json来替代，如下图所示：

接下来我们通过代码来演示json对象：注释掉之前的代码，编写代码如下：

var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);

浏览器输出结果如下：

为什么呢？**因为上述是一个json字符串，不是json对象，所以我们需要借助如下函数来进行json字符串和json对象的转换。**添加代码如下：

var obj = JSON.parse(jsonstr);
alert(obj.name);

此时浏览器输出结果如下：

当然了，我们也可以通过如下函数将json对象再次转换成json字符串。添加如下代码：

alert(JSON.stringify(obj));

浏览器输出结果如图所示：

整体全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-JSON</title>
</head>
<body></body>
<script>//自定义对象// var user = {//     name: "Tom",//     age: 10,//     gender: "male",//     // eat: function(){//     //      console.log("用膳~");//     //  }//     eat(){//         console.log("用膳~");//     }// }// console.log(user.name);// user.eat();// //定义jsonvar jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';//alert(jsonstr.name);// //json字符串--js对象var obj = JSON.parse(jsonstr);//alert(obj.name);// //js对象--json字符串alert(JSON.stringify(obj));</script>
</html>

遍历数组或集合

$.each(data,function(key,value){})，主要用于遍历数组或json对象等

var json = {"name":'张飞',"age":13};
$.each(json,function(key,val){console.log(key,val);
})

jquery解析json对象数组

<script>//json对象数组，拿过来；//数据库拿过来的是一个json数组字符串;// let users=[{"id":1,"name":"tom","age":22,"gendar":"男"},//             {"id":2,"name":"jack","age":33,"gendar":"女"},//             {"id":3,"name":"peter","age":1,"gendar":"男"}//         ];// let result=JSON.stringify(users);// console.log(result);// //typeof// console.log(typeof(result));//result:从数据库传递过来的一个json字符串let result='[{"id":1,"name":"tom","age":22,"gendar":"男"},{"id":2,"name":"jack","age":33,"gendar":"女"},{"id":3,"name":"peter","age":1,"gendar":"男"}]';//需要先转换一下let users2=JSON.parse(result);//解析一下；//key:还是之前的下标；0  1  2;//value:是一个json对象；[object Object]//      需要时json对象的值；$.each(users2,function(key,user){//    对象.属性;console.log(key+","+user.id+","+user.name);})</script>

使用vue的v-for指令解析json对象数组格式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例</title><script src="js/vue.js"></script>
</head>
<body><!-- 2.html5元素; v-for指令遍历； --><div id="app"><table border="1" align="center" width="50%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><!-- 在写v-for的时候，一定是这个数据，可以重复执行；参数1：单个数据元素；参数2：索引json对象：[object Object]对象.属性s--><tr v-for="(user,index) in users"><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-show="user.gendar==1">男</span><span v-show="user.gendar==2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score>=0 && user.score<60">不及格</span><span v-else-if="user.score>=60 && user.score<80">良好</span><span v-else-if="user.score>=80 && user.score<=100">优秀</span><span v-else>不合规</span></td></tr></table></div><!-- 3.js --><script>new Vue({el:'#app',      //绑定data:{users:[{"name":"张三","age":22,"gendar":1,"score":55},{"name":"李四","age":36,"gendar":2,"score":69},{"name":"王武","age":52,"gendar":1,"score":-89}] }});</script>
</body>
</html>

618，清华社 IT BOOK 多得图书活动开始啦！活动时间为 2023 年 6 月 7 日至 6 月 18 日，清华
社为您精选多款高分好书，涵盖了 C++、Java、Python、前端、后端、数据库、算法与机器学习等多
个 IT 开发领域，适合不同层次的读者。全场 5 折，扫码领券更有优惠哦！快来京东点击链接 IT BOOK
多得（或扫描京东二维码）查看详情吧！

day02-JavaScript-Vue相关推荐

(javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？
问题: (javascript)vue项目打包后,写的覆盖element的样式无效了.这是什么原因?描述: 在开发模式模式下,写的覆盖样式都有效,打包后就无效,请问下是什么原因? main.js里的c ...
day02 JavaScript
day02 JavaScript 1. JavaScript 1.1 JavaScript的起源在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成 ...
JavaScript - Vue经典教程系列-李游Leo-专题视频课程
JavaScript - Vue经典教程系列-1114人已学习课程介绍 Vue.JS 是目前火的前端框架之一,是一个构建数据驱动的 web 界面的渐进式框架. Vue.JS 的目标是 ...
Javascript - Vue - webpack
cnpm(node package manager)和webpack模块 npm是运行在node.js环境下的包管理工具,使用npm可以很快速的安装前端文件里需要依赖的那些项目文件,比如js.css文 ...
javascript --- Vue初始化模板渲染
不带响应式的Vue缩减实现模板现有模板如下: <div id ="app"><div class="c1"><div titl ...
JavaScript(Vue.js应用+React.js应用)、css及常用解决方案整理
1. JavaScript常用方法: (1).计算百分比(保留两位小数) /*** 计算百分比(保留两位小数)* @param {Number} num 分子* @param {Number} tot ...
JavaScript基础 | Day02 JavaScript的运算符、语句、综合案例
1.运算符 1.1 算术运算符 1. 数学运算符也叫算术运算符,主要包括加.减.乘.除.取余(求模). +:求和 -:求差 *:求积 /:求商 %:取模(取余数) (运用场景:来判断某个数字是否能被整 ...
day02 听写 vue
听写1 1.创建一个标签(div) 2.创建一个M来储存数据 3.用vue将v和M关联起来听写2 1.插值表达式 {{msg}} 2.以v-text文本方式写入数据 v-text 3.以v-html ...
javascript --- vue中简单的模板渲染
一层的渲染将下面的模板中的mustache语法使用给定数据渲染. 模板如下 <div id="root"><div><div><p> ...
php百度地图地址解析失败,javascript - vue中使用百度地图提示无法解析
曾经蜡笔没有小新2017-05-19 10:47:451楼全局引用需要在webpack.base.conf.js中添加 webpackConfig externals: { "BMap&q ...

day02-JavaScript-Vue

1 JavaScript

1.5.1.3 JSON对象

自定义对象

json对象

day02-JavaScript-Vue相关推荐

最新文章

热门文章