JSON.parse（）和JSON.stringify（）和数组遍历方法
一、JSON.parse（）和JSON.stringify（）
网络中的信息的传输，传输的都是字符串，XML 用来传输数据，现在大多数web开发都是用json数据结构。
1.前端 ----string—》后端
将对象转为字符串:stringify
2.前端《----string— 后端
1.1 JSON.parse
作用：将字符串转为对象
JSON.parse(str, fn)
str:要解析的json字符串
fn:回调函数，该函数自动执行，可以对要生成的对象进行遍历，如果需要对数据进行操作则使用该方法(一个转换结果的函数， 将为对象的每个成员调用此函数。)
function(key, value) {
key:每次遍历元素的属性名
value:每次遍历元素的属性值
}
执行代码：
var str = '{"name":"小明","age":18,"sex":"男"}';var toObj = JSON.parse(str);console.log("原来类型：" + typeof str)console.log( toObj );console.log("转换后类型：" + typeof toObj)
结果：
特殊的：如果我们想把属性值里面的数字转换为字符串可用JSON.parse()第二个参数方法：
var str = '{"name":"小明","age":18,"sex":"男"}';var obj = JSON.parse(str, function(key, value) {// 该种方式会对生成的对象进行遍历，遍历的次数为元素个数 + 1// console.log(this, arguments);// console.log(key, value);if(key) {// 键非空---遍历的过程中return '' + value;//通过} else {// 键为空---遍历的最后一次return value;}});console.log(obj);console.log(typeof obj.age)；
结果：
1.2JSON.stringify
作用：将对象转换为字符串
JSON.stringify(obj, fn)
str:要解析的json字符串
fn:回调函数，该函数自动执行，可以对要生成的对象进行遍历，如果需要对数据进行操作则使用该方法(一个转换结果的函数， 将为对象的每个成员调用此函数。)
function(key, value) {
key:每次遍历元素的属性名
value:每次遍历元素的属性值
}
遍历过程和JSON.parse一样的，先遍历每一个元素，遍历的时候是有前提的，每一次都要求有返回值，如果没有返回值，则遍历立即结束返回值作为对象当次遍历元素的值，最后一次，键为空，值为要返回的对象
执行代码：
var obj = {name: 'zhanglei',age: '18',sex: '男'}var str1 = JSON.stringify(obj);console.log("原来类型：" + typeof obj);console.log(str1);console.log("转换后类型：" + typeof str1);
特殊的：如果我们想把属性值里面的数字转换为字符串可用JSON.stringify第二个参数方法：
执行代码：
var obj = {a: '1',b: '2',c: '3'}var str2 = JSON.stringify(obj, function(key, value) {// 该种方式会对生成的对象进行遍历，遍历的次数为元素个数 + 1// console.log(this, arguments);// console.log(key, value);if (typeof value === "string") {// 键非空---遍历的过程中//console.log(value)return +value;//将所有的字符串转为数字} else {// 键为空---遍历的最后一次//console.log(value)return value;} }); console.log( str2);
结果：
二、数组
2.1 判断数组和对象四种方式
1判断数组的静态方法：
Arry.isArray(数组名)
2 Instanceof:
数组名 instanceof Array
3 Constructor:
数组名.constructor === Array
4 Object.prototype.toString.call() === ‘[Object Array]’
注意：为什么可以用这个方法？：Object.prototype对象上的toString方法可以用来判断数据类型 判断是否是数组（只有Object.prototype上的toString才能用来进行复杂数据类型的判断），而重写后的toString方法可以把对象转换成字符串，还可以把数值转换成不同进制的数
执行代码：
1 var obj = document.getElementsByTagName('div');
2 var arr = [1, 2, 3];
3 console.log(obj, arr);
4
5 // ES5 isArray 是Array
6 console.log(Array.isArray(obj)); // false
7 console.log(Array.isArray(arr)); // true
8
9 // instanceof
10 console.log(obj instanceof Array); // false
11 console.log(arr instanceof Array); // true
12
13 // constructor
14 console.log(obj.__proto__.constructor === Array); // false
15 console.log(arr.__proto__.constructor === Array); // true
16
17 // toString
18 console.log(Object.prototype.toString.call(obj) === '[object Array]');// false
19 console.log(Object.prototype.toString.call(arr) === '[object Array]');// true
结果：
2.2 获得数组中值的索引
indexOf:正序查找
lastIndexOf:倒叙查找
注意：无论是正序还是倒叙，索引不会改变，只是查找的方向不同，如果数组中有多个要查找的值，则查找到第一个就停止查找。查找不到返回 -1 全等查找
执行代码:
1 var arr = [1, 2, 3, 2, 4];
2 // 获得值的索引
3 // indexOf() 正序查找
4 console.log(arr.indexOf(2)); // 1
5 console.log(arr.indexOf(-2)); // -1
6 // lastIndexOf 倒序查找
7 console.log(arr.lastIndexOf(2)); // 3
8 console.log(arr.lastIndexOf(-2)); // -1
结果：
兼容处理：
1 // 进行能力检测
2 if (!Array.prototype.indexOf) {3 // 该版本的浏览器不支持indexOf
4 Array.prototype.indexOf = function(value) {5 for (var i = 0; i < this.length; i++) {6 if (this[i] === value) {7 return i;
8 }
9 }
10 // 没有找到
11 return -1;
12 }
13 }
14
15 // 进行能力检测
16 if (!Array.prototype.lastIndexOf) {17 // 该版本的浏览器不支持lastIndexOf
18 Array.prototype.lastIndexOf = function(value) {19 for (var i = this.length -1; i >= 0; i--) {20 if (this[i] === value) {21 return i;
22 }
23 }
24 // 没有找到
25 return -1;
26 } }2.3 forEach
遍历数组
arr.forEach(function(value, index, arr) {
value:遍历元素的值
index:遍历元素的索引
arr:被遍历的数组
})
注意：
1、回调函数内，会忽略return的返回值
2、整体没有返回值
3、原数组没有发生变化
4、返回值是undefined
执行代码：
1 var arr = ['杨浩', '张发', '秋文', '白杰'];
2 var res = arr.forEach(function(value, index, arr) {3 // console.log(arguments);
4 console.log(value, index, arr);
5 return 111; // 会被忽略的
6 });
7 console.log(res);
8 console.log(arr);
结果：
2.4 map
map遍历数组，但是存在映射关系，会产生一个新数组，数组中的元素值为遍历中每一次的返回值。不会改变原数组
var res = arr.map(function(value, index, arr) {
res:最终生成的新的数组
value:元素的值
index：元素的索引
arr：原数组
return:为每一次添加到新生成的数组中的值
});
执行代码：
var arr = [1, 2, 3, 4];var res = arr.map(function (value, index, arr) {// console.log(arguments);console.log(value, index, arr);return '新生成的' + value;});console.log(res);console.log(arr)
结果：
兼容处理：
1 // 能力检测
2 if (!Array.prototype.map) {3 Array.prototype.map = function(fn) {4 // 声明一个数组
5 var arr = [];
6 for (var i = 0; i < this.length; i++) {7 arr.push(fn(this[i], i, this));
8 }
9 // 返回数组
10 return arr;
11 }12 }
2.5 fill()
给数组填充数据，配合 Array()，即使是函数也不会执行
执行代码:
var arr = new Array(5);console.log(arr); arr.fill('我是新填充的');console.log(arr);
结果：
2.6 some（断言方法）
var res = arr.some(fn);
fn: function(value， index， arr) {
res:最终生成的新的数组
value:元素的值
index：元素的索引
arr：原数组
}
some用于检测数组中的元素，如果有符合条件的，则整体的值为true，后续代码不执行。如果一个符合条件的都没有，则最终结果为false
执行代码;
var arr = ['杨浩', '张发', '秋文', '白杰'];var res = arr.some(function (value, index, arr) {// console.log(arguments);console.log(value, index, arr);if (value === '秋文') {return true;}});console.log(res);
结果：
2.7 every
和some很类似，只不过every要求所有的元素都符合条件，否则就返回false
执行代码：
var arr = [1,2,3,4];var res1 = arr.every(function(value, index, arr) {// console.log(arguments);console.log(value, index, arr);if (value[0] == '1') {return true;}});console.log(res1);
结果：
总结:
some：类似于逻辑或，一真则真
every:类似于逻辑与，一假则假
兼容处理:
1 // 能力检测
2 if (!Array.prototype.some) {3 Array.prototype.some = function(fn) {4 // 循环
5 for (var i = 0; i < this.length; i++) {6 if (fn(this[i], i, this)) {7 return true;
8 }
9 }
10 }
11 }
12 // 能力检测
13 if (!Array.prototype.every) {14 Array.prototype.every = function(fn) {15 // 循环
16 for (var i = 0; i < this.length; i++) {17 if (!fn(this[i], i, this)) {18 return false;
19 }
20 }
21 }}
2.8 filter
过滤数组：返回值就是满足过滤条件组成的新数组
var res = arr.filter(function(value, index, arr) {
// console.log(arguments);
if (value % 2 == 1) {
return true;
}
});
执行代码：
var arr = [1, 2, 3, 4, 5];var res = arr.filter(function (value, index, arr) {// console.log(arguments);if (value % 2 == 1) {//判断数组中满足余数为2的数return true;}});console.log(res);//返回1,2，3
结果：
兼容写法：
1 // 能力检测
2 if (!Array.prototype.filter) {3 Array.prototype.filter = function(fn) {4 // 定义一个新数组
5 var arr = [];
6 for (var i = 0; i < this.length; i++) {7 if (fn(this[i], i, this)) {8 arr.push(this[i]);
9 }
10 }
11 // 返回数组
12 return arr;
13 } }
2.9 reduce和reduceRight（累加方法）
reduce是从前往后累加，reduceRight是从后往前累加
reduce：从第二个成员开始遍历，第一个成员会在第一次遍历的时候作为第一个参数传递
reduceRight：从倒数第二个成员开始遍历，倒数第一个成员会在第一次遍历的时候作为第一个参数传递
reduce：fn 回调函数，
数组的遍历，遍历的时候从第二个元素开始的
fn:
参数： prev， value， index，arr
prev:第一次为第一个元素的值，之后为上一次回调函数的返回值
value:元素的值
index：元素的索引
arr：数组
reduce返回值：
回调函数最后一次的返回值
执行代码：
var arr = [1, 2, 3, 4, 5, 6, 7]; /*
3 reduce：fn 回调函数
4 数组的遍历，遍历的时候从第二个元素开始的
5 fn:
6 参数： prev， value， index，arr
7 prev:第一次为第一个元素的值，之后为上一次回调函数的返回值
8 value:元素的值
9 index：元素的索引
10 arr：数组
11 返回值：
12 回调函数最后一次的返回值
13 */var res = arr.reduce(function (prev, value, index, arr) {// console.log(arguments);console.log(prev, value, index);// 数组值的累加return prev + value;// return prev * value;// return 111;});console.log(res);console.log(arr);
结果：
reduceRight和reduce一样，只是倒序的过程
兼容写法：
1 if (!Array.prototype.reduce) {2 Array.prototype.reduce = function(fn) {3 var res = this[0];
4 for (var i = 1; i < this.length; i++) {5 res = fn(res, this[i], i, this);
6 }
7 return res;
8 }
9 }
10 if (!Array.prototype.reduceRight) {11 Array.prototype.reduceRight = function(fn) {12 var res = this[this.length - 1];
13 for (var i = this.length - 2; i >= 0; i--) {14 res = fn(res, this[i], i, this);
15 }
16 return res;
17 } }
2.10 bind
call和apply直接执行，而bind返回一个函数，不会立即执行
执行这个返回函数的时候，如果添加实参，实参会和原来绑定时候传入的参数进行合并，作为所有实参传给函数进行调用
执行代码：
function demo(a, b) {console.log(this, arguments);}/*
5 call和apply直接执行，而bind返回一个函数，不会立即执行
6 *///demo.call(document, 1, 2, 3);//demo.apply(document, [1, 2, 3]);var res = demo.bind(document, 1, 2, 3);//console.log(res);res(4, 5, 6);
结果：
2.11 toJSON
格式化时间
执行代码;
var date = new Date();console.log(date);// toJSON格式化时间console.log(date.toJSON());
结果：
JSON.parse（）和JSON.stringify（）和数组遍历方法相关推荐
- JSON.parse和JSON.stringify 参数详解
JSON.parse和JSON.stringify这两个浏览器自带(IE6/7除外)的方法平常我们经常用到,但是一般都只是用到了他们的第一个参数,比如字符串转对象:JSON.parse('{}') ...
- 详解JSON.parse 和 JSON.stringify
文章目录 JSON.parse JSON.parse 语法 reviver 参数 JSON.parse 特性 解析的其他方法 JSON.stringify JSON.stringify 语法 repl ...
- php json.parse,JSON.parse()与JSON.stringify()和eval()使用方法详解
这次给大家带来JSON.parse()与JSON.stringify()和eval()使用方法详解,JSON.parse()与JSON.stringify()和eval()使用的注意事项有哪些,下面就 ...
- JSON.parse()、JSON.stringify()和eval()的作用
浅谈JSON.parse().JSON.stringify()和eval()的作用 相信大家对于JSON应该不陌生,度娘对这个名词的解释大致如下: "JSON(JavaScript Obje ...
- js JSON.parse和JSON.stringify
JSON.parse 将json字符串转换成对象 JSON.parse(text[, reviver]) reviver可选参数 var students = '{"id": 1, ...
- JSON.parse()、JSON.stringify、 parseInt()
1.JSON.parse() JSON.parse()是Javascript中一个常用的 JSON 转换方法,JSON.parse()可以把JSON规则的字符串转换为JSONObject,JSON.p ...
- JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
JS/JavaScript中解析JSON --- JSON.parse().JSON.stringify()以及$.parseJSON()使用详解 现在JSON格式在web开发中非常重要,特别是在使用 ...
- JSON.parse和JSON.stringify的用法
平时我们在接收后端返回的json对象通常是一个字符串类型的object,所以一般我们要对这个object进行类型转化后,我们才能使用object里面的数据,而这其中涉及到两个必不可少的方法就是JSON ...
- JSON.parse 解析json字符串时，遇换行符报错
Json字符串转换成Json对象时候,有两种方式: 假设d是json字符串: 1,eval('(' + d + ')'). 2,JSON.parse(d): 但是以上方式有隐患,如果Json字符串有换 ...
- php的遍历方法,PHP数组遍历方法总结
在PHP中数组分为两类: 数字索引数组和关联数组. 其中数字索引数组和C语言中的数组一样,下标是为0,1,2- 而关联数组下标可能是任意类型,与其它语言中的hash,map等结构相似. 下面介绍PHP ...
最新文章
- wpf里的menu怎么用_股市里的两市成交量是什么，它反映了什么，我是怎么用它来定投的...
- php 状态模式,PHP设计模式（十九）—状态模式 (State Pattern)
- [Flink]Flink1.3 Stream指南六 事件时间与处理时间
- loadrunner 参数化数据更新方式
- php querystring使用,node.js中的querystring.parse方法使用说明_node.js
- Siri为什么越来越蠢？
- 使用遇到的问题_水性漆在使用过程中遇到的问题以及解决方案
- 在线类图各种UML图分享
- 定点运算之原码一位乘法
- 有限元二阶拉格朗日插值函数理论
- 面向对象：结构化开发方法和面向对象开发方法
- 计算机桌面定制操作,教程方法;12、设置桌面--电脑基础知识电脑技巧-琪琪词资源网...
- 晨曦 - 江湖一剑客
- 尤大都推荐的组件库是如何开发出来的？
- 通证与区块链：前台经济+后台技术
- 江苏智慧公厕：让厕所成为城市新名片
- 67 step to success
- HTML页面刷新方法
- 深入实践 Spring Boot PDF 百度云盘下载
- 为什么使用 CE + Softmax 作为损失函数