javascript - 映射 2 对象数组并填充布尔数组

Question

我有第一个数组，在每个项目的末尾都有数值。

const arr = ["abc#1","def#2","z#1", "z#2"]

我必须用下面的数组映射它

const arrObj = [{
  name: 'abc'
},{
  name: 'def'
},{
  name: 'z'
}]

填充数组中具有布尔值的新属性值

result = [{
  name: 'abc',
  value: [true, false]
},{
  name: 'def',
  value: [false, true]
},{
  name: 'z',
  value: [true, true]
}]

我坚持进行多次迭代，但未能产生上述结果。

const arr = ["abc#1","def#2","z#1", "z#2"]

let arrObj = [{
  name: 'abc'
},{
  name: 'def'
},{
      name: 'z'
    }]

const raw = arr.map(o => o.split('#')[0])
const key = arr.map(o => o.split('#')[1])

arrObj = arrObj.map(o => {

  console.log('raw', raw)

  if(raw.includes(o.name)) {
    console.log('key', key)
    console.log(o.name)
  }

  return {
    ...o,
    value: []
  }
})

标签： javascriptarraysecmascript-6

Answer 1

将以下内容添加到对象数组 ( objArray) 的每个对象中：

objArray.forEach(object => object.value = [false, false]);
// ex. value: [false, false]

然后哈希.split()数组中的每个字符串 ( )strArray#

let subArray = string.split('#');
// ex. ["abc", "1"]

将第二个字符串转换为实数索引号。注意：如果字符串被正确编号，则此步骤是不必要的——例如。const strArray = ["abc#0", "def#1", ...]

let index = Number(subArray[1]) - 1;

再次遍历并根据匹配的and和对应的数字将objArray子数组value中的每个元素设置为。trueobject.namesubArray[0]index

object.value[index] = true;

---

演示

细节也在demo中注释

const strArray = ["abc#1", "def#2", "z#1", "z#2"];
let objArray = [{
  name: 'abc'
}, {
  name: 'def'
}, {
  name: 'z'
}];

/*
Assign each object in objArray defaults to:
value: [false, false]
*/
objArray.forEach(object => object.value = [false, false]);

// Uncomment line below to view in console 
/*
console.log(`~~~~~~~ objArray - initial state ~~~~~~~`);
console.log(JSON.stringify(objArray));
console.log(`~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`);
console.log(`~~~~~~~ Sub-arrays from strArray ~~~~~~~`);
*/

for (let string of strArray) {
  /*
  Convert each string of strArray to a subArray:
  ex. ["abc", "1"]
  */
  let subArray = string.split('#');
  // Convert the second string into a real index number
  let index = Number(subArray[1]) - 1;

  for (let object of objArray) {
    /*
    if object name matches the first string of a subArray...
    Change the object value to true at the index previously defined
    */
    if (object.name === subArray[0]) {
      object.value[index] = true;
    }
  }
  // Uncomment line below to view in console 
  //console.log(JSON.stringify(`['${subArray[0]}', '${subArray[1]}'] --> object.value index: ${index}`));
}

console.log(`~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`);
console.log(`~~~~~~~~ objArray - final state ~~~~~~~~`);
console.log(JSON.stringify(objArray));
console.log(`~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`);

---

for...of循环

注意：这与答案没有直接关系。这是对以下评论的回复：

但你不能有索引for...of- user3106579

请参阅MDN 部分关于方法的示例。.entries()

const paragraphs = [...document.querySelectorAll('p')];

for (let [index, paragraph] of paragraphs.entries()) {
  if (index % 2 !== 0) {
    paragraph.style.color = 'tomato';
  }
}

paragraphs.forEach((paragraph, index) => {
  if (index % 2 === 0) {
    paragraph.style.color = 'blue';
  }
});

for (let i = 0; i < paragraphs.length; i++) {
  if (i % 2 !== 0) {
    paragraphs[i].style.backgroundColor = '#000';
  }
}

*>* {
  margin-left: 15px
}

p {
  width: max-content;
  margin-left: 30px
}

main,
h1,
section,
h2,
article,
h3 {
  margin-top: -40px: margin-bottom: -40px;
}

.as-console-wrapper {
  width: 350px;
  min-height: 100%;
  margin-left: 45%;
}

<main>
  <h1>Main</h1>
  <section>
    <h2>Section A</h2>
    <p>Paragraph aa</p>
    <p>Paragraph ab</p>
    <article>
      <h3>Article A1</h3>
      <p>Paragraph A1a</p>
      <p>Paragraph A1b</p>
      <p>Paragraph A1c</p>
    </article>
    <p>Paragraph ac</p>
    <article>
      <h3>Article A2</h3>
      <p>Paragraph A2a</p>
      <p>Paragraph A2b</p>
    </article>
    <p>Paragraph ad</p>
  </section>
  <section>
    <h2>Section B</h2>
    <p>Paragraph ba</p>
    <article>
      <h3>Article B1</h3>
      <p>Paragraph B1a</p>
      <p>Paragraph B1b</p>
      <p>Paragraph B1c</p>
      <p>Paragraph B1d</p>
    </article>
    <p>Paragraph bb</p>
    <p>Paragraph bc</p>
  </section>
</main>