项目中常用的数据处理方法：数组/对象/字符串

项目中用的最多的数据处理类型：数组、字符串、对象

一、常用的数组方法如下：

forEach函数

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

array.forEach(function(数组当前项的值，数组当前项的索引，数组对象本身){ })

注意: forEach()对于空数组是不会执行回调函数的

---

map函数

map()方法定义在JavaScript的Array中，它返回一个新数组，数组中的元素为原始数组调用函数处理后的值

map方法接收一个匿名函数为参数，匿名函数又有三个参数：

1. item项、
2. 数组的索引：index、
3. self：调用map方法的数组本身，也就是数组array

[1,2,3,].map((item,index,self)=>{console.log(item,index,self) })

注意事项

1. map()不会对空数组进行检测
2. map()不会改变原始数组（这句话不准确）

var arr = [
 { a: 1, b: 1 },
  { a: 2, b: 2 }
];

var newArr = arr.map((item) => {
  item.b = 5;
  return item;
});

console.log("arr-+", arr, "===", newArr); // 可以修改原数组的值

=== 修订写法：不会修改原数组

var arr = [
 { a: 1, b: 1 },
  { a: 2, b: 2 }
];

var newArr = arr.map((item) => ({
  ...item,
  b: 10
}));

console.log("arr-+", arr, "===", newArr);

总结：

不论是 forEach 还是 map, 所传入的 item 都是原数组所对应的对象的地址值。

• 当你修改 item 某一个属性后, 指向这个 item 对应的地址值的所有对象都会改变, 此时就会修改原数组;
• 如果你直接将 item 重新赋值, 那 item 就和原数组所对应的对象没有关系了, 不论你如何修改 item, 都不会影响原数组了

上面所说的都是数组中的每个值都是对象的情况, 也可以试试值不是对象的数组, 比如基本类型, 那这样是无论如何也不会修改原数组了, 因为基本类型并没有地址值这一说, 只是将值赋给 item, 他们之间并没有关联关系

借鉴文章：https://zhuanlan.zhihu.com/p/268685817

---

find 函数

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

• find 方法不会改变数组

---

findIndex方法

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数，如果没有符合条件的元素返回 -1

注意事项：

findIndex() 对于空数组，函数是不会执行的，不会改变数组的原始值

filter 函数

filter() 把传入的函数依次作用于每个元素：根据返回值是true还是false决定保留还是丢弃该元素，然后返回剩下的元素

filter() 接收回调函数：

• 第一个参数，表示Array的某个元素
• 回调函数还可以接收另外两个参数，表示元素的位置和数组本身：

filter方法 用于过滤数据 返回一个数组
filter方法接收一个匿名函数，参数就是数组中的item项

---

reduce 函数

reduce方法 有两个参数

1. 参数一：回调方法
2. 参数二：累计的初始值

---

some 函数

1. 用于检测数组中的元素是否满足指定条件

2. 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测

   如果没有满足条件的元素，则返回false

注意事项：

some() 不会对空数组进行检测、不会改变原始数组

---

every 函数

1. 用于检测数组所有元素是否都符合指定条件

2. 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测

   如果所有元素都满足条件，则返回 true。

注意事项：

1. 空数组调用 every方法，返回值就是true
2. every() 不会对空数组进行检测、不会改变原始数组

---

for of 函数

---

二、常用的字符串方法如下：

split()方法

用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组

字符串.split(“分割字符”)

例如：使用字符串的 split 方法分割字符串,以空格分隔 split(’ ') ；引号中间一定记得敲空格！！！

---

replace函数

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

// 使用场景：iphone部分手机 不识别 webp 图片格式
属性.replace(/\.webp/g,'.jpg')

字符串.replace(被替换的字符串， 要替换为的字符串)；

---

includes函数

• 用来判断一个数组是否包含一个指定的值

• 用于判断字符串是否包含指定的子字符串

如果找到匹配的字符串则返回 true，否则返回 false。

注意： includes() 方法区分大小写。

使用场景1：判断url中是否带有 /my/ 请求的是私有的路径 带上header token

// 如果header还需要携带除token以外的参数，发起请求的时候当参数传递就可以了。
let header = { ...params.header };

// 判断url中是否带有 /my/ 请求的是私有的路径  带上header  token
if (params.url.includes('/my/')) {
	// 拼接header  带上 token
	header["Authorization"] = wx.getStorageSync("token")
}

---

三、常用的对象方法如下：

四、总结项目中遇到的数据处理问题

判断某一个数值是否在数组里面

[3,9,10].indexOf(3)

// 数组中是否包含某个值：判断数组initArray里面的值是否在数组checkList中
var initArray = ['1', '41', '4', '3', '6']; 
var checkList = ['0']
var newArray = initArray.map(v => {
    return checkList.includes(v)
})
console.log('是否勾选了', newArray); //  [false, false, false, false, false]

非空判断

 if (!this.ruleForm.ruleName || this.ruleForm.ruleName === '') {
        this.$message({
          message: "规则名称不能为空",
          type: "warning"
        });
        return;
      }

数据拷贝

深拷贝数组

var hwSigningList_copy = JSON.parse(JSON.stringify(this.hwSigningList))

this.hwSigningList_copy = hwSigningList_copy.map(x => {
    return {
        id: x.id,
        imageScript: x.imageScript
    }
})

本地存储

/*
 将json格式的字符串转换为数组或者对象：JSON.parse(json字符串)
 将字面量对象或者数组转换为json格式的字符串：JSON.stringify(对象或者数组)
 存数据：本地存储只能存储字符串
*/
localStorage.setItem(‘key’, JSON.stringify(对象或者数组));

// 取数据：
localStorage.getItem(‘key’) ；
keyArr = JSON.parse(localStorage.getItem(‘key’));

// 清空本地存储数据：
localStorage.removeItem(“key”);

判断数据类型

// 说明返回的是数组和数组里面不为空
if( Array.isArray(res.data.body.data) && res.data.body.data.length > 0){
	
}

数组去重

单个元素去重

利用ES6 Set去重

function unique(arr) {
    return Array.from(new Set(arr))
}

var arr = [1, 2, 3, 4, 5, 2, 1, 9, 0, 5]
console.log(unique(arr));//=>[1, 2, 3, 4, 5, 9, 0]

利用filter去重

var r;
var arr = [1, 2, 3, 4, 5, 2, 1, 9, 0, 5]

r = arr.filter((element, index, self) => {
    return self.indexOf(element) === index;
})
console.log(r)//=>[1, 2, 3, 4, 5, 9, 0]

数组对象去重【重点】

	var arr = [
	        { id: 0, name: '周瑜' },
	        { id: 1, name: '王昭君' },
	        { id: 2, name: '夏侯惇' },
	        { id: 3, name: '夏侯惇' },
	        { id: 4, name: '不知火舞' }
	    ]
	/*
      方法一：数组的reduce方法
      【会更改数组的原始数据】【ie9以下不支持此方法】
      首先确定：数组对象里面的唯一标识，如：name字段
    */
    let newObj = {};
    arr = arr.reduce((preval, curval) => {
        newObj[curval.name] ? '' : newObj[curval.name] = true && preval.push(curval);
        return preval
    }, [])
    console.log('去重arr22', arr);

	/*
      原生js方法：distinct1保留元数据，获取去重后的新数组
    */
    // 方法一 【推荐】
    function distinct1(arr, key) {
        var newobj = {}, newArr = [];
        for (var i = 0; i < arr.length; i++) {
            var item = arr[i];
            if (!newobj[item[key]]) {
                newobj[item[key]] = newArr.push(item);
            }
        }
        return newArr;
    }
    var newArray = distinct1(arr, 'name'); // 首先确定：数组对象里面的唯一标识，如：name字段
    console.log('去重的新数组dis1', newArray);
    console.log('原数组', arr);


    // 方法二 会更改数组的原始数据
    function distinct3(arr, key) {
        for (let i = 0; i < arr.length; i++) {
            for (let j = i + 1; j < arr.length; j++) {
                if (arr[i][key] === arr[j][key]) {
                    arr.splice(j, 1);
                    j = j - 1;
                }
            }
        }
        return arr;
    }
    var newArr = distinct3(arr, 'name')
    console.log('去重后的数组new', newArr);
    console.log('原数组', arr);

去重指定元素

	var arr1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
    function disArray(arr, key) {
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != key) {
                newArr[newArr.length] = arr[i];
            }
        }
        return newArr;
    }
    var oA = disArray(arr1, 0); // 去重零
    console.log('11111',oA);  //=>[2, 6, 1, 77, 52, 25, 7]

累加求和

计算过程：
0 + 11 = 11
11 + 22 = 33
33 + 33 = 结果 66
循环的是回调方法，数组中的每个成员都进入回调，但区别在于每次回调方法返回的值，都会传递到下次回调中 =》累加求和

var array = [
 {
    age: 11, name: 'aaa'
  },
  {
    age: 22, name: 'bbb'
  },
  {
    age: 33, name: 'ccc'
  }
];

// 方法1
var reduce = array.reduce((n, item) => n + item.age, 0)
console.log(reduce)  // 66

// 方法2
var sum = 0;
array.forEach((item) => {
   //遍历age这个字段，并累加
   sum += item.age;
 });
console.log(sum) // 66

获取选中的商品

过滤后的购物车数组

let carList = [
  {
      age: 11, name: 'aaa', checked: false
  },
  {
      age: 22, name: 'bbb', checked: false
  },
  {
      age: 33, name: 'ccc', checked: true
  }
];
let cart = carList.filter(v => v.checked); 
// 返回新数组 [{age: 33, name: 'ccc', checked: true}]

从数组对象中，提取需要的字段

不会改变原数组，返回新数据

const arr = [
    {
        id: 0,
        code: 0,
        name: '0'
    },
    {
        id: 1,
        code: 1,
        name: '1'
    }
]
let newArr = []

// 方法一
newArr = arr.map((item) => {
     return {
         newCode: item.code,
         newName: item.name
     }
 })

// 方法二
 arr.map(item => {
     newArr.push({ value: item.id, name: item.name });
 });
 
// 方法三
arr.forEach(item => newArr.push({
     newCode: item.code,
     newName: item.name
}))
 

单纯提取数组对象中的属性，组成新的数组

const arr = [
    {
        id: 0,
        code: 0,
        name: '0'
    },
    {
        id: 1,
        code: 1,
        name: '1'
    }
]
let newArr = []
newArr = arr.map(v => v.name); // ['0','1']

为数组对象添加新属性

let arr = [
    {
        type: String,
        value: '10'
    },
    {
        type: Object,
        value: {
            name: 'lisi',
            age: '20'
        }
    }
]

// 在数组最前面添加一个对象元素
arr.unshift({
    code: '',
    name: '全部'
})

// 为数组里面的对象添加属性
this.$set(arr[i],"isDisable",false);

// 为数组的每个对象添加属性 isLogin

for(var i in arr) {
    arr[i].isLogin = true;
}
console.log(arr)

//  Object.assign 对象合并
let hwSigningList_array = [];
arr.map((item, index) => {
    hwSigningList_array.push(
        Object.assign(item, { doctorId: '000' })
    )
});

需求：后台返回的是时间戳（单位：秒）；前台需要的时间格式：2022/6/14 11:35:05

const arr = [
   {
        id: 0,
        code: 0,
        name: '0',
        create_time: +new Date()
    },
    {
        id: 1,
        code: 1,
        name: '1',
        create_time: +new Date()
    }
]

let newArr = []
newArr = arr.map(v => {
    return {
        ...v,
        create_time_cn: new Date(v.create_time).toLocaleString()
    }
})

查找数组对象中的item

查找数组item项并做修改

 var list = [
  {
        id: 0,
        name: '00'
    },
    {
        id: 1,
        name: '11'
    }
]

const id = 1;

let item = list.find((item)=>item.id === id)
item.name = '22'
console.log(list); // [{id:0,name:'00'},{id:0,name:'22'}]

根据条件添加属性、修改属性值

let list = [
    {value: 1,name: "周一"},
    {value: 2,name: "周二"},
    {value: 3,name: "周三"},
    {value: 4,name: "周四"},
    {value: 5,name: "周五"},
]

// 判断条件
const id = 1
const attitude = 1

// **得到新数据**
let newList = list.map((item) => {
 if (item.value === id) {
    return {
      ...item,
      className: attitude === 1 ? 'Monday' : '',
    };
  } else {
    return item;
  }
});

选择星期几

let list = [
    {value: 1,name: "周一"},
    {value: 2,name: "周二"},
    {value: 3,name: "周三"},
    {value: 4,name: "周四"},
    {value: 5,name: "周五"},
]

choose (id) {
    let index = list.findIndex((value, index, arr) => {
        return value.value == id;
    });
    console.log(list[index].name)
}
choose(1); // 周一

判断 当前的商品是否已经存在于 购物车

let index = cart.findIndex(v=>v.goods_id===this.GoodsInfo.goods_id);
if(index === -1){ //当前商品在购物车中不存在 }

用对象的属性查找数组里的对象[重点]

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

//=> 方法1
function isCherries(fruit) {
  return fruit.name === 'cherries';
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }

//=> 方法2
var list = [
    {
        id: 0,
        name: '00'
    },
    {
        id: 1,
        name: '11'
    }
]
let item = list.find(itm => itm.id == 1)
console.log(item.name); // 11

判断商品是否被收藏

/*
  数组中至少有一个为true
  数组的some方法：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
*/
let collect = [
  {
        id: 0,
        goods_id: '000',
        name: '商品0'
    },
    {
        id: 1,
        goods_id: '111',
        name: '商品1'
    }
]
let isCollect = collect.some(v=>v.goods_id === '000')
console.log('isCollect',isCollect); // true

过滤数据

// 例如：从上面数据中过滤一个name为ccc的数据
// 只要filter方法的回调函数中的比较运算符的结果为true，
// 那么符合条件的对象就会被包在一个数组返回，比较结果为false的就被过滤掉了

var array = [
 {
    age: 11, name: 'aaa'
  },
  {
    age: 22, name: 'bbb'
  },
  {
    age: 33, name: 'ccc'
  }
];
var filter = array.filter(item => item.name === 'ccc')
console.log(filter) // [{age: 33, name: "ccc"}]

根据唯一表示进行数据分组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = [
        {
          fieldName: '合计底薪',
          overallSort: 5,
          groupFieldSort: 1,
          groupType: 2,
          groupName: '应发合计'
        },
        {
          fieldName: '基本工资',
          overallSort: 5,
          groupFieldSort: 2,
          groupType: 2,
          groupName: '应发合计'
        },
        {
          fieldName: '其他补助',
          overallSort: 5,
          groupFieldSort: 6,
          groupType: 2,
          groupName: '应发合计'
        },
        {
          fieldName: '社保',
          overallSort: 6,
          groupFieldSort: 1,
          groupType: 3,
          groupName: '应扣合计'
        },
        {
          fieldName: '公积金',
          overallSort: 6,
          groupFieldSort: 3,
          groupType: 3,
          groupName: '应扣合计'
        }
      ]

      console.log(combineGroup(arr))

      function combineGroup(arr) {
        const res = {}
        arr.forEach(e => {
          if (!res[e.groupType]) {
            res[e.groupType] = {
              groupType: e.groupType,
              groupName: e.groupName,
              overallSort: e.groupName,
              list: [
                {
                  fieldName: e.fieldName,
                  groupFieldSort: e.groupFieldSort
                }
              ]
            }
          } else {
            res[e.groupType].list.push({
              fieldName: e.fieldName,
              groupFieldSort: e.groupFieldSort
            })
          }
        })
        let res2 = Object.values(res).map(e => e)
        console.log('===>',res2)

        /*
          预期效果 arr
            根据 groupType 进行分组, 将同一分组数据放入list
        */
        // const arr = [
        //   {
        //     groupType: 2,
        //     groupName: '应发合计',
        //     overallSort: 5,
        //     list: [
        //       {
        //         fieldName: '合计底薪',
        //         groupFieldSort: 1
        //       },
        //       {
        //         fieldName: '基本工资',
        //         groupFieldSort: 2
        //       },
        //       {
        //         fieldName: '其他补助',
        //         groupFieldSort: 6
        //       }
        //     ]
        //   },
        //   {
        //     groupType: 3,
        //     groupName: '应扣合计',
        //     overallSort: 6,
        //     list: [
        //       {
        //         fieldName: '社保',
        //         groupFieldSort: 1
        //       },
        //       {
        //         fieldName: '公积金',
        //         groupFieldSort: 3
        //       }
        //     ]
        //   }
        // ]

        return arr
      }
    </script>
  </body>
</html>