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

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()
}
}
}