Js中简化Json数据赋值另一个Json （语言-javascript）

今日份小问题 简化Json赋值

我的需求就是想 将 一个json中的部分数据，传给另一个json

数据例如下 想要将 Json_two 中的 other_one ，other_two 等部分数据 赋值给 Json_one

 let Json_one = {
    attr_one : '1',
    attr_two : '2',
    attr_three : '3'
  }
  let Json_two = {
    other_one : '1',
    other_two : '2',
    other_three : '3',
    other_four : '4'
  }

第一种方式

我一开始使用的是最原始的方式，一个变量一个变量的赋值，数据少倒是还行，数据多了，就需要占用很多行

  Json_one.other_one = Json_two.other_one
  Json_one.other_two = Json_two.other_two
  Json_one.other_four = Json_two.other_four

第二种方式

其次，我想到的其他方式使用 Object.assign()方法来完成，但是感觉和第一种几乎差不多

  Object.assign(Json_one, {
    other_one : Json_two.other_one,
    other_two : Json_two.other_two,
    other_four : Json_two.other_four
  })
console.log(Json_one) /*{attr_one : '1',attr_two : '2',attr_three : '3',other_two : '2',other_four : '4'} */

第三种方式 （最简便）

当时有想到使用解构的方式去完成，但是我太菜了，不是很会，所以在 CSDN 中发了问答，我发的问答 链接: 关于Js中简化Json数据赋值另一个Json的问题！(语言-javascript)

  let Json_one = {
    attr_one : '1',
    attr_two : '2',
    attr_three : '3'
  }
  let Json_two = {
    other_one : '1',
    other_two : '2',
    other_three : '3',
    other_four : '4'
  }
  let {other_one, other_two} = Json_two;
  Json_one = {...Json_one, other_one, other_two};
  console.log(Json_one)   //{"attr_one":"1","attr_two":"2","attr_three":"3","other_one":"1","other_two":"2"}

我的新需求

当我使用 Json 传值时，我 需要解构时的值，但是 变量名想要更改 的时候可以如下操作
其中使用 other_name 代替了 other_two

  let {other_one, other_two} = Json_two;
  Json_one = {...Json_one, other_one, other_name : other_two};
  //{"attr_one":"1","attr_two":"2","attr_three":"3","other_one":"1","other_name":"2"}

---

使用的方法解析

Object.assign() ES6 中的新对象

用于将源对象的所有可枚举属性复制到目标对象中。

基本用法

  let target = {a: 1};
  let object2 = {b: 2};
  let object3 = {c: 3};
  Object.assign(target,object2,object3);  
  // 第一个参数是目标对象，后面的参数是源对象
  target;  // {a: 1, b: 2, c: 3

Object.assign() 会修改目标对象，同时还会返回目标对象

  let object4 = Object.assign(target,object2,object3);
  // 相当于 
  Object.assign(target,object2,object3);
  let object4 = target

如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的属性会覆盖前面的属性。

targetObj = { a: { b: 1, c:2}};
sourceObj = { a: { b: "hh"}};
Object.assign(targetObj, sourceObj); // suorceObje 中的 a 会覆盖 targetObj 中的 a
targetObj;  // {a: {b: "hh"}}

如果该函数只有一个参数，当参数为对象时，直接返回该对象；当参数不是对象时，会先将参数转为对象然后返回。

null 和 undefined 不能转化为对象，所以传null和undefined会报错

Object.assign(null);       // TypeError: Cannot convert undefined or null to 	object
Object.assign(undefined);  // TypeError: Cannot convert undefined or null to object

但是当传值不止一个时，null 和 undefined 不放在目标对象上，直接跳过，不报错

Object.assign(1,undefined);  // Number {1}

注意点

assign 的属性拷贝是浅拷贝 :（即目标对象的指针和源对象的指针指向的内存空间是同一块空间）

修改了源对象，目标对象的值，也会发生变化。如下： （修改targetObj，sourceObj也发生了变动）

let sourceObj = { a: { b: 1}};
let targetObj = {c: 3};
Object.assign(targetObj, sourceObj);
targetObj.a.b = 2;
sourceObj.a.b;  // 2

ES6 解构赋值

解构赋值是对赋值运算符的扩展。

• 解构的源，解构赋值表达式的右边部分。
• 解构的目标，解构赋值表达式的左边部分。

Array 解构

基本

let [a, b, c] = [1, 2, 3];    // a = 1  b = 2  c = 3

嵌套

let [a, [[b], c]] = [1, [[2], 3]];  // a = 1  b = 2  c = 3

可忽略

let [a, , b] = [1, 2, 3];  // a = 1  b = 3

不完全解构
其中 a = 1 为解构默认值，当解构匹配结果为undefined时的默认值，

let [a = 1, b] = [];   // a = 1, b = undefined

剩余运算符

let [a, ...b] = [1, 2, 3];  //a = 1  b = [2, 3]

对象模型的解构（Object）

基本

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa' , bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };  // 这里把解构出来的值赋值给 foo
// foo = 'ddd'

可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello' , y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined , y = 'world'

剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10 , b = 20
// rest = {c: 30, d: 40}

解构默认值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

---

链接:
【1】ES6 解构赋值 | 菜鸟教程.
【2】ES6 对象 | 菜鸟教程.