关于对象 的扩展运算符

灿灿 VIP1 2018/02/07

来自：厦门-中国

• 

  謓dêシ累了 VIP1 2018/02/07 第1楼

  来自：北京-中国
  对象拷贝方法：

  方法一： Object.assign()
  // 对象浅拷贝， 复制所有可枚举属性
  const obj1 = {a: 1};
  const obj2 = {b: 2};
  // copy obj1 and obj2 to a new obj;
  Object.assign({}, obj1, obj2)

  方法二 ：Res参数
  //等同于方法一， 属于对象浅拷贝
  const obj1 = {a: 1, b: 2};
  // obj2 equal obj1
  const obj2 = {...obj1};

  方法三
  //在对象的拷贝方法中比较困扰的就是深层拷贝，此方法为深层拷贝；
  function deepCopy (data) {
    return JSON.parse(JSON.stringify(data));
  }

  希望上面的能帮助你
  回复
• 

  灿灿 VIP1 2018/02/07 第2楼

  来自：北京-中国
  看图
  
  回复
• 

  灿灿 VIP1 2018/02/07 第3楼

  来自：北京-中国
  @謓dêシ累了 看图
  
  回复
• 

  灿灿 VIP1 2018/02/07 第4楼

  来自：北京-中国
  我想说的就是这个
  回复
• 

  謓dêシ累了 VIP1 2018/02/07 第5楼

  来自：北京-中国
  @灿灿 你说的是es6 的 扩展运算符的应用
  回复
• 

  謓dêシ累了 VIP1 2018/02/07 第6楼

  来自：北京-中国
  扩展运算符的应用
  
  1.合并数组

  // ES5  
  [1, 2].concat(more)  
  // ES6  
  [1, 2, ...more]  
  var arr1 = ['a', 'b'];  
  var arr2 = ['c'];  
  var arr3 = ['d', 'e'];  
  // ES5 的合并数组  
  arr1.concat(arr2, arr3);  
  // [ 'a', 'b', 'c', 'd', 'e' ]  
  // ES6 的合并数组  
  [...arr1, ...arr2, ...arr3]  
  // [ 'a', 'b', 'c', 'd', 'e' ]  

  2.与解构赋值结合
  
  扩展运算符可以与解构赋值结合起来，用于生成数组。

  // ES5  
  
  
  a = list[0], rest = list.slice(1)  
  // ES6  
  [a, ...rest] = list  
  下面是另外一些例子。  
  const [first, ...rest] = [1, 2, 3, 4, 5];  
  first // 1  
  rest // [2, 3, 4, 5]  
  const [first, ...rest] = [];  
  first // undefined  
  rest // []:  
  const [first, ...rest] = ["foo"];  
  first // "foo"  
  rest // []  

  如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

  const [...butLast, last] = [1, 2, 3, 4, 5];  
  //  报错  
  const [first, ...middle, last] = [1, 2, 3, 4, 5];  
  //  报错  

  3.函数的返回值
  
  JavaScript 的函数只能返回一个值，如果需要返回多个值，只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

  var dateFields = readDateFields(database);  
  var d = new Date(...dateFields);  

  4. 字符串
  
  扩展运算符还可以将字符串转为真正的数组。

  [...'hello']  
  // [ "h", "e", "l", "l", "o" ]  

  5.实现了 Iterator 接口的对象

  var nodeList = document.querySelectorAll('div');  
  var array = [...nodeList];  

  let arrayLike = {  
  '0': 'a',  
  '1': 'b',  
  '2': 'c',  
  length: 3  
  };  
  // TypeError: Cannot spread non-iterable object.  
  let arr = [...arrayLike];  

  6.Map 和 Set 结构， Generator 函数

  let map = new Map([  
  [1, 'one'],  
  [2, 'two'],  
  [3, 'three'],  
  ]);  
  let arr = [...map.keys()]; // [1, 2, 3]  

  var go = function*(){  
  yield 1;  
  yield 2;  
  yield 3;  
  };  
  [...go()] // [1, 2, 3]  

  var obj = {a: 1, b: 2};  
  let arr = [...obj]; // TypeError: Cannot spread non-iterable object  

  回复
• 

  六神 2019/04/12 第7楼

  来自：北京-中国
  @謓dêシ累了 真的要笑死我了 答非所问 人家问的是eslint不支持扩展你回答的都是啥玩意
  回复