Skip to main content

JavaScript中的键值对

LanM

关于对象中的键值对,我一直都是云里雾里,在此记录一下今天遇到的问题。

键值对一般都是由一个 key 一个 value 组成

在下例数组对象中,根据键值获取对应的 value

const obj = {
eg: "19901017",
fieldId: "0026ac81c73d44bc8f5ed653dcad2e22",
logicName: "工号",
modelId: "2096638254294056960",
name: "gonghao",
symbol: "GT",
};

console.log(obj["name"]); //gonghao
console.log(obj["gonghao"]); //undefined

貌似只能根据键来获取值,那如何根据值获取键呢?

const obj = {
eg: "19901017",
fieldId: "0026ac81c73d44bc8f5ed653dcad2e22",
logicName: "工号",
modelId: "2096638254294056960",
name: "gonghao",
symbol: "GT",
};

let result = Object.keys(obj).find((key) => obj[key].indexOf("gonghao") !== -1);

console.log(result); //name

什么是 Object.keys()?可以理解为和 for in 返回结果一致,返回的是个字符串数组

console.log(Object.keys(obj)); //['eg', 'fieldId', 'logicName', 'modelId', 'name', 'symbol']

而对于数组对象来说,我们能不能使 key 变成动态的?不写死。

const obj = [
{
eg: "wang",
fieldId: "000",
logicName: "工号",
modelId: "123",
name: "gonghao",
symbol: "GT",
},
{
eg: "xiao",
fieldId: "111",
logicName: "年龄",
modelId: "456",
name: "age",
symbol: "CUSTOM",
},
];
let newObj = {};
obj.map((item) => {
newObj[item.name] = { [item.symbol]: item.fieldId };
});

console.log(newObj); //{gonghao: {GT:"000"}, age: {CUSTOM:"111"}}

for in 和 for of 的区别是什么呢?

区别一:for in 和 for of 都可以循环数组,for in 输出的是数组的 index 下标,而 for of 输出的是数组的每一项的值。

const arr = [1, 2, 3, 4];

// for ... in
for (const key in arr) {
console.log(key); // 输出 0,1,2,3
}

// for ... of
for (const key of arr) {
console.log(key); // 输出 1,2,3,4
}

区别二:for in 可以遍历对象,for of 不能遍历对象,只能遍历带有 iterator 接口的,例如 Set,Map,String,Array

循环对象
const object = { name: "lx", age: 23 };
// for ... in
for (const key in object) {
console.log(key); // 输出 name,age
console.log(object[key]); // 输出 lx,23
}

// for ... of
for (const key of object) {
console.log(key); // 报错 Uncaught TypeError: object is not iterable
}
数组对象
const list = [{ name: "lx" }, { age: 23 }];
for (const val of list) {
console.log(val); // 输出{ name: 'lx' }, { age: 23 }
for (const key in val) {
console.log(val[key]); // 输出 lx,23
}
}

总结:for in 适合遍历对象,for of 适合遍历数组。for in 遍历的是数组的索引,对象的属性,以及原型链上的属性。