JavaScript数据转换一些小技巧

Posted 2023-02-27 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