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

it2022-05-05 119

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

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

专利

最新回复(0)