【vue】总结几种处理数据的常用方法

1.forEach ()

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

// forEach
var arr = [
    { id: 1, age: 18 },
    { id: 2, age: 24 },
    { id: 3, age: 26 },
    { 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: '蓝天'
	},{
		value: 2,
		name: '白云'
	},{
		value: 3,
		name: '花'
	},{
		value: 4,
		name: '草'
	}
]

// 只获取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草"]

//替换数组对象的键名
let result = dataList.map(item => ({
  id: item.value,
  title: item.name
}));

3.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}

4.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 list= [];
list = this.array1.filter(item=> array2.indexOf(item) === -1);

//筛选出两个数组相同的元素，构成新数组
let list= [];
list = this.array1.filter(item=> array2.indexOf(item) !== -1);

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.reduce（复制可用，对象数组去重，保留后面的元素）

收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数

// 举例数据：
arr = [
    {date:2022-01-01,price:100},
    {date:2022-01-01,price:200},
    {date:2022-01-02,price:100},
]
// 方法：
unique(arr, name) {
      let hash={}
        return arr.reduce(function (acc, cru,index) {
          if (!hash[cru[name]]) {
             hash[cru[name]]={index:acc.length}
               acc.push(cru)
          }else{
             acc.splice(hash[cru[name]]['index'],1,cru)
          }
           return acc;
        }, []);
    }

对象数组求和：

let sumprice = array.reduce(function (total, currentValue, currentIndex, arr) {
    return total + currentValue.price;
}, 0);
//console.log(sumprice )

8.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"}]

9.some 和 every

some：只要有一个是真，那就返回真
every：跟some是相反，some是只要有一个就行，every是要所有为真才返回真

// 三个参数：遍历项 索引 数组本身
// 配合箭头函数，只要有一个为true，就返回true，一个都true都没有，就返回false
const someArr = [false, true, false, true, false]
const someArr2 = someArr.some((bol, index, arr) => bol)
console.log(someArr2)
//true

// 三个参数：遍历项 索引 数组本身
// 配合箭头函数，需要所有为true，才返回true，否则返回false
const everyArr = [false, true, false, true, false]
const everyArr2 = everyArr.every((bol, index, arr) => bol)
console.log(everyArr2)
//false

我是本篇小编小卜
遇到Bug需要帮助，
欢迎加wx：
xmzl1988
备注"csdn博客“
温馨提示此为有偿服务;