html5 json&深克隆

134 阅读1分钟
<!--字符串-->
var str = '' 
<!--对象-->
var p = {
  name: 'xw',
  weight: '123kg'
}
// 前后端数据交互的类型 json 是一个字符串
var person = '{name: "xw", weight: "123kg"}'
// JSON.parse 字符串转对象
// JSON.stringify 对象转字符串
var p1 = JSON.stringify(p)

console.log(p); 
//打印的内容为:
<!--{name: "xw", weight: "123kg"}-->
<!--name: "xw"-->
<!--weight: "123kg"-->
<!--__proto__: Object-->

console.log(p1);
//打印的内容为:
<!--{"name":"xw","weight":"123kg"}-->

var p2 = JSON.parse(p1);
console.log(p2);
//打印的内容为:
<!--{name: "xw", weight: "123kg"}-->
<!--name: "xw"-->
<!--weight: "123kg"-->
<!--__proto__: Object-->

浅拷贝/浅克隆 对象A赋值给对象B 修改对象A的内容 对象B也会修改

深拷贝/深克隆 对象A赋值给对象B 修改对象A的内容 对象B不会改变

JSON.stringify() JSON.parse()

deepClone()

// 深克隆
    function deepClone(obj){
      // 判断obj的类型 分别声明数组或对象
      var objClone = Array.isArray(obj) ? [] : {};
      if(obj && typeof obj==="object"){
        for(key in obj){
          //判断obj子元素是否为对象,如果是,递归复制
          if(obj[key] && typeof obj[key] === "object"){
            objClone[key] = deepClone(obj[key]);
          }else{
            //如果不是,简单复制
            objClone[key] = obj[key];
          }
        }
      } else {
        // 非数组或对象 直接赋值返回
        objClone = obj;
      }
      return objClone;
    }