JS--总结几种处理数据的常用方法（api）

1.forEach ()

forEach 和 map 的作用类似，都是循环数组去做一些事情，区别在于 map 会返回一个新数组，而 forEach 没有返回值

// forEach
var arr = [
    { id: 1, age: 18 },
    { id: 2, age: 14 },
    { id: 3, age: 16 },
    { id: 4, age: 19 },
]

var newArr = arr.forEach( item => {
    item.age++
    return item
})
console.log(arr,newArr);
// [……]， undefined


// map
var arr = [
    { id: 1, age: 18 },
    { id: 2, age: 24 },
    { id: 3, age: 26 },
    { id: 4, age: 19 },
]

var newArr = arr.map( item => {
    item.age++
    return item
})
console.log(arr,newArr);
// [……]， [……]

//判断数组中的值是否都相等
let arr = ['1','1','1','1'] , b = 0;
aaa.forEach(item => {
    if (item !== aaa[0]) {
        b++
    }
})
if (b === 0) {
     console.log("完全相同");
} else {
     console.log("不完全相同");
}

2.map()

const dataList= [
    {
        value: 1,
        name: '蓝天',
        class: 1,
        garde: 88
    },{
        value: 2,
        name: '白云',
        class: 1,
        garde: 88
    },{
        value: 3,
        name: '花',
        class: 1,
        garde: 88
    },{
        value: 4,
        name: '草',
        class: 1,
        garde: 88
    }
]
// 只获取dataList里面的value,
const valueList= dataList.map(item=>{
    return item.value
})
console.log(valueList)    
// [1,2,3,4]

// 获取value加上name的合并字符串
const nameList= dataList.map(item => {
    return item.value+ item.name
})
console.log(nameList)    
// ["1蓝天", "2白云", "3花", "4草"]

//js提取对象数组中有效字段
let res = dataList.map(({value, name}) => ({ value, name }))
console.log(res)
//[{value: 1, name: '蓝天'},{value: 2, name: '白云'},{value: 3, name: '花'},{value: 4, name: '草'}]

3.filter()

filter过滤, 和map一样，也会返回新数组
需要注意的是 filter 是返回所有符合的项组成的新数组，而find 只会返回第一个符合条件的那一个对象

var arr = [
    { id: 1, age: 18 },
    { id: 2, age: 24 },
    { id: 3, age: 20 },
    { id: 4, age: 26 },
    { id: 5, age: 20 },
    { id: 6, age: 19 },
]
var obj = arr.filter(item => item.age == 19);
console.log(obj);    // [{id: 6, age: 19}]

//过滤，去掉相同值
let a = [1, 2, 3];
let b = [1, 2, 3, 4];
let c = b.filter(items => {
  if (!a.includes(items)) return items;
})
console.log(c);    //[4]

4.find()

find返回数组中第一个满足条件的元素（如果有的话）， 如果没有，则返回undefined。
需要注意的是 find 只会返回第一个符合条件的那一个对象，filter 则是返回所有符合的项组成的新数组

var arr = [
    { id: 1, age: 18 },
    { id: 2, age: 24 },
    { id: 3, age: 20 },
    { id: 4, age: 26 },
    { id: 5, age: 20 },
    { id: 6, age: 19 },
]
var obj = arr.find(item => item.age == 20);
console.log(obj);    
// {id: 3, age: 20}

5.Array.from()

可以用于把有length属性的对象生成一个新数组，所以可以用他来新建数组，也可以结合Set来做数组的去重

var arr = [1, 2, 3, 3, 4, 1, 5];
var newArr = Array.from(new Set(arr));
console.log(newArr)    
 // [1, 2, 3, 4, 5]

6.sort 排序 reverse 数组倒序

var arr = [1, 3, 5, 4, 1, 2, 3, 6, 7]
//从小到大
arr.sort((a,b) => a-b);
console.log(arr)     //[1, 1, 2, 3, 3, 4, 5, 6, 7]
//从大到小
arr.sort((a,b) => b-a);
console.log(arr)     //[7, 6, 5, 4, 3, 3, 2, 1, 1]
//倒序
var arr = [1, 3, 5, 4, 1, 2, 3, 6, 7]
arr.reverse();
console.log(arr)     //[7, 6, 3, 2, 1, 4, 5, 3, 1]

7.includes

从已有的菜单列表和后台返回已选中的id列表，筛选选中id对应的数据，组成新数组

var idList= ['1', '3', '5']
var dataList= [{id:'1',name:'qqq'},{id:'2',name:'www'},{id:'3',name:'eee'},{id:'4',name:'rrr'},{id:'5',name:'ttt'}]
var arr = []
dataList.forEach((item, index) => {
     if (idList.includes(item.id)) {   //筛选没选的 (!idList.includes(item.id))
          console.log(item.id);
          arr.push(item);
     }
 });
console.log(arr);
//  [{id: "1", name: "qqq"},{id: "3", name: "eee"},{id: "5", name: "ttt"}]

8.去掉两个数组中相同的部分（保留相同的部分）

const a = [1,2,3,4]
const b = [1,3]
const c = a.filter(v => b.findIndex(el => el === v) === -1);    // console.log(c)   [2, 4]   去掉相同部分
const c = a.filter(v => b.findIndex(el => el === v) !== -1);    // console.log(c)   [1, 3]   保留相同部分

const arr=[{roomType:1,name:111},{roomType:2,name:222}]
const data = [{roomType:2,name:222},{roomType:3,name:333}]

const uniqueData = data.filter(itemToCheck =>!new Set(arr.map(existingItem => existingItem.roomType)).has(itemToCheck.roomType));                //过滤数组对象中roomType相同的对象
console.log(uniqueData);       //[ { roomType: 3, name: 333 } ]

const uniqueData = data.filter(itemToCheck =>new Set(arr.map(existingItem => existingItem.roomType)).has(itemToCheck.roomType));               //保留数组对象中roomType相同的对象
console.log(uniqueData);       //[ { roomType: 2, name: 222} ]

9.检查数组对象中的字段是否为空，过滤掉数组中为空的对象

function isEmptyObject(obj, fields) {
  // 检查对象的指定字段是否都为空
  for (let field of fields) {
    if (obj[field]) { // 如果字段值不是 null, undefined, 或空字符串
      return false; // 字段不为空，返回 false
    }
  }
  return true; // 所有字段都为空，返回 true
}
function removeEmptyObjects(arr, fields) {
  // 创建一个新数组，过滤掉所有字段都为空的对象
  return arr.filter(obj => !isEmptyObject(obj, fields));
}

const data = [
  { name: '', age: null, email: undefined },
  { name: 'John', age: 30, email: 'john@example.com' },
  { name: '', age: '', email: '' },
  { name: 'Jane', age: null, email: 'jane@example.com' } // age 为 null 但其他字段不为空
];

let fields = ['name','age','email']  //要检测的对象字段
const filteredData = removeEmptyObjects(data, fields);
console.log(filteredData, '111111111')  
//[
//  { name: 'John', age: 30, email: 'john@example.com' },
//  { name: 'Jane', age: null, email: 'jane@example.com' }
//]