es6展开运算符（ES6对象的扩展）

对象中可以直接写变量 ES6 允许在大括号里面    
    
    
    
，直接写入变量和函数    


     


     


     


，作为对象的属性和方法    
    
    
    
。 const foo = bar; const obj = {foo}; //key值就是foo




 




 




 




 ，value值是 foo变量对应的值 // 输出的是 {foo: "bar"} console.log(obj) 对象中可以直接写函数-省略了function 声明 const obj = { method() { return "Hello!"; } }; // 等价于下面的写法    


     


     


     


。 const obj = { method: function() { return "Hello!"; } }; //输出 Hello console.log(obj.method()) 属性名表达式 JavaScript 定义对象的属性   

   

   

   
，有两种方法




 




 




 




 。 // 方法一 let obj={} obj.foo = true; // 方法二 obj[a + bc] = 123; console.log(obj) 属性的可枚举性 对象的每个属性都有一个描述对象(Descriptor)用来控制该属性的行为   

   

   

   
。 Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象     

     

     

     

。 感觉这个方法在实际中很少使用




  




  




  




 。 let obj = { foo: 123 }; console.log(Object.getOwnPropertyDescriptor(obj, foo)) 输出的值： { configurable: true enumerable: true value: 123 //这个属性的值 writable: true //这个属性可以修好 } 其中描述对象的enumerable属性     

     

     

     

，称为“可枚举性    
    
    
    
”
  


  


  


  
。 如果该属性为false




  




  




  




 ，就表示某些操作会忽略当前属性     
     
     
     
。 目前,有四个操作会忽略 enumerable 为 false 的属性 




   




   




   




 。 目前,有四个操作会忽略enumerable为false的属性

 



 



 



 
。 for...in循环：只遍历对象自身的和继承的可枚举的属性                    。 es5 Object.keys()：返回对象自身的所有可枚举的属性的键名  




    




    




    




 。es5 JSON.stringify()：只串行化对象自身的可枚举的属性


















。 es5 Object.assign()： 忽略enumerable为false的属性
  


  


  


  
，只拷贝对象自身的可枚举的属性                    。可以进行浅拷贝   



     



     



     



 。 es6 其中     
     
     
     
，只有for...in会返回继承的属性 




   




   




   




 ，其他三个方法都会忽略继承的属性

 



 



 



 
，只处理对象自身的属性


















。 引入“可枚举    


     


     


     


”（enumerable）的目的 实际上                    ，引入“可枚举




 




 




 




 ”（enumerable）这个概念的最初目的:就是让某些属性可以规避掉for...in操作    
    
    
    
。 不然所有内部属性和方法都会被遍历到    


     


     


     


。这样影响性能




 




 




 




 。 比如  




    




    




    




 ，对象原型的toString方法


















，以及数组的length属性                    ，就通过“可枚举性   

   

   

   
”   



     



     



     



 ，从而避免被for...in遍历到   

   

   

   
。 Object.getOwnPropertyDescriptor(Object.prototype, toString).enumerable // false Object.getOwnPropertyDescriptor([], length).enumerable // false 上面代码中


















，toString和length属性的enumerable都是false     

     

     

     

。 因此for...in不会遍历到这两个继承自原型的属性 另外    
    
    
    
，ES6 规定    


     


     


     


，所有 Class 的原型的方法都是不可枚举的




  




  




  




 。 Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, foo).enumerable // false 属性的遍历 ES6 一共有 5 种方法可以遍历对象的属性
  


  


  


  
。 （1）for...in for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）     
     
     
     
。 （2）Object.keys(obj) Object.keys返回一个数组




 




 




 




 ，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名 




   




   




   




 。 （3）Object.getOwnPropertyNames(obj) Object.getOwnPropertyNames返回一个数组   

   

   

   
，包含对象自身的所有属性（不含 Symbol 属性     

     

     

     

，但是包括不可枚举属性）的键名

 



 



 



 
。 （4）Object.getOwnPropertySymbols(obj) Object.getOwnPropertySymbols返回一个数组




  




  




  




 ，包含对象自身的所有 Symbol 属性的键名                    。 （5）Reflect.ownKeys(obj) Reflect.ownKeys返回一个数组
  


  


  


  
，包含对象自身的（不含继承的）所有键名     
     
     
     
，不管键名是 Symbol 或字符串 




   




   




   




 ，也不管是否可枚举 对象的解构赋值 解构赋值:对象的解构赋值用于从一个对象中取值

 



 



 



 
， 相当于将目标对象自身的所有可遍历的（enumerable）    
    
    
    
、但尚未被读取的属性                    ，分配到指定的对象上面  




    




    




    




 。 所有的键和它们的值  




    




    




    




 ，都会拷贝到新对象上面


















。 let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 } 对象的解构赋值的-4个注意点 第一个： 由于解构赋值要求等号右边是一个对象


















，所以如果等号右边是undefined或null                    ，就会报错   



     



     



     



 ，因为它们无法转为对象                    。 let { ...z } = null; // 运行时错误 let { ...z } = undefined; // 运行时错误 let { ...a } = {}; //不会报错 console.log(a) //输出的是对象 {} 第二个： // 解构赋值必须是最后一个参数


















，否则会报错   



     



     



     



 。 let { ...x, y, z } = {name:张,age:12,num:1900, sex:男}; // 句法错误：因为不是最后一个值 console.log(x) //会报错 第三个： 注意    
    
    
    
，解构赋值的拷贝是浅拷贝


















。 即如果一个键的值是复合类型的值（数组    


     


     


     


、对象




 




 




 




 、函数）   

   

   

   
、 那么解构赋值拷贝的是这个值的引用    


     


     


     


，而不是这个值的副本    
    
    
    
。 下面特别说明：解构赋值的拷贝是浅拷贝 第四个： 扩展运算符的解构赋值




 




 




 




 ，不能复制继承自原型对象的属性    


     


     


     


。 let o1 = { a: 1 }; let o2 = { b: 2 }; o2.__proto__ = o1; let { ...o3 } = o2; o3 // { b: 2 } o3.a // undefined 解构赋值的拷贝是浅拷贝 Let oldObj={ code: 500, isAxiosError: true, request: { onreadystatechange: null, readyState: 4, timeout: 30000, withCredentials: false, upload: XMLHttpRequestUpload, }, response: undefined } //浅拷贝 let {...newObj } = oldObj // 更改了新对象的值   

   

   

   
， newObj.code=200 console.log(oldObj.code, oldObj.code) //输出 500 console.log(newObj.code, newObj.code) //输出 200 // 下面证明是浅拷贝 newObj.request.readyState=2 //更改新对象后     

     

     

     

，原始对象的值也跟着修改了




 




 




 




 。 console.log(oldObj.request.readyState, oldObj.request.readyState) //输出 2 console.log(newObj.request.readyState, newObj.request.readyState) //输出 2 说明了是浅拷贝 扩展运算符扩展函数的参数 函数wrapperFunction在baseFunction的基础上进行了扩展




  




  




  




 ， 能够接受多余的参数
  


  


  


  
，并且保留原始函数的行为   

   

   

   
。 这一种经常是用在封装一个方法     

     

     

     

。这个方法的参数是未知的




  




  




  




 。 这个时候就可以考虑使用扩展运算符 如下: function Aa(a,b,...obj){ console.log(a,a) console.log(b,b) // 竟然是一个数组 [{name: "詹桑", age: 10, sex: "男"}] console.log(obj,obj) } Aa(123,345,{name:詹桑, age:10, sex:男}) 扩展运算符--用于对象 对象的扩展运算符（...）用于取出对象的所有可遍历属性     
     
     
     
，拷贝到当前对象之中
  


  


  


  
。 let obj = { a: 3, b: 4 }; let newObj = { ...obj }; newObj // { a: 3, b: 4 } 扩展运算符--用于数组 由于数组是特殊的对象 




   




   




   




 ，所以对象的扩展运算符也可以用于数组     
     
     
     
。 let oldArrr = { ...[a, b, c] }; oldArrr // {0: "a", 1: "b", 2: "c"} 扩展运算符--用于类 对象的扩展运算符

 



 



 



 
，只会返回参数对象自身的     

     

     

     

、可枚举的属性                    ，这一点要特别小心 




   




   




   




 。 尤其是用于类的实例对象时

 



 



 



 
。 class C { p = 12; m() {} } let c = new C(); let clone = { ...c }; clone.p; // ok clone.m(); // 报错 c是C类的实例对象  




    




    




    




 ，对其进行扩展运算时


















，只会返回c自身的属性c.p                    。 而不会返回c的方法c.m()                    ，因为这个方法定义在C的原型对象上 对象的扩展运算符等同于使用 Object.assign()方法 let aClone = { ...a }; // 等同于 let aClone = Object.assign({}, a); 扩展运算符可以用于合并两个对象  




    




    




    




 。 let ab = { ...a, ...b }; // 等同于 let ab = Object.assign({}, a, b);