Es6数据转换一些小技巧

Posted 2021-10-05 hello，是翠花呀

有时候后端返回的数据格式不能直接使用，这时前端就需要额外处理，我记录了一些常见的数据处理方式，如果有其他的小伙伴们可以下方评论。

• 1.a对象数组对象映射为b对象数组，map方法多快好省

const a = [
  { name: "li", age: 24, sex: "女" },
  { name: "lizi", age: 24, sex: "女" },
];

const b = a.map((item) => item.name); // [ 'li', 'lizi' ]
const c = a.map((item) => ({ ...item, add: "添加项" }));
// [
//   { name: 'li', age: 24, sex: '女', add: '添加项' },
//   { name: 'lizi', age: 24, sex: '女', add: '添加项' }
// ]

• 2.判断多个包含条件，includes

row.status = 1
// old
row.status === 1 || row.status === 2 || row.status === 3

// new
[1, 2, 3].includes(row.status) // true

• 3.获取对象的键名，keys

Object.keys({a: 1, b: 2, c: 3}) // ['a', 'b', 'c']

• 4.获取对象的键值，values

Object.values({a: 1, b: 2, c: 3}) // ['1', '2', '3']

• 5.过滤数组某些值，filter

const arr = [{a: 1, b: 2}, {a: 4, b: 5}, {a: '1', b: 2}]

const q = arr.filter(item => item.a > 1) // [{a: 4, b: 5}]

const w = arr.filter(item => item.a === '1') // [{a: '1', b: 2}]

• 6.将数组中某一项a替换成b, splice

let arr = [{a: 1, b: 2, c: 3}, {a: 11, b: 22, c: 33}]

arr.splice(1, 1, {a: 'a', b: 'b', c: 'c'})  // splice(要操作的选项下标index，n是删除从index开始的多少项0是不删除，添加的新项至index)

console.log(arr)  // [ { "a": 1, "b": 2, "c": 3},{"a": "a","b": "b","c": "c"}]  会改变原数组

• 7.截取从数组a位置到b位置的项，slice

[{a: 1, b: 2, c: 3}, {a: 11, b: 22, c: 33}].slice(0,2)  // [{a: 1, b: 2, c: 3}, {a: 11, b: 22, c: 33}]

[{a: 1, b: 2, c: 3}, {a: 11, b: 22, c: 33}].slice(1,2)  // [{a: 11, b: 22, c: 33}]

[{a: 1, b: 2, c: 3}, {a: 11, b: 22, c: 33}].slice(0,1) // [{a: 1, b: 2, c: 3}]

• 8.对象数组a与对象数组b取交集，filter + some

const a = [{id: 1, name: 'zhang', age: 23}, {id: 11, name: 'li', age: 33}, {id: 3, name: 'wang', age: 43}]
const b = [{id: 11, name: 'li', age: 33}, {id: 3, name: 'wang', age: 43}]

a.filter(item => b.some(ite => ite.id === item.id)) // [{id: 11, name: 'li', age: 33}, {id: 3, name: 'wang', age: 43}]

• 9.字符串数组去重：filter + indexOf，对象数组去重：filter + findIndex

let aa = ['a', 'b', 'c', 'a', 'd', 'b']

let bb = aa.filter((item, index, self) => self.indexOf(item, 0) === index)
// var bb = aa.filter((item, index, self) => self.findIndex(ite => ite === item) === index)

console.log(bb)  // [ 'a', 'b', 'c', 'd' ]

let a = [
  { id: 1, name: "zhang", age: 23 },
  { id: 11, name: "li", age: 33 },
  { id: 1, name: "wang", age: 43 },
  { id: 1, name: "wang", age: 43 },
  { id: 1, name: "wang", age: 43 },
  { id: 11, name: "wang", age: 43 },
  { id: 5, name: "wang", age: 43 },
]

let b = a.filter((item, index, self) => self.findIndex(ite => ite.id === item.id) === index)

console.log(b)
// [
//   { id: 1, name: 'zhang', age: 23 },
//   { id: 11, name: 'li', age: 33 },
//   { id: 5, name: 'wang', age: 43 }
// ]

• 10.数组转字符串，join

[1, 2, 3, 4].join(',')  // '1,2,3,4'


let a = [
  { id: 1, name: "zhang", age: 23 },
  { id: 11, name: "li", age: 33 },
  { id: 1, name: "wang", age: 43 },
  { id: 1, name: "wang", age: 43 },
  { id: 1, name: "wang", age: 43 },
  { id: 11, name: "wang", age: 43 },
  { id: 5, name: "wang", age: 43 },
]

a.map(item => item.name).join('、')   // 'zhang、li、wang、wang、wang、wang、wang'

11.判断数组的每一项不为空，every

[1, 3, 4, 5].every(item => item !== '') // true
[1, 3, 4, 5, ''].every(item => item !== '') // false
[1, 3, 4, 5, undefined].every(item => item !== undefined) // false

[1, 3, 4, 5, ''].every(item => item) // false
[1, 3, 4, 5, undefined].every(item => item) // false

// 不能判断为empty的数组项
[1, 3, 4, , 5, ].every(item => item) // true

12.判断数组存在一项符合/不符合条件，some

[1, 3, 4, 5].some(item => item !== '') // true
[1, 3, 4, 5, ''].some(item => item !== '') // true
[1, 3, 4, 5, undefined].some(item => item !== undefined) // true

[1, 3, 4, 5, ''].some(item => item) // true
[1, 3, 4, 5, undefined].some(item => item) // true

// 不能判断为empty的数组项
[1, 3, 4, , 5, ].some(item => item) // true

13.累加，reduce

[1, 2, 3, 4, 5].reduce((prev, curr) => prev + curr)  // 15

[{age: 12}, {age: 23}, {age: 2}, {age: 13}, {age: 3}].reduce((prev, curr) => prev + curr.age, initialValue)  // 53

14.检查值是否为NaN， isNaN、Object.is

// 因为
NaN === NaN // false

// 所以
isNaN(NaN) // true

// 但是
isNaN(undefined) // true

// 所以
Object.is(NaN, NaN) // true
Object.is(NaN, undefined) // false