ES6 常用算法，数据处理及Vue+element应用场景

1.获取相同ID下的对象的值
应用场景；vue+element select 回显在table中处理 || 后台传label值回显的时候

export function mapOptionLabel(data, value) {
  let item = data.find(item => item.value === value);
  if (item) {
    return item.label;
  }
  return "-";
}

2.过滤掉两个数组中对象id值相等的项
方法1

let arr1=[{id:1,name:'老大'},{id:2,name:'老二'}]
let arr2=[{id:1,name:'老大'},{id:3,name:'老三'},{id:4,name:'老四'},{id:5,name:'老五'}]
let add=arr2.filter(item=>!arr1.some(ele=>ele.id===item.id))

方法2

const arr1 = [{ id: 1, name: '老大' }, { id: 2, name: '老二' }];

const arr2 = [{ id: 1, name: '老大' }, { id: 3, name: '老三' }];

// 获取到arr1的所有id集合

let arr1Ids = arr1.map(item => item.id);

// 过滤arr2中不包含arr1相同的id数组。

const result = arr2.filter(item => !arr1Ids.includes(item.id));

console.log(result);

3.element table表格回显数据

let ids = this.statementIds.split(',') // a

let tableId = [] // b

this.tableData.forEach(res=>{ //把表格里所有的id加入到b里

tableId.push(res.billId.toString())

})

for(let i = 0;i<tableId.length;i++){ //对b循环 如果b里面有a（a是被选中的行） 则把索引代入到first函数里 让这些行的复选框选中

if(tableId.indexOf(ids[i])>=0){

this.first([this.tableData[tableId.indexOf(ids[i])]])

}

}

4.校验含有某个字符串

['create', 'edit'].includes(pageAction)
5.过滤两个数组中相同项，生成一个新数组
方法1

let a = [a, b, c, d, e];
let b = [c, d, f, g, h];
    
let result = b.filter(item => !a.some(e => e === item));
//result: [f, g, h]

方法2

a.filter(item=>b.indexOf(item)==-1)

6.element,tree结构回显未选择的数据
我司后台给了两个数组对象，tree结构一个b；选中的数据为a
需要对比b中id和a中id相等的时候过滤掉

a = [{id:1}]
b = [{id:1,name : 'name'}]
`result = b.filter(item => !a.some(ele=>ele.id===item.id));`

7.ES6数组排重在重新排序

let arr1=[1,3,3,5,9,4,6,7];
let arr=[...new Set(arr1)];
let arrSort = arr.sort((a,b) => {
  return a-b
})

console.log(arrSort);

//打印出来的是1，3，4，5，6，7，9

数组去重
let arr1=[1,3,3,5,9,4,6,7];
Array.from(new Set(array))
//打印出来的是1, 3, 5, 9, 4, 6, 7

8.拍平多维数组

const arr = [1, [2, 'Mary'], 3, ['blog', '1', 2, 3]]
const flatArray = [].concat(...arr)

console.log(flatArray)
> Result: (8) [1, 2, "Mary", 3, "blog", "1", 2, 3]

上述方法只适用于二位，多维数组拍平适用递归拍平

function flattenArray(arr) {  
    const flattened = [].concat(...arr);
    return flattened.some(item => Array.isArray(item)) ? flattenArray(flattened) : flattened;
}

const array = [1, [2, 'Mary'], 3, [['blog', '1'], 2, 3]]
const flatArr = flattenArray(array)
console.log(flatArr)
> Result: (8) [1, 2, "Mary", 3, "blog", "1", 2, 3]

9.合并对象

// 合并数组中的对象
const array = [
    {
        name: '玛丽',
        email: '[e-mail]'
    },
    {
        name: 'Alle',
        email: '[e-mail]'
    }
]
const result = array.reduce((accumulator, item) => {
    return {
        ...accumulator,
        [item.name]: item.email
    }
}, {})
> Result: {玛丽: "[e-mail]", Alle: "[e-mail]"}

注意es6 的map return 不能跳出循环
some return true 跳出循环