数组的一些操作技巧


快速复制数组

const arr = [1, 2, 3, 4];
const sameArr = [...arr];
console.log("arr: ", arr, "\n", "sameArr: ", sameArr);

// arr:[1, 2, 3, 4]
// sameArr:[1, 2, 3, 4]

快速合并数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const mergedArr = [...arr1, ...arr2, ...arr3];
console.log("mergedArr: ", mergedArr);

// mergedArr:[1, 2, 3, 4, 5, 6, 7, 8, 9]

快速过滤掉相同元素

const arr = [1, 1, 2, 3, 4, 5, 5, 2, 8, 9, 6];
const uniqueArr = [...new Set(arr)];
console.log("uniqueArr: ", uniqueArr);

// uniqueArr: [1, 2, 3, 4, 5, 8, 9, 6]

Tips

  • ES6 之 new Set()

    • Set 是 es6 新增的数据结构,似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合。
      • Set 对象方法
      • add 添加某个值,返回 Set 对象本身
      • clear 删除所有的键/值对,没有返回值
      • delete 删除某个键,返回 true,如果删除失败,返回 false
      • forEach 对每个元素执行指定操作
      • has 返回一个布尔值,表示某个键是否在当前 Set 对象之中
        // Array 转 Set
        var mySet = new Set(["value1", "value2", "value3"]);
        // 用...操作符,将 Set 转 Array
        var myArray = [...mySet];
        // String 转 Set
        var mySet = new Set("hello"); // Set(4) {"h", "e", "l", "o"}
        // 注:Set 中 toString 方法是不能将 Set 转换成 String
        Set 对象作用
        // 数组去重
        var mySet = new Set([1, 2, 3, 4, 4]);
        [...mySet]; // [1, 2, 3, 4]
        
        // 并集
        var a = new Set([1, 2, 3]);
        var b = new Set([4, 3, 2]);
        var union = new Set([...a, ...b]); // {1, 2, 3, 4}
        
        // 交集
        var a = new Set([1, 2, 3]);
        var b = new Set([4, 3, 2]);
        var intersect = new Set([...a].filter((x) => b.has(x))); // {2, 3}
        
        // 差集
        var a = new Set([1, 2, 3]);
        var b = new Set([4, 3, 2]);
        var difference = new Set([...a].filter((x) => !b.has(x))); // {1}

        过滤符合条件的数组项

        const fruits = [
          "apple",
          "banana",
          "pear",
          "watermelon",
          "strawberry",
          "arbutus",
        ];
        const hFruits = fruits.filter((fruit) => fruit.startsWith("a"));
        console.log("hFruits: ", hFruits);
        
        // hFruits: ["apple", "arbutus"]

        检查数组中的某些项目是否匹配条件

        const arr1 = [2, 4, 6, 8, 10];
        const arr2 = [2, 4, 6, 8, 9];
        const isEven = (num) => {
          if (num % 2 === 0) {
            return true;
          }
        };
        
        console.log(arr1.every(isEven)); // true
        console.log(arr2.every(isEven)); // false

        数组的交集

        const arr1 = [1, 2, 3, 4, 5];
        const arr2 = [4, 5, 6, 7, 8, 9];
        const intersection = arr1.filter((num) => arr2.includes(num));
        console.log(intersection); // [4, 5]

        筛选数组的差异部分

        const arr1 = [1, 2, 3, 4, 5];
        const arr2 = [4, 5, 6, 7, 8, 9];
        const difference = arr1.filter((num) => !arr2.includes(num));
        const allDifference = [
          ...arr1.filter((num) => !arr2.includes(num)),
          ...arr2.filter((num) => !arr1.includes(num)),
        ];
        
        console.log(difference); // [1, 2, 3]
        console.log(allDifference); // [1, 2, 3, 6, 7, 8, 9]

        对数组中的项目进行排序

        const numbers = [52, 9, 23, 16, 20, 99];
        
        // 升序
        const asc = [...numbers.sort((a, b) => a - b)];
        console.log(asc); // [9, 16, 20, 23, 52, 99]
        
        // 降序
        const desc = [...numbers.sort((a, b) => b - a)];
        console.log(desc); // [99, 52, 23, 20, 16, 9]

        Tips

        冒泡排序

  • 实现原理

    • 数组中有 n 个数,比较每相邻两个数,如果前者大于后者,就把两个数交换位置;这样一来,第一轮就可以选出一个最大的数放在最后面;那么经过 n-1(数组的 length - 1) 轮,就完成了所有数的排序。
      sort排序
var arr = [3, 4, 1, 2];
function bubbleSort(arr) {
  var max = arr.length - 1;
  for (var j = 0; j < max; j++) {
    // 声明一个变量,作为标志位
    var done = true;
    for (var i = 0; i < max - j; i++) {
      if (arr[i] > arr[i + 1]) {
        var temp = arr[i];
        arr[i] = arr[i + 1];
        arr[i + 1] = temp;
        done = false;
      }
    }
    if (done) {
      break;
    }
  }
  return arr;
}
bubbleSort(arr);

// 1、外层 for 循环控制循环次数
// 2、内层 for 循环进行两数交换,找每次的最大数,排到最后
// 3、设置一个标志位,减少不必要的循环

文章作者: Damao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Damao !
  目录