如何在特定键之前返回数组中的所有数组项

Question

我需要从数组中返回项目。 困难在于从获取请求返回的 arrays 有可能返回在返回之前无法确定的不同键。 共同点是“created_by”键。 正如标题所暗示的那样，我需要知道一种可以在 created_by 键之前动态呈现所有先前值的方法。

这是我现在设置的渲染/映射方法，它不会像现在这样工作。

return <div className="data-subContainer">
      {resData.map(item => <span key={item.id}>{item[1.3]} - <b>{item[2]}</b></span>)}
    </div>

resData 输出：

    (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {4: "X", 5: "X", 6: "05/16/2020", id: "4627", form_id: "3", post_id: null, date_created: "2020-05-16 05:27:50", date_updated: "2020-05-16 05:27:50", …}
1: {4: "X", 5: "X", 6: "05/14/2020", id: "4618", form_id: "3", post_id: null, date_created: "2020-05-14 13:50:32", date_updated: "2020-05-14 13:50:32", …}
2: {4: "X", 5: "X", 6: "03/02/2020", id: "4124", form_id: "3", post_id: null, date_created: "2020-03-02 19:01:18", date_updated: "2020-03-02 19:01:18", …}
3: {4: "X", 5: "X", 6: "02/27/2020", id: "4103", form_id: "3", post_id: null, date_created: "2020-02-27 00:38:54", date_updated: "2020-02-27 00:38:54", …}
4: {4: "X", 5: "X", 6: "02/27/2020", id: "4102", form_id: "3", post_id: null, date_created: "2020-02-27 00:38:14", date_updated: "2020-02-27 00:38:14", …}
5: {4: "X", 5: "X", 6: "02/27/2020", id: "4101", form_id: "3", post_id: null, date_created: "2020-02-27 00:34:44", date_updated: "2020-02-27 00:34:44", …}
6: {4: "X", 5: "X", 6: "01/14/2020", id: "3853", form_id: "3", post_id: null, date_created: "2020-01-14 07:37:23", date_updated: "2020-01-14 07:37:23", …}
7: {4: "X", 5: "X", 6: "11/06/2019", id: "3503", form_id: "3", post_id: null, date_created: "2019-11-06 12:35:04", date_updated: "2019-11-06 12:35:04", …}
8: {4: "X", 5: "X", 6: "09/26/2019", id: "3283", form_id: "3", post_id: null, date_created: "2019-09-26 17:52:06", date_updated: "2019-09-26 17:52:06", …}
9: {4: "X", 5: "X", 6: "09/24/2019", id: "3263", form_id: "3", post_id: null, date_created: "2019-09-24 20:08:35", date_updated: "2019-09-24 20:08:35", …}
length: 10
__proto__: Array(0)

示例 1：（注意键编号与示例 2 不同）

1: "XX"
2: "XXXX"
3.2: ""
3.3: "XX"
3.4: ""
3.6: "X"
3.8: ""
4: "X"
5: "X"
8: "X"
10: "X"
11: "X"
12: "X"
13: "X"
created_by: "X"

示例 2：

1.2: ""
1.3: "X"
1.4: ""
1.6: "X"
1.8: ""
4: "X"
5: "X"
6: "X"
7: "X"
8: "X"
9: "X"
created_by: "X"

Answer 1

您可以尝试转换为 Map

var resMap = new Map(Object.entries(resData));

然后您通常可以通过键进行迭代

resMap.keys()

更新的答案

const resData = {
  1: 'XX',
  2: 'XXXX',
  3.2: '',
  3.3: 'XX',
  3.4: '',
  3.6: 'X',
  3.8: '',
  4: 'X',
  5: 'X',
  8: 'X',
  10: 'X',
  11: 'X',
  12: 'X',
  13: 'X',
  created_by: 'X',
  test: 1
};

const resMap = new Map(Object.entries(resData));
for (const [key, value] of resMap) {
  if (key === 'created_by') { return; }
  console.log(key, value);
}

Answer 2

您可以使用for in循环遍历 object，将值push送到新的 object，然后在达到created_by后break 。

 var arr = {1: "XX", 2: "XXXX", 3.2: "", 3.3: "XX", 3.4: "", 3.6: "X", 3.8: "", 4: "X", 5: "X", 8: "X", 10: "X", 11: "X", 12: "X", 13: "X", created_by: "X", test: 1 }; var newa = {}; for(i in arr){ newa[i] = arr[i]; if(i == "created_by"){ break; } } console.log(newa);

Answer 3

如果该数据被建模为 object，从键看来，您没有明确的机会知道键的顺序，因为 JavaScript 对象不保证顺序，这与 ZA3CBC3F9D0CE2F2C1554E1B671ZD 不同。

如果您可以将这些数据作为数组检索，则可以保证顺序，我会相应地建议您。 类似于以下假设案例的方式。

您可以使用一种算法来接受要渲染或不渲染的道具值的名称。

首先，您需要一个过滤器算法来处理这样的对象：

function filterObject(object, filteringFunction, initialAccumulator = {}) {
    return Object.entries(object)
        .filter(([key, value], indexInEntriesArray, entriesArray) => filteringFunction(key, value, indexInEntriesArray, entriesArray))
        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), initialAccumulator);
}

有了它，您可以根据您定义的自定义过滤 function 从 object 过滤密钥。 您可以根据条目数组中的键、值、索引（从Object.entries调用返回）根据您想要的任何内容进行过滤。

之后，您需要使用 function 对您的resData数组本身进行 map，按照您认为合适的方式执行每个 object 的过滤道具：

const mappedResData = resData.map(item => filterObject(item, myFilteringFunc))

使用您的自定义filteringFunction来过滤阵列内的每个 object。 你可以在这里做任何事情。 在这里，我只是消除了您列出的键。

const myFilteringFunc = (key, val, i, entArr) => undesiredKeysArray.includes(key) === false;

其中undesiredKeysArray只是一个字符串数组，每个字符串都是 resData 中每个resData中的属性名称。

如果 JavaScript 对象中的顺序得到保证，但事实并非如此，您可以Object slice方法keys 、 values或entries在您想要在其中停止呈现的键、值或条目的名称和数组，并渲染该slice调用的返回。