es6 对象的扩展分享
最近一直不知道该写什么分享给大家，看见同事问我es6的一些问题，于是总结了这篇文章。如有不对之处还请指正。
es6 对象的扩展分享
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}
例如：
let birth = '2000/01/01';
const Person = {
name: '前端攻城小牛'，
// 等同于 birth: birth
birth,
// 等同于hello: function()...
hello() {console.log('我的名字'，this.name);}
};
例如：用于函数的返回值
function getPoint() {
const x = 1;
const y = 10;
return {x,y};
}
console.log(getPoint());
// {x:1,y:10}
2.属性名表达式
表达式作为对象的属性名
let obj = {
[propKey]: true,
['a' + 'bc']:123
};
console.log(obj[propKey]); // true
console.log(obj['abc']); // 123
例如：
let lastWord = 'last word';
const a = {
‘first word’: 'hello',
[lastWord]: 'world'
}
console.log(a['first word']); // "hello"
console.log(a[lastWord]); // "world"
console.log(a['last word']); // "world"
例如： 表达式可以用于定义方法名
let obj = {
['h'+'ello']() {
return 'hi';
}
};
console.log(obj.hello()); // 'hi'
3.方法的 name 属性
例如：函数的name 属性，返回函数名。
const person = {
sayName() {
console.log('hello');
}
}
console.log(person.sayName.name); // "sayName"
4.Object.is()
ES 比较两个值是否相等，只有两个运算符，相等运算符，相等运算符(==)
和严格相等运算符（===）
+0 === -0 // true
NaN === NaN // false
Object.is(+0,-0); // false
Object.is(NaN,NaN) // true
欢迎加入全栈开发交流群一起学习交流：864305860
5.Object.assign()
Object.assign 方法用于对象的合并，将源对象的所有的可枚举属性，赋值到目标对象
例如;
const target = {a:1};
const source1 = {b:2};
const source2 = {c:2};
Object.assign(target,source1,source2);
console.log(target); // {a:1,b:2,c:3}
例如：同名属性的替换，当遇到同名属性的时候，处理方法是替换。
const target = {a:{b:'c',d:'e'}}
const source = {a: {b:'hello'}}
console.log(Object.assign(target,source))
// {a: {b:'hello'}}
例如： 数组的处理
Object.assign 可以用来出来数组，把数组作为对象看
Object.assign([1,2,3],[4,5])
// [4,5,3]
常见用途(1) 为对象添加属性
class Point {
constructor(x,y){
Object.assign(this,{x,y});
}
}
常见用途(2) 为对象添加方法
Object.assign(SomeClass.prototype,{
someMethod(arg1,arg2){
.....
}
anotherMethod(){
...
}
})
常见用途(3) 克隆对象
function clone (origin) {
return Object.assign({},origin);
}
欢迎加入全栈开发交流群一起学习交流：864305860
6.属性的可枚举行和遍历
可枚举性
Object.getOwnProperDescriptor 方法可以获取该属性的描述对象
let obj = {foo:123};
Object.getOwnPropertyDescriptor(obj,'foo')
// {
value: 123,
writable: true,
enumerable: true,
configurable:true
}
描述对象的enumerable 属性，称为“可枚举属性” 如果该属性的值为false,
就表示会忽略当前属性。
目前有四个操作会忽略 enumerable 为false 属性。
for...in ， Object.keys(), JSON.stringify(), Object.assign();
ES6一共有5种方法可以遍历对象的属性
(1) for ... in
循环遍历对象自身的和继承的可枚举属性
(2) Object.keys(obj)
Object.keys 返回一个数组，包括对象自身的所有可枚举属性
(3) Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames 返回一个数组，包含对象自身的所有属性
(4) Object.getOwnPropetrySymbols(obj)
Object.getOwnPropetrySymbols 返回一个数组，包含对象自身的所有
Symbol属性的键名。
(5) Reflect.ownKeys(Obj)
Reflect.ownKeys 返回一个数组，包含对象自身的所有键名。
8.proto 属性
_proto_ 属性，用来读取和设置当前对象的protoype对象。
const obj = {
method: function(){
console.log(111)
}
}
obj._proto_= someOtherrObj;
Object.setPrototypeOf()
Object.setPrototypeOf 方法的作用与 _proto_ 相同，用来设置一个对象的prototype对象
返回参数对象本身，。
// 格式
Object.setPrototypeOf(object,prototype)
// 用法
const o = Object.setPrototypeOf({},null);
Object.getPrototypeOf()
该方法与Object.setPrototypeOf 方法配套，用于读取一个对象的原型对象。
Object.getPrototypeOf(obj);
9.super 关键字
this 关键字总是指向函数所在的当前对象，super 指向当前对象的原型对象。
const proto = {
foo: 'hello'
};
const obj = {
find(){
return super.foo;
}
}
Object.setPrototypeOf(obj,proto);
obj.find();
欢迎加入全栈开发交流群一起学习交流：864305860
10.Object.keys() ,Object.values(),Object.entries()
let {keys,values,entries} = Object;
let object = {a:1,b:2,c:3};
for (let key of keys(obj)){
console.log(key); // 'a','b','c'
}
for(let key of keys(obj)){
console.log(key);// 'a','b','c'
}
for(let value of values(obj)){
console.log(key); // 1,2,3
}
for (let [key,value] of entries(obj)){
console.log([key,value]); // ['a',1],['b',2],['c',3]
}
**11.对象的扩展运算****
对象的结构赋值用于从一个对象取值，相当于将所有可遍历的，但尚未对齐的属性，
分配到指定的对象上面，所有的键和值他们的值，都会拷贝到新对象上面。
let {x,y,...z} = {x:1,y:2,a:3,b:4};
x // 1
y // 2
z // {a:3,b:4}
扩展运算
扩展运算符(...) 用于取出参数对象的多有可遍历属性，拷贝到当前对象之中。
let z = {a:3,b:4};
let n = {...z};
n // {a:3,b:4}
合并两个对象
let ab = {...a,...b};
// 等同于
let ab = Object.assign({},a,b)
联系我
