使用JavaScript的一些小技巧--对象（转载）

使用...运算符合并对象或数组中的对象

同样使用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