浅拷贝和深拷贝 JSON.parse和JSON.stringify

最新推荐文章于 2023-11-19 15:08:35 发布
最新推荐文章于 2023-11-19 15:08:35 发布
阅读量6.2k 收藏 23
点赞数 4
分类专栏： 前端环境 文章标签： 浅拷贝和深拷贝 JSON.parse和JSON.string

参考一

JSON.parse(JSON.stringify(obj))我们一般用来深拷贝，其过程说白了 就是利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输（例如 如果请求的Content-Type是 application/x-www-form-urlencoded，则前端这边需要使用qs.stringify(data)来序列化参数再传给后端，否则后端接受不到； ps: Content-Type 为 application/json;charset=UTF-8或者 multipart/form-data 则可以不需要 ）；我们在使用 JSON.parse(JSON.stringify(xxx))时应该注意一下几点：
1、如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；

      var test = {
        name: 'a',
        date: [new Date(1536627600000), new Date(1540047600000)],
      };

      let b;
      b = JSON.parse(JSON.stringify(test))

test 结果.png

b的结果

测试b和test类型

2、如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；

      const test = {
        name: 'a',
        date: new RegExp('\\w+'),
      };
      // debugger
      const copyed = JSON.parse(JSON.stringify(test));
      test.name = 'test'
      console.error('ddd', test, copyed)

image.png

3、如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；

      const test = {
        name: 'a',
        date: function hehe() {
          console.log('fff')
        },
      };
      // debugger
      const copyed = JSON.parse(JSON.stringify(test));
      test.name = 'test'
      console.error('ddd', test, copyed)

image.png

image.png

4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null

 

image.png

5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；

      function Person(name) {
        this.name = name;
        console.log(name)
      }

      const liai = new Person('liai');

      const test = {
        name: 'a',
        date: liai,
      };
      // debugger
      const copyed = JSON.parse(JSON.stringify(test));
      test.name = 'test'
      console.error('ddd', test, copyed)

image.png

6、如果对象中存在循环引用的情况也无法正确实现深拷贝；

以上，如果拷贝的对象不涉及上面讲的情况，可以使用JSON.parse(JSON.stringify(obj))实现深拷贝，但是涉及到上面的情况，可以考虑使用如下方法实现深拷贝：

 function  deepClone(data) {
      const type = this.judgeType(data);
      let obj;
      if (type === 'array') {
        obj = [];
      } else if (type === 'object') {
        obj = {};
      } else {
    // 不再具有下一层次
        return data;
      }
      if (type === 'array') {
        // eslint-disable-next-line
        for (let i = 0, len = data.length; i < len; i++) {
          obj.push(this.deepClone(data[i]));
        }
      } else if (type === 'object') {
        // 对原型上的方法也拷贝了....
        // eslint-disable-next-line
        for (const key in data) {
          obj[key] = this.deepClone(data[key]);
        }
      }
      return obj;
    },


function  judgeType(obj) {
  // tostring会返回对应不同的标签的构造函数
      const toString = Object.prototype.toString;
      const map = {
        '[object Boolean]': 'boolean',
        '[object Number]': 'number',
        '[object String]': 'string',
        '[object Function]': 'function',
        '[object Array]': 'array',
        '[object Date]': 'date',
        '[object RegExp]': 'regExp',
        '[object Undefined]': 'undefined',
        '[object Null]': 'null',
        '[object Object]': 'object',
      };
      if (obj instanceof Element) {
        return 'element';
      }
      return map[toString.call(obj)];
    },


参考二

浅拷贝与深拷贝

  • 针对对象

深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的，String,Number等简单类型不存在深拷贝。

  • 浅拷贝

因为浅拷贝只会将对象的各个属性进行依次复制，并不会进行递归复制。在JavaScript中，对于Object和Array这类引用类型值，当从一个变量向另一个变量复制引用类型值时，这个值的副本其实是一个指针，两个变量指向同一个堆对象，改变其中一个变量，另一个也会受到影响。所以浅拷贝会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址，当修改obj.arr的值时，shallowObj.arr的值同样会被修改，大概的示意图如下：

  • 深拷贝

而深拷贝则不同，它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。当修改obj.arr的值时，shallowObj.arr的值不会被修改，仍然为原值，如下图：

JSON.parse()和JSON.stringfy()

  • JSON.parse()就是将JSON字符串解析成字符串描述的JavaScript值或对象，例如：
JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null
  • JSON.stringfy()是JSON.parse()的反义，就是将一个JavaScript值(对象或者数组)转换为一个JSON字符串，例如：
JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'

JSON.parse()官方解释
JSON.stringfy()官方解释

深拷贝方法——JSON.parse(JSON.stringfy())

  • 用法

JOSN对象中的stringify可以把一个js对象序列化为一个JSON字符串，parse可以把JSON字符串反序列化为一个js对象，通过这两个方法，也可以实现对象的深复制。

function jsonClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
var clone = jsonClone({ a:1 });
  • 弊端

用法简单，然而使用这种方法会有一些隐藏的坑：因为在序列化JavaScript对象时，所有函数和原型成员会被有意忽略。
通俗点说，JSON.parse(JSON.stringfy(X))，其中X只能是Number, String, Boolean, Array, 扁平对象，即那些能够被 JSON 直接表示的数据结构。



参考三

  1. JSON.stringify(), 将value(Object,Array,String,Number...)序列化为JSON字符串
  2. JSON.parse(),　将JSON数据解析为js原生值
  3. toJSON(), 作为JSON.stringify中第二个参数(函数过滤器)补充

支持 IE8+,FF3.5+,safari4+,opera10.5+,chrome

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

/*

 * ===================ECMAscript5 全局对象JSON=====================

 * Json:只是一种轻量级的数据格式。使用js syntax的子集表示对象、数组、字符串、数值、布尔值、和null

 * Note:ECMAScript5 定义了一个原生的JSON对象，

        用来将对象序列化为JSON字符串(JSON.stringify())，

        或者将JSON数据解析为js对象(JSON.parse())。

 * support: IE8+,FF3.5+,safari4+,opera10.5+,chrome

 * IE6,7 : https://github.com/douglascrockford/JSON-js

*/

 

/*

 * JSON.stringify()

 * @specify : serialization(序列化)

 * @method : JSON.stringify(value,filter,indent);

 * @return : JSON字符串

 

 * @param : value {type : String|Object|String|Number|Boolean|null} {explain : 传入的类型可以是列出的這些}

 * @param : filter : {type : []|{}} {explain : 过滤器可以是个数组，也可以是个函数}

 * @param : indent : {type : Number | 特殊符号} {explain : 如果是数字则代表空白符的个数，最多10个;也可以直接传入缩进的符号}

*/

var gather = {

    id : 1314,

    name : 'pom',

    infor : {

        age : 20,

        sex : 'man',

        marry : false,

        identity : 622421,

        habit : ['篮球','台球','乒乓球','游戏',true]

    },

    family : ['妈妈','爸爸','弟弟'],

    likeGames : ['PCgame','Netgame']

 

};

var jsonText = JSON.stringify(gather,null,4);

 

//第二个参数是数组，只会序列化返回数组里列出的名称

var jsonText1 = JSON.stringify(gather,['id','family'],'=');

 

var jsonText2 = JSON.stringify(gather,function(key,val){

    switch(key){

        case 'id' :

            return 'id is ' + val;

        case 'family' :

            return val.join('@');

        case 'infor' :

            //infor的val 还可以使用JSON.stringify()

            //return JSON.stringify(val,["age","sex"]);

            return Object.prototype.toString.call(val).slice(8, -1);

        case 'likeGames' :

            //通过返回undefined删除该属性

            return undefined;

        //一定要default,以便传入的其他值能正常的返回到序列化结果中。

        default :

            return val;

    }

},10);

// console.log(jsonText);

// console.log(jsonText1);

// console.log(jsonText2)

 

/*

 * toJSON()

 * @specify : JSON.stringify()不能满足对某些对象进行自定义序列化的需求，可以通过对象那个上调用toJSON()方法

 * @method : date.toJSON()

 * @return : 返回任何序列化的值。

 *

 * JSON.parse() ,eval() 也可以解析 并返回js对象和数组等。但IE8以下浏览器会有安全隐患。

 * @specify : 将json字符串解析为原生的javascript值。

 * @method : JSON.parse(val,replacer)

 

 * @param : val{type : String} {explain : 需要解析的json字符串}

 * @param : replacer {type : function}

                     {explain : 和JSON.stringify()第二个参数类似，接受2个参数，key,val,不过是用来还原json串的函数}

 

*/

var products = {

    name : "leading",

    "time" : new Date(2012,03,1),

    toJSON : function(){

        //只返回name

        return this.name;

    }

}

var proStr = JSON.stringify(products);

console.log(proStr);

 

//obj中的relaeseDate对象序列化之后成了有效的json串

var obj = {

    title : '对象的标题',

    type : 'primitive' ,

    releaseDate : new Date(2012,03,1)

};

//转化为json串

var o = JSON.stringify(obj);

console.log(o);

 

//在parsedO中还原为一个Date对象(会基于相应的值创建一个新的Date对象，结果parsedO.releaseDate属性中保存了一个Date对象)

var parsedO = JSON.parse(o,function(k,v){

    if(k == 'releaseDate'){

        return new Date(v);

    }else{

        return v;

    }

});

console.log(parsedO);

//可以调用getFullYear()

console.log(parsedO.releaseDate.getFullYear()); //2012

 执行原理：

    /*
     * toJSON() 作为JSON.stringify中第二个参数(函数过滤器)补充，理解内部顺序很重要。
     * 假设把一个对象传入JSON.stringify() 序列化对象的顺序如下：
     * 
     * (1) 如果存在toJSON()方法而且能通过它取得有效的值，则调用该方法。否则，按默认顺序执行序列化
     * (2) 如果提供了第二个参数，应用这个函数过滤器，传入的函数过滤器的值是第(1)步返回的值。
     * (3) 对第(2)步 返回的每个值进行相应的序列化。
     * (4) 如果提供了第三个参数，执行相应的格式化操作。
    */

参考四

1、javaScript的变量类型

（1）基本类型：
5种基本数据类型Undefined、Null、Boolean、Number 和 String，变量是直接按值存放的，存放在栈内存中的简单数据段，可以直接访问。

（2）引用类型：
存放在堆内存中的对象，变量保存的是一个指针，这个指针指向另一个位置。当需要访问引用类型（如对象，数组等）的值时，首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需的数据。

JavaScript存储对象都是存地址的，所以浅拷贝会导致 obj1 和obj2 指向同一块内存地址。改变了其中一方的内容，都是在原来的内存上做修改会导致拷贝对象和源对象都发生改变，而深拷贝是开辟一块新的内存地址，将原对象的各个属性逐个复制进去。对拷贝对象和源对象各自的操作互不影响。

例如：数组拷贝

//浅拷贝，双向改变,指向同一片内存空间
var arr1 = [1, 2, 3];
var arr2 = arr1;
arr1[0] = 'change';
console.log('shallow copy: ' + arr1 + " );   //shallow copy: change,2,3
console.log('shallow copy: ' + arr2 + " );   //shallow copy: change,2,3

2、浅拷贝的实现

2.1、简单的引用复制###

function shallowClone(copyObj) {
  var obj = {};
  for ( var i in copyObj) {
    obj[i] = copyObj[i];
  }
  return obj;
}
var x = {
  a: 1,
  b: { f: { g: 1 } },
  c: [ 1, 2, 3 ]
};
var y = shallowClone(x);
console.log(y.b.f === x.b.f);     // true

2.2、Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

var x = {
  a: 1,
  b: { f: { g: 1 } },
  c: [ 1, 2, 3 ]
};
var y = Object.assign({}, x);
console.log(y.b.f === x.b.f);     // true

3、深拷贝的实现

3.1、Array的slice和concat方法

Array的slice和concat方法不修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。之所以把它放在深拷贝里，是因为它看起来像是深拷贝。而实际上它是浅拷贝。原数组的元素会按照下述规则拷贝：

  • 如果该元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。
  • 对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

如果向两个数组任一中添加了新元素，则另一个不会受到影响。例子如下：

var array = [1,2,3]; 
var array_shallow = array; 
var array_concat = array.concat(); 
var array_slice = array.slice(0); 
console.log(array === array_shallow); //true 
console.log(array === array_slice); //false，“看起来”像深拷贝
console.log(array === array_concat); //false，“看起来”像深拷贝

可以看出，concat和slice返回的不同的数组实例，这与直接的引用复制是不同的。而从另一个例子可以看出Array的concat和slice并不是真正的深复制，数组中的对象元素(Object,Array等)只是复制了引用。如下：

var array = [1, [1,2,3], {name:"array"}]; 
var array_concat = array.concat();
var array_slice = array.slice(0);
array_concat[1][0] = 5;  //改变array_concat中数组元素的值 
console.log(array[1]); //[5,2,3] 
console.log(array_slice[1]); //[5,2,3] 
array_slice[2].name = "array_slice"; //改变array_slice中对象元素的值 
console.log(array[2].name); //array_slice
console.log(array_concat[2].name); //array_slice

3.2、JSON对象的parse和stringify

JSON对象是ES5中引入的新的类型（支持的浏览器为IE8+），JSON对象parse方法可以将JSON字符串反序列化成JS对象，stringify方法可以将JS对象序列化成JSON字符串，借助这两个方法，也可以实现对象的深拷贝。

//例1
var source = { name:"source", child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
target.name = "target";  //改变target的name属性
console.log(source.name); //source 
console.log(target.name); //target
target.child.name = "target child"; //改变target的child 
console.log(source.child.name); //child 
console.log(target.child.name); //target child
//例2
var source = { name:function(){console.log(1);}, child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined
//例3
var source = { name:function(){console.log(1);}, child:new RegExp("e") }
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined
console.log(target.child); //Object {}

这种方法使用较为简单，可以满足基本的深拷贝需求，而且能够处理JSON格式能表示的所有数据类型，但是对于正则表达式类型、函数类型等无法进行深拷贝(而且会直接丢失相应的值)。还有一点不好的地方是它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。同时如果对象中存在循环引用的情况也无法正确处理。

4、jQuery.extend()方法源码实现

jQuery的源码 - src/core.js #L121源码及分析如下：

jQuery.extend = jQuery.fn.extend = function() { //给jQuery对象和jQuery原型对象都添加了extend扩展方法
  var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {},
  i = 1,
  length = arguments.length,
  deep = false;
  //以上其中的变量：options是一个缓存变量，用来缓存arguments[i]，name是用来接收将要被扩展对象的key，src改变之前target对象上每个key对应的value。
  //copy传入对象上每个key对应的value，copyIsArray判定copy是否为一个数组，clone深拷贝中用来临时存对象或数组的src。

  // 处理深拷贝的情况
  if (typeof target === "boolean") {
    deep = target;
    target = arguments[1] || {};
    //跳过布尔值和目标 
    i++;
  }

  // 控制当target不是object或者function的情况
  if (typeof target !== "object" && !jQuery.isFunction(target)) {
    target = {};
  }

  // 当参数列表长度等于i的时候，扩展jQuery对象自身。
  if (length === i) {
    target = this; --i;
  }
  for (; i < length; i++) {
    if ((options = arguments[i]) != null) {
      // 扩展基础对象
      for (name in options) {
        src = target[name];	
        copy = options[name];

        // 防止永无止境的循环，这里举个例子，
            // 如 var a = {name : b};
            // var b = {name : a}
            // var c = $.extend(a, b);
            // console.log(c);
            // 如果没有这个判断变成可以无限展开的对象
            // 加上这句判断结果是 {name: undefined}
        if (target === copy) {
          continue;
        }
        if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
          if (copyIsArray) {
            copyIsArray = false;
            clone = src && jQuery.isArray(src) ? src: []; // 如果src存在且是数组的话就让clone副本等于src否则等于空数组。
          } else {
            clone = src && jQuery.isPlainObject(src) ? src: {}; // 如果src存在且是对象的话就让clone副本等于src否则等于空数组。
          }
          // 递归拷贝
          target[name] = jQuery.extend(deep, clone, copy);
        } else if (copy !== undefined) {
          target[name] = copy; // 若原对象存在name属性，则直接覆盖掉；若不存在，则创建新的属性。
        }
      }
    }
  }
  // 返回修改的对象
  return target;
};

jQuery的extend方法使用基本的递归思路实现了浅拷贝和深拷贝，但是这个方法也无法处理源对象内部循环引用，例如：

var a = {"name":"aaa"};
var b = {"name":"bbb"};
a.child = b;
b.parent = a;
$.extend(true,{},a);//直接报了栈溢出。Uncaught RangeError: Maximum call stack size exceeded

5、自己动手实现一个拷贝方法

(function ($) {
    'use strict';

    var types = 'Array Object String Date RegExp Function Boolean Number Null Undefined'.split(' ');

	function type () {
	   return Object.prototype.toString.call(this).slice(8, -1);
	}

	for (var i = types.length; i--;) {
	    $['is' + types[i]] = (function (self) {
	        return function (elem) {
	           return type.call(elem) === self;
	        };
	    })(types[i]);
	}

    return $;
})(window.$ || (window.$ = {}));//类型判断

function copy (obj,deep) { 
    if ($.isFunction(obj)) {
    	return new Function("return " + obj.toString())();
    } else if (obj === null || (typeof obj !== "object")) { 
        return obj; 
    } else {
        var name, target = $.isArray(obj) ? [] : {}, value; 

        for (name in obj) { 
            value = obj[name]; 

            if (target === obj) {
            	continue;
            }

            if (deep) {
                if ($.isArray(value) || $.isObject(value)) {
                    target[name] = copy(value,deep);
                } else if ($.isFunction(value)) {
                    target[name] = new Function("return " + value.toString())();
                } else {
            	    target[name] = value;
                } 
            } else {
            	target[name] = value;
            } 
        } 
        return target;
    }　        
}

在“自己动手实现一个拷贝方法”中，有一个小bug。
代码封装了$.isObject方法，注意该方法处理Array类型时是会返回false的。

在if语句中判断时会出现一点小问题：
if(obj === null || (!$.isObject(obj) && !$.isFunction(obj))){ return obj; } 
当obj传入Array类型时会直接返回obj本身。
建议修改为
if(obj === null || typeof obj !== 'object'){ return obj; }

function type() {
    return Object.prototype.toString.call(this).slice(8, -1);
  }

type.call(undefined);
// 结果为 "Window"， 所以 isUndefined 总是会返回false

浅拷贝是和深拷贝比较的，深拷贝可以理解为递归进行浅拷贝。
深拷贝为了解决对象中依旧含有对象，例如

let a = {
  name: 'LiHua',
  habits:  ['a', 'b']
}
  1. 普通的=赋值：b=a，b如果修改了b.name，那么a.name也会改变
  2. 浅拷贝，b，如果修改了b.name, a.name不会改变，但是修改b.habits数组中的值，a.habits的值也会改变
  3. 深拷贝，b的值改变，不会对a产生任何影响

整理代码如下：

function copy (obj,deep) { 
    if ($.isFunction(obj)) {
    	return new Function("return " + obj.toString())();
    } else if (obj === null || typeof obj !== "object"){
        return obj; 
    }else {
        var name, target = $.isArray(obj) ? [] : {}, value; 

        for (name in obj) { 
            value = obj[name]; 

            if (value === obj) {
            	continue;
            }

            if (deep) {
                if ($.isArray(value) || $.isObject(value)) {
                    target[name] = copy(value,deep);
                } else if ($.isFunction(value)) {
                    target[name] = new Function("return " + value.toString())();
                } else {
            	    target[name] = value;
                } 
            } else {
            	target[name] = value;
            } 
        } 
        return target;
    }　        
}
歪歪100
关注
  • 4
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈JSON.parse()和JSON.stringify()
10-23
本文给大家简单描述了下JSON.parse()和JSON.stringify()的异同点，十分的实用，有需要的小伙伴可以参考下
利用 JSON.parse, JSON.stringify 深度克隆json 对象
352328759的博客
12-15 1768
parse()用于从一个字符串中解析出json对象(字符转对象) 注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常 // 正确用法 JSON.parse('{"aa":11}') // 报错 JSON.parse('{aa:11}') stringify()用于从一个对象解析出字符串(对象转字符) 利用JSON.parse(JSON.stringify()) 可以深度克隆json 对象 var dataEdit = JSON.parse(JSON.stringify(data)) /
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷，5种手写深拷贝）
朝阳39的博客
08-12 622
*** 深拷贝* @param {Object} obj 要拷贝的对象*/// obj 是 null ，或者不是对象和数组，直接返回return obj// 初始化返回结果let result} else {// 保证 key 不是原型的属性// 递归调用！！！// 返回结果。
JSON.parse(JSON.stringify())实现深拷贝
m0_73490373的博客
04-26 2596
深拷贝就是完全拷贝一份新的对象，会在堆内存中开辟新的空间，拷贝的对象被修改后，被拷贝的原对象不会产生任何变化。主要针对的是引用数据类型.
深入理解 Javascript 之 JS的深浅拷贝 JSON.parse()和JSON.stringify()
马云
03-22 493
文章目录深浅拷贝一、基本类型 & 引用类型二、深拷贝 & 浅拷贝三、JSON.parse()和JSON.stringify() 深浅拷贝 一、基本类型 & 引用类型 1、ECMAScript中的数据类型可分为两种： 基本类型：undefined,null,Boolean,String,Number,Symbol 引用类型：Object,Array,Date,Function,RegExp等 2、不同类型的存储方式： 基本类型：基本类型值在内存中占据固定大小，保存在栈内存中 引用类
JSON.parse(JSON.stringify()) 实现对对象的深拷贝
程序员小明1024
08-31 1481
JSON.parse(JSON.stringify(obj))我们一般用来深拷贝，其过程说白了 就是利用JSON.stringify 将js对象序列化(JSON字符串)，再使用JSON.parse来反序列化(还原)js对象；序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输(例如 如果请求的Content-...
JSON.parse() && JSON.stringify()
Arr2022的博客
07-27 76
JSON.stringify()----------将对象转换为json字符串-----------起到对参数序列化的作用(如富文本数据)JSON.parse()-----------将字符串转换为对象------------json字符串的键值都必须使用双引号包起来。toString() 将数组转换为字符串 数字数组。ps: JSON.stringfy() 将数组转换为字符串 对象数组。1. 判断数组中是否包含对象/对象是否相等。3. 实现对象的深拷贝。
JSON.parse() 和 JSON.stringify()
weixin_63490373的博客
11-19 36
利用 JSON.parse() 和 JSON.stringify() ⽅法可以实现实现深拷贝，深拷贝是指创建⼀个新的对象，并复制原始对象的所有属性，包括嵌套的对象和数组。这意味着在原始对象或新对象。JSON.stringify()：将一个 JSON 对象并将其转换为字符串。但这种方法有⼀些限制，例如不能复制函数和特殊对象，则可以用递归来实现深拷贝。JSON.parse() ：将字符串作为输入并将其转换为对象。上的更改不会相互影响。
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
10-17
主要介绍了JavaScript -- JSON.parse 函数 和 JSON.stringify 函数,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
浅谈JSON.stringify()和JOSN.parse()方法的不同
10-21
parse 用于从一个字符串中解析出json 对象而stringify用于从一个对象解析出字符串，这篇文章主要介绍了JSON.stringify()和JOSN.parse()方法的不同,需要的朋友可以参考下
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
10-17
主要介绍了JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能,结合实例形式分析了JSON.parse()与JSON.stringify()方法实现深拷贝的相关实现技巧与操作注意事项,需要的朋友可以参考下
JSON.parse()和JSON.stringify()使用介绍
10-25
主要介绍了JSON.parse()和JSON.stringify()使用,需要的朋友可以参考下
详解关于JSON.parse()和JSON.stringify()的性能小测试
10-17
主要介绍了详解关于JSON.parse()和JSON.stringify()的性能小测试，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
node-v16.13.1-darwin-arm64.tar.xz
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
【前端素材】大数据-大数据可视化系统数据分析通用模版.zip
04-25
大数据技术指的是用于处理和分析大规模数据集的技术和工具。以下是一些常见的大数据技术和工具： Hadoop：Apache Hadoop是一个用于分布式存储和处理大规模数据的开源框架。它包括Hadoop Distributed File System（HDFS）用于数据存储和MapReduce用于数据处理。 Spark：Apache Spark是一个快速、通用的集群计算系统，提供了比MapReduce更快的数据处理能力。它支持内存计算和更多复杂的数据处理流程。 NoSQL数据库：NoSQL数据库（如MongoDB、Cassandra等）则更适用于处理这类数据。 数据仓库：数据仓库是一个用于集成和分析大规模数据的存储系统，一些知名的数据仓库包括Snowflake、Amazon Redshift等。 数据湖：数据湖是一个存储结构化和非结构化数据的存储池，用于支持数据分析和机器学习应用。 机器学习：大数据技术也广泛应用于机器学习领域，支持大规模数据的模型训练和预测分析。 流式处理：针对实时数据处理需求，流式处理技术（如Apache Kafka、Apache Flink）可以实时。
node-v8.3.0.tar.xz
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
云计算存储架构dr.pptx
04-25
云计算存储架构dr.pptx
【前端素材】大数据-兰州智慧消防大数据平台.zip
04-25
大数据技术指的是用于处理和分析大规模数据集的技术和工具。以下是一些常见的大数据技术和工具： Hadoop：Apache Hadoop是一个用于分布式存储和处理大规模数据的开源框架。它包括Hadoop Distributed File System（HDFS）用于数据存储和MapReduce用于数据处理。 Spark：Apache Spark是一个快速、通用的集群计算系统，提供了比MapReduce更快的数据处理能力。它支持内存计算和更多复杂的数据处理流程。 NoSQL数据库：NoSQL数据库（如MongoDB、Cassandra等）则更适用于处理这类数据。 数据仓库：数据仓库是一个用于集成和分析大规模数据的存储系统，一些知名的数据仓库包括Snowflake、Amazon Redshift等。 数据湖：数据湖是一个存储结构化和非结构化数据的存储池，用于支持数据分析和机器学习应用。 机器学习：大数据技术也广泛应用于机器学习领域，支持大规模数据的模型训练和预测分析。 流式处理：针对实时数据处理需求，流式处理技术（如Apache Kafka、Apache Flink）可以实时。
json.stringify和json.parse深拷贝缺点
02-25
JSON.stringify() 是将 JavaScript 对象转换为 JSON 字符串的方法，而 JSON.parse() 是将 JSON 字符串转换为 JavaScript 对象的方法。 深拷贝是指创建一个新的对象，将原始对象的所有属性和嵌套对象的属性都复制到新对象中。在使用 JSON.stringify() 和 JSON.parse() 进行深拷贝时，有以下几个缺点： 1. 无法处理循环引用：如果原始对象中存在循环引用（即对象之间相互引用），JSON.stringify() 会抛出错误，因为 JSON 格式不支持循环引用。同样地，JSON.parse() 也无法正确地处理循环引用。 2. 无法复制特殊对象属性：JSON.stringify() 和 JSON.parse() 只能处理普通的 JavaScript 对象，无法复制特殊对象属性，例如函数、正则表达式、Date 对象等。在转换过程中，这些特殊属性会被忽略或转换为其他类型。 3. 无法复制原型链上的属性：JSON.stringify() 和 JSON.parse() 只能复制对象自身的属性，无法复制原型链上的属性。这意味着在深拷贝后，新对象将不再具有与原始对象相同的原型链。 4. 性能较低：使用 JSON.stringify() 和 JSON.parse() 进行深拷贝需要将对象转换为字符串，然后再将字符串转换为对象，这个过程相对较慢，尤其是对于大型对象或嵌套层级较深的对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值