vue 中常使用的数据处理方法

1.递归方法--替换某个参数或重新赋值

// obj:
// { basinName:'测试'，children：[{basinName:'测试22',children：[{basinName:'测试33'}},{basinName:'测试23',children：[{basinName:'测试34'}}]}

test1(obj) {
  obj.title = obj.basinName
  if ((obj.children || []).length) {
    for (var i = 0; i < obj.children.length; i++) {
      obj.children[i] = this.test1(obj.children[i])
    }
  }
  return obj
}

2.排序--字符串排序

const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// ["Joe", "Kapil", "Musk", "Steve"]
stringArr.reverse();
// ["Steve", "Musk", "Kapil", "Joe"]

3.排序--数组数字排序

const array  = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => a-b);
// [1, 5, 10, 25, 40, 100]
array.sort((a,b) => b-a);
// [100, 40, 25, 10, 5, 1]

4.排序--对象排序

const objectArr = [ 
    { first_name: 'Lazslo', cityCode: '25'},
    { first_name: 'Pig',    cityCode: '42'},
    { first_name: 'Pirate', cityCode: '14' }
];

objectArr.sort((a,b)=>a.cityCode-b.cityCode)
//[{…}, {…}, {…}]
0: { first_name: 'Pirate', cityCode: '14' }
1: { first_name: 'Lazslo', cityCode: '25'}
2: { first_name: 'Pig',    cityCode: '42'}
length: 3

5.过滤掉无用的值--数组（像0，undefined，null，false，""，''）

const array = [3, 0, 6, 7, '', false];
array.filter(Boolean);
// [3, 6, 7]

6.去重--数组

const array = [5,4,7,8,9,2,7,5]; 
array.filter((item,idx,arr) => arr.indexOf(item) === idx); 
// 或者
const nonUnique = [...new Set(array)]; 
// Output: [5, 4, 7, 8, 9, 2]

7.合并对象

const user = { 
 name: 'Kapil Raghuwanshi', 
 gender: 'Male' 
 };
const college = { 
 primary: 'Mani Primary School', 
 secondary: 'Lass Secondary School' 
 };
const skills = { 
 programming: 'Extreme', 
 swimming: 'Average', 
 sleeping: 'Pro' 
 };

const summary = {...user, ...college, ...skills};

// 输出
gender: "Male"
name: "Kapil Raghuwanshi"
primary: "Mani Primary School"
programming: "Extreme"
secondary: "Lass Secondary School"
sleeping: "Pro"
swimming: "Average"

8.存储sessionStorage

 * @param {存储的keyName} name
 * @param {存储的值} value
 */
export const setStore = (name, value) => {
  if (!name) {
    return false
  }
  window.sessionStorage.setItem(name, typeof value !== 'string' ? JSON.stringify(value) : value)
}

9.读取sessionStorage

 * @param {存储的keyName} name
 */
export const getStore = (name) => {
  if (!name) {
    return false
  }
  return window.sessionStorage.getItem(name)
}

10. 删除sessionStorage

 * @param {需要删除的keyName} name
 */
export const removeStroe = (name) => {
  if (!name) {
    return false
  }
  window.sessionStorage.removeItem(name)
}

11.存储localstorage

 * @param {存储的keyName} name
 * @param {存储的值} value
 */
export const setLocal = (name, value) => {
  if (!name) {
    return false
  }
  window.localstorage.setItem(name, typeof value !== 'string' ? JSON.stringify(value) : value)
}

12.读取localstorage

 * @param {存储的keyName} name
 */
export const getLocal = (name) => {
  if (!name) {
    return false
  }
  return window.localstorage.getItem(name)
}

13.删除localstorage

* @param {需要删除的keyName} name
 */
export const removeLocal = (name) => {
  if (!name) {
    return false
  }
  window.localstorage.removeItem(name)
}

14.按日处理时间为xxxx-yy-dd（年月日）

 * @param {需要处理的时间} time:object
 */
export const timeProcessDay = (time) => {
  if (!time) {
    return ''
  }
  let d = new Date(time)
  return d.getFullYear() + ((d.getMonth() + 1) >= 10 ? ('-' + (d.getMonth() + 1)) : ('-0' + (d.getMonth() + 1))) + '-' + (d.getDate() >= 10 ? d.getDate() : '0' + d.getDate())
}

15.按月处理时间为xxxx-yy（年月）

 * @param {需要处理的时间} time:object
 */
export const  timeProcessMonth = (time) => {
  let d = new Date(time)
  return d.getFullYear() + ((d.getMonth() + 1) >= 10 ? ('-' + (d.getMonth() + 1)) : ('-0' + (d.getMonth() + 1)))
}

16.获取全部url参数,并转换成json对象 

export const getUrlAllParams = function (urls) {
  var url = urls || window.location.href
  var _pa = url.substring(url.indexOf('?') + 1)

  var _arrS = _pa.split('&')
  var _rs = {}
  for (var i = 0, _len = _arrS.length; i < _len; i++) {
    var pos = _arrS[i].indexOf('=')
    if (pos === -1) {
      continue
    }
    var name = _arrS[i].substring(0, pos)
    var value = window.decodeURIComponent(_arrS[i].substring(pos + 1))
    var index = value.indexOf('#/')
    if (index > 0) {
      value = value.substr(0, index)
    }
    _rs[name] = value
  }
  return _rs
}
17.防抖函数--在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

// -应用于input输入数据时请求服务器等 wait等待1000

debounce (fn, wait) {
  let timeout = null
  return function() {
    if (timeout !== null) clearTimeout(timeout)
    timeout = setTimeout(fn, wait)
  }
}

18.节流函数 --规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。

// -移动DOM，上拉列表加载数据等 delay间隔1000

throttle (fn, delay) {
  var prev = Date.now()
  return function() {
    var now = Date.now()
    if (now - prev > delay) {
      fn()
      prev = Date.now()
    }
  }
}