删除JavaScript对象的第一个元素

javascript中编写了一个示例代码,用于删除对象的第一个元素。

删除对象的第一个元素

若要删除对象的第一个元素,请在“Object.keys”中将键作为数组,指定第一个键来删除。

let obj = {name: 'mebee', age: 25, address: 'tokyo'};

delete obj[Object.keys(obj)[0]];

console.log(obj);
// {age: 25, address: 'tokyo'}

您还可以使用“Object.keys”仅创建一个键数组,使用“shift”获取第一个值,然后使用“delete”将其删除。

let obj = {name: 'mebee', age: 25, address: 'tokyo'};

console.log(Object.keys(obj));
// ['name', 'age', 'address']

console.log(Object.keys(obj).shift());
// name

let first = Object.keys(obj).shift();

// 删除
delete obj[first];

console.log(obj);
// {age: 25, address: 'tokyo'}

指定第一个键的性能似乎稍好一些。

删除JavaScript对象的第一个元素  第1张

示例代码

下面是一个示例代码,在单击“删除”按钮时删除并显示对象的第一个元素。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>删除javascript对象的第一个元素</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

  <div class="container text-center w-75 mx-auto" style="margin-top:200px">

    <h2><span class="badge bg-warning"></span></h2>
    <h2><span class="badge bg-warning">结果</span></h2>

    <button type="button" onclick="hoge()" class="btn btn-raised btn-primary">
      删除
    </button>

  </div>

  <script>

    let obj = {
      sample1: {
        a: 1,
        b: 2
      },
      sample2: {
        a: 1,
        b: 2
      }
    }

    // 获取显示元素
    let elm = document.getElementsByClassName("badge")[0];

    // 转换为JSON字符串并显示
    elm.textContent = JSON.stringify(obj);

    function hoge() {

      // 获取显示元素
      let elm = document.getElementsByClassName("badge")[1];
      
      // 删除
      delete obj[Object.keys(obj)[0]];

      // 转换为JSON字符串并显示
      elm.textContent = JSON.stringify(obj);

    }

  </script>
</body>

</html>

检查执行结果,可以确认它已被删除。

删除JavaScript对象的第一个元素  第2张

本文来源:词雅网

本文地址:https://www.ciyawang.com/javascript-object-keys.html

本文使用「 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 」许可协议授权,转载或使用请署名并注明出处。

相关推荐