作者：米书林
参考文章：《菜鸟教程》、《 ECMAScript 6 入门》（阮一峰）
1.属性的简洁表示法
简介：ES6允许对象的属性直接写变量，这时候属性名是变量名，属性值是变量值。
let name = "小明",
age = 12;
let student = {name,age};
console.log(student); // {name: "小明", age: 12}
// 相当于
let student = {name:name,age:age};
变量的值发生改变不会影响到对象，即上面修改age = 13,student.age仍然等于12
2.方法的简洁表示法
ES5中给对象定义方法，需要先定义一个函数，再把函数赋值给对象的属性；ES6可以把函数声明function去除，直接定义一个方法
let sex = "男"
let person = {
name:"小明",
age:12
}
let student = {
...person,
sex,
study(a){
return `你好，我是${this.name}，今年${this.age}岁，我正在学习${a}`
}
}
console.log(student); // {name: "小明", age: 12, sex: "男", study: ƒ}
student.study("语文") // "你好，我是小明，今年12岁，我正在学习语文"
// 等同于
let student = {
name:"小明",
age:12,
sex:"男",
study:function(a){
return "你好，我是"+this.name+"，今年"+this.age+"岁，我正在学习"+a;
}
}
如果是Generator 函数，则要在前面加一个星号
const obj = {
* myGenerator() {
yield 'hello world';
}
};
//等同于
const obj = {
myGenerator: function* () {
yield 'hello world';
}
};
用途
1.返回函数的结果
function f(x, y) {
return {x, y};
}
// 等同于
function f(x, y) {
return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}
2.CommonJS 模块输出一组变量
let ms = {};
function getItem (key) {
return key in ms ? ms[key] : null;
}
function setItem (key, value) {
ms[key] = value;
}
function clear () {
ms = {};
}
module.exports = { getItem, setItem, clear };
3.属性名表达器
js属性表达的方式
第一种:.
第二种:[""]
let obj = {name:"小明"};
obj.name; // "小明"
obj["name"] // 小明
属性名表达式
简介:ES6允许用表达式作为属性名，但是一定要将表达式放在方括号内
const obj = {
["he"+"llo"](){
return "Hi";
}
}
obj.hello(); //"Hi"
let lastWord = 'last word';
const a = {
'first word': 'hello',
[lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"
4.对象的拓展运算符
1.解构赋值
基本用法
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 ,c:5};
console.log(z); // a: 3, b: 4 ,c:5
注意事项：
1.等号右边是一个对象
let { ...a } = null; // 报错
let { ...a } = true; // {}
let { ...a } = undefined; // 报错
let { ...a } = NaN; // {}
let { ...a } = 1; // {}
let { ...a } = "12"; // {0: "1", 1: "2"}
2.解构赋值必须是最后一个参数，否则会报错。
let { ...x, y, z } = { a:0,x: 1, y: 2, z: 3}; // 句法错误 Rest element must be last element
let { x, ...y, ...z } = { a:0,x: 1, y: 2, z: 3}; // 句法错误 Rest element must be last element
3.解构赋值的拷贝是浅拷贝
let obj = {name:"张三",hobby:{h1:"篮球",h2:"排球"}}
let {...obj1} = obj;
obj.hobby.h1 = "乒乓球";
obj1;
// {name: "张三", hobby: {h1: "乒乓球", h2: "排球"}}
4.扩展运算符的解构赋值，不能复制继承自原型对象的属性
let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined
4.对象方法的name属性
函数的name属性，返回函数名。对象方法也是函数，因此也有name属性
let obj = {
name:"张三",
smoking(){
return `大家好,我是${this.name}，我不会抽烟`
}
}
obj.smoking.name // "smoking"
如果对象的方法使用了取值函数（getter）和存值函数（setter），则name属性不是在该方法上面，而是该方法的属性的描述对象的get和set属性上面，返回值是方法名前加上get和set。
const obj = {
get foo() {},
set foo(x) {}
};
obj.foo.name
// TypeError: Cannot read property 'name' of undefined
const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
descriptor.get.name // "get foo"
descriptor.set.name // "set foo"
有两种特殊情况：bind方法创造的函数，name属性返回bound加上原函数的名字；Function构造函数创造的函数，name属性返回anonymous。
(new Function()).name // "anonymous"
var doSomething = function() {
// ...
};
doSomething.bind().name // "bound doSomething"
如果对象的方法是一个 Symbol 值，那么name属性返回的是这个Symbol 值的描述。
const key1 = Symbol('description');
const key2 = Symbol();
let obj = {
[key1]() {},
[key2]() {},
};
obj[key1].name // "[description]"
obj[key2].name //
属性的遍历
（1）for...in
遍历对象自身的和继承的可枚举属性（不含 Symbol 属性)的key值
（2）Object.keys(obj)
遍历对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名，返回一个数组
（3）Object.getOwnPropertyNames(obj)
遍历对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名，返回一个数组
（4）Object.getOwnPropertySymbols(obj)
遍历对象自身的所有 Symbol 属性的键名，返回一个数组
（5）Reflect.ownKeys(obj)
遍历对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举，返回一个数组。
let sy = Symbol("h");
let obj = {name:"abc",[sy]:"dd",arr:[1,2,3],};
// for...in遍历
for(key in obj){
console.log(key);
}
// name
// arr
Object.keys(obj)
// ["name", "arr"]
Object.getOwnPropertyNames(obj)
// ["name", "arr"]
Object.getOwnPropertySymbols(obj)
// [Symbol(h)]
Reflect.ownKeys(obj)
// ["name", "arr", Symbol(h)]
对象的super关键字
this关键字指向函数所在的当前对象，super关键字指向当前对象的原型对象
const proto = {
foo: 'hello'
};
const obj = {
foo: 'world',
find() {
return super.foo;
}
};
Object.setPrototypeOf(obj, proto);
obj.find() // "hello"
super关键字表示原型对象时，只能用在对象的简写方法之中，用在其他地方都会报错。
// 报错
const obj = {
foo: super.foo
}
// 报错
const obj = {
foo: () => super.foo
}
// 报错
const obj = {
foo: function () {
return super.foo
}
}