其他---12es6...运算符

需要具备的知识点：

浅拷贝：是将原对象或者原数组的引用直接赋给新的对象，新对象是地址引用，改变新对象的属性会改变原对象的属性。

深拷贝：创建一个新的对象，新对象有独立的内存空间，是将原对象或者原数组的各属性的值赋给新对象，改变新对象的属性不会改变原对象的属性。

一.对象的...扩展运算符

1.对象的拷贝

会取出obj1里面所有可遍历属性，拷贝到obj2中。不会拷贝obj1原型上的属性。

注意：此处是将obj1中的属性进行浅拷贝。

let obj1 = {a:1,b:2,c:3,d:{value:4}};
let obj2 ={...obj1};
//{a:1,b:2,c:3,d:{value:4}}

修改代码如下：

let obj1 = { a: 1, b: 2, c: 3, d: { value: 4 } };
    let obj2 = { ...obj1 };
    obj2.c = 33;
    obj2.d = { value: 44 };
    console.log(obj1, obj2);
    //obj1=>{a:1,b:2,c:3,d:{value:4}} obj2=>{a:1,b:2,c:33,d:{value:44}}

obj2会拷贝obj1的c属性，c属性是简单数据类型，此处是值引用，改变obj2.c的值不会改变obj1.c的值。

obj1的d属性引用的是一个对象，即obj2的d属性是对象的引用，此处是地址引用，将该对象整体进行改变，即新增一个对象，此时在堆栈上动态开辟另外一块内存空间，即整体改变obj2的d属性时，obj2的d属性和obj1的d属性指向不同的地址，改变该对象的值会影响obj1的d的属性的值。

修改代码如下：

    let obj1 = { a: 1, b: 2, c: 3, d: { value: 4 } };
    let obj2 = { ...obj1 };
    obj2.d.value = 44;
    console.log(obj1, obj2);
    //obj1=>{a:1,b:2,c:3,d:{value:44}} obj2=>{a:1,b:2,c:3,d:{value:44}}

修改obj2.d.value会改变obj1.d.value的值。obj2拷贝obj1的d属性，即obj2的d属性引用的是一个对象，此处是地址引用，改变该对象的值会影响obj1的d的属性的值。

2.对象的合并：生成新的数组。如果obj2里面有obj1的属性，那么会覆盖obj1的属性。

    let obj1 = { a: 1, b: 2 };
    let obj2 = { b: 22, c: 3 };
    let obj3 = { ...obj1, ...obj2 };
    console.log(obj1, obj2, obj3);
    //obj1=>{a:1,b:2} obj2=>{b:22,c:3} obj3=>{a:1,b:22,c:3};

对象的合并方法还有：

方法一：var obj3 = $.extend(obj1,obj2); //会改变obj1的值

方法二：var obj3 = Object.extend(obj1,obj2);//会改变obj1的值

二.数组的...扩展运算符

1.数组的拷贝
注意:此处是对arr1中的值进行浅拷贝

let arr1 = [1,2];
let arr2 = [...arr1];
console.log(arr2);
//[1,2]

修改代码如下：

let arr1 = [1,2,{value:3}];
let arr2 = [...arr1];
arr2[0] = 3;
arr2[2] = {value:4};
console.log(arr1);
//[1,2,{value:3}]
console.log(arr2);
//[3,2,{value:4}]

arr1[0]是简单数据类型，所以是值引用，改变arr2[0]的值不会改变arr1[0]的值，arr1[2]是复杂数据类型，但是此时将一个新的对象{value:4}整体赋值给arr2[0]，那么此时会创建一个新的对象{value:4},并为这个对象开辟一块独立的内存空间，即整体改变arr2[2]的值不会改变arr1[2]的值，这与上面的对象的...拷贝是一样的道理。

修改代码如下：

let arr1 = [1,2,{value:3}];
let arr2 = [...arr1];
arr2[2].value = 4;
console.log(arr1);
//[1,2,{value:4}]
console.log(arr2);
//[1,2,{value:4}]

arr1[2]是复杂数据类型，那么此时arr2[2]是地址引用，即改变arr2[2]里面的value属性，会改变arr1[2]里面的value属性。

…和解构赋值一起使用，用于生成新的数组

const arr = [1,2,3,4,5]
const [first,...rest] = arr;
console.log(first);
console.log(rest);
console.log(arr);

注意：…和结构赋值用于赋值新的数组时，..只能用在末尾。

  三、ES6运用

3.2  字符串转换为数组

字符串的…,可将字符串转变为数组

var str = 'abcd';
console.log([...str]);
console.log(str);

3.2  对象结构

let details = {
    firstName:'Code',
    lastName:'Burst',
    age:22
}
const {firstName,age} = details;

console.log(firstName); // Code
console.log(age);       // 22

3.3  数组结构

let list = [221,'Baker Street','London'];
let [houseNo,street] = list;

console.log(houseNo,street);// 221 , Baker Street

3.3  数组默认值

let list = [221,'Baker Street'];
let [houseNo,street,city = 'BJ'] = list;

console.log(houseNo,street,city);// 221 , Baker Street , BJ

3.4  对象指定值

const person = {
  name: 'jsPool',
  country: 'China',
  sexual:undefined
};

let {age = 20,sexual:sex = 'male'} = person;
console.log(age); // 20
console.log(sex); // male

3.5  对象合并

const summary = {...person, ...tools, ...attributes};

console.log(summary);

   四、ES6运用

4.1  for...in遍历对象

obj: {
      　name: "tom",
        age: 18,
        hobby: "看电影",
    },

init() {
      for (let k in this.obj) {
        console.log("k:" + k);
        console.log("value:" + this.obj[k]);
      }
   },

效果：