您的位置：首页 > Web前端 > JavaScript

Day-14 JS中的JSON,for..in..与数组对象的操作

2016-01-12 22:53 831 查看
1.JSON

什么是json？

JSON是一种基于文本的数据交换方式，或者叫做数据描述格式，你是否该选用他首先肯定要关注它所拥有的优点。

JSON的优点：

　　1、基于纯文本，跨平台传递极其简单；

　　2、Javascript原生支持，后台语言几乎全部支持；

　　3、轻量级数据格式，占用字符数量极少，特别适合互联网传递；

　　4、可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；

　　5、容易编写和解析，当然前提是你要知道数据结构；

　　JSON的缺点当然也有，但在作者看来实在是无关紧要的东西，所以不再单独说明。

　　JSON的格式或者叫规则：

　　JSON能够以非常简单的方式来描述数据结构，XML能做的它都能做，因此在跨平台方面两者完全不分伯仲。

　　1、JSON只有两种数据类型描述符，大括号{}和方括号[]，其余英文冒号:是映射符，英文逗号,是分隔符，英文双引号”“是定义符。

　　2、大括号{}用来描述一组“不同类型的无序键值对集合”（每个键值对可以理解为OOP的属性描述），方括号[]用来描述一组“相同类型的有序数据集合”（可对应OOP的数组）。

　　3、上述两种集合中若有多个子项，则通过英文逗号,进行分隔。

　　4、键值对以英文冒号:进行分隔，并且建议键名都加上英文双引号””，以便于不同语言的解析。

　　5、JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个，字符串必须用双引号引起来，其余的都不用，日期类型比较特殊，这里就不展开讲述了，只是建议如果客户端没有按日期排序功能需求的话，那么把日期时间直接作为字符串传递就好，可以省去很多麻烦。

json实例

// 描述一个人
var person = {
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
}
// 获取这个人的信息
var personAge = person.Age;
// 描述几个人
var members = [
{
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
},
{
"Name": "John",
"Age": 20,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "Henry",
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
// 读取其中John的公司名称
var johnsCompany = members[1].Company;
// 描述一次会议
var conference = {
"Conference": "Future Marketing",
"Date": "2012-6-1",
"Address": "Beijing",
"Members":
[
{
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
},
{
"Name": "John",
"Age": 20,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "Henry",
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
}
// 读取参会者Henry是否工程师
var henryIsAnEngineer = conference.Members[2].Engineer;


通过for in 循环可以遍历一个json对象的键值对。

var a = {
'name':'MrKou',
'sex':'female',
'age':22
}
for(var i in a)
alert(i);//name sex age

for(var i in a)
alert(a[i])//MrKou female 22


通过json来给文档对象修改样式

例：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
</head>

<body>

<input type="button" i
4000
d="btn" value="按钮" />
<div id="div"></div>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("div");
/*
oBtn.onclick = function(){
this.style.width = '200px';
this.style.height = '40px';
this.style.backgroundColor = 'red';
}

function css( mJson, obj ) {
for (var key in mJson) {
obj.style[key] = mJson[key]
}
}

css({
'width': '200px',
'height': '40px',
'background': 'red'
}, oDiv)
*/

oBtn.onclick = function(){
oBtn.css({
'width': '200px',
'height': '40px',
'background': 'red',
'border' : '5px solid blue'
})
}
}

Object.prototype.css = function( mJson ){
for (var key in mJson) {
this.style[key] = mJson[key]
}
}
</script>
</body>

</html>


2.数组操作

split与join的用法

split是将一个字符串，通过参数的分割来转变成数组。

join是通过参数的链接，将数组元素连接成字符串。

js数组操作

1.push：推入元素到数组最后一位并返回数组长度

2.unshift:推入元素到数字第一位并返回数组长度

3.shift：从数组第一位删除元素，并返回删除的元素

4.pop：删除数组的最后一位并返回删除的元素

5.splice(start,deleteCount,val1,val2,…):从start位置开始删除元素，个数为deleteCount，并添加val1，val2。val1,val2为可选元素。



splice返回被删除元素的数组

6.reverse：将数组倒序排列

7.sort:按指定的参数对数组进行排序 特例：如果数组中含有字符串则比较ascii码

8.slice(start,end):返回从原数组截取的从start到end-1的元素的新数组

var a = [1,2,3,4,5];
var b = a.slice(1,4); //a:[1,2,3,4,5] b:[2,3,4]


任务要求：给出一段文字，要求通过获取用户输入的文本检索文字并高亮显示。

代码：

1.通过正则表达式

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" >
</head>
<body>
<div>
<p id="text">这次的代码变化比较大，不再直接把远程js文件写死，而是编码实现动态查询，而这也正是jsonp客户端实现的核心部分，本例中的重点也就在于如何完成jsonp调用的全过程。我们看到调用的url中传递了一个code参数，告诉服务器我要查的是CA1998次航班的信息，而callback参数则告诉服务器，我的本地回调函数叫做flightHandler，所以请把查询结果传入这个函数中进行调用。OK，服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）。
</p>
<input id="shuru" type="text" value="" />
<input id="btn" type="button" value="button">
<script type="text/javascript" src="js/js.js"> </script>
</div>
</body>
</html>


JS文件

var Txt = document.getElementById('text');
var inputBox = document.getElementById('shuru');
var btn = document.getElementById('btn');
// alert(Txt.innerHTML);
var txt = Txt.innerHTML;
// alert(typeof txt);
var adminTxt;
//定义方法获取用户输入的文本
function get(){
adminTxt = inputBox.value;
return adminTxt;
}
btn.onclick = function () {
Txt.innerHTML = txt;//每次都先重置Txt
get();
var d = txt.replace(new RegExp(adminTxt,'g'),"<span>"+ adminTxt + "</span>");
Txt.innerHTML = d;
}


2.通过split与join

btn.onclick = function () {
Txt.innerHTML = txt;//每次都先重置Txt
Txt.innerHTML = txt.split(get()).join('<span>'+ adminTxt +'</span>');
}


3.实时获取用户输入的文本并改变颜色

*使用js检测键盘动作的方法，当input获取焦点时执行

onkeyup onkeydown onkeypress

var oBox = document.getElementById("box");
var oTxt = document.getElementById("txt");
var oBtn = document.getElementById("btn");
var bstr = oBox.innerHTML;
/*
oBtn['onclick'] = function(){
seach( bstr , oTxt.value );
}
*/
//监听输入框，并在键盘活动时执行search（）
oTxt.onfocus = function(){
document.onkeyup = function(){
search( bstr , oTxt.value )
}
}
function search( str , val ){
if( val ){
var arr = str.split( val );
var str =  arr.join('<span style="color:red;background:yellow;">'+val+'</span>');
oBox.innerHTML = str;
}else{
oBox.innerHTML = str;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript json
相关文章推荐
新的分享
章节导航