极客笔记JavaScript 将一个对象转成数组
在JavaScript中，我们经常会遇到需要将一个对象转换成数组的情况。这种情况可能是为了方便处理数据，或者是为了将对象中的键值对转换成数组中的元素。在本文中，我们将详细介绍如何将一个对象转成数组，并提供多个示例代码来演示不同情况下的转换方法。
方法一：使用Object.keys()和map()方法
我们可以使用Object.keys()方法获取对象的所有键，然后使用map()方法将每个键对应的值组成一个新的数组。下面是一个示例代码：
const obj = {
name: 'Alice',
age: 30,
website: 'deepinout.com'
};
const arr = Object.keys(obj).map(key => obj[key]);
console.log(arr);
Output:
在这个示例中，我们首先使用Object.keys(obj)获取对象obj的所有键，然后使用map()方法遍历每个键，并将对应的值添加到新的数组中。
方法二：使用Object.entries()和map()方法
另一种常见的方法是使用Object.entries()方法获取对象的键值对数组，然后使用map()方法将每个键值对转换成一个新的数组。下面是一个示例代码：
const obj = {
name: 'Bob',
age: 25,
website: 'deepinout.com'
};
const arr = Object.entries(obj).map(([key, value]) => value);
console.log(arr);
Output:
在这个示例中，我们首先使用Object.entries(obj)获取对象obj的键值对数组，然后使用map()方法遍历每个键值对，将值添加到新的数组中。
方法三：使用Object.values()方法
如果我们只关心对象的值而不是键，我们可以直接使用Object.values()方法获取对象的所有值。下面是一个示例代码：
const obj = {
name: 'Charlie',
age: 35,
website: 'deepinout.com'
};
const arr = Object.values(obj);
console.log(arr);
Output:
在这个示例中，我们直接使用Object.values(obj)获取对象obj的所有值，无需再进行额外的转换操作。
方法四：手动遍历对象
除了使用内置方法外，我们还可以手动遍历对象并将键值对转换成数组元素。下面是一个示例代码：
const obj = {
name: 'David',
age: 40,
website: 'deepinout.com'
};
const arr = [];
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
arr.push(obj[key]);
}
}
console.log(arr);
Output:
在这个示例中，我们使用for...in循环遍历对象obj的所有键，然后将对应的值添加到新的数组中。
方法五：使用Object.getOwnPropertyNames()方法
除了前面介绍的方法外，我们还可以使用Object.getOwnPropertyNames()方法获取对象的所有属性名，然后将每个属性名对应的值添加到新的数组中。下面是一个示例代码：
const obj = {
name: 'Eve',
age: 45,
website: 'deepinout.com'
};
const arr = Object.getOwnPropertyNames(obj).map(key => obj[key]);
console.log(arr);
Output:
在这个示例中，我们首先使用Object.getOwnPropertyNames(obj)获取对象obj的所有属性名，然后使用map()方法遍历每个属性名，并将对应的值添加到新的数组中。
方法六：使用Object.getOwnPropertySymbols()方法
如果对象中包含Symbol类型的属性，我们可以使用Object.getOwnPropertySymbols()方法获取对象的所有Symbol属性，然后将每个Symbol属性对应的值添加到新的数组中。下面是一个示例代码：
const sym = Symbol('website');
const obj = {
name: 'Frank',
age: 50,
[sym]: 'deepinout.com'
};
const arr = Object.getOwnPropertySymbols(obj).map(sym => obj[sym]);
console.log(arr);
Output:
在这个示例中，我们首先使用Object.getOwnPropertySymbols(obj)获取对象obj的所有Symbol属性，然后使用map()方法遍历每个Symbol属性，并将对应的值添加到新的数组中。
方法七：使用扩展运算符
除了上述方法外，我们还可以使用扩展运算符...将对象转换成数组。下面是一个示例代码：
const obj = {
name: 'Grace',
age: 55,
website: 'deepinout.com'
};
const arr = [...Object.values(obj)];
console.log(arr);
Output:
在这个示例中，我们首先使用Object.values(obj)获取对象obj的所有值，然后使用扩展运算符...将这些值添加到新的数组中。
方法八：使用Object.assign()方法
如果对象中包含多个属性，我们可以使用Object.assign()方法将这些属性合并成一个新的对象，然后再将新的对象转换成数组。下面是一个示例代码：
const obj1 = {
name: 'Henry',
age: 60
};
const obj2 = {
website: 'deepinout.com'
};
const newObj = Object.assign({}, obj1, obj2);
const arr = Object.values(newObj);
console.log(arr);
Output:
在这个示例中，我们首先使用Object.assign()方法将obj1和obj2合并成一个新的对象newObj，然后使用Object.values()方法将newObj的所有值转换成数组。
方法九：处理嵌套对象
如果对象中包含嵌套对象，我们可以使用递归的方式将所有值提取出来并转换成数组。下面是一个示例代码：
const obj = {
name: 'Ivy',
age: 65,
website: 'deepinout.com',
address: {
city: 'New York',
country: 'USA'
}
};
const flattenObject = (obj) => {
let result = [];
const flatten = (obj) => {
for (const key in obj) {
if (typeof obj[key] === 'object') {
flatten(obj[key]);
} else {
result.push(obj[key]);
}
}
};
flatten(obj);
return result;
};
const arr = flattenObject(obj);
console.log(arr);
Output:
在这个示例中，我们定义了一个flattenObject()函数，该函数使用递归的方式将对象obj中的所有值提取出来并转换成数组。
方法十：处理数组属性
除了嵌套对象外，对象中还可能包含数组属性。我们可以使用递归的方式将所有值提取出来并转换成数组。下面是一个示例代码：
const obj = {
name: 'Jack',
age: 70,
website: 'deepinout.com',
hobbies: ['reading', 'traveling', 'coding']
};
const flattenObject = (obj) => {
let result = [];
const flatten = (obj) => {
for (const key in obj) {
if (Array.isArray(obj[key])) {
result.push(...obj[key]);
} else if (typeof obj[key] === 'object') {
flatten(obj[key]);
} else {
result.push(obj[key]);
}
}
};
flatten(obj);
return result;
};
const arr = flattenObject(obj);
console.log(arr);
Output:
在这个示例中，我们同样定义了一个flattenObject()函数，该函数使用递归的方式将对象obj中的所有值提取出来并转换成数组。如果属性值是数组，则直接将数组元素添加到结果数组中。
方法十一：处理Symbol属性
如果对象中包含Symbol属性，我们可以使用Object.getOwnPropertySymbols()方法获取所有Symbol属性，并将对应的值添加到新的数组中。下面是一个示例代码：
const sym1 = Symbol('hobby1');
const sym2 = Symbol('hobby2');
const obj = {
name: 'Kate',
age: 75,
[sym1]: 'reading',
[sym2]: 'traveling'
};
const arr = Object.getOwnPropertySymbols(obj).map(sym => obj[sym]);
console.log(arr);
Output:
在这个示例中，我们使用Object.getOwnPropertySymbols(obj)获取对象obj的所有Symbol属性，然后使用map()方法遍历每个Symbol属性，并将对应的值添加到新的数组中。
方法十二：处理原型链属性
如果对象中包含原型链属性，我们可以使用Object.getOwnPropertyNames()方法获取对象的所有属性名，然后通过判断属性是否为对象自身的属性来将值添加到新的数组中。下面是一个示例代码：
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.website = 'deepinout.com';
const person = new Person('Lily', 80);
const arr = Object.getOwnPropertyNames(person).filter(key => person.hasOwnProperty(key)).map(key => person[key]);
console.log(arr);
Output:
在这个示例中，我们定义了一个Person构造函数，并将website属性添加到Person的原型链上。然后创建一个person对象，使用Object.getOwnPropertyNames()方法获取对象的所有属性名，并通过判断属性是否为对象自身的属性来将值添加到新的数组中。
方法十三：处理不可枚举属性
如果对象中包含不可枚举属性，我们可以使用Object.getOwnPropertyNames()方法获取对象的所有属性名，然后通过判断属性是否为可枚举属性来将值添加到新的数组中。下面是一个示例代码：
const obj = {
name: 'Mike',
age: 85,
website: 'deepinout.com'
};
Object.defineProperty(obj, 'email', {
value: 'mike@example.com',
enumerable: false
});
const arr = Object.getOwnPropertyNames(obj).filter(key => Object.getOwnPropertyDescriptor(obj, key).enumerable).map(key => obj[key]);
console.log(arr);
Output:
在这个示例中，我们使用Object.defineProperty()方法将email属性定义为不可枚举属性，然后使用Object.getOwnPropertyNames()方法获取对象的所有属性名，并通过判断属性是否为可枚举属性来将值添加到新的数组中。
方法十四：处理getter属性
如果对象中包含getter属性，我们可以使用Object.getOwnPropertyNames()方法获取对象的所有属性名，然后通过判断属性是否为数据属性来将值添加到新的数组中。下面是一个示例代码：
const obj = {
name: 'Nancy',
age: 90,
website: 'deepinout.com',
get email() {
return 'nancy@example.com';
}
};
const arr = Object.getOwnPropertyNames(obj).filter(key => Object.getOwnPropertyDescriptor(obj, key).get === undefined).map(key => obj[key]);
console.log(arr);
Output:
在这个示例中，我们定义了一个getter属性email，然后使用Object.getOwnPropertyNames()方法获取对象的所有属性名，并通过判断属性是否为数据属性来将值添加到新的数组中。
方法十五：处理setter属性
如果对象中包含setter属性，我们可以使用Object.getOwnPropertyNames()方法获取对象的所有属性名，然后通过判断属性是否为数据属性来将值添加到新的数组中。下面是一个示例代码：
const obj = {
name: 'Olivia',
age: 95,
website: 'deepinout.com',
set email(value) {
this._email = value;
}
};
const arr = Object.getOwnPropertyNames(obj).filter(key => Object.getOwnPropertyDescriptor(obj, key).set === undefined).map(key => obj[key]);
console.log(arr);
Output:
在这个示例中，我们定义了一个setter属性email，然后使用Object.getOwnPropertyNames()方法获取对象的所有属性名，并通过判断属性是否为数据属性来将值添加到新的数组中。
方法十六：处理不可写属性
如果对象中包含不可写属性，我们可以使用Object.getOwnPropertyNames()方法获取对象的所有属性名，然后通过判断属性是否为可写属性来将值添加到新的数组中。下面是一个示例代码：
const obj = {
name: 'Peter',
age: 100,
website: 'deepinout.com'
};
Object.defineProperty(obj, 'email', {
value: 'peter@example.com',
writable: false
});
const arr = Object.getOwnPropertyNames(obj).filter(key => Object.getOwnPropertyDescriptor(obj, key).writable).map(key => obj[key]);
console.log(arr);
Output:
在这个示例中，我们使用Object.defineProperty()方法将email属性定义为不可写属性，然后使用Object.getOwnPropertyNames()方法获取对象的所有属性名，并通过判断属性是否为可写属性来将值添加到新的数组中。
方法十七：处理不可配置属性
如果对象中包含不可配置属性，我们可以使用Object.getOwnPropertyNames()方法获取对象的所有属性名，然后通过判断属性是否为可配置属性来将值添加到新的数组中。下面是一个示例代码：
const obj = {
name: 'Rachel',
age: 105,
website: 'deepinout.com'
};
Object.defineProperty(obj, 'email', {
value: 'rachel@example.com',
configurable: false
});
const arr = Object.getOwnPropertyNames(obj).filter(key => Object.getOwnPropertyDescriptor(obj, key).configurable).map(key => obj[key]);
console.log(arr);
Output:
在这个示例中，我们使用Object.defineProperty()方法将email属性定义为不可配置属性，然后使用Object.getOwnPropertyNames()方法获取对象的所有属性名，并通过判断属性是否为可配置属性来将值添加到新的数组中。
方法十八：处理不可删除属性
如果对象中包含不可删除属性，我们可以使用Object.getOwnPropertyNames()方法获取对象的所有属性名，然后通过判断属性是否为可删除属性来将值添加到新的数组中。下面是一个示例代码：
const obj = {
name: 'Tom',
age: 110,
website: 'deepinout.com'
};
Object.defineProperty(obj, 'email', {
value: 'tom@example.com',
configurable: true,
writable: true,
enumerable: true
});
Object.defineProperty(obj, 'phone', {
value: '1234567890',
configurable: false,
writable: true,
enumerable: true
});
const arr = Object.getOwnPropertyNames(obj).filter(key => Object.getOwnPropertyDescriptor(obj, key).configurable).map(key => obj[key]);
console.log(arr);
Output:
在这个示例中，我们使用Object.defineProperty()方法将phone属性定义为不可配置属性，然后使用Object.getOwnPropertyNames()方法获取对象的所有属性名，并通过判断属性是否为可删除属性来将值添加到新的数组中。