JS 数组 API

发表于 分类于 ，

数组 API

split 和 join 的区别

  1. split 是 String 的方法，以指定字符分割字符串为数组；
  2. join 是 Array 的方法，以指定字符拼接数组元素为字符串；
  3. 二者互为相反的操作；

数组的 pop、push、unshift、shift 的区别

  1. pop，弹出数组的最后一个元素，返回值是弹出的元素；
  2. push，在数组末尾压入一个元素，返回值是数组的长度；
  3. unshift，在数组开头压入一个元素，返回值是数组的长度；
  4. shift，弹出数组的第一个元素，返回值是弹出的元素；
  5. 以上 4 个操作都有副作用：会改变原数组；

数组的纯函数 API

纯函数 API 要满足两个条件：

  1. 不改变原数组；
  2. 返回一个数组；

concat

拼接数组，并返回新数组；

map

遍历数组，对数组中的每个元素进行指定操作，然后返回新数组；

filter

过滤数组，以某个条件过滤数组元素，返回过滤后的新数组；

slice

切割数组，没有参数时为浅拷贝，返回新数组；

非纯函数 API

  1. pop
  2. push
  3. unshift
  4. shift
  5. forEach 对数组的每个元素执行一次指定的操作；
  6. some 对数组的每个元素执行一次测试，返回布尔值；
  7. reduce 遍历数组，对数组的每个元素执行一次操作，并将结果作为下一次操作起始参数，最后返回最终结果；
  8. splice 从指定索引开始截取指定个数的元素，并插入新的元素，返回值为截取的元素；

reduce

数组的累积或统计操作都可以使用 reduce；

详细说明，参见MDN;

数组 flat（拍平）

将嵌套数组转换为一维数组，如下：

1
2
const arr = [1, 2, [3, 4, [5, 6, [7, 8], 9], 10], 11];
float(arr); // 结果应该是 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
1
2
3
4
5
6
7
8
9
10
11
12
function flat(arr) {
  // 1. 判断数组元素是否还是数组
  const isDeep = arr.some((item) => item instanceof Array);
  // 2. 不是则直接返回
  if (!isDeep) {
    return arr;
  }
  // 3. 利用 concat 拍平二维数组
  const res = Array.prototype.concat.apply([], arr);
  // 4. 多维数组继续拍平
  return flat(res);
}

数组去重

1
2
3
4
5
6
7
8
9
10
// 使用遍历
function unique(arr) {
  const res = [];
  arr.forEach((item) => {
    if (res.indexOf(item) < 0) {
      res.push(item);
    }
  });
  return res;
}
1
2
3
4
5
6
// 使用 set
function unique(arr) {
  //   const set = new Set(arr);
  //   return [...set];
  return Array.from(new Set(arr));
}

Map 和 Set

Map 和 Object 的区别

  1. api 不同；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const map = new Map();

    map.set("a", 1); // 设置键值
    map.get("a"); // 返回指定键的值
    map.has("a"); // 是否存在指定的键值对
    map.delete("a"); // 删除指定的键值对
    map.size(); // 返回 map 中键值对的数量
    map.clear(); // 清空 map
    map.forEach(); // 迭代方法
    map.keys(); // 返回所有键
    map.values(); // 返回所有值
    map.entries(); // 返回所有键值对组成的数组

  2. Map 可以以任意类型为键， Object 的键不能是引用类型；

  3. Map 是有序结构，Object 是无序结构；

  4. Map 操作快；

Set 和 Array 的区别

  1. api Set 的实例属性和方法与 Map 相同；
  2. Set 是无序结构，Array 是有序结构；
  3. Set 元素不能重复；
  4. Set 操作快；

WeakMap 和 WeakSet

  1. 弱引用，防止内存泄漏；
  2. WeakMap 只能用对象作为 key；
  3. WeakSet 只能用对象作为 value；
  4. WeakMap 只有 get、set、has、delete 方法；
  5. WeakSet 只有 length 属性和 add、delete、has 方法；

WeakMap 的使用场景：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 关联两个对象，但又不想成为对象的属性

const obj1 = { a: 1 };
const obj2 = { b: 2 };
// 强关联
obj1.obj2 = obj2;
// 访问 obj2
console.log(obj1.obj2);
// WeakMap
const map = new WeakMap();
map.set(obj1, obj2);
// 访问 obj2
console.log(map.get(obj1));