记录JS处理数据的方法(持续更新)

经常要处理后端返回的数据格式问题，记录下…

---

1、将数组转化为对象 arr.reduce()

const lessons = [
  {
    title: "媒体查询响应式布局",
    category: "css"
  },
  {
    title: "FLEX 弹性盒模型",
    category: "css"
  },
];
// -------------------reduce---------------------------
let lessonObj = lessons.reduce((obj, cur, index) => {
  obj[`${cur["category"]}-${index}`] = cur;
  return obj;
}, {});
// ----------------------------------------------------
console.log(lessonObj); //{css-0: {…}, css-1: {…}}
console.log(lessonObj["css-0"]); //{title: "媒体查询响应式布局", category: "css"}

2、合并数组 arr.concat() / 展开运算符…

let arrodd = [1,2,3]
let arreven = [4,5,6]
// 法一
let arr = []
arr = arr.concat(arrodd).concat(arreven)  // [1,2,3,4,5,6]
// 法二
arr = [...arrodd,...arreven ]  // [1,2,3,4,5,6]

3、改造对象 obj.map()

let data= [
	{staff:'zs'},
	{staff:'ls'}
]
let arr = []
arr = data.map((item, index) => {
  return {
    id: `${2 * index + 1}`,
    staffName: item.staff,
    plan: '计划',
  }
})

console.log(arr) // [ {id:'2',staffName:'zs',plan:'计划'},{id:'4',staffName:'ls',plan:'计划'} ]

4、根据数组中对象的某个属性值进行去重

var arr = [
  {
  from:'张三',
  to: '河南'
  },
  {
    from:'王二',
    to: '阿里'
  },
  {
    from:'王二',
    to: '杭州'
  },
  {
    from:'王二',
    to: '山东'
  },
]


function unique(arr) {
  const map = new Map();
  return arr.filter(
     (a) => !map.has(a.from) && map.set(a.from, 1)
  )
}

5、判断空对象Object.keys()

let obj = {}
let arr = Object.keys(obj)  // 键的数组集
if(arr.length <= 0){
  console.log('obj是个空对象')
}

6、不改变数组截取数组arr.slice()

let arr = [1,2,3]
arr.slice(1,2) // [2]
arr.slice(1) // [2,3]

---

7、统计数组中元素累计出现的次数

var arr = ['吃饭','吃饭','睡觉','打豆豆']; 
function getWordCnt(arr){ 
    return arr.reduce(function(prev,next){ 
        prev[next] = (prev[next] + 1) || 1
        return prev
    },{})
}
let obj = getWordCnt(arr) // {吃饭:2,睡觉:1,打豆豆:1}
console.log(Object.keys(obj)) // ['吃饭','睡觉','打豆豆']

// 对象数组用arr.filter判断length

8、new Set()去重

// 数组
let arr = [1,2,3,'haha','4','haha',4,true,false,true,1]
let setarr = new Set(arr)
console.log(setarr)
// 法一
console.log([...setarr])
// 法二
console.log(Array.from(setarr))

// 字符串
let str = 'hahahahx34312xxi2wwjdbw'
let setstr = new Set(str)
console.log(setstr)
// 法一
console.log([...setstr].join(''))
// 法二
console.log(Array.from(setstr).join(''))

9、new Set()判断数组对象中某个属性是否有重复值

let arr = [
	{name:'zs',id:1},
	{name:'ls',id:2},
	{name:'ls',id:1},
]
// 判断id是否重复
let idArr = arr.map(item=>item.id)
let setArr = new Set(idArr)
if(setArr.size == arr.length){
	// 没有重复
}else{
	// 重复了
}

10、根据数组对象的某个属性过滤另外一个数组

let arr = [{id:2}]
let list = [
	{name:'张三',id:1},
	{name:'李四',id:2}
]
let findlist = list.filter(item=>{
	let index = arr.findIndex(i=>i.id == item.id)
	return index != -1
})
console.log(findlist) 
// [ { name: '李四', id: 2 } ]
let newlist = list.filter(item=>{
	let index = arr.findIndex(i=>i.id == item.id)
	return index == -1
})
console.log(newlist)
// [ { name: '张三', id: 1 } ]

11、对象数组去重

equit(arr, ...arguements) {
	// arr 需要去重的数组
	// arguements 需要去重的字段数组
	function getBoolean(o, m) {
		let list = arguements.map(x => o[x] == m[x]) //值均为布尔
		return list.every(i => i) //要使这些布尔值都真才能满足条件，因为要求的条件是 并且
	}
	let result = [] //新数组
	//总数组与新数组比较，遍历总数组时用新数组的some方法进行判断
	arr.map(o => !result.some(m => getBoolean(o, m)) ? result.push(o) : '')
	return result
}