在javascript中使用Object.keys（）和map（）方法访问对象数组
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在javascript中使用Object.keys（）和map（）方法访问对象数组相关的知识，希望对你有一定的参考价值。
如何访问如下结构的对象数组？我想构建一个树来输出数据，如数组中的languages对象，以及使用Object.keys()和map()的嵌套对象。
基本上我想循环遍历每个对象并访问其中的languages对象。
这是我到目前为止所尝试的：
var productMap2 = {};
productMap2 = Object.keys(jsonData[0]).map(function(key) {
return jsonData[0][key];
});
这是我的JSON：
var jsonData = [
{
"id": 1,
"project_name": "Project101-updated TODAY",
"created_by": "John Doe",
"updated_by": "Wes Smith",
"created_date": "2018-01-09T15:49:54Z",
"updated_date": "2018-01-09T15:49:54Z",
"is_deleted": false,
"languages": [
{
"id": 1,
"language": "English",
"created_by": "John Doe",
"created_date": "2018-01-04T04:45:54Z",
"beta_project": 1,
"details": [
{
"id": 1,
"phase_name": "Phase1",
"created_date": "2018-01-04T04:33:00Z",
"created_by": "John Doe",
"phase_title": "Title",
"external_url": "https://wwww.nba.com",
"segment": "Consumer",
"locale": "English",
"is_published": false,
"beta_start_date": "1975-01-01T00:00:00Z",
"beta_end_date": "1975-01-01T00:00:00Z",
"project_owner": "John Doe",
"project_subtitutes": "Gello Tupac",
"last_update_date": "2018-01-04T04:33:00Z",
"last_updated_by": "John Doe",
"last_published_date": "2018-01-04T04:33:00Z",
"last_published_by": "Neil Armstrong",
"accrdn_title_one": "title one",
"accrdn_contents_one": "content one",
"accrdn_title_two": "title two",
"accrdn_contents_two": "content two",
"accrdn_title_three": "title three",
"accrdn_contents_three": "content three",
"accrdn_title_four": "titile four",
"accrdn_contents_four": "content four",
"accrdn_title_five": "title five",
"accrdn_contents_five": "content five",
"accrdn_title_six": "title six",
"accrdn_contents_six": "content six",
"beta_language": 1
},
{
"id": 2,
"phase_name": "Phase2",
"created_date": "2010-10-10T00:00:00Z",
"created_by": "John Doe",
"phase_title": "Title",
"external_url": "https://wwww.nba.com",
"segment": "Consumer",
"locale": "English",
"is_published": false,
"beta_start_date": "2018-01-01T00:00:00Z",
"beta_end_date": "2018-10-20T00:00:00Z",
"project_owner": "John Doe",
"project_subtitutes": "Gello Tupac",
"last_update_date": "2010-10-10T00:00:00Z",
"last_updated_by": "John Doe",
"last_published_date": "2010-10-10T00:00:00Z",
"last_published_by": "Neil Armstrong",
"accrdn_title_one": "title one",
"accrdn_contents_one": "content one",
"accrdn_title_two": "title two",
"accrdn_contents_two": "content two",
"accrdn_title_three": "title three",
"accrdn_contents_three": "content three",
"accrdn_title_four": "titile four",
"accrdn_contents_four": "content four",
"accrdn_title_five": "title five",
"accrdn_contents_five": "content five",
"accrdn_title_six": "title six",
"accrdn_contents_six": "content six",
"beta_language": 1
}
]
},
{
"id": 4,
"language": "Japanese",
"created_by": "John Doe",
"created_date": "2018-01-09T01:35:23.743333Z",
"beta_project": 1
}
]
},
{
"id": 2,
"project_name": "Project102-updated",
"created_by": "Sammy Sosa",
"updated_by": "Wes Smith",
"created_date": "2018-01-05T03:13:08Z",
"updated_date": "2018-01-05T03:13:08Z",
"is_deleted": false,
"languages": [
{
"id": 2,
"language": "Traditional Chines",
"created_by": "John Doe",
"created_date": "2018-01-04T04:46:16Z",
"beta_project": 2,
"details": [
{
"id": 4,
"phase_name": "Phase3",
"created_date": "2018-01-04T04:37:13Z",
"created_by": "John Doe",
"phase_title": "Title",
"external_url": "https://wwww.nba.com",
"segment": "Consumer",
"locale": "English",
"is_published": false,
"beta_start_date": "2010-10-10T00:00:00Z",
"beta_end_date": "2018-01-01T00:00:00Z",
"project_owner": "John Doe",
"project_subtitutes": "Gello Tupac",
"last_update_date": "2018-01-04T04:37:13Z",
"last_updated_by": "John Doe",
"last_published_date": "2018-01-04T04:37:13Z",
"last_published_by": "Neil Armstrong",
"accrdn_title_one": "title one",
"accrdn_contents_one": "content one",
"accrdn_title_two": "title two",
"accrdn_contents_two": "content two",
"accrdn_title_three": "title three",
"accrdn_contents_three": "content three",
"accrdn_title_four": "titile four",
"accrdn_contents_four": "content four",
"accrdn_title_five": "title five",
"accrdn_contents_five": "content five",
"accrdn_title_six": "title six",
"accrdn_contents_six": "content six",
"beta_language": 2
}
]
}
]
},
{
"id": 10,
"project_name": "Project103-updated",
"created_by": "JOHN doe",
"updated_by": "Wes Smith",
"ceated_date": "2018-01-05T03:13:08Z",
"updated_date": "2018-01-05T03:13:08Z",
"is_deleted": false,
"languages": [
{
"id": 3,
"language": "Simplified Chines",
"created_by": "John Doe",
"created_date": "2018-01-09T01:34:26.240000Z",
"beta_project": 10
}
]
}
]
答案
Array.prototype.reduce是一个非常好的工具，既方便又强大，适合这样的任务......
var jsonData = [{
"id": 1,
"project_name": "Project101-updated TODAY",
"created_by": "John Doe",
"updated_by": "Wes Smith",
"created_date": "2018-01-09T15:49:54Z",
"updated_date": "2018-01-09T15:49:54Z",
"is_deleted": false,
"languages": [{
"id": 1,
"language": "English",
"created_by": "John Doe",
"created_date": "2018-01-04T04:45:54Z",
"beta_project": 1,
"details": [{
"id": 1,
"phase_name": "Phase1",
"created_date": "2018-01-04T04:33:00Z",
"created_by": "John Doe",
"phase_title": "Title",
"external_url": "https://wwww.nba.com",
"segment": "Consumer",
"locale": "English",
"is_published": false,
"beta_start_date": "1975-01-01T00:00:00Z",
"beta_end_date": "1975-01-01T00:00:00Z",
"project_owner": "John Doe",
"project_subtitutes": "Gello Tupac",
"last_update_date": "2018-01-04T04:33:00Z",
"last_updated_by": "John Doe",
"last_published_date": "2018-01-04T04:33:00Z",
"last_published_by": "Neil Armstrong",
"accrdn_title_one": "title one",
"accrdn_contents_one": "content one",
"accrdn_title_two": "title two",
"accrdn_contents_two": "content two",
"accrdn_title_three": "title three",
"accrdn_contents_three": "content three",
"accrdn_title_four": "titile four",
"accrdn_contents_four": "content four",
"accrdn_title_five": "title five",
"accrdn_contents_five": "content five",
"accrdn_title_six": "title six",
"accrdn_contents_six": "content six",
"beta_language": 1
}, {
"id": 2,
"phase_name": "Phase2",
"created_date": "2010-10-10T00:00:00Z",
"created_by": "John Doe",
"phase_title": "Title",
"external_url": "https://wwww.nba.com",
"segment": "Consumer",
"locale": "English",
"is_published": false,
"beta_start_date": "2018-01-01T00:00:00Z",
"beta_end_date": "2018-10-20T00:00:00Z",
"project_owner": "John Doe",
"project_subtitutes": "Gello Tupac",
"last_update_date": "2010-10-10T00:00:00Z",
"last_updated_by": "John Doe",
"last_published_date": "2010-10-10T00:00:00Z",
"last_published_by": "Neil Armstrong",
"accrdn_title_one": "title one",
"accrdn_contents_one": "content one",
"accrdn_title_two": "title two",
"accrdn_contents_two": "content two",
"accrdn_title_three": "title three",
"accrdn_contents_three": "content three",
"accrdn_title_four": "titile four",
"accrdn_contents_four": "content four",
"accrdn_title_five": "title five",
"accrdn_contents_five": "content five",
"accrdn_title_six": "title six",
"accrdn_contents_six": "content six",
"beta_language": 1
}]
}, {
"id": 4,
"language": "Japanese",
"created_by": "John Doe",
"created_date": "2018-01-09T01:35:23.743333Z",
"beta_project": 1
}]
}, {
"id": 2,
"project_name": "Project102-updated",
"created_by": "Sammy Sosa",
"updated_by": "Wes Smith",
"created_date": "2018-01-05T03:13:08Z",
"updated_date": "2018-01-05T03:13:08Z",
"is_deleted": false,
"languages": [{
"id": 2,
"language": "Traditional Chines",
"created_by": "John Doe",
"created_date": "2018-01-04T04:46:16Z",
"beta_project": 2,
"details": [{
"id": 4,
"phase_name": "Phase3",
"created_date": "2018-01-04T04:37:13Z",
"created_by": "John Doe",
"phase_title": "Title",
"external_url": "https://wwww.nba.com",
"segment": "Consumer",
"locale": "English",
"is_published": false,
"beta_start_date": "2010-10-10T00:00:00Z",
"beta_end_date": "2018-01-01T00:00:00Z",
"project_owner": "John Doe",
"project_subtitutes": "Gello Tupac",
"last_update_date": "2018-01-04T04:37:13Z",
"last_updated_by": "John Doe",
"last_published_date": "2018-01-04T04:37:13Z",
"last_published_by": "Neil Armstrong",
"accrdn_title_one": "title one",
"accrdn_contents_one": "content one",
"accrdn_title_two": "title two",
"accrdn_contents_two": "content two",
"accrdn_title_three": "title three",
"accrdn_contents_three": "content three",
"accrdn_title_four": "titile four",
"accrdn_contents_four": "content four",
"accrdn_title_five": "title five",
"accrdn_contents_five": "content five",
"accrdn_title_six": "title six",
"accrdn_contents_six": "content six",
"beta_language": 2
}]
}]
}, {
"id": 10,
"project_name": "Project103-updated",
"created_by": "JOHN doe",
"updated_by": "Wes Smith",
"ceated_date": "2018-01-05T03:13:08Z",
"updated_date": "2018-01-05T03:13:08Z",
"is_deleted": false,
"languages": [{
"id": 3,
"language": "Simplified Chines",
"created_by": "John Doe",
"created_date": "2018-01-09T01:34:26.240000Z",
"beta_project": 10
}]
}];
function collectLanguageItemFromProjectList (collector, projectItem) {
var
languageMap = collector.map;
languageList = collector.list;
projectItem.languages.forEach(function (languageItem) {
if (!(languageItem.language in languageMap)) { // registry lookup.
languageMap[languageItem.language] = true; // registry update.
languageList.push(languageItem);
}
});
return collector;
}
var languageList = jsonData.reduce(collectLanguageItemFromProjectList, {
map : {},
list: []
}).list;
console.log('languageList : ', languageList);.as-console-wrapper { max-height: 100%!important; top: 0; }另一答案
构建树绝对是一个递归任务。但是你的结构中有数组，所以如果你尝试在纸上绘制你的结构，命名每个部分，你的数组的元素将没有名称，或者它们将有数字。
我要做的是根据数组值名称给每个数组元素一个名称（例如，如果您有“languages”数组，从对象中选择“language”属性，并在“details”中选择“phase_name”）并使用在你的树上。
解决方案代码本身取决于预期的树结构。定义这样的结构似乎合乎逻辑：
TreeNode{
'name': string,
'value': string, //null if it has children
'children': [TreeNode], //null if it has value
'expanded': boolean //irrelevant if it has value
}
我之前在我以前的工作场所做过这个，我使用了两个递归转换结构的递归函数（一个用于对象，一个用于数组）但是我有一个不同的数组结构。在这里，确定对象键的值类型并为每个元素调用递归函数并为其创建子元素就足够了。
以上是关于在javascript中使用Object.keys（）和map（）方法访问对象数组的主要内容，如果未能解决你的问题，请参考以下文章
Javascript：为啥是 Object.keys(someobject)，而不是 someobject.keys？
JavaScript Object.keys（）方法替代与IE8的兼容性
javascript 使用Object.keys（）生成所有对象键的数组
javascript JavaScript Reflect.ownKeys（）与Object.keys（）
JavaScript中in操作符(for..in)Object.keys()和Object.getOwnPropertyNames()的区别
JavaScript中in操作符(for..in)Object.keys()和Object.getOwnPropertyNames()的区别