js中循环怎么取集合对象属性

在JavaScript中，循环取集合对象属性的方法有for…in、for…of、Object.keys()、Object.values()、Object.entries()等。 其中，for…in 和 Object.keys() 是最常用的方式。下面详细描述一种常用方法：

使用for…in循环：

for…in循环用于遍历对象的可枚举属性。使用for…in循环可以简单地获取集合对象的属性，并且可以在循环体内对其进行操作。下面是详细的解释和示例：

const obj = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};
for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(`Key: ${key}, Value: ${obj[key]}`);
    }
}

在这个示例中，for…in循环遍历了对象obj的所有可枚举属性，并使用obj.hasOwnProperty(key)来确保属性是对象自身的属性，而不是继承的属性。这样可以确保代码的安全性和准确性。

一、使用for…in循环

for…in循环是遍历对象属性的常用方法。它不仅简单易用，而且可以确保代码的可读性和可维护性。

基本用法

for…in循环的基本用法如下：

const obj = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};
for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(`Key: ${key}, Value: ${obj[key]}`);
    }
}

避免原型链污染

在使用for…in循环时，必须注意避免原型链污染。使用obj.hasOwnProperty(key)可以有效地避免这种情况。例如：

const obj = Object.create({
    inheritedKey: 'inheritedValue'
});
obj.ownKey = 'ownValue';
for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(`Key: ${key}, Value: ${obj[key]}`);
    }
}

在这个示例中，inheritedKey是从原型链继承而来的属性，而ownKey是对象自身的属性。使用obj.hasOwnProperty(key)可以确保只遍历对象自身的属性。

二、使用Object.keys()方法

Object.keys()方法返回一个数组，其中包含对象自身的所有可枚举属性。这个方法可以与for…of循环结合使用，以遍历对象的属性。

基本用法

Object.keys()方法的基本用法如下：

const obj = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};
const keys = Object.keys(obj);
for (let key of keys) {
    console.log(`Key: ${key}, Value: ${obj[key]}`);
}

在这个示例中，Object.keys(obj)返回一个包含对象所有可枚举属性的数组。for…of循环遍历这个数组，并输出每个属性的键和值。

与其他方法结合使用

Object.keys()方法可以与其他数组方法结合使用，以实现更复杂的操作。例如，可以使用Array.prototype.map()方法来创建一个新的数组，其中包含对象属性的键和值：

const obj = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};
const keyValuePairs = Object.keys(obj).map(key => {
    return { key: key, value: obj[key] };
});
console.log(keyValuePairs);

在这个示例中，Object.keys(obj)返回一个包含对象所有可枚举属性的数组。Array.prototype.map()方法遍历这个数组，并为每个属性创建一个包含键和值的新对象。最终结果是一个包含所有属性键值对的数组。

三、使用Object.values()方法

Object.values()方法返回一个数组，其中包含对象自身的所有可枚举属性的值。这个方法可以与for…of循环结合使用，以遍历对象的属性值。

基本用法

Object.values()方法的基本用法如下：

const obj = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};
const values = Object.values(obj);
for (let value of values) {
    console.log(`Value: ${value}`);
}

在这个示例中，Object.values(obj)返回一个包含对象所有可枚举属性值的数组。for…of循环遍历这个数组，并输出每个属性的值。

与其他方法结合使用

Object.values()方法可以与其他数组方法结合使用，以实现更复杂的操作。例如，可以使用Array.prototype.filter()方法来创建一个新的数组，其中仅包含满足特定条件的属性值：

const obj = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};
const values = Object.values(obj);
const filteredValues = values.filter(value => typeof value === 'string');
console.log(filteredValues);

在这个示例中，Object.values(obj)返回一个包含对象所有可枚举属性值的数组。Array.prototype.filter()方法遍历这个数组，并筛选出所有值为字符串的属性值。最终结果是一个仅包含字符串属性值的数组。

四、使用Object.entries()方法

Object.entries()方法返回一个数组，其中包含对象自身的所有可枚举属性的键值对。这个方法可以与for…of循环结合使用，以遍历对象的属性键值对。

基本用法

Object.entries()方法的基本用法如下：

const obj = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};
const entries = Object.entries(obj);
for (let [key, value] of entries) {
    console.log(`Key: ${key}, Value: ${value}`);
}

在这个示例中，Object.entries(obj)返回一个包含对象所有可枚举属性键值对的数组。for…of循环遍历这个数组，并输出每个属性的键和值。

与其他方法结合使用

Object.entries()方法可以与其他数组方法结合使用，以实现更复杂的操作。例如，可以使用Array.prototype.reduce()方法来计算对象属性值的总和：

const obj = {
    a: 1,
    b: 2,
    c: 3
};
const entries = Object.entries(obj);
const sum = entries.reduce((acc, [key, value]) => acc + value, 0);
console.log(`Sum: ${sum}`);

在这个示例中，Object.entries(obj)返回一个包含对象所有可枚举属性键值对的数组。Array.prototype.reduce()方法遍历这个数组，并计算所有属性值的总和。最终结果是所有属性值的总和。

五、使用forEach()方法

forEach()方法是Array.prototype的一个方法，用于遍历数组。可以将Object.keys()、Object.values()或Object.entries()方法的结果传递给forEach()方法，以遍历对象的属性。

基本用法

forEach()方法的基本用法如下：

const obj = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};
Object.keys(obj).forEach(key => {
    console.log(`Key: ${key}, Value: ${obj[key]}`);
});

在这个示例中，Object.keys(obj)返回一个包含对象所有可枚举属性的数组。forEach()方法遍历这个数组，并输出每个属性的键和值。

与其他方法结合使用

forEach()方法可以与其他数组方法结合使用，以实现更复杂的操作。例如，可以使用Array.prototype.map()方法来创建一个新的数组，然后使用forEach()方法遍历这个数组：

const obj = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};
const keyValuePairs = Object.keys(obj).map(key => {
    return { key: key, value: obj[key] };
});
keyValuePairs.forEach(pair => {
    console.log(`Key: ${pair.key}, Value: ${pair.value}`);
});

在这个示例中，Object.keys(obj)返回一个包含对象所有可枚举属性的数组。Array.prototype.map()方法遍历这个数组，并为每个属性创建一个包含键和值的新对象。forEach()方法遍历这个新数组，并输出每个键值对。

六、使用for…of循环

for…of循环用于遍历可迭代对象（如数组、字符串、Set和Map）。虽然for…of循环不能直接用于对象，但可以与Object.keys()、Object.values()或Object.entries()方法结合使用，以遍历对象的属性。

基本用法

for…of循环的基本用法如下：

const obj = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};
const keys = Object.keys(obj);
for (let key of keys) {
    console.log(`Key: ${key}, Value: ${obj[key]}`);
}

在这个示例中，Object.keys(obj)返回一个包含对象所有可枚举属性的数组。for…of循环遍历这个数组，并输出每个属性的键和值。

与其他方法结合使用

for…of循环可以与其他数组方法结合使用，以实现更复杂的操作。例如，可以使用Array.prototype.filter()方法来筛选出符合特定条件的属性，然后使用for…of循环遍历这些属性：

const obj = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};
const keys = Object.keys(obj);
const filteredKeys = keys.filter(key => typeof obj[key] === 'string');
for (let key of filteredKeys) {
    console.log(`Key: ${key}, Value: ${obj[key]}`);
}

在这个示例中，Object.keys(obj)返回一个包含对象所有可枚举属性的数组。Array.prototype.filter()方法筛选出所有值为字符串的属性键。for…of循环遍历这些属性，并输出每个属性的键和值。

七、使用Map对象

Map对象是ES6中引入的一种新的数据结构，允许使用任意类型的值作为键。Map对象提供了一些内置方法，可以方便地遍历键和值。

基本用法

使用Map对象的基本用法如下：

const map = new Map([
    ['name', 'Alice'],
    ['age', 25],
    ['city', 'New York']
]);
for (let [key, value] of map) {
    console.log(`Key: ${key}, Value: ${value}`);
}

在这个示例中，Map对象存储了一组键值对。for…of循环遍历Map对象，并输出每个键值对。

与其他方法结合使用

Map对象提供了一些内置方法，如forEach()、keys()、values()和entries()，可以用于遍历键和值。例如，可以使用forEach()方法遍历Map对象：

const map = new Map([
    ['name', 'Alice'],
    ['age', 25],
    ['city', 'New York']
]);
map.forEach((value, key) => {
    console.log(`Key: ${key}, Value: ${value}`);
});

在这个示例中，forEach()方法遍历Map对象，并输出每个键值对。