记录下项目中js一直遇到且用了笨办法的一些简便数组方法

1. 根据某个值来获取对象数组中符合这个属性的对象的索引下标(findIndex)  
   之前一直是在遍历前给定一个变量,然后遍历数组时来获取当前索引赋值给这个变量来获取下标;
  const tar = 1
  const arr = [
    { name:'zs', id:0 },
    { name:'ls', id:1 },
    { name:'ww', id:2 }
  ]
  const idx = arr.findIndex(item=>item.id === tar );    // 1
  console.log(arr.splice(idx ,1))  // [{ name:'ls', id:1 }]
  // arr: [{ name:'zs', id:0 }, { name:'ww', id:2 }]

  如果findIndex未找到匹配的对象,则返回-1
 const idx = arr.findIndex(item=>item.id === 5 );    // -1

----------------------------------------------------------------------------------

2. 根据某个属性来匹配对象数组中符合要求的对象(find)

  const arr = [
    { name:'zs', id:0 },
    { name:'ls', id:1 },
    { name:'ww', id:2 }
  ]
  const obj = arr.find(item=> item.id === 1);
  console.log(obj)  // { name: 'ls', id: 1 }
  
  如果find未匹配到符合要求的元素,则返回undefined

----------------------------------------------------------------------------------

3. map:项目中用的是比较多的,但是之前的用法有点问题,确保返回一个新数组,否则用forEach比较合适
  const arr = [
      { name: 'aa', id: 0, love: 'learn' },
      { name: 'bb', id: 1, love: 'play' },
      { name: 'cc', id: 2, love: 'learn' },
      { name: 'dd', id: 3, love: 'play' },
      { name: 'ee', id: 4, love: 'game' },
      { name: 'ff', id: 5, love: 'game' },
      { name: 'gg', id: 6, love: 'game' },
  ]
  // 匹配到所有love为game的对象并改为为reset
  const newArr = arr.map(item => {
      if (item.love === 'game') return { ...item, love: 'reset' };
      else return item;
  })
  console.log(newArr);  
//  [
//    { name: 'aa', id: 0, love: 'learn' },
//    { name: 'bb', id: 1, love: 'play' },
//    { name: 'cc', id: 2, love: 'learn' },
//    { name: 'dd', id: 3, love: 'play' },
//    { name: 'ee', id: 4, love: 'reset' },
//    { name: 'ff', id: 5, love: 'reset' },
//    { name: 'gg', id: 6, love: 'reset' }
//  ]


----------------------------------------------------------------------------------


4. 根据对象数组中某个属性来统计该类对象在数组中出现的次数  (reduce)

  const arr = [
    { name:'zs', id:0, love:'learn' },
    { name:'ls', id:1, love:'play' },
    { name:'ww', id:2, love:'learn' },
    { name:'ss', id:3, love:'play' },
    { name:'zz', id:4, love:'game' }
  ]
const num = arr.reduce((pre, cur)=>{
  return pre + (cur.love === 'learn' ? 1 : 0)
}, 0);
或者这么写:
const num = arr.reduce((pre, cur)=>pre + (cur.love === 'learn' ? 1 : 0), 0);
reduce方法接收两个参数,第一个是迭代回调,第二个是初始值
解析

const num = arr.reduce((pre, cur)=>{          
  return pre + (cur.love === 'learn' ? 1 : 0)
}, 0);
pre: previous/前值; cur: current/当前值  
迭代回调返回根据当前索引下的对象的属性做判断然后返回一个你想获取的属性

----------------------------------------------------------------------------------

e.g:
const arr = [
    { name: 'zs', id: 0, love: 'learn' },
    { name: 'ls', id: 1, love: 'play' },
    { name: 'ww', id: 2, love: 'learn' },
    { name: 'ss', id: 3, love: 'play' },
    { name: 'zz', id: 4, love: 'game' },
    { name: 'aa', id: 5, love: 'game' },
    { name: 'bb', id: 6, love: 'game' },
]
const num = arr.reduce((pre, cur) => {
    return pre + (cur.love === 'game' ? cur.id : 0)
}, 0);
console.log(num);    // 15
pre初始值为0,当每个对象的love属性为 'game'时,累加这个对象的id

----------------------------------------------------------------------------------

const arr = [
    { name: 'aa', id: 0, love: 'learn' },
    { name: 'bb', id: 1, love: 'play' },
    { name: 'cc', id: 2, love: 'learn' },
    { name: 'dd', id: 3, love: 'play' },
    { name: 'ee', id: 4, love: 'game' },
    { name: 'ff', id: 5, love: 'game' },
    { name: 'gg', id: 6, love: 'game' },
]
const num = arr.reduce((pre, cur) => {
    if (cur.love === 'game') pre.push(cur.name);
    return pre;
}, []);

console.log(num);  // ['ee', 'ff', 'gg']
给定初始值一个空数组,
当每次迭代时,当前对象的love属性为game时,向前一次的数组中添加当前对象的name属性
并返回这个数组作为下一次迭代的初始值

const num = arr.reduce((pre, cur) => {
    return (pre += cur.id);
}, 0)
console.log(num);  // 21

-----------------------------------------------------------------------------------

isNaN() 函数用于检查其参数是否是非数字值。    (可以用于判断时间或者时间戳)
如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。(如果字符串是纯数字会先转换成number)
isNaN(new Date('2023/1/31 16:19:22'))    // false
isNaN(12312312313123)                    // false
isNaN('123')                             // false
isNaN('ok')                              // true
isNaN(null)                              // false  
isNaN(NaN)                               // true
isNaN({})                                // true
isNaN([])                                // false
isNaN([1])                               // false
isNaN([1,2])                             // true      可以判断是先对参数进行Number转换
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容