属性的简洁表示法
我们知道对象是由键值对组成的,在 ES6
中允许在对象的大括号内直接写入变量和函数,此时属性名是变量名,属性值是变量值。
示例:
例如我们定义两个变量 name
和 age
,将这两个变量赋值给对象 person
:
const name = "xkd";
const age = 3;
const person = {name: name,age: age}
console.log(person);
可以简写为:
const person = {name, age}; // 简写
然后我们输出 person
对象,输出内容如下所示:
{ name: 'xkd', age: 3 }
方法名简写
除了属性,方法也可以简写,例如我们看下面这段代码:
const content = {
show:function(){
console.log("你好,侠课岛!");
}
};
content.show(); // 输出:你好,侠课岛!
我们可以简写成:
const content = {
show() {
console.log("你好,侠课岛!");
}
};
content.show(); // 输出:你好,侠课岛!
这种写法用于函数的返回值,将会非常方便。
function show() {
const a = 10;
const b = 20;
return {a, b};
}
console.log(show()); // 输出:{ a: 10, b: 20 }
属性名表达式
ES6
允许用表达式作为属性名,但是要注意一定要将表达式放在方括号内。
示例:
例如下面这段代码:
const obj = {};
obj.obj = 123;
console.log(obj);
// 输出:{ abc: 123 }
上述代码中我们直接用标识符作为属性名,如果我们想要使用表达式作为属性名,则需要将表达式放在方括号之内,例如:
const obj = {};
obj['a' + 'bc'] = 123; // 等同于:obj[abc] = 123;
console.log(obj);
// 输出:{ abc: 123 }
其中 ['a' + 'bc']
就是一个表达式,作为 obj
对象的键值。
除了将表达式用作属性,表达式也可以用作函数名,同样使用中括号 []
包围,例如:
const obj = {
["sho"+"w"](){
console.log("你好,侠课岛!");
}
}
obj.show();
// 输出:你好,侠课岛!
函数的name属性
函数的 name
属性,可以用于返回函数的函数名,对象方法也是函数,因此也有 name
属性。
示例:
获取 xkd
对象中 show()
函数的函数名:
const xkd = {
show() {
console.log('你好,侠课岛!');
},
};
console.log(xkd.show.name); // 获取函数的函数名
// 输出:show
如果对象的方法使用了取值函数getter
和存值函数 setter
,则 name
属性不在这两个方法上面,而是该方法的属性的描述对象的 get
和 set
属性上面,返回值是方法名前加上 get
和 set
。
示例:
例如下面这个例子:
const xkd = {
get show() {},
set show(x) {}
};
const descriptor = Object.getOwnPropertyDescriptor(xkd, 'show');
console.log(descriptor.get.name); // 输出:get show
console.log(descriptor.set.name); // 输出:set show
对象的拓展运算符
对象的拓展运算符 ...
可以用于取出参数对象中所有可遍历属性,然后拷贝到当前对象之中。
复制对象
在 ES6
中我们可以通过扩展运算符来复制对象。
示例:
例如将对象 person
中的可遍历属性拷贝到对象 new_person
中:
let person = { name: 'xkd', hobby: 'swimming'};
let new_person = { ...person };
console.log(new_person);
// 输出:{ name: 'xkd', hobby: 'swimming' }
合并对象
对象的拓展运算符还可以用于合并对象。
示例:
例如我们合并对象 obj1
和 obj2
:
let obj = { a: 1, b: 2};
let obj1 = { a: 1, b: 2};
let obj2 = { c: 3, d: 4};
let obj3 = { ...obj1, ...obj2};
console.log(obj3);
// 输出:{ a: 1, b: 2, c: 3, d: 4 }
自定义属性
当自定义的属性和拓展运算符对象里面属性的相同的时候,有两种情况:
- 第一种,自定义的属性在拓展运算符后面,则拓展运算符对象内部同名的属性将被自定义属性覆盖。
示例:
let obj1 = {name: "xkd", age: 18};
let obj2 = { ...obj1, name: "summer", age: 20};
console.log(obj2);
// 输出:{ name: 'summer', age: 20 }
上述代码中,可以看到,obj2
对象中自定义的属性覆盖了扩展运算符对象中的属性。
- 第二种,自定义的属性在拓展运算符对象前面,则自定义属性被拓展运算符对象覆盖。
示例:
let obj1 = {name: "xkd", age: 18};
let obj2 = { name: "summer", age: 20, ...obj1};
console.log(obj2);
// 输出:{ name: 'xkd', age: 18 }
上述代码中,obj1
中的属性覆盖了 obj2
中的自定义属性。
如果扩展运算符后面是一个空对象,则没有任何效果也不会报错。
示例:
let obj = {...{}, name: 'xkd', age: 19};
console.log(obj);
// 输出:{ name: 'xkd', age: 19 }
如果扩展运算符后面不是对象,则会自动将其转为对象。
示例:
let obj = {...1, ...null, ...undefined, ...true};
console.log(obj); // {}
其中 ...1
就等同于 {...Object(1)}
, ...null
等同于 {...Object(null)}
、undefined
、true
也是如此。而由于这些对象没有自身属性,所以返回一个空对象。
对象属性的遍历
ES6
中一共提供了 5 种遍历对象属性的方法,我们来看一下。
-
for...in
:遍历对象自身的和继承的可枚举属性,不含Symbol
。
示例:
let obj = {one:100, two:200, three:300};
for ( n in obj) {
console.log(n);
}
输出内容如下所示:
one
two
three
-
Object.keys(obj)
:返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol)的键名。
示例:
let obj = {one:100, two:200, three:300};
console.log(Object.keys(obj));
// 输出:[ 'one', 'two', 'three' ]
-
Object.getOwnPropertyNames(obj)
:返回一个数组,包含对象自身的所有(不可枚举属性)属性(不含Symbol)的键名。
示例:
let obj = {one:100, two:200, three:300};
console.log(Object.getOwnPropertyNames(obj));
// 输出:[ 'one', 'two', 'three' ]
-
Object.getOwnPropertySymbols(obj)
:返回一个数组,对象自身的所有Symbol
属性的键名。
示例:
let obj = {one:100, two:200, three:300, [Symbol()]:400};
console.log(Object.getOwnPropertySymbols(obj));
// 输出:[ Symbol() ]
-
Reflect.ownKeys
:返回一个数组,包含对象自身的所有键名。
示例:
let obj = {one:100, two:200, three:300, [Symbol()]:400};
console.log(Reflect.ownKeys(obj));
// 输出:[ 'one', 'two', 'three', Symbol() ]
可枚举性(enumerable)
对象的每一个属性都有一个描述对象,用来控制该属性的行为。
Object.getOwnpropertyDescriptor
方法可以获取该属性的描述对象, 返回所有自身属性(非继承属性)的描述对象。
描述对象的 enumerable
属性,称为可枚举性,如果该属性为 false
,则表示某些操作会忽略当前属性。 下面是可能会忽略属性为 false
的四种操作情况:
-
for...in
:只遍历对象自身的和继承的可枚举的属性。 -
Object.keys()
:返回对象自身的所有可枚举的属性和键名。 -
JSON.stringify()
:只转换对象自身的可枚举的属性。 -
Object.assign()
:忽略 enumerable为false的属性,只拷贝对象自身的可枚举的属性。
示例:
对象可枚举属性合并,后面的属性会覆盖前面的属性,隐式转换。
let obj = { xkd: 123 };
console.log(Object.getOwnPropertyDescriptor(obj, 'xkd'));
// 输出:{ value: 123, writable: true, enumerable: true, configurable: true }
super关键字
this
关键字总是指向函数所在的当前对象,ES6
又新增了另一个类似的关键字 super
,指向当前对象的原型对象。
示例:
const proto = {
xkd: 'New'
};
const obj = {
xkd: 'version',
change() {
return super.xkd;
}
};
obj.__proto__ = proto;
console.log(obj.change()); // 输出:New
对象 obj
在 change
方法之中,通过 super.xkd
引用了原型对象 proto
的 xkd
属性。
解构赋值
解构不仅可以用于数组同时还可以用于对象,对象的解构和数组的不同之处在于:数组的元素是按次序排列的,变量的取值由它的位置决定,而对象的属性没有次序,变量必须与属性同名才能正确取值。
示例:
let { x, y, ...z } = {x: 1, y: 2, a: 100, b: 200, c:300};
console.log(x); // 输出:1
console.log(y); // 输出:2
console.log(z); // 输出:{ a: 100, b: 200, c: 300 }
对象新增方法
Object.is方法
Object.is
方法用来比较两个值是否严格相等,类似于 ===
,返回一个布尔值,相等则返回 true
,不相等则返回 false
。
示例:
console.log(Object.is("q","q")); // 输出:true
console.log(Object.is(1,1)); // 输出:true
console.log(Object.is([1],[1])); // 输出:false
console.log(Object.is({q:1},{q:1})); // 输出:false
object.assign方法
object.assign()
用于将源对象的所有可枚举属性复制到目标对象中。第一个参数是目标对象,后面的参数都是源对象。
示例:
let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = {c: 3};
Object.assign(obj1, obj2, obj3)
console.log(obj1);
// 输出:{ a: 1, b: 2, c: 3 }
如果目标对象和源对象有同名属性,或者多个源对象有同名属性,则后面的属性会覆盖前面的属性:
let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = {c: 3, a:100};
Object.assign(obj1, obj2, obj3)
console.log(obj1);
// 输出:{ a: 100, b: 2, c: 3 }
如果该函数只有一个参数,当参数为对象时,直接返回该对象。当参数不是对象时,会先将参数转为对象然后返回:
console.log(Object.assign(3)); // 输出:[Number: 3]
console.log(Object.assign({a:1})); // 输出:{ a: 1 }
链接:https://www.9xkd.com/