JS獲取對象的key和value

在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，都可以方便的實現。