Comments (14)
@xwHoward 所提到的深拷贝方法会忽略undefined和function,所以需要采用文章的方法再次封装 - -
from cc.
推荐看我的这篇文章:JSON
from cc.
使用JSON.stringify()和JSON.parse()做对象的深拷贝:
var data = {
a: 'abc',
c: {
x: {
foo: 'xxx',
bar: 'yyy'
},
y: 'yyy'
}
};
var copy = JSON.stringify(data);
var copyObj = JSON.parse(copy);
from cc.
@xwHoward 这种深拷贝方式有什么副作用吗
from cc.
直接用扩展运算符
from cc.
@sakuyakun 副作用就是文中提到的undefined和function会忽略咯,还有就是不支持JSON的浏览器就用不了
from cc.
比较有意思
from cc.
@lulusir 还有如果字符串中含有'\n',JSON.parse解析是会报错的
from cc.
@honpery @sakuyakun @lulusir @xxyj 确实这种方法有一定局限性,但在对数据结构明了、性能要求比较高(相比用递归进行对象复制)的时候可以用这种方式快速进行对象深拷贝,算是一种trick啦
from cc.
很好
from cc.
赞 可以的
from cc.
@xwHoward 按我的了解,该方法复制对象的性能比直接使用传统方式复制对象更慢。
https://jsperf.com/deep-copy-vs-json-stringify-json-parse/10
确实这种方法有一定局限性,但在对数据结构明了、性能要求比较高(相比用递归进行对象复制)的时候可以用这种方式快速进行对象深拷贝,算是一种trick啦
from cc.
@lulusir 瀏覽器支援不是問題了。
from cc.
var myMap = new Map();
myMap.set(0, 'zero');
var mySet = new Set();
mySet.add(1);
class test {
constructor(opt) {
this.opt = opt;
}
}
JSON.stringify({
String: 'string',
Boolean: true,
Number: 123,
NaN: NaN, // null,
Infinity: Infinity, // null
null: null, // null
undefined: undefined, // 没有 key
Array: [1, 2, 3],
Object: {
foo: 'bar',
},
Symbol: Symbol('foo'), // {}
Map: myMap, // {}
Set: mySet, // {}
Promise: new Promise(function(resolve, reject) {}), // {}
Proxy: new Proxy({}, {}), // {}
Class: test, // 没有 key
ClassA: new test(123), // { "opt": 123 },
Math: Math, // {}
// Buffer: new Buffer('123'), // nodeJs '{"Buffer":{"type":"Buffer","data":[49,50,51]}}'
Error: new Error('error'), // {}
Function: function() { // 没有 key
console.info('hi');
},
Date: new Date(), // "2017-08-01T13:52:48.628Z",
RegExp: /RegExp/, // {}
}, null, 2);
/*
"{
"String": "string",
"Boolean": true,
"Number": 123,
"NaN": null,
"Infinity": null,
"null": null,
"Array": [
1,
2,
3
],
"Object": {
"foo": "bar"
},
"Map": {},
"Set": {},
"Promise": {},
"Proxy": {},
"ClassA": {
"opt": 123
},
"Math": {},
"Error": {},
"Date": "2017-08-01T14:04:58.522Z",
"RegExp": {}
}"
*/
from cc.
Related Issues (20)
- 48.帮学弟做题--WebSocket和Vue的五子棋 HOT 29
- 50.Material Design 风格的 Vue.js UI 组件库 beta 版本发布
- 49.理解 Vue.js 的计算属性 HOT 1
- 51.Vue.js 组件库 Rubik UI 开发心得总结 HOT 6
- 52.2016-这一年的总结和随想 HOT 3
- 53.图解 Flexbox HOT 6
- 54.Vue.js 项目使用 Karma 做自动化UI测试小结 HOT 9
- 55.[函数式编程] 不用循环的 JavaScript HOT 6
- 56.图解 Flexbox 2 - 深入理解 HOT 10
- flex HOT 1
- 57.在 Vue 中使用全局共享的方式管理状态
- 58.ES2015 Proxy 实用代码示例&详解
- 59.适用于 vue.js 和原生 js 的渐进式图片加载 HOT 25
- 60.[半夜改bug] mongoose 的 createConnection 和 connect HOT 2
- 61.async/await 小技巧 HOT 4
- 62.Vue.js Little Tips HOT 6
- 63.CSS 伪类选择器
- 65.从 Vue.js 自定义输入框深入理解 v-model HOT 4
- ccc HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cc.