开发用到的js封装方法（20种）

下面是针对这个主题的完整攻略：

简介

在开发过程中，常常会使用到一些封装好的 JavaScript 方法，可以提高代码复用性、简化开发流程。本文总结了开发常用的 20 种 JavaScript 封装方法，希望能对大家有所帮助。

1. 数组操作

1.1. 将数组转换为对象

function arrayToObject(arr) {
  return arr.reduce((obj, item) => {
    obj[item.id] = item;
    return obj;
  }, {});
}

示例：

const arr = [
  { id: 1, name: 'apple' },
  { id: 2, name: 'banana' },
  { id: 3, name: 'orange' },
];
const obj = arrayToObject(arr);
// { "1": { id: 1, name: 'apple' }, "2": { id: 2, name: 'banana' }, "3": { id: 3, name: 'orange' } }

1.2. 数组去重

function uniqueArray(arr) {
  return [...new Set(arr)];
}

示例：

const arr = [1, 2, 3, 2, 1, 4, 5, 4];
const uniqueArr = uniqueArray(arr);
// [1, 2, 3, 4, 5]

1.3. 求数组最大值/最小值

function maxFromArray(arr) {
  return Math.max(...arr);
}

function minFromArray(arr) {
  return Math.min(...arr);
}

示例：

const arr = [1, 2, 3, 4, 5];
const max = maxFromArray(arr);
const min = minFromArray(arr);
// max: 5, min: 1

1.4. 数组扁平化

function flatten(arr) {
  return [].concat(...arr.map(item => Array.isArray(item) ? flatten(item) : item));
}

示例：

const arr = [1, [2, [3, [4, 5]]], 6];
const flatArr = flatten(arr);
// [1, 2, 3, 4, 5, 6]

2. 对象操作

2.1. 合并多个对象

function mergeObject(...objs) {
  return Object.assign({}, ...objs);
}

示例：

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };
const mergedObj = mergeObject(obj1, obj2, obj3);
// { a: 1, b: 2, c: 3 }

2.2. 深拷贝对象

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  let clone = {};
  if (Array.isArray(obj)) {
    clone = [];
  }
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

示例：

const obj = {
  a: 1,
  b: {
    c: [2, 3, 4],
    d: 'hello'
  }
};
const clone = deepClone(obj);

2.3. 从对象中删除属性

function omit(obj, keys) {
  const newObj = {...obj};
  keys.forEach(key => delete newObj[key]);
  return newObj;
}

示例：

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
const newObj = omit(obj, ['a', 'd']);
// { b: 2, c: 3 }

3. 字符串操作

3.1. 字符串翻转

function reverseString(str) {
  return str.split('').reverse().join('');
}

示例：

const str = 'hello world';
const reversedStr = reverseString(str);
// 'dlrow olleh'

3.2. 首字母大写

function capitalize(str) {
  return str[0].toUpperCase() + str.slice(1);
}

示例：

const str = 'hello world';
const capitalizedStr = capitalize(str);
// 'Hello world'

3.3. 清除空格

function trim(str) {
  return str.replace(/^\s+|\s+$/g, '');
}

示例：

const str = '   hello world   ';
const trimmedStr = trim(str);
// 'hello world'

4. 其他常用方法

4.1. 等待一段时间后执行函数

function delay(fn, wait, ...args) {
  setTimeout(fn.bind(null, ...args), wait);
}

示例：

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}
delay(sayHello, 1000, 'Alice'); // 1 秒后输出 "Hello, Alice!"

4.2. 防抖函数

function debounce(fn, wait) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, wait);
  };
}

示例：

function sayHello() {
  console.log('Hello, world!');
}
const debouncedSayHello = debounce(sayHello, 1000);
window.addEventListener('scroll', debouncedSayHello);
// 当用户滚动网页时，函数将最多每秒执行一次

4.3. 节流函数

function throttle(fn, wait) {
  let canRun = true;
  return function() {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, wait);
  };
}

示例：

function sayHello() {
  console.log('Hello, world!');
}
const throttledSayHello = throttle(sayHello, 1000);
window.addEventListener('scroll', throttledSayHello);
// 当用户滚动网页时，函数将最多每秒执行一次

以上就是本文总结的 20 种 JavaScript 封装方法，希望对大家有所帮助。