ES6对象的扩展

  • ES6对象的扩展已关闭评论
  • 144 次浏览
  • A+
所属分类:Web前端

对象中可以直接写变量

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);