JSON.parse（）和JSON.stringify（）和数组遍历方法

110 阅读 0 评论 73 点赞

我是靠谱客的博主大胆草丛，最近开发中收集的这篇文章主要介绍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（）和数组遍历方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端三剑客
浏览次数：110 次浏览
发布日期：2023-09-13 09:20:21
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzo_6_f2_13__23__2_1.html

JSON.parse（）和JSON.stringify（）和数组遍历方法

概述

一、JSON.parse（）和JSON.stringify（）

最后

评论列表共有 0 条评论

发表评论取消回复

JSON.parse（）和JSON.stringify（）和数组遍历方法

概述

一、JSON.parse（）和JSON.stringify（）

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复