Question

我怎样才能让它发挥作用？

尝试设置包含块对象的块数组...

var blocks = [];
var block  = {
  type: null,
  color: null
};

var dom_blocks = document.querySelectorAll('.block');

for( var i= 0, ii = dom_blocks.length; i < ii; i++) {
  blocks[i] = Object.create(block);
  blocks[i].block = dom_blocks[i].dataset.type;        // this kills my object
  blocks[i].block.color = dom_blocks[i].dataset.color; // this ain't working
}

console.log(blocks);

<div class="block" data-type="false" data-color="red"></div>
<div class="block" data-type="true"  data-color="green"></div>
<div class="block" data-type="true"  data-color="orange"></div>
<div class="block" data-type="false" data-color="fuchsia"></div>

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

更新我想要实现的是迭代HTML <div class="block">并将其写入Javascript对象，我需要稍后进行操作。

所需的结尾是一个数组blocks[]，其中包含对象中每个block的数据。

Answer 1

这一行：

 blocks[i].block = dom_blocks[i].dataset.type;

依赖于支持dataset的浏览器，isn't universally supported yet。在浏览器上，它会将blocks[i].block设置为字符串（"true"或"false"）。对于旧版浏览器，您可以使用getAttribute：

 blocks[i].block = dom_blocks[i].getAttribute("data-type");

（顺便说一下，也许你的意思是.type =而不是.block =？）

这一行：

blocks[i].block.color = dom_blocks[i].dataset.color;

不执行任何操作，因为您在原始字符串上设置了属性color。当你这样做时，字符串被简单地提升为一个对象，但随后该对象被抛弃，这成为一个无操作。

因此，如果事情“爆炸”，听起来就像是在使用不支持dataset的浏览器。否则，您只需要使用color执行其他操作。

最后，如果您只是将其唯一的属性分配给实例，那么使用block作为原型毫无意义。

如果您想在color上设置blocks[i]而不是blocks[i].block，例如：

blocks[i].color = dom_blocks[i].dataset.color;

...它会起作用（在支持dataset的浏览器上）：

var blocks = [];
var block  = {
  type: null,
  color: null
};

var dom_blocks = document.querySelectorAll('.block');

for( var i= 0, ii = dom_blocks.length; i < ii; i++) {
  blocks[i] = Object.create(block);
  blocks[i].block = dom_blocks[i].dataset.type;
  blocks[i].color = dom_blocks[i].dataset.color;
}

var pre = document.createElement('pre');
pre.innerHTML = JSON.stringify(blocks, null, 4);
document.body.appendChild(pre);

<div class="block" data-type="false" data-color="red"></div>
<div class="block" data-type="true"  data-color="green"></div>
<div class="block" data-type="true"  data-color="orange"></div>
<div class="block" data-type="false" data-color="fuchsia"></div>

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

或旧版浏览器：

var blocks = [];
var block  = {
  type: null,
  color: null
};

var dom_blocks = document.querySelectorAll('.block');

for( var i= 0, ii = dom_blocks.length; i < ii; i++) {
  blocks[i] = Object.create(block);
  blocks[i].block = dom_blocks[i].getAttribute("data-type");
  blocks[i].color = dom_blocks[i].getAttribute("data-color");
}

var pre = document.createElement('pre');
pre.innerHTML = JSON.stringify(blocks, null, 4);
document.body.appendChild(pre);

<div class="block" data-type="false" data-color="red"></div>
<div class="block" data-type="true"  data-color="green"></div>
<div class="block" data-type="true"  data-color="orange"></div>
<div class="block" data-type="false" data-color="fuchsia"></div>

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 2

使用跨浏览器getAttribute()并通过直接在推送中创建对象来简化操作。

无需显式调用Object.create（）

＆＃13;

var blocks = [],
    dom_blocks = document.querySelectorAll('.block');

for(var i= 0, ii = dom_blocks.length; i < ii; i++) {
  blocks.push({
    type: dom_blocks[i].getAttribute('data-type'),
    color: dom_blocks[i].getAttribute('data-color')
  });
}

console.log(blocks);

＆＃13;

<div class="block" data-type="false" data-color="red"></div>
<div class="block" data-type="true"  data-color="green"></div>
<div class="block" data-type="true"  data-color="orange"></div>
<div class="block" data-type="false" data-color="fuchsia"></div>

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

＆＃13;

在Javascript中动态设置值对象数组

2 个答案: