在 es6 中迭代对象并返回新对象

Iterating objects in es6 and returning new object

本文关键字：对象 新对象 返回 es6 迭代      更新时间：2023-09-26

使用 es6 javascript 可以迭代一个对象并返回一个新对象。例如：

const people = {
    'Sally': {
        age: 22,
        sex: 'female',
    },
    'John': {
        age: 64,
        sex: 'male',
    },
    'Sam': {
        age: 12,
        sex: 'female',
    },      
};
const ages = people.someEs6IteratingObjectFunction((index, person) => {
    return { Object.keys(people)[index]: person.age };
});
console.log(ages); // { 'Sally': 22, 'John': 64, 'Sam': 12, }

您可以使用数组原型reduce方法。它也适用于 es5。

const people = {
    'Sally': {
        age: 22,
        sex: 'female',
    },
    'John': {
        age: 64,
        sex: 'male',
    },
    'Sam': {
        age: 12,
        sex: 'female',
    },      
};
let result = Object.keys(people).reduce(function(r, name) {
  return r[name] = people[name].age, r;
}, {});
document.write(['<pre>', JSON.stringify(result, 0, 3), '</pre>'].join(''));

如果您不太关心潜在性能，可以选择：

const ages = people.reduce(
    (obj, name) => Object.assign(obj, {[name]: obj[name].age}), {});

或者也许

const ages = Object.entries(people).reduce(
    (obj, [name, info]) => Object.assign(obj, {[name]: info.age}), {});

或者制作一个 ES6 Map而不是使用Object：

const ages = new Map(Object.entries(people).map(
    ([name, info]) => [name, info.age])))

这里有一种方法可以做到这一点，我希望我能为此邀功劳，它来自 Axel Rauschmayer 的博客，他还有其他几篇令人惊叹的博客文章： http://www.2ality.com/2015/02/es6-iteration.html

这是一个包含以下代码的 JSBin：

 function objectEntries(obj) {
        let index = 0;
        let propKeys = Reflect.ownKeys(obj);
        return {
            [Symbol.iterator]() {
                return this;
            },
            next() {
                if (index < propKeys.length) {
                    let key = propKeys[index];
                    index++;
                    return { value: [key, obj[key]] };
                } else {
                    return { done: true };
                }
            }
        };
    }
    let obj = { first: 'Jane', last: 'Doe' };
    for (let [key,value] of objectEntries(obj)) {
        console.log(`${key}: ${value}`);
    }

如果您使用生成器，这甚至更容易： http://www.2ality.com/2015/03/es6-generators.html

不幸的是，ES6 中的对象没有等效的Array.map。

也许你可以做一个帮助程序函数来模拟这一点。它将遍历您的对象，使用每个键的值调用该键的回调，并将该值替换为回调返回的任何值。像这样：

const objectMap = (obj, cb) => 
  Object.keys(obj).reduce((ppl, k) =>
    Object.assign(ppl, {
      [k]: cb(obj[k])
    }), {}
  );

然后像这样使用它：

const newPeople = objectMap(people, val => val.age);
console.log(newPeople); // Object {Sally: 22, John: 64, Sam: 12}

运行示例：

const people = {
  'Sally': {
    age: 22,
    sex: 'female',
  },
  'John': {
    age: 64,
    sex: 'male',
  },
  'Sam': {
    age: 12,
    sex: 'female',
  },
};
const objectMap = (obj, cb) => 
  Object
  .keys(obj)
  .reduce(
    (ppl, k) =>
    Object.assign(ppl, {
      [k]: cb(obj[k])
    }), {}
  );
const newPeople = objectMap(people, val => val.age);
console.log('---- People ----');
console.dir(people);
console.log('---- New People ---- ');
console.dir(newPeople);

也许你可以使用for...of？

 const people = { 'Sally': { age: 22, sex: 'female', }, 'John': { age: 64, sex: 'male', }, 'Sam': { age: 12, sex: 'female', },
};
const ages = {};
for(let index of people) {
  ages[key] = people[key].age;
}
console.log(ages); // { 'Sally': 22, 'John': 64, 'Sam': 12, }
相关文章：