在JavaScript中，我们可以使用对象来存储和操作数据。一个对象由多个键值对组成，其中键（key）是一个字符串类型的标识符，值（value）可以是任意类型的数据。
下面就来详细阐述JS获取对象的key和value的不同方面。
一、JS遍历对象的key和value
使用for-in循环可以遍历对象的所有属性，如下代码所示：
let person = {name: "John", age: 30, city: "New York"};
for (let key in person) {
console.log(key + ": " + person[key]);
}
输出结果如下：
name: John
age: 30
city: New York
二、JS获取对象的第一个key
使用Object.keys()方法可以获取对象的所有键值，并通过数组索引获取第一个键值，如下代码所示：
let person = {name: "John", age: 30, city: "New York"};
let keys = Object.keys(person);
console.log(keys[0]);
输出结果为：name
三、JS获取数组对象的key
在JavaScript中，数组本质上也是一种对象，我们可以通过下标来访问数组元素。下标就是键，对应元素值就是值，如下代码所示：
let fruits = ["apple", "banana", "orange"];
for (let key in fruits) {
console.log(key + ": " + fruits[key]);
}
输出结果如下：
0: apple
1: banana
2: orange
四、JS对象的key可以是变量嘛
JavaScript对象的key可以是字符串和数字类型，还可以是变量，如下代码所示：
let name = "John";
let person = {[name]: "Doe"};
console.log(person[name]); // Output: Doe
在这里，我们使用变量name作为对象的key，结果输出为Doe。
五、JS获取对象的key值
除了使用for-in循环遍历对象的所有属性外，我们还可以使用Object.keys()方法获取对象的所有键值，如下代码所示：
let person = {name: "John", age: 30, city: "New York"};
let keys = Object.keys(person);
console.log(keys);
输出结果为：[“name”, “age”, “city”]
六、JS根据对象的key来获取对应值
使用对象的key可以快速获取对应的值，如下代码所示：
let person = {name: "John", age: 30, city: "New York"};
console.log(person["name"]); // Output: John
七、JS修改对象的key
通过对象的key可以获取对应的值，并且也可以通过key来修改对应的值，如下代码所示：
let person = {name: "John", age: 30, city: "New York"};
person.name = "Doe";
console.log(person.name); // Output: Doe
八、JS获取对象的key
除了使用for-in循环遍历对象的所有属性外，我们还可以使用Object.keys()方法获取对象的所有键值，如下代码所示：
let person = {name: "John", age: 30, city: "New York"};
let keys = Object.keys(person);
console.log(keys);
输出结果为：[“name”, “age”, “city”]
九、JS对象删除key
使用delete操作符可以删除对象的指定属性，如下代码所示：
let person = {name: "John", age: 30, city: "New York"};
delete person.city;
console.log(person);
输出结果为：{name: “John”, age: 30}
总结
以上就是JS获取对象的key和value的详细阐述，我们可以根据自己的实际需求来选择使用哪种方法进行获取和操作。无论是遍历对象的所有属性、获取对象的第一个key、获取数组对象的key、使用变量作为对象的key、获取对象的key值、根据对象的key获取对应值、修改对象的key、获取对象的key，还是删除对象的key，都可以方便的实现。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/182222.html
微信扫一扫 
支付宝扫一扫 