对象中可以直接写变量ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。constfoo='bar';constobj={foo};//key值就是foo,value值是foo变量对应的值//输出的是{foo:"bar"}console.log(obj)对象中可以直接写函数-省略了fu
对象中可以直接写变量
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。
const foo = 'bar' ;
const obj = {foo};
console .log (obj)
对象中可以直接写函数-省略了function 声明
const obj = {
method ( ) {
return "Hello!" ;
}
};
const obj = {
method : function ( ) {
return "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
Object .getOwnPropertyDescriptor ([], 'length' ).enumerable
上面代码中,toString和length属性的enumerable都是false 。
因此for ...in 不会遍历到这两个继承自原型的属性
另外,ES6 规定,所有 Class 的原型的方法都是不可枚举的。
Object .getOwnPropertyDescriptor (class {foo ( ) {}}.prototype , 'foo' ).enumerable
属性的遍历
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
y
z
对象的解构赋值的-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
o3.a
解构赋值的拷贝是浅拷贝
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 )
console .log ('newObj.code' , newObj.code )
newObj.request .readyState =2
console .log ('oldObj.request.readyState' , oldObj.request .readyState )
console .log ('newObj.request.readyState' , newObj.request .readyState )
说明了是浅拷贝
扩展运算符扩展函数的参数
函数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 ;
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);