@[toc]

关于 自定义JS工具类 相关类似的源码请看 https://gitee.com/ykang2020/my_utils (opens new window)

1. 封装数组去重方法unique

根据当前数组产生一个去除重复元素后的新数组

定义1 forEach()和indexOf()

/**
 * 利用forEach()和indexOf()双重循环效率低
 * @param {Array} arr
 * @returns
 */
export function unique(arr) {
  const result = [];
  arr.forEach((item) => {
    if (result.indexOf(item) === -1) {
      result.push(item);
    }
  });
  return result;
}

定义2 forEach()和对象容器

/**
 * 利用forEach()和对象容器
 * @param {Array} arr
 * @returns
 */
export function unique1(arr) {
  const result = [];
  const obj = {};
  arr.forEach((item) => {
    if (!obj.hasOwnProperty(item)) {
      obj[item] = true;
      result.push(item);
    }
  });
  return result;
}

定义3 ES6中Set的特性

/**
 * 利用ES6中Set的特性
 * @param {Array} arr
 * @returns
 */
export function unique2(arr) {
  return [...new Set(arr)];
}

使用

import { unique, unique1, unique2 } from "./array/unique";
const arr = [1, 2, 2, 3, 3, 4, 4, 4, 5, 6, 7, 7, 8, 9];
console.log(unique(arr));
console.log(unique1(arr));
console.log(unique2(arr));

结果

2. 封装 数组合并方法 cancat

将n个数组或值与当前数组合并生成一个新数组, 原始数组不会被改变

定义

/**
 * 封装 concat 方法
 * @param {Array} arr
 * @param  {...any} args
 * @returns
 */
export default function concat(arr, ...args) {
  const result = [...arr];
  args.forEach((item) => {
    // 判断item是否是数组，是数组就要展开入栈
    if (Array.isArray(item)) {
      result.push(...item);
    } else {
      result.push(item);
    }
  });
  return result;
}

使用

import concat from "./array/concat";
const arr = [1, 2, 3];
console.log(concat(arr, [4, 5, 6], 7, 8, [9, 10]));

结果

3. 封装 数组切片方法 slice

定义

export default function slice(arr, begin, end) {
  if (arr.length === 0) {
    return [];
  }
  begin = begin || 0;
  if (begin >= arr.length) {
    return [];
  }
  end = end || arr.length;
  if (end > arr.length) {
    end = arr.length;
  }
  if (end < begin) {
    return [];
  }
  const result = [];
  for (let i = begin; i < end; i++) {
    result.push(arr[i]);
  }
  return result;
}

使用

import slice from "./array/slice";

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const result = slice(arr, 1, 5);
console.log(result);

结果

4. 封装 数组扁平化方法 flatten

定义1 递归方式

/**
 * 取出嵌套数组(多维)中的所有元素放到一个新数组(一维)中
 * 递归方式
 * @param {*} arr
 */
export function flatten(arr) {
  let result = [];
  arr.forEach((item) => {
    // 判断是不是数组
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result = result.concat(item);
    }
  });
  return result;
}

定义2 循环方式

export function flatten1(arr) {
  let result = [...arr];
  // 判断result里有没有子数组
  while (result.some((item) => Array.isArray(item))) {
    result = [].concat(...result);
  }
  return result;
}

使用

import { flatten, flatten1 } from "./array/flatten";

const arr = [1, 2, [3, [4, 5], 6], 7, [8, 9]];

const result = flatten(arr);
const result2 = flatten1(arr);
console.log(result);
console.log(result2);

结果

5. 封装 数组分块方法 chunk

将arr拆分成多个size长度的区块，每个区块组成小数组，整体是一个二维数组

定义

/**
 * 将arr拆分成多个size长度的区块，每个区块组成小数组，整体是一个二维数组
 * @param {Array} arr
 * @param {Number} size
 * @returns
 */
export default function chunk(arr, size = 1) {
  if (arr.length === 0) {
    return [];
  }
  let result = [];
  let temp = [];
  arr.forEach((item) => {
    // 这里先推入temp再往temp中推入元素
    // 判断temp元素长度是否为0
    if (temp.length === 0) {
      result.push(temp);
    }
    // 将元素压入到临时数组temp中
    temp.push(item);
    // temp满了就清空
    if (temp.length === size) {
      temp = [];
    }
  });
  return result;
}

使用

import chunk from "./array/chunk";

const result = chunk([1, 2, 3, 4, 5, 6, 7, 8], 3);
const result2 = chunk([1, 2, 3, 4, 5, 6, 7, 8]);
console.log(result);
console.log(result2);

结果

6. 封装 数组取差集 difference

定义

/**
 * 数组取差集 在arr1中存在且不在arr2中存在的元素
 * @param {Array} arr1
 * @param {Array} arr2
 * @returns
 */
export default function difference(arr1, arr2 = []) {
  if (arr1.length === 0) {
    return [];
  }
  if (arr2.length === 0) {
    return arr1.slice();
  }
  const result = arr1.filter((item) => !arr2.includes(item));
  return result;
}

使用

import difference from "./array/difference";

const result = difference([1, 2, 3, 4], [3, 4, 5, 6]);

console.log(result);

结果

7. 封装 删除数组部分元方法 pull pullAll

删除原数组中与value相同的元素，返回所有删除元素的数组

定义

/**
 * 删除原数组中与value相同的元素，返回所有删除元素的数组
 * @param {Array} arr
 * @param  {...any} values
 */
export function pull(arr, ...values) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    // 判断arr中当前元素是否存在于values数组中
    if (values.includes(arr[i])) {
      // 先将该元素存入result数组中
      result.push(arr[i]);
      // 然后再删除该元素
      arr.splice(i, 1);
      // 因为删除的元素，下标自减
      i--;
    }
  }
  return result;
}

export function pullAll(arr, values) {
  return pull(arr, ...values);
}

使用

import { pull, pullAll } from "./array/pull";

let arr = [1, 2, 3, 4, 3, 2];
const result = pull(arr, 3, 4, 2);
console.log(arr)
console.log(result);

console.log('**********')

let arr2 = [1, 2, 3, 4, 3, 2];
let arr3 = [3,4,2]
const result2 = pullAll(arr2, arr3);
console.log(arr2)
console.log(result2);

结果

8. 封装 得到数组部分元方法 drop dropRight

得到当前数组过滤掉左边size个后剩余元素组成的数组，不改变当前数组

定义

/**
 * 得到arr过滤掉左边size个后剩余元素组成的数组，不改变arr
 * @param {Array} arr
 * @param {Number} size
 * @returns
 */
export function drop(arr, size) {
  // return arr.filter((valur, index) => {
  //   return index >= size;
  // });
  return arr.filter((value, index) => index >= size);
}

/**
 * 得到arr过滤掉右边size个后剩余元素组成的数组，不改变arr
 * @param {Array} arr
 * @param {Number} size
 * @returns 
 */
export function dropRight(arr, size) {
  return arr.filter((value, index) => index < arr.length - size);
}

使用

import { drop, dropRight } from "./array/drop";

let arr = [1, 3, 5, 7, 9];
let result = drop(arr, 3);
console.log(arr, result);

let result2 = dropRight(arr, 3);
console.log(arr, result2);

结果

关于 自定义JS工具类 相关类似的源码请看 https://gitee.com/ykang2020/my_utils (opens new window)