Typescript / Cypress：如何使用 forEach 循环遍历两个对象？

Question

我想实现一个函数并在其中使用 forEach 来遍历两个对象。我必须在每次迭代时比较这两个值。

示例/想法：

const id = {a:'A2', b: 'B1', c:'C3'};
const name = {maria:'Maria',josef:'Josef',moses:'Moses'};

Object.values(id, name).forEach((ID, NAME) => {
   cy.contains(ID);
   cy.contains(NAME);
});

如果我像这样使用两个 forEach 循环：

Object.values(id).forEach((ID) => {
Object.values(name).forEach((NAME) => {
       cy.contains(ID);
       cy.contains(NAME);
    });
});

逻辑上它不会均匀迭代。

谢谢你的帮助！

Answer 1

注意依赖属性顺序是自找麻烦。属性顺序复杂。这取决于对象的创建方式和属性的名称。例如，这两个对象中的属性处于 不同的 顺序。一些例子：

// The properties in these objects are in a *different* order from one another
const ex1a = {x: 1, y: 2};
const ex1b = {y: 2, x: 1};
console.log(sameOrder(ex1a, ex1b)); // false

// Less obviously, the order of the properties in these two objects
// **is the same**:
const ex2a = {"2": 1, x: 2};
const ex2b = {x: 2, "2": 1};
console.log(sameOrder(ex2a, ex2b)); // true

// The order of these is the same:
const ex3a = {};
const ex3b = {a: 1, b: 2};
ex3a.a = 1;
ex3a.b = 2;
console.log(sameOrder(ex3a, ex3b)); // true

// But the order of these is different:
const ex4a = {};
const ex4b = {a: 1, b: 2};
ex4a.b = 2;
ex4a.a = 1;
console.log(sameOrder(ex4a, ex4b)); // false

// And so on.

function sameOrder(a, b) {
    const anames = Object.keys(a);
    const bnames = Object.keys(b);
    return anames.length === bnames.length &&
        anames.every((aname, index) => aname === bnames[index]);
}

但是如果您不关心顺序而只关心值，只需将值作为数组然后使用一个简单的循环即可：

const idValues = Object.values(id);
const nameValues = Object.values(name);
for (let i = 0, max = Math.max(idValues.length, nameValues.length); i < max; ++i) {
    const idValue = idValues[i];
    const nameValue = nameValues[i];
    // ...do something with `idValue` and `nameValue`...
    // Note that if the arrays aren't the same length, one of those will be `undefined`
    // once the loop has gone beyond the length of the array it came from.
}

Answer 2

cy.contains(ID) 和 cy.contains(NAME) 搜索独立元素 - 你可以独立循环。

Object.values(id).forEach((ID) => {
  cy.contains(ID);
})

Object.values(name).forEach((NAME) => {
  cy.contains(NAME);
})

除非你想在同一个元素上同时检查id和name，在这种情况下cy.contains(...)就太简单了。

您可以通过索引关联值

Object.values(id).forEach((ID, index) => {

  const NAME = Object.values(name)[index]
  cy.contains(`#${ID}`, NAME);  // get element with id of ID and text of NAME
                                // e.g <div id="A2">Maria</div>

})

顺便说一句，列表项最好使用复数形式，列表项最好使用单数形式，而不是小写和大写。

我保留了您的约定以使更改更清楚，但请考虑 names 和 name、ids 和 id。

Answer 3

谢谢大家！

通过你的例子我解决了我的问题。

解决方案：

const names = Object.values(name);
Object.values(id).forEach((ID, index) => {
   cy.contains(ID);
   cy.contains(names[index]);
});

Typescript / Cypress：如何使用 forEach 循环遍历两个对象？

Typescript / Cypress: How to use forEach loop through two Objects?

foreach

object

javascript-objects

typescript

cypress