JavaScript数组增删查：寻求jQuery内置方法或更优实现

嘿，别担心，你的代码能正常运行就已经很棒啦！其实JavaScript（包括jQuery）本身就有很多简洁的数组操作方法，完全可以替代你可能写的手动遍历逻辑，让代码更规范简洁。下面我给你整理几种常用的数组增、删、获取元素的方法，不管是原生JS还是jQuery的都有：

原生JS方法（推荐，简洁直接） #

• push()：在数组末尾添加单个/多个元素

  // 添加单个元素
  items.push({"Selected": false, "Text": "FourthElement", "Value": "4"});
  // 也可以一次性加多个
  items.push({"Selected": false, "Text": "FifthElement", "Value": "5"}, {"Selected": false, "Text": "SixthElement", "Value": "6"});
  

• unshift()：在数组开头添加元素

  items.unshift({"Selected": false, "Text": "ZeroElement", "Value": "0"});
  

jQuery方法（适合兼容旧场景） #

• $.merge()：合并两个数组来实现添加，适合批量添加元素的场景

  // 把新元素数组和原数组合并
  items = $.merge(items, [{"Selected": false, "Text": "NewElement", "Value": "7"}]);
  

按位置移除 #

• pop()：删除数组最后一个元素，返回被删除的元素

  const lastRemovedItem = items.pop();
  

• shift()：删除数组第一个元素，返回被删除的元素

  const firstRemovedItem = items.shift();
  

• splice(index, 1)：删除指定索引位置的元素（index是元素的下标，从0开始）

  // 删除下标为1的元素（也就是原数组里的SecondElement）
  items.splice(1, 1);
  

按条件移除（比如根据Value/Text属性删除） #

• 原生filter()：返回符合条件的新数组，相当于保留符合条件的元素，删除不符合的

  // 删除Value为"2"的元素
  items = items.filter(item => item.Value !== "2");
  

• jQuery$.grep()：和filter逻辑类似，是jQuery的工具函数

  // 删除Selected为true的元素
  items = $.grep(items, function(item) {
    return item.Selected !== true;
  });
  

按索引直接获取 #

最直接的方式，用数组下标即可：

// 获取第一个元素
const firstItem = items[0];
// 获取第三个元素
const thirdItem = items[2];

按条件获取单个元素 #

• 原生find()：返回第一个符合条件的元素

  // 查找Value为"3"的元素
  const targetItem = items.find(item => item.Value === "3");
  

• jQuery$.grep()：取结果数组的第一个元素即可

  const targetItem = $.grep(items, function(item) {
    return item.Text === "ThirdElement";
  })[0];
  

按条件获取多个元素 #

• 原生filter()：返回所有符合条件的元素组成的新数组

  // 获取所有Selected为true的元素
  const selectedItems = items.filter(item => item.Selected);
  

• jQuery$.grep()：同样返回符合条件的元素数组

  const selectedItems = $.grep(items, function(item) {
    return item.Selected;
  });
  

其实现在原生JS的数组方法已经非常强大且简洁了，jQuery的工具函数更多是为了兼容旧浏览器。如果你的运行环境是现代浏览器，优先用原生方法就好，代码会更清爽~

内容的提问来源于stack exchange，提问作者Raj