数据处理

青旅半醒 2022-12-28 11:24 182阅读 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]

### 数组对象去重【重点】 ###

> 去重指定元素

## 选项：A/B/C等，至少选中一个 ##

// 数组中是否包含某个值：判断数组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]
    
    /* 数组中至少有一个为true 数组的some方法：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。 */
    var even = function (item, index, newArray) { 
        return item === true;
    };
    console.log(newArray.some(even)); //true

## 接口数据过滤 ##

// 数组截取
    res.data.body.data.forEach(i => { 
        this.tow_list.push({ 
            value: i.Code,
            name: i.Name
        });
    });
    
    // 在数组最前面添加一个对象元素
    this.orderSource.unshift({ 
        code: '',
        name: '全部'
    })
    
    // 为数组里面的对象添加属性
    this.$set(this.list[i],"isDisable",false);
    
    // 为数组的每个对象添加属性 isLogin
    var arr = [
        { 
            type: String,
            value: '10'
        },
        { 
            type: Object,
            value: { 
                name: 'lisi',
                age: '20'
            }
        }
    ]
    
    for(var i in arr) { 
        arr[i].isLogin = true;
    }
    console.log(arr)
    
    
    // Object.assign 对象合并
    let hwSigningList_array = [];
    list.map((item, index) => { 
        hwSigningList_array.push(
            Object.assign(item, {  doctorId: this.ruleForm.id })
        )
    });

## 判断数据类型 ##

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

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

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

## 非空判断 ##

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”);

## 常用的方法 ##

### some函数 ###

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

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

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

注意事项：

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

> 场景1：商品的收藏按钮

// 1.获取缓存中的商品收藏数据
    let collect = wx.getStorageSync("collect")|| [];
    // 2.判断当前商品是否被收藏
    let isCollect = collect.some(v=>v.goods_id===this.GoodsInfo.goods_id);

### every函数 ###

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

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

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

注意事项：

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

> 场景1：全选功能

const allChecked = cart.length ? cart.every(v => v.checked) : false;

### forEach函数 ###

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

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

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

> 抽离数组的某些元素，组合成一个新数组。数组的每个对象都含有抽离出来的属性

let array = [
        { 
            goods_id: 0,
            num: 10,
            goods_price: 100,
            goos: "gooos"
        },
        { 
            goods_id: 1,
            num: 20,
            goods_price: 200,
            goos1: "goo1os"
        },
        { 
            goods_id: 2,
            num: 30,
            goods_price: 300,
            gosos: "goodaos"
        }
    ]
    
    let goods = [];
    array.forEach(v=>goods.push({ 
        goods_id: v.goods_id,
        goods_number: v.num,
        goods_price: v.goods_price
    }))
    console.log(goods);//=> [{…}, {…}, {…}]

> 求和

//定义
    	var sum = 0;
    	this.list.forEach((item) => { 
    	   //遍历prodAllPrice这个字段，并累加
    	   sum += item.prodAllPrice;
    	 });
    	//返回
    	this.sum = sum;

### 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")
    }

### filter ###

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

filter()接收的回调函数

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

> 在一个Array中，删掉偶数，只保留奇数

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
    var r = arr.filter( (x)=>{ 
        return x % 2 !== 0;
    });
    r; // [1, 5, 9, 15]

> 把一个Array中的空字符串删掉

var arr = ['A', '', 'B', null, undefined, 'C', ' '];
    var r = arr.filter( (s)=>{ 
        return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
    });
    arr; // ['A', 'B', 'C']

> 获取选中的商品

// 过滤后的购物车数组
    cart = cart.filter(v => v.checked);

> 基础用法示例

var arr = ['A', 'B', 'C'];
    var r = arr.filter(function (element, index, self) { 
        console.log(element); // 依次打印'A', 'B', 'C'
        console.log(index); // 依次打印0, 1, 2
        console.log(self); // self就是变量arr
        return true;
    });

> 代码演示

/* filter方法 用于过滤数据 返回一个数组 filter方法接收一个匿名函数，参数就是数组中的item项， 例如：从上面数据中过滤一个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"}]

### findIndex方法 ###

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

注意事项：

1.  findIndex() 对于空数组，函数是不会执行的
2.  `findIndex()`并没有改变数组的原始值

> 选择星期几

choose (id) { 
        let index = this.list.findIndex((value, index, arr) => { 
            return value.value == id;
        });
        console.log(this.list[index].name)
    }
    choose(1);
    
    list: [
        { value: 1,name: "周一"},
        { value: 2,name: "周二"},
        { value: 3,name: "周三"},
        { value: 4,name: "周四"},
        { value: 5,name: "周五"},
    ]

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

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

### map ###

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

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

*  参数一：每个item项
 *  参数二：数组的索引
 *  参数三：调用map方法的数组本身，也就是数组array

`注意事项`

1.  `map()`不会对空数组进行检测
2.  `map()`不会改变原始数组

// 方法一
    this.orderSource = res.data.body.data.map(x => { 
        return { 
            code: x.code,
            name: x.name
        }
    })
    
    // 方法二
     res.data.body.data.map(i => { 
         this.list.push({  value: i.id, name: i.name });
     });

场景1：对象展开原样返回；添加新属性`create_time_cn`

需求：后台返回的是时间戳（单位：秒）；前台需要的时间格式：2019/8/12 下午9:36:25

array.map(v=>({ ...v,create_time_cn:(new Date(v.create_time*1000).toLocaleString())}))

### reduce ###