vue中常用的js方法

在 Vue 项目中，我们通常会封装一些常用的 JavaScript 方法，以便在多个组件中复用。以下是一些常见的 Vue 项目中常封装的 JavaScript 方法：。

1. 格式化时间

在 Vue 项目中，我们通常需要将时间戳格式化为指定的日期格式。可以封装一个 formatDate 方法：

function formatDate(date, fmt) {
  const o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds(),
    'q+': Math.floor((date.getMonth() + 3) / 3),
    S: date.getMilliseconds(),
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  for (let k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
    }
  }
  return fmt;
}

2. 格式化金额

在 Vue 项目中，我们通常需要将金额格式化为指定的格式，比如添加千分位分隔符。可以封装一个 formatMoney 方法：

function formatMoney(num) {
  num = num.toString().replace(/\$|\,/g, '');
  if (isNaN(num)) {
    num = '0';
  }
  const sign = num === (num = Math.abs(num));
  num = Math.floor(num * 100 + 0.50000000001);
  let cents = num % 100;
  num = Math.floor(num / 100).toString();
  if (cents < 10) {
    cents = '0' + cents;
  }
  for (let i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
    num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
  }
  return (sign ? '' : '-') + num + '.' + cents;
}

3. 防抖和节流

在 Vue 项目中，我们通常需要对一些频繁触发的事件进行防抖或节流，以避免性能问题。可以封装一个 debounce 或 throttle 方法：

function debounce(func, wait, immediate) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    const later = function () {
      timeout = null;
      if (!immediate) {
        func.apply(context, args);
      }
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) {
      func.apply(context, args);
    }
  };
}

function throttle(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    if (!timeout) {
      timeout = setTimeout(function () {
        timeout = null;
        func.apply(context, args);
      }, wait);
    }
  };
}

4. 深度克隆对象

在 Vue 项目中，我们通常需要对一些对象进行深度克隆，以避免修改原对象。可以封装一个 clone 方法：

function clone(obj) {
  let newObj = {};
  if (obj instanceof Array) {
    newObj = [];
  }
  for (let key in obj) {
    const val = obj[key];
    newObj[key] = typeof val === 'object' ? clone(val) : val;
  }
  return newObj;
}

5. 获取 URL 参数

在 Vue 项目中，我们通常需要从 URL 中获取参数，以便进行相应的处理。可以封装一个 getQueryParams 方法：

function getQueryParams(url) {
  const params = {};
  const search = url.split('?')[1];
  if (search) {
    const pairs = search.split('&');
    pairs.forEach(function (pair) {
      pair = pair.split('=');
      params[pair[0]] = decodeURIComponent(pair[1] || '');
    });
  }
  return params;
}

6. 判断数据类型

在 Vue 项目中，我们通常需要判断一个变量的数据类型，以便进行相应的处理。可以封装一个 getType 方法：

function getType(obj) {
  const toString = Object.prototype.toString;
  const map = {
    '[object Boolean]': 'boolean',
    '[object Number]': 'number',
    '[object String]': 'string',
    '[object Function]': 'function',
    '[object Array]': 'array',
    '[object Date]': 'date',
    '[object RegExp]': 'regExp',
    '[object Undefined]': 'undefined',
    '[object Null]': 'null',
    '[object Object]': 'object',
  };
  return map[toString.call(obj)];
}

7. 字符串截取

在 Vue 项目中，我们通常需要对一些字符串进行截取，以便进行相应的处理。可以封装一个 substr 方法：

function substr(str, start, len) {
  if (start < 0) {
    start = str.length + start;
  }
  let end = start + len;
  if (end > str.length) {
    end = str.length;
  }
  let result = '';
  for (let i = start; i < end; i++) {
    result += str.charAt(i);
  }
  return result;
}

8. 数组排序

在 Vue 项目中，我们通常需要对一些数组进行排序，以便进行相应的处理。可以封装一个 sort 方法：

function sort(arr, prop, order) {
  return arr.sort(function (a, b) {
    const val1 = prop ? a[prop] : a;
    const val2 = prop ? b[prop] : b;
    if (order === 'desc') {
      return val2 - val1;
    } else {
      return val1 - val2;
    }
  });
}

function sort(arr, callback) {
  return arr.sort(callback);
}

9. 获取对象属性

在 Vue 项目中，我们通常需要获取一个对象的某个属性值，以便进行相应的处理。可以封装一个 getProperty 方法：

function getProperty(obj, prop) {
  const props = prop.split('.');
  let result = obj;
  for (let i = 0; i < props.length; i++) {
    if (!result) {
      return null;
    }
    result = result[props[i]];
  }
  return result;
}

10. 数组分组

在 Vue 项目中，我们通常需要对一些数组进行分组，以便进行相应的处理。可以封装一个 groupBy 方法：

function groupBy(arr, prop) {
  return arr.reduce(function (groups, item) {
    const val = getProperty(item, prop);
    groups[val] = groups[val] || [];
    groups[val].push(item);
    return groups;
  }, {});
}

function groupBy(arr, key) {
  const result = {};
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];
    if (!result[item[key]]) {
      result[item[key]] = [];
    }
    result[item[key]].push(item);
  }
  return result;
}

11. 数组去重

在 Vue 项目中，我们通常需要对一些数组进行去重，以避免重复数据的出现。可以封装一个 unique 方法：

function unique(arr) {
  return Array.from(new Set(arr));
}

function uniqueObjects(arr, key) {
  const result = [];
  const map = new Map();
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];
    if (!map.has(item[key])) {
      map.set(item[key], true);
      result.push(item);
    }
  }
  return result;
}

12. 对象合并

在 Vue 项目中，我们通常需要将多个对象合并成一个对象，以便进行相应的处理。可以封装一个 merge 方法：

function merge() {
  const result = {};
  for (let i = 0; i < arguments.length; i++) {
    const obj = arguments[i];
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        result[key] = obj[key];
      }
    }
  }
  return result;
}

13. 判断是否为空对象

在 Vue 项目中，我们通常需要判断一个对象是否为空对象，以便进行相应的处理。可以封装一个 isEmptyObject 方法：

function isEmptyObject(obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      return false;
    }
  }
  return true;
}

14. 数组分页

在 Vue 项目中，我们通常需要对一些数组进行分页，以便进行相应的处理。可以封装一个 paginate 方法：

function paginate(arr, currentPage, pageSize) {
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return arr.slice(startIndex, endIndex);
}

15. 数组求和

在 Vue 项目中，我们通常需要对一些数组进行求和，以便进行相应的处理。可以封装一个 sum 方法：

function sum(arr) {
  return arr.reduce(function (prev, curr) {
    return prev + curr;
  }, 0);
}

16. 数组过滤

在 Vue 项目中，我们通常需要对一些数组进行过滤，以便进行相应的处理。可以封装一个 filter 方法：

function filter(arr, callback) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i], i, arr)) {
      result.push(arr[i]);
    }
  }
  return result;
}

18. 对象转换为数组

在 Vue 项目中，我们通常需要将一个对象转换为数组，以便进行相应的处理。可以封装一个 toArray 方法：

function toArray(obj) {
  const result = [];
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result.push(obj[key]);
    }
  }
  return result;
}

19. 数组扁平化

在 Vue 项目中，我们通常需要对一个多维数组进行扁平化处理，以便进行相应的处理。可以封装一个 flatten 方法：

function flatten(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result.push(...flatten(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

function flatten(arr) {
  return arr.reduce((prev, curr) => {
    return prev.concat(Array.isArray(curr) ? flatten(curr) : curr);
  }, []);
}

20. 对象数组扁平化

在 Vue 项目中，我们通常需要对一个对象数组进行扁平化的处理，以便进行相应的处理。可以封装一个 flattenObjects 方法：

function flattenObjects(arr, key) {
  return arr.reduce((prev, curr) => {
    return prev.concat(Array.isArray(curr[key]) ? flattenObjects(curr[key], key) : curr);
  }, []);
}

21. 数组最大值

在 Vue 项目中，我们通常需要对一个数组进行求最大值的处理，以便进行相应的处理。可以封装一个 max 方法：

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

22. 数组最小值

在 Vue 项目中，我们通常需要对一个数组进行求最小值的处理，以便进行相应的处理。可以封装一个 min 方法：

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

23. 数组最大值和最小值

在 Vue 项目中，我们通常需要获取一个数组的最大值和最小值，以便进行相应的处理。可以封装一个 getMaxAndMin 方法：

function getMaxAndMin(arr) {
  const max = Math.max.apply(null, arr);
  const min = Math.min.apply(null, arr);
  return { max, min };
}

24. 数组去除指定元素

在 Vue 项目中，我们通常需要对一个数组进行去除指定元素的处理，以便进行相应的处理。可以封装一个 removeItem 方法：

function removeItem(arr, item) {
  const index = arr.indexOf(item);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

25. 数组随机排序

在 Vue 项目中，我们通常需要对一个数组进行随机排序的处理，以便进行相应的处理。可以封装一个 shuffle 方法：

function shuffle(arr) {
  for (let i = arr.length - 1; i >= 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];
  }
  return arr;
}

26. 数组交集

在 Vue 项目中，我们通常需要对两个数组进行交集的处理，以便进行相应的处理。可以封装一个 intersection 方法：

function intersection(arr1, arr2) {
  return arr1.filter(item => arr2.includes(item));
}

27. 数组并集

在 Vue 项目中，我们通常需要对两个数组进行并集的处理，以便进行相应的处理。可以封装一个 union 方法：

function union(arr1, arr2) {
  return Array.from(new Set([...arr1, ...arr2]));
}

28. 数组差集

在 Vue 项目中，我们通常需要对两个数组进行差集的处理，以便进行相应的处理。可以封装一个 difference 方法：

function difference(arr1, arr2) {
  return arr1.filter(item => !arr2.includes(item));
}

以上这些方法只是一些常见的封装方法，实际上在 Vue 项目中可能会有更多的常用方法需要封装。