关于es6:ES6对象的扩展

咱们晓得对象是由键值对组成的，在 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 属性。

示例：

获取 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() ]

对象的每一个属性都有一个形容对象，用来管制该属性的行为。

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}

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 办法用来比拟两个值是否严格相等，相似于 ===，返回一个布尔值，相等则返回 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() 用于将源对象的所有可枚举属性复制到指标对象中。第一个参数是指标对象，前面的参数都是源对象。

示例：

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/

关于es6:ES6对象的扩展

属性的简洁表示法

示例：

办法名简写

属性名表达式

示例：

函数的 name 属性

示例：

示例：

对象的拓展运算符

复制对象

示例：

合并对象

示例：

自定义属性

示例：

示例：

示例：

示例：

对象属性的遍历

示例：

示例：

示例：

示例：

示例：

可枚举性（enumerable）

示例：

super 关键字

示例：

解构赋值

示例：

对象新增办法

Object.is 办法

示例：

object.assign 办法

示例：

Just My Socks（注册教程内含优惠码）

关于es6:ES6对象的扩展

属性的简洁表示法

示例：

办法名简写

属性名表达式

示例：

函数的 name 属性

示例：

示例：

对象的拓展运算符

复制对象

示例：

合并对象

示例：

自定义属性

示例：

示例：

示例：

示例：

对象属性的遍历

示例：

示例：

示例：

示例：

示例：

可枚举性（enumerable）

示例：

super 关键字

示例：

解构赋值

示例：

对象新增办法

Object.is 办法

示例：

object.assign 办法

示例：

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）