通过在数组中搜索值来访问二维数组中的值

Question

我有一个名为MyUsernames的2d数组。

如果我写console.log(MyUsernames)，我会看到：

0: {id: "5", name: "quirky.subdued"}
1: {id: "6", name: "phyllida.skeg"}
2: {id: "7", name: "duff.anarchist"}
3: {id: "9", name: "relashio.articulate"}

我正在尝试访问数组中某个元素的name部分。

我通过这个循环输出MyUsernames中的记录：

var hst = document.getElementById("usernames");
for (var i = 0; i < MyUsernames.length; i++) {  
var un1 = MyUsernames[i].name;
hst.innerHTML += "<li>" +"<a id="+MyUsernames[i].id + " href='#content' onclick='deleteById(this)'>" + un1 + "</a></li>";
}

这是代码的deleteById位：

var deleteById = function ( self ){
this_id = self.id;
this_word = MyUsernames[this_id].name;
}

我的问题是，我正在发送例如9的ID值以提取名称relashio.articulate。

然而，我正试图通过以下代码来访问它：

this_word = MyUsernames[this_id].name;

这不起作用，因为根据控制台输出，我希望在我的示例中的位是通过访问

MyUsernames[3].name;

而不是：

MyUsernames[9].name;

问题是我不能发送ID值3，因为我只有来自MyUsernames的记录的ID值9。

有没有一种方法我可以访问"；name"；数组的一部分，通过其相应的ID？

Answer 1

我认为您正在寻找Array.prototype.find。您可以在函数中提供一组条件，如果条件匹配，find将返回一个结果。

你像这个一样使用它

var usernames = [];
usernames.push({id: "5", name: "quirky.subdued"});
usernames.push({id: "6", name: "phyllida.skeg"});
usernames.push({id: "7", name: "duff.anarchist"});
usernames.push({id: "9", name: "relashio.articulate"});
function findUsername(id) {
var username = usernames.find(function(username) { return username.id === id });
return username;
}
var user5 = findUsername("5");
document.write('Find result 1: ' + user5.name);
document.write('<br />');
var user9 = findUsername("9");
document.write('Find result 2: ' + user9.name);

这是我的JsFiddle：https://jsfiddle.net/rtL87veq/11/

Answer 2

将数组转换为对象

通过实现用户Id作为新对象变量的主键，您将能够通过users[9].name找到用户

输出：

relashio.articulate

定义新的对象变量并执行for循环，确保将用户id标记为主键。然后，将其余的对象数据保存在同一个键中。例如

var users = {};
// for loop all your users in 'array'
for (var i = 0; i < MyUsernames.length; i++) {
// hold found user in variable
var user = MyUsernames[i];
// mark user id as the primary key then save rest of object data in same key
users[user.id] = user;
};

源代码

var MyUsernames = [{
id: "5",
name: "quirky.subdued"
}, {
id: "6",
name: "phyllida.skeg"
}, {
id: "7",
name: "duff.anarchist"
}, {
id: "9",
name: "relashio.articulate"
}];

// define object variable
var users = {};
// for loop all your users in 'array'
for (var i = 0; i < MyUsernames.length; i++) {
// hold found user in variable
var user = MyUsernames[i];
// mark user id as the key then save rest of object data in same key
users[user.id] = user;
};

// Print the value of key 'name' for user id '9'
console.log(users[9].name)

Answer 3

Array.findO(n)是一个选项，通过内部道具搜索数组。

const usernames = [{
id: "5",
name: "quirky.subdued"
}, {
id: "6",
name: "phyllida.skeg"
}, {
id: "7",
name: "duff.anarchist"
}, {
id: "9",
name: "relashio.articulate"
}]

const target = usernames.find(({ id }) => id === "9")
console.log(target)

Internet Explorer不支持它。如果您的目标浏览器是IE9+，请考虑使用Array.filter

const usernames = [{
id: "5",
name: "quirky.subdued"
}, {
id: "6",
name: "phyllida.skeg"
}, {
id: "7",
name: "duff.anarchist"
}, {
id: "9",
name: "relashio.articulate"
}]

const [target] = usernames.filter(({ id }) => id === "9")
// Filter returns an array of matches. Destructing helps to get the first match 
console.log(target)

Answer 4

更改此行：

hst.innerHTML += "<li>" +"<a id="+MyUsernames[i].id + " href='#content' onclick='deleteById(this)'>" + un1 + "</a></li>";

到此：

hst.innerHTML += "<li>" + "<a id='" + i + "' href='#content' onclick='deleteById(this)'>" + un1 + "</a></li>";

现在，self.id将返回3。

Answer 5

我会考虑js-Map对象是否是一个更合适的结构，这可能会决定集合的顺序——以及数组索引——是相关的，还是只是分组的副作用。任何值(对象和基元值(都可以用作键或值。

您可以按照如下方式生成、访问和操作Map，其中objs的id作为键，obj本身作为每个Map对中的值。

let dataMap = new Map();

// Set key to id and obj to value for each Map pair
MyUsernames.forEach(obj => dataMap.set(obj.id, obj));

// Access value (obj) with key (id) of 2
const objIdTwo = dataMap.get(2)
// Determine whether pair with key (id) of 3 exists in Map
const objIdThree = dataMap.has(3)
// Remove pair with key (id) of 4 from Map
dataMap.delete(4)

// A Map object iterates its elements in insertion order — a for...of loop 
// returns an array of [key, value] for each iteration.
for (let [id, obj] of dataMap) {
console.log(id + ' = ' + obj)
}
// If needed, Map can be converted to 2d-array
const arr2d = Array.from(dataMap)