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 ); //
alert( b.name.age ); //
alert( a.num ); //2,3,4
alert( b.num ); //5,6,7
如何做到与其他浏览器兼容
这两个方法非常好用但又写浏览器不支持(IE低版本),那么如果需要兼容低版本的话,需要去josn官网去下载json2.js这个插件
然后直接将这个插件引入进来就可以了
ES5-ES6-ES7_字符串与JOSN格式的数据相互转换以及深度克隆新对象的更多相关文章
- python 使用eval() 可以将json格式的数据,转换为原始数据
使用python 自带的函数可以将json 格式的数据(也就是字符串)转换为原始格式的数据, 当使用json.loads()无法将json格式的数据转换为原始数据(存在多层各种格式类型数据的嵌套), ...
- Velocity(6)——velocity遍历josn格式的字符串
使用velocity脚本语言遍历josn格式的字符串 1.由于数据库会存储一些json格式的字符,为方便以后使用筛选 如果这些数据我们查出来直接遍历使用velocity是根本行不通的,例如这样的话:j ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- 简述ES5 ES6
很久前的某一天,一位大神问我,你知道ES6相对于ES5有什么改进吗? 我一脸懵逼的反问,那个啥,啥是ES5.ES6啊. 不得不承认与大神之间的差距,回来深思了这个问题,结合以前的知识,算是有了点眉目. ...
- javascript的replace+正则 实现ES6的字符串模版
采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯.每写一个变量就要断一下,插入一个 + 和 ...
- es6之字符串添加的东西
在es6里边对字符串添加了一些东西! 字符串模板(非常友善) 相信大家之前都遇到过万恶的字符串拼接,真是噩梦,不过之后有了字符串模板之后,再也不用担心字符串拼接会乱了... 之前的字符串拼接 let ...
- ES6中字符串扩展
ES6中字符串扩展 ① for...of 遍历字符串: 例如: for(let codePoint of 'string'){ console.log(codePoint) } 运行结果: ② in ...
- Atitit js es5 es6新特性 attilax总结
Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...
- ES6 学习 -- 字符串新增方法
1.检测字符串中是否包含某个字符 ES5方法:string.indexOf("需要检测的字符"),如果返回值为-1,则说明当前字符串中不存在这个字符,返回值不为-1,则 是当前字符 ...
随机推荐
- mysql Unknown error 1054
mysql查询错误 Unknown error 1054 错误原因:字段名字不对应 解决方案:一一比对字段名称,令实体字段名称与数据库字段对应或者与你的sql语句中的别名对应起来
- ASP.NET MVC 学习笔记-7.自定义配置信息(后续)
自定义配置信息的高级应用 通过上篇博文对简单的自定义配置信息的学习,使得更加灵活的控制系统配置信息.实际项目中,这种配置的灵活度往往无法满足项目的灵活度和扩展性. 比如,一个配置信息有三部分组成,而每 ...
- [android] 插入一条记录到系统短信应用里
谷歌市场上有这些应用,模拟短信,原理就是把数据插入到短信应用的数据库里 获取ContentResolver对象,通过getContentResolver()方法 调用resolver对象的insert ...
- 8. 同步锁Lock
package com.gf.demo07; import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.Ree ...
- ListView子项点击无反应的解决办法
在使用ListView控件的过程中,当子项包括Button或者CheckBoX等控件时,直接点击子项无反应,分析发现原来是Button,CheckBoX等控件会优先获取焦点,那么子项点击的焦点就被上述 ...
- C# 任务 数据加载不影响其他操作
private void button1_Click(object sender, EventArgs e) { //this.timer1.Enabled = true; Task t1 = new ...
- 洛谷P2860 [USACO06JAN]冗余路径Redundant Paths(tarjan求边双联通分量)
题目描述 In order to get from one of the F (1 <= F <= 5,000) grazing fields (which are numbered 1. ...
- css 样式表的书写顺序
display || visibility list-style : list-style-type || list-style-position || list-style-image positi ...
- JMeter 监听器之保存响应到文件
监听器之保存响应到文件 by:授客 QQ:1033553122 测试环境 apache-jmeter-2.13 1. 保存结果到响应文件 说明: 文件名称前缀:设置响应文件所在路径(路径必须已存在 ...
- C# 利用SharpPcap实现网络包捕获嗅探
本文是利用SharpPcap实现网络包的捕获的小例子,实现了端口监控,数据包捕获等功能,主要用于学习分享. 什么是SharpPcap? SharpPcap 是一个.NET 环境下的网络包捕获框架,基于 ...