带你了解es6对象新增扩展

es6对象新增扩展～

属性简写

const a = 1;
const b = { a }; // 属性简写
console.log(b); // {a: 1}

方法简写

const obj1 = {
	method: function() {
		console.log("function正常写法")
	}
}
const obj2 = {
	method() {
		console.log("function简写")
	}
}

函数返回值简写

function getPoint() {
	var x = 10;
	var y = 20;
	return {
		x,
		y
	}
}
console.log(getPoint()); // {x: 10, y: 20}

简写对象方法不能作为构造函数

const obj3 = {
	fn(){
		console.log("obj3")
	}
}
// new obj3.fn(); // Uncaught TypeError: obj3.fn is not a constructor，简写不能作为构造函数

定义对象时，属性名和方法可以使用表达式

const obj = {
	['h' + 'ello']() { // 方法名可以是表达式
		console.log('hello');
	}
};
const a1 = "hello";
const b1 = "world";
obj[a1 + b1] = "apple";  // 属性名可以是表达式
console.log(obj);  // {helloworld: "apple", hello: f(){}}

属性表达式与简洁写法不能同时使用

const a2 = "hello";
// const a3 = {[a2]} // 编译失败 Uncaught SyntaxError: Unexpected token '['

const key = { a: 1 };
const obj = {
	[key]: "world"
}
console.log(obj); // {[object Object]: 'world'}

super指向当前对象的原型对象

const proto = {
	a: "hello"
}
const obj = {
	a: "world",
	find(){
		return super.a;   // super指向当前对象的原型对象
	}
}
Object.setPrototypeOf(obj, proto);
console.log(obj.find());  // hello

扩展运算符应用 解构赋值（浅拷贝）

// let {x, y, ...z} = {x: 1, y: 2, a: 3, b: 4};
// console.log(x,y,z);   // 1 2 {a: 3, b: 4}
let obj = {
	a: {
		b: 1
	}
}
let { ...x } = obj;
obj.a.b = 2;
console.log(x);  // {a: { b: 2 }}, 浅复制（等同于Object.assign），引用类型指向的同一个地址

（对象）属性遍历

// for...in 循环遍历对象自身和继承的可枚举属性
var proto = {
	a: 1,
	b: 2,
	[Symbol("a")]: "hello"
}
var obj = {
	a: 3,
	c: 4,
	[Symbol("b")]: "world"
}
// 设置是否可枚举属性
Object.defineProperty(obj, "d", {
	value: "apple",
	enumerable: false
})

Object.setPrototypeOf(obj, proto); // 设置obj的原型对象proto
console.log(Object.getPrototypeOf(obj)); //获取obj的原型对象proto
for (const key in obj) {
	console.log(obj[key]);  // 3 4 2
}
console.log(Object.keys(obj));  // ['a', 'c'] 包括对象自身所有可枚举属性的键名，不包含继承的和Symbol属性
console.log(Object.getOwnPropertyNames(obj));  // ['a', 'c', 'd'] 包括对象自身所有属性（也包括不可枚举属性）的键名，不包含Symbol属性
console.log(Object.getOwnPropertySymbols(obj));  // [Symbol(b)] 包含对象自身的所有Symbol属性的键名
console.log(Reflect.ownKeys(obj)); // ['a', 'c', 'd', Symbol(b)]  包含对象自身的所有属性的键名，不包含继承的，类似Object.getOwnPropertyNames + Symbol的并集
console.log(Object.getOwnPropertyDescriptor(obj));
// {
//   "a": {
//     "value": 3,
//     "writable": true,
//     "enumerable": true,
//     "configurable": true
//   },
//   "d": {
//     "value": "apple",
//     "writable": false,
//     "enumerable": false,
//     "configurable": false
//   }
// }

对象新增的方法

// Object.is  判断两个值是否相等，类似全等===，区别在于+0和-0，和NaN对比
console.log(+0 === -0);   // true
console.log(Object.is(+0, -0));   // false
console.log(NaN === NaN);  // false
console.log(Object.is(NaN, NaN)); // true

// Object.assign(target, source1,source2,...) 合并对象(浅拷贝)
const target = {a: 1};
const source = {b: 2};
Object.assign(target, source);
console.log(target);  // {a: 1, b: 2}

返回自身所有可遍历属性的键名/键值/键值对的数组

var obj = {
	a: 1,
	b: 2
}
console.log(Object.keys(obj));  // ['a','b'] 返回自身所有可遍历属性的键名的数组
console.log(Object.values(obj));  // [1,2] 返回自身所有可遍历属性的键对应值的数组
console.log(Object.entries(obj)); // [['a', 1], ['b', 2]] 返回自身所有可遍历属性的键值对的数组

var arr = [['a', 1], ['b', 2]];
console.log(Object.fromEntries(arr)); // {a: 1, b: 2} 将键值对数组转换为对象

JavaScript Object