在某网课学习前端笔记整理js篇20-Json简介、json对象转为字符串、json字符串转为对象、数组的一些方法

Json简介、json对象转为字符串、json字符串转为对象、数组的一些方法

####一、json简介

参考:http://blog.csdn.net/jiangshubian/article/details/67635207

​ json(Javascript Object Notation)是一种数据格式,就是规范数据要怎么显示, 举个例子,有个人叫“二百六”,身高“160cm”,体重“60kg”,现在你要将这个人的这些信息传给别人或者别的什么东西,你有很多种选择:

  • 姓名“二百六”,身高“160cm”,体重“60kg”
  • name=”二百六”&height=”160cm”&weight=”60kg”
  • 二百六16060
  • {“name”:”二百六”,”height”:160,”weight”:60}
  • … …

以上所有选择,传递的数据是一样的,但是你可以看到形式是可以各式各样的,这就是各种不同格式化后的数据,JSON是其中一种表示方式。

​ json的格式和js对象的语法很像,但更严格,两者对比:

对比内容 JSON JS对象
键名 必须是加双引号 可允许不加、加单引号、加双引号
属性值 只能是数值(10进制)、 字符串(双引号)、 布尔值和null, 也可以是数组或者符合 JSON要求的对象, 不能是函数、NaN, Infinity, -Infinity和undefined 爱啥啥
逗号问题 最后一个属性后面不能有逗号 可以
数值 前导0不能用,小数点后必须有数字 没限制

可以看到,相对于JS对象,JSON的格式更严格,所以大部分写的JS对象是不符合JSON的格式的。

二、js对象转为json字符串、json字符串转为js对象

​ js对象转为json字符串用JSON.stringify()方法。有三个参数,第一个是js对象。第二个参数可以是函数,也可以是一个数组。第三个参数用于美化输出——不建议用

  • 如果第二个参数是一个函数,那么序列化过程中的每个属性都会被这个函数转化和处理
  • 如果第二个参数是一个数组,那么只有包含在这个数组中的属性才会被序列化到最终的JSON字符串中
  • 如果第二个参数是null,那作用上和空着没啥区别,但是不想设置第二个参数,只是想设置第三个参数的时候,就可以设置第二个参数为null

example1

var obj = {
    'name':'小王',
    'age':18,
    'say':function(){console.log("say")}
}
console.log(obj);//输出一个对象
console.log(JSON.stringify(obj));//{"name":"小王","age":18}
console.log(JSON.stringify(obj,['name']));//{"name":"小王"}
console.log(JSON.stringify(obj,null));//{"name":"小王","age":18}
console.log(JSON.stringify(obj,
   	function(key,value){
        if(key == 'name')
            return '小李';
        return value;	
}));//{"name":"小李","age":18}
console.log(JSON.stringify(obj,null,3));
//{
//   "name": "小王",
//   "age": 18
//}
console.log(JSON.stringify(obj,null,'123'));
//{
//123"name": "小王",
//123"age": 18
//}

​ json字符串转为js对象可以用JSON.parse(),这里的参数json字符串必须严格遵循json格式。

eval也可以转化json字符串为js对象,并且不要求json字符串必须严格遵循json格式,只要满足js对象的格式就可以了。但eval的实际上是执行字符串参数的代码,不安全。

example2

var obj = '{"name":"小王","say":function(){},js:alert(1)}';
var obj2 = '{"name":"小王"}';
console.log(eval('('+obj+')'));//输出obj对象并弹出1
console.log(JSON.parse(obj2));//输出obj2对象
console.log(JSON.parse(obj));//报错

​ eval加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式转化为对象,而不是作为语句来执行。

​ 上面的两个方法在ie的低版本有兼容问题,可以去 https://bestiejs.github.io/json3/ 下载json3.js,然后导入该js文件即可。

三、数组的一些方法

1、数组的创建

example3

var arr = [1,2,3];
var arr2 = new Array(3);
arr2[0] = 1;
arr2[4] = 5;
console.log(arr[1]);//undefined
console.log(arr2);//1,,,,5
var arr3 = Array(3);
2、数组的方法

**push():**push的参数可以有多个,会往数组尾部加入多个值。

**pop():**从数组的尾部取出一个值。

push,pop感觉就是栈的概念。

example4

var arr = [];
arr.push(1);
console.log(arr.toString());//1
arr.push(2);
console.log(arr.toString());//1,2
arr.push(3,4);
console.log(arr.toString());//1,2,3,4
console.log(arr.pop());//4
console.log(arr.toString());//1,2,3

shift(): 和pop相反。

unshift(): 和push相反。

example5

var arr = [];
arr.unshift(1);
console.log(arr.toString());//1
arr.unshift(2);
console.log(arr.toString());//2,1
arr.unshift(3,4);
console.log(arr.toString());//3,4,2,1
console.log(arr.shift());//3
console.log(arr.toString());//4,2,1

**join():**把数组中的所有元素放入一个字符串。参数是分隔符,默认是逗号。

example6

var arr = [1,2,3]
var arr2 = [1,[2,3],'4',[5,[6,7]]];
console.log(arr.join("-"));	//1-2-3
console.log(arr.join());//1,2,3
console.log(arr2.join("-"));//1-2,3-4-5,6,7			
console.log(arr2.join());//1,2,3,4,5,6,7

concat(): 连接数组。

slice(a,b): 数组截取部分。[a,b),负数的话倒着数的下标。

reverse(): 颠倒数组。改变原有数组。

example7

var arr = [1,2,3];
var arr2 = [4,5];
console.log(arr.concat(arr2));//[1, 2, 3, 4, 5]
console.log(arr.concat(1));//[1,2,3,1]
console.log(arr);//[1, 2, 3]

console.log(arr.slice(1,3));//[2,3]
console.log(arr.slice(0,-1));//[1,2]
console.log(arr.slice(1));//[2,3]
console.log(arr);//[1,2,3]

console.log(arr.reverse());//[3,2,1]
console.log(arr);//[3,2,1]

indexOf(): 返回参数在数组中第一次出现的位置,找不到返回-1.

lastIndexOf(): 从右向左找,返回参数在数组中第一次出现的位置,找不到返回-1.

find(): 参数是一个返回布尔值的函数,当找到第一个满足该函数的元素返回。

findIndex(): 和find方法差不多,不过返回的是下标。

example8

var arr = [1,2,3,1];
console.log(arr.indexOf(1));//0
console.log(arr.indexOf(4));//-1
console.log(arr.lastIndexOf(1));//3
console.log(arr.lastIndexOf(4));//-1
console.log(arr.find(isOdd));//1
console.log(arr.findIndex(isOdd));//0
//判断是奇数
function isOdd(item){
    return item % 2;
}

splice(): 剪切。第一个参数是起始下标,第二个下标是截取的个数。后面可以第三个参数插入到截取的位置,并且原有的数组会改变。可以通过这个方法往数组插入指定位置的元素(比如将前两个值设为你想插入的位置的下标)。

sort(): 数组元素排序,默认从小到大。排序的依据是ascill值。可以传入一个函数,自定义排序的方式,函数的返回值大于0,表示后面的大,等于0表示相等,小于零表示前面的大。会改变原有的数组。

example9

var arr = [5,4,3,2,1];
console.log(arr.splice(1,2,'aaa'));//[4,3]
console.log(arr);//[5,"aaa",2,1]
console.log(arr.sort());//[1,2,5,"aaa"]
console.log(arr);//[1,2,5,"aaa"]
console.log(arr.sort(mySort))//[5, 2, 1, "aaa"]
function mySort(a,b){
    return b-a;
}

综合运用:

example10

var str = 'aabbaaccddae';
//把str反过来(回文)
console.log(str.split("").reverse().join(""));//eaddccaabbaa
发布了27 篇原创文章 · 获赞 0 · 访问量 218

猜你喜欢

转载自blog.csdn.net/qq_34338676/article/details/104715704