ES5-ES6-ES7_字符串与JOSN格式的数据相互转换以及深度克隆新对象

这篇文章主要来讲HTML5中的新方法：parse()把字符串转换成josn格式的数据和stringify()把josn格式的数据转换成字符串

eval()方法的回顾

eval()方法可以将任何字符串解析成js，下面来解析一个函数，并且解析完后执行这个函数

var str = 'function show(){alert(3)}';
eval(str);
show();  //结果可以alert出3

但是这个方法有个缺点，就是如果这个字符串里面带有攻击性的代码，那么转换成js后就会不安全

parse()把字符串转换成josn格式的数据

只能解析JSON形式的字符串变成JS (所以安全性要高一些)，另外需要注意的是需要转换的字符串必须是严格的的JSON形式的字符串（字符串中的属性要严格的加上引号）

var str = '{"name":"hello"}';   //一定是严格的JSON形式
var json = JSON.parse(str);
alert( json.name );  //打印出hello

stringify()把josn格式的数据转换成字符串

这个JSON格式的数据可以不是严格的，比如{name : "hello"}，name没有加上双引号，使用stringify()方法转换成字符串时会自动的把双引号加上

var json = {name : "hello"};
var str = JSON.stringify(json);
alert( str );  //{"name" : "hello"},自动加上了引号

parse()和stringify()的应用——深度克隆新对象

首先来看一下对象引用赋值的的实例

var a = {name : 'hello'
};
var b = a;  //将a这个对象的引用赋值给了b,就相当于两个人共用一台电脑，当改变这个对象的时候，a也会跟着改变
b.name = 'hi';   //
alert( a.name ); //hi

再来看一下对象克隆的一个实例

var a = {name : 'hello'
};
var b = {};//遍历对象a的属性和方法，并且赋给b对象，b对象拥有了a的所有属性和方法，当b改变属性的时候不会影响到a
for(var attr in a){b[attr] = a[attr];
}
b.name = 'hi';
alert( a.name );  //hello
alert( b.name );  //hi

但这这种克隆是浅层次的克隆，当a对象里面还有一个对象的时候，在将对象的属性赋给b的时候还是会存在引用的关系，所以这种方法无法做到深层次的克隆

如果还是使用这种方法来做深层次的克隆的话，就要使用到递归来一层层的来拷贝a对象里面的属性或者方法，详情请查看对象的克隆（包括深度克隆）的几种方法

那么接下来我们使用parse()和stringify()这两个方法来深度克隆对象

原理是使用stringify()将a对象解析成字符串，然后再使用parse()方法解析成对象并且赋值给b对象，这种方式可以做到深度的克隆和浅层次的克隆（方法都是一样的）

var a = {name : { age : 100 },num: [2,3,4]
};
var str = JSON.stringify(a);  //将a对象解析成字符串
var b = JSON.parse(str);   //将str字符串解析成对象并且赋值给b，那么b这个对象就跟a对象没有引用关系
b.name.age = 200;
b.num = [5,6,7];
alert( a.name.age );   //100
alert( b.name.age );    //200
alert( a.num );   //2,3,4
alert( b.num );     //5,6,7

如何做到与其他浏览器兼容

这两个方法非常好用但又写浏览器不支持（IE低版本），那么如果需要兼容低版本的话，需要去josn官网去下载json2.js这个插件

然后直接将这个插件引入进来就可以了

转载于:https://www.cnblogs.com/LO-ME/p/7385248.html

ES5-ES6-ES7_字符串与JOSN格式的数据相互转换以及深度克隆新对象相关推荐

es6 日期字符串转日期_量化数据预处理-中文日期（含）转英文日期
1.引入时间是pandas数据的主要索引.中文网站上下载的数据含有中文日期,其中包含年月日.如下图所示: 沪深300指数的数据含有中文,需要处理成python的 datetime格式才能放入回测框架 ...
ES6/02/创建对象，构造函数和原型，原型和原型链，this指向，类，ES5新增的方法，数组方法，回调函数，ES5新增的字符串方法，ES5中新增的对象方法
创建对象 1,利用new Object()创建对象 var obj1 =new Object(); 2,利用对象字面量创建对象 var obj2={}; 3,利用构造函数创建对象 function S ...
ES6基础-字符串的新特性
字符串的新特性 1. es6新增遍历接口:for...of循环遍历 2. 模版字符串: 使用``号对字符串进行原格式输出可以使用trim()方法进行取消换行模版字符串潜入变量,需要将变量名写在${ ...
数组方法大全ES5+ES6
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 1. 使用 Array 构造函数 2. 使用数组字面量表示法数组原型方法 1. join() 2.push()和pop() ...
ES5 ES6相关内容 day15
1. JavaScript 的版本 JavaScript这种语言的基本语法结构是由ECMAScript来标准化的, 所以我们说的JavaScript版本一般指的是ECMAScript版本. 2009年 ...
【ES6】字符串的拓展
[ES6]字符串的拓展一.为什么ES6要进行字符拓展? 二.ASCLL码.Unicode编码.UTF-8编码的异同三.ES6新增的字符串接口 1)codePointAt() 2)codePoint ...
Js Array数组ES5/ES6常用方法
Js Array数组ES5/ES6常用方法 1.栈方法(先进后出) push():在数组的最后一项后追加值(参数:可以为多个值或数组) 返回:数组的长度,改变了原数组. var a=[1,2,3] a ...
es6之字符串添加的东西
在es6里边对字符串添加了一些东西! 字符串模板(非常友善) 相信大家之前都遇到过万恶的字符串拼接,真是噩梦,不过之后有了字符串模板之后,再也不用担心字符串拼接会乱了... 之前的字符串拼接 let ...
高级JavaScript #ES6(模板字符串,let,箭头函数,forof,参数增强,解构,class,promise)
模板字符串 1.模板字符串: 只要拼接字符串都用模板字符串代替+a.整个字符串包裹在一对儿反引号 ` ` 中b.反引号``中支持换行 c.反引号中需要动态生成的内容必须放在${}里d. ${}里: ...

ES5-ES6-ES7_字符串与JOSN格式的数据相互转换以及深度克隆新对象

ES5-ES6-ES7_字符串与JOSN格式的数据相互转换以及深度克隆新对象相关推荐

最新文章

热门文章