这篇文章主要来讲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 ); //
alert( b.name.age ); //
alert( a.num ); //2,3,4
alert( b.num ); //5,6,7

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

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

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

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

  1. python 使用eval() 可以将json格式的数据,转换为原始数据

    使用python 自带的函数可以将json 格式的数据(也就是字符串)转换为原始格式的数据, 当使用json.loads()无法将json格式的数据转换为原始数据(存在多层各种格式类型数据的嵌套), ...

  2. Velocity(6)——velocity遍历josn格式的字符串

    使用velocity脚本语言遍历josn格式的字符串 1.由于数据库会存储一些json格式的字符,为方便以后使用筛选 如果这些数据我们查出来直接遍历使用velocity是根本行不通的,例如这样的话:j ...

  3. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  4. 简述ES5 ES6

    很久前的某一天,一位大神问我,你知道ES6相对于ES5有什么改进吗? 我一脸懵逼的反问,那个啥,啥是ES5.ES6啊. 不得不承认与大神之间的差距,回来深思了这个问题,结合以前的知识,算是有了点眉目. ...

  5. javascript的replace+正则 实现ES6的字符串模版

    采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯.每写一个变量就要断一下,插入一个 + 和 ...

  6. es6之字符串添加的东西

    在es6里边对字符串添加了一些东西! 字符串模板(非常友善) 相信大家之前都遇到过万恶的字符串拼接,真是噩梦,不过之后有了字符串模板之后,再也不用担心字符串拼接会乱了... 之前的字符串拼接 let ...

  7. ES6中字符串扩展

    ES6中字符串扩展 ① for...of 遍历字符串: 例如: for(let codePoint of 'string'){ console.log(codePoint) } 运行结果: ②  in ...

  8. Atitit js es5 es6新特性 attilax总结

    Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...

  9. ES6 学习 -- 字符串新增方法

    1.检测字符串中是否包含某个字符 ES5方法:string.indexOf("需要检测的字符"),如果返回值为-1,则说明当前字符串中不存在这个字符,返回值不为-1,则 是当前字符 ...

随机推荐

  1. mysql Unknown error 1054

    mysql查询错误  Unknown error 1054 错误原因:字段名字不对应 解决方案:一一比对字段名称,令实体字段名称与数据库字段对应或者与你的sql语句中的别名对应起来

  2. ASP.NET MVC 学习笔记-7.自定义配置信息(后续)

    自定义配置信息的高级应用 通过上篇博文对简单的自定义配置信息的学习,使得更加灵活的控制系统配置信息.实际项目中,这种配置的灵活度往往无法满足项目的灵活度和扩展性. 比如,一个配置信息有三部分组成,而每 ...

  3. [android] 插入一条记录到系统短信应用里

    谷歌市场上有这些应用,模拟短信,原理就是把数据插入到短信应用的数据库里 获取ContentResolver对象,通过getContentResolver()方法 调用resolver对象的insert ...

  4. 8. 同步锁Lock

    package com.gf.demo07; import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.Ree ...

  5. ListView子项点击无反应的解决办法

    在使用ListView控件的过程中,当子项包括Button或者CheckBoX等控件时,直接点击子项无反应,分析发现原来是Button,CheckBoX等控件会优先获取焦点,那么子项点击的焦点就被上述 ...

  6. C# 任务 数据加载不影响其他操作

    private void button1_Click(object sender, EventArgs e) { //this.timer1.Enabled = true; Task t1 = new ...

  7. 洛谷P2860 [USACO06JAN]冗余路径Redundant Paths(tarjan求边双联通分量)

    题目描述 In order to get from one of the F (1 <= F <= 5,000) grazing fields (which are numbered 1. ...

  8. css 样式表的书写顺序

    display || visibility list-style : list-style-type || list-style-position || list-style-image positi ...

  9. JMeter 监听器之保存响应到文件

    监听器之保存响应到文件   by:授客 QQ:1033553122 测试环境 apache-jmeter-2.13 1. 保存结果到响应文件 说明: 文件名称前缀:设置响应文件所在路径(路径必须已存在 ...

  10. C# 利用SharpPcap实现网络包捕获嗅探

    本文是利用SharpPcap实现网络包的捕获的小例子,实现了端口监控,数据包捕获等功能,主要用于学习分享. 什么是SharpPcap? SharpPcap 是一个.NET 环境下的网络包捕获框架,基于 ...