使用
...
运算符合并对象或数组中的对象
同样使用ES6的...
运算符可以替代人工操作,合并对象或者合并数组中的对象。
// 合并对象
const obj1 = {
name: '大漠',
url: 'w3cplus.com'
}
const obj2 = {
name: 'airen',
age: 30
}
const mergingObj = {...obj1, ...obj2}
> Result: {name: "airen", url: "w3cplus.com", age: 30}
// 合并数组中的对象
const array = [
{
name: '大漠',
email: 'w3cplus@gmail.com'
},
{
name: 'Airen',
email: 'airen@gmail.com'
}
]
const result = array.reduce((accumulator, item) => {
return {
...accumulator,
[item.name]: item.email
}
}, {})
> Result: {大漠: "w3cplus@gmail.com", Airen: "airen@gmail.com"}
有条件的添加对象属性
不再需要根据一个条件创建两个不同的对象,以使它具有特定的属性。为此,使用...操作符是最简单的。
const getUser = (emailIncluded) => {
return {
name: '大漠',
blog: 'w3cplus',
...emailIncluded && {email: 'w3cplus@hotmail.com'}
}
}
const user = getUser(true)
console.log(user)
> Result: {name: "大漠", blog: "w3cplus", email: "w3cplus@hotmail.com"}
const userWithoutEmail = getUser(false)
console.log(userWithoutEmail)
> Result: {name: "大漠", blog: "w3cplus"}
解构原始数据
你可以在使用数据的时候,把所有数据都放在一个对象中。同时想在这个数据对象中获取自己想要的数据。在这里可以使用ES6的Destructuring特性来实现。比如你想把下面这个obj中的数据分成两个部分:
const obj = {
name: '大漠',
blog: 'w3cplus',
email: 'w3cplus@hotmail.com',
joined: '2019-06-19',
followers: 45
}
let user = {}, userDetails = {}
({name: user.name, email: user.email, ...userDetails} = obj)
> {name: "大漠", blog: "w3cplus", email: "w3cplus@hotmail.com", joined: "2019-06-19", followers: 45}
console.log(user)
> Result: {name: "大漠", email: "w3cplus@hotmail.com"}
console.log(userDetails)
> Result: {blog: "w3cplus", joined: "2019-06-19", followers: 45}
动态更改对象的key
在过去,我们首先必须声明一个对象,然后在需要动态属性名的情况下分配一个属性。在以前,这是不可能以声明的方式实现的。不过在ES6中,我们可以实现:
const dynamicKey = 'email'
let obj = {
name: '大漠',
blog: 'w3cplus',
[dynamicKey]: 'w3cplus@hotmail.com'
}
console.log(obj)
> Result: {name: "大漠", blog: "w3cplus", email: "w3cplus@hotmail.com"}
判断对象的数据类型
使用Object.prototype.toString
配合闭包来实现对象数据类型的判断:
const isType = type => target => `[object ${type}]` === Object.prototype.toString.call(target)
const isArray = isType('Array')([1, 2, 3])
console.log(isArray)
> Result: true
上面的代码相当于:
function isType(type){
return function (target) {
return `[object ${type}]` === Object.prototype.toString.call(target)
}
}
isType('Array')([1,2,3])
> Result: true
或者:
const isType = type => target => `[object ${type}]` === Object.prototype.toString.call(target)
const isString = isType('String')
const res = isString(('1'))
console.log(res)
> Result: true
检查某对象是否有某属性
当你需要检查某属性是否存在于一个对象,你可能会这样做:
var obj = {
name: '大漠'
};
if (obj.name) {
console.log(true) // > Result: true
}
这是可以的,但是你需要知道有两种原生方法可以解决此类问题。in
操作符 和 Object.hasOwnProperty
,任何继承自Object
的对象都可以使用这两种方法。
var obj = {
name: '大漠'
};
obj.hasOwnProperty('name'); // > true
'name' in obj; // > true
obj.hasOwnProperty('valueOf'); // > false, valueOf 继承自原型链
'valueOf' in obj; // > true
两者检查属性的深度不同,换言之hasOwnProperty
只在本身有此属性时返回true
,而in
操作符不区分属性来自于本身或继承自原型链。
这是另一个例子:
var myFunc = function() {
this.name = '大漠';
};
myFunc.prototype.age = '10 days';
var user = new myFunc();
user.hasOwnProperty('name');
> Result: true
user.hasOwnProperty('age');
> Result: false, 因为age来自于原型链
创造一个纯对象
使用Object.create(null)
可以创建一个纯对象,它不会从Object
类继承任何方法(例如:构造函数、toString()
等):
const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined
原文: https://www.w3cplus.com/javascript/javascript-tips.html © w3cplus.com