使用JavaScript（而非jQuery）创建多维数组

Question

我有以下元素（如下），并且想要创建一个表单数组：

[ 
  ["name": "Tim", "age":24, "hair":"black"], 
  ["name": "Tim", "age":344, "hair":"red"], 
  ["name": "Tim", "age":24, "hair":"brown"], 
]

<div class="person">
    <div class="name">Tim</div>
    <div class="name">24</div>
    <div class="name">black</div>
</div>
<div class="person">
    <div class="name">Tim</div>
    <div class="name">34</div>
    <div class="name">red</div>
</div>
<div class="person">
    <div class="name">David</div>
    <div class="name">56</div>
    <div class="name">brown</div>
</div>

我的尝试：

 var arr = Array.from(document.querySelectorAll('.person'), 
      row => Array.from(row.querySelectorAll('.name'), cell => cell.textContent)
     );

但是这给了我一个类型的数组：

 [["Tim","24","black"],["Tim","34","red"],["David","56","brown"]]

Answer 1

您可以创建一个名为Person的类，并为其传递必要的参数。正如您已经将参数设置为["Tim","24","black"]一样，使用扩展运算符可以解决问题。

＆＃13;

＆＃13;

function Person(name, age, hair) {
  this.name = name;
  this.age = age;
  this.hair = hair;
}

var arr = Array.from(document.querySelectorAll('.person'),
  row => {
    var args = Array.from(row.querySelectorAll('.name'), cell => cell.textContent);
    return new Person(...args)
  });

console.log(arr)

＆＃13;

<div class="person">
  <div class="name">Tim</div>
  <div class="name">24</div>
  <div class="name">black</div>
</div>
<div class="person">
  <div class="name">Tim</div>
  <div class="name">34</div>
  <div class="name">red</div>
</div>
<div class="person">
  <div class="name">David</div>
  <div class="name">56</div>
  <div class="name">brown</div>
</div>

＆＃13;

＆＃13;

＆＃13;

ES5

正如@ charlietfl正确指出的那样，Array.from，arror函数（=>）和扩展运算符（...）的兼容性有限。对于旧版浏览器，您应该考虑采用以下方法。

＆＃13;

＆＃13;

function Person(name, age, hair) {
  this.name = name;
  this.age = age;
  this.hair = hair;
}

var persons = [].slice.call(document.querySelectorAll('.person'));

var arr = persons.map(function(person) {
  var props = [].slice.call(person.querySelectorAll('.name'));
  var args = props.map(function(el) {
    return el.textContent;
  });

  return new Person(args[0], args[1], args[2])
})

console.log(arr)

＆＃13;

<div class="person">
  <div class="name">Tim</div>
  <div class="name">24</div>
  <div class="name">black</div>
</div>
<div class="person">
  <div class="name">Tim</div>
  <div class="name">34</div>
  <div class="name">red</div>
</div>
<div class="person">
  <div class="name">David</div>
  <div class="name">56</div>
  <div class="name">brown</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

给出如下数组：

const arr = [["Tim","24","black"],["Tim","34","red"],["David","56","brown"]];

您可以使用map将其更改为对象数组：

const result = arr.map(row => ({name: row.name, age:row.age, colour: row.colour}));

或等效地：

const result = arr.map(([name, age, colour]) => ({name, age, colour}));

Answer 3

您可以返回对象数组，其中每个对象都是一个.person元素。

var elms = document.querySelectorAll('.person');
var result = Array.from(elms, function(e) {
  return {
    name: e.children[0].textContent,
    age: e.children[1].textContent,
    hair: e.children[2].textContent
  }
})

console.log(result)

<div class="person">
  <div class="name">Tim</div>
  <div class="name">24</div>
  <div class="name">black</div>
</div>
<div class="person">
  <div class="name">Tim</div>
  <div class="name">34</div>
  <div class="name">red</div>
</div>
<div class="person">
  <div class="name">David</div>
  <div class="name">56</div>
  <div class="name">brown</div>
</div>