房产头条

Radash库使用说明——数组方法篇（全）

2024-04-30 13:49 由 雾散声声慢 发表于 #前端开发

写在前面

tips：点赞 + 收藏 = 学会！

  • 本文包含radash中数组相关的所有方法说明 + 使用示例 + 思维导图查看
  • 这边会整理出一份数组相关方法的使用大纲（不含源码解析），方便大家查阅使用；
    • 作者会按照大类进行整理分享，本次也会同步给出Array所有方法的思维导图；
    • 所有方法整理完毕后，作者会整理出一份Radash库相关的所有方法的思维导图，方便大家查看使用。
  • 本文会把每个方法做标题展示，也方便大家直接在本文中阅读对应方法内容。

数组方法汇总思维导图

  • xmind文件链接可访问作者的 github地址 下载；
    • github 上还有作者之前学习前端的一些笔记，大家感兴趣可以查看。
  • 访问外网不方便的同学，可以访问gitee地址作者也有同步上传。

alphabetical：把对象数组按照选定key的value的字母顺序排列

  1. 用法说明
    • 参数：目标对象数组、用于排序的属性的回调函数、第三个参数可选（不传是升序排序，传入desc字符则表示降序排序）；
    • 返回值：排序后的数组。
  2. 使用代码示例：
    import { alphabetical } from 'radash'

const ig = [
  {
    name: 'ning',
    power: 100
  },
  {
    name: 'rookie',
    power: 98
  },
  {
    name: 'jkl',
    power: 95
  },
  {
    name: 'theshy',
    power: 100
  }
]

// 这里输出的依然是对象数组，这里简单表示
alphabetical(ig, g => g.name) // => [jkl, ning, rookie, theshy]  
alphabetical(ig, g => g.name, 'desc') // => [theshy, rookie, ning, jkl]  

boil：找出对象数组中满足条件的对象

  1. 用法说明：
    • 参数：目标对象数组、条件函数；
    • 返回值：满足条件的对象。
  2. 使用代码示例：
    import { boil } from 'radash'

const rng = [
  {
    name: 'Uzi',
    power: 100
  },
  {
    name: 'Xiaohu',
    power: 98
  },
  {
    name: 'Ming',
    power: 72
  }
]
boil(gods, (a, b) => (a.power > b.power ? a : b))  // => { name: 'Uzi', power: 100 }
boil(gods, (a, b) => (a.power < b.power ? a : b))  // => { name: 'Ming', power: 72 }

cluster：把一个数组尽量均匀的分成多个数组

  1. 用法说明：
    • 参数：目标数组、分组个数n；
    • 返回值：分组后的二维数组。
  2. 使用代码示例：
    import { cluster } from 'radash'

const gods = ['Ra', 'Zeus', 'Loki', 'Vishnu', 'Icarus', 'Osiris', 'Thor', 'Apollo', 'Artemis', 'Athena']

cluster(gods, 3)
// => [
//   [ 'Ra', 'Zeus', 'Loki' ],
//   [ 'Vishnu', 'Icarus', 'Osiris' ],
//   ['Thor', 'Apollo', 'Artemis'],
//   ['Athena']
// ]

counting：统计对象数组中每个唯一标识符的出现次数

  1. 用法说明：
    • 参数：目标对象数组、条件函数（内部是传入目标对象，返回对象身上的某一项——根据这项来做统计）；
    • 返回值：统计对象。
  2. 使用代码示例：
    import { counting } from 'radash'

const skt = [
  {
    name: 'Ra',
    culture: 'egypt'
  },
  {
    name: 'Zeus',
    culture: 'greek'
  },
  {
    name: 'Loki',
    culture: 'greek'
  }
]

counting(gods, g => g.culture) // => { egypt: 1, greek: 2 }

diff：返回数组 1 中出现但是没在数组 2 中出现的项

  1. 用法说明：
    • 参数：目标数组1、目标数组2；
    • 返回值：包含符合项的数组。
  2. 使用代码示例：
    import { diff } from 'radash'

const oldWorldGods = ['rng', 'uzi']
const newWorldGods = ['vishnu', 'uzi']

diff(oldWorldGods, newWorldGods) // => ['rng']

first：获取数组第一项，不存在返回默认值

  1. 使用说明
    • 参数：目标数组，或者传递两个参数空数组和默认值；
    • 返回值：传目标数组则返回目标数组的第一项，传空数组和默认值则返回默认值。
  2. 使用代码示例
    import { first } from 'radash'

const gods = ['lufee', 'loki', 'zeus']

first(gods) // => 'lufee'
first([], 'zuoluo') // => 'zuoluo'

flat：数组扁平化 —— 把包含多个数组的数组转为一个数组（注意不会递归）

  1. 使用说明

    • 参数：包含多个数组的数组；
    • 返回值：降低一维后的数组；
    • 注意：不会递归降维，只能降一维。

  2. 使用代码示例

    import { flat } from 'radash'

const gods = [['shy', 'ning'], ['jkl']]

flat(gods) // => [shy, ning, jkl]

fork：按条件将数组拆分成两个数组，满足条件的一个，不满足条件的一个

  1. 使用说明
    • 参数：目标数组，条件函数；
    • 返回值：返回两个数组，一个保存满足条件的项，另一个保存不满足条件的项。
  2. 使用代码示例
    import { fork } from 'radash'

const gods = [
  {
    name: 'Uzi',
    power: 100
  },
  {
    name: 'Xiaohu',
    power: 98
  },
  {
    name: 'Ming',
    power: 72
  },
  {
    name: 'Mlxg',
    power: 100
  }
]

const [finalGods, lesserGods] = fork(gods, f => f.power > 90) // [[Uzi, Xiaohu, Mlxg], [Ming]]

group：根据条件函数指定的key构建一个统计对象，key为指定的key有哪些value，value为对应对象

  1. 使用说明
    • 参数：对象数组、条件函数；
    • 返回值：统计对象
  2. 使用代码示例
    import { group } from 'radash'

const fish = [
  {
    name: 'Marlin',
    source: 'ocean'
  },
  {
    name: 'Bass',
    source: 'lake'
  },
  {
    name: 'Trout',
    source: 'lake'
  }
]

const fishBySource = group(fish, f => f.source) // => { ocean: [marlin], lake: [bass, trout] }

intersects：判断两个数组是否有公共项，返回一个布尔值

  1. 使用说明
    • 参数：数组1，数组2，可选条件函数（用于提取随机标识符，对对象数组进行操作时）；
    • 返回值：有返回true，否则返回false。
  2. 使用代码示例
    import { intersects } from 'radash'

const oceanFish = ['tuna', 'tarpon']
const lakeFish = ['bass', 'trout']

intersects(oceanFish, lakeFish) // => false

const brackishFish = ['tarpon', 'snook']

intersects(oceanFish, brackishFish) // => true

iterate：把一个函数迭代执行指定次数

  1. 使用说明
    • 参数：迭代次数、每次迭代调用的函数、迭代初始值。
    • 返回值：返回最终一次循环迭代的值。
  2. 使用代码示例
    import { iterate } from 'radash'

const value = iterate(
  4,
  (acc, idx) => {
    return acc + idx
  },
  0
) // => 10

last：输出数组的最后一项，如果数组为空则输出传入的默认值

  1. 使用说明
    • 参数：目标数组，或者空数组和默认值。
    • 返回值：数组最后一项，如果数组为空则输出传入的默认值。
  2. 使用代码示例
    import { last } from 'radash'

const fish = ['marlin', 'bass', 'trout']

const lastFish = last(fish) // => 'trout'
const lastItem = last([], 'bass') // => 'bass'

list：创建包含特定项的数组

  1. 使用说明
    • 参数：start、end、值，步长。
    • 返回值：从start开始遍历到end，输出一个数组，包含特定项（值）的数组。
  2. 使用代码示例
    import { list } from 'radash'

list(3)                  // [0, 1, 2, 3]
list(0, 3)               // [0, 1, 2, 3]
list(0, 3, 'y')          // [y, y, y, y]
list(0, 3, () => 'y')    // [y, y, y, y]
list(0, 3, i => i)       // [0, 1, 2, 3]
list(0, 3, i => `y${i}`) // [y0, y1, y2, y3]
list(0, 3, obj)          // [obj, obj, obj, obj]
list(0, 6, i => i, 2)    // [0, 2, 4, 6]

max：获取对象数组中指定标识符最大的项

  1. 使用说明
    • 参数：目标对象数组、指定标识符的回调函数。
    • 返回值：符合条件的对象。
  2. 使用代码示例
    import { max } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105,
    source: 'ocean'
  },
  {
    name: 'Bass',
    weight: 8,
    source: 'lake'
  },
  {
    name: 'Trout',
    weight: 13,
    source: 'lake'
  }
]

max(fish, f => f.weight) // => {name: "Marlin", weight: 105, source: "ocean"}

merge：合并数组中符合条件的项，并且会覆盖第一个数组

  1. 使用说明
    • 参数：数组1、数组2、条件函数。
    • 返回值：合并覆盖后的数组。
  2. 使用代码示例
    import { merge } from 'radash'

const gods = [
  {
    name: 'Zeus',
    power: 92
  },
  {
    name: 'Ra',
    power: 97
  }
]

const newGods = [
  {
    name: 'Zeus',
    power: 100
  }
]

merge(gods, newGods, f => f.name) // => [{name: "Zeus" power: 100}, {name: "Ra", power: 97}]

min：获取对象数组中指定标识符最小的项

  1. 使用说明
    • 参数：目标对象数组、指定标识符的条件函数。
    • 返回值：符合条件的的项
  2. 使用代码示例
    import { min } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105,
    source: 'ocean'
  },
  {
    name: 'Bass',
    weight: 8,
    source: 'lake'
  },
  {
    name: 'Trout',
    weight: 13,
    source: 'lake'
  }
]

min(fish, f => f.weight) // => {name: "Bass", weight: 8, source: "lake"}

objectify：根据函数映射的键与值把数组转换为字典对象

  1. 使用说明
    • 参数：目标对象数组、条件函数1用于提取键、[条件函数2用于提取值]
    • 返回值：字典对象
  2. 使用代码示例
    import { objectify } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105
  },
  {
    name: 'Bass',
    weight: 8
  },
  {
    name: 'Trout',
    weight: 13
  }
]

objectify(fish, f => f.name) // => { Marlin: [marlin object], Bass: [bass object], ... }
objectify(
  fish,
  f => f.name,
  f => f.weight
) // => { Marlin: 105, Bass: 8, Trout: 13 }

range：根据步长生成一个数值范围内的迭代值

  1. 使用说明
    • 参数：起始值、[结束值]、[迭代函数]、步长。
    • 返回值：用在for循环中循环输出处理的结果值。
  2. 使用代码示例
    import { range } from 'radash'

range(3)                  // yields 0, 1, 2, 3
range(0, 3)               // yields 0, 1, 2, 3
range(0, 3, 'y')          // yields y, y, y, y
range(0, 3, () => 'y')    // yields y, y, y, y
range(0, 3, i => i)       // yields 0, 1, 2, 3
range(0, 3, i => `y${i}`) // yields y0, y1, y2, y3
range(0, 3, obj)          // yields obj, obj, obj, obj
range(0, 6, i => i, 2)    // yields 0, 2, 4, 6

for (const i of range(0, 200, 10)) {
  console.log(i) // => 0, 10, 20, 30 ... 190, 200
}

for (const i of range(0, 5)) {
  console.log(i) // => 0, 1, 2, 3, 4, 5
}

replaceOrAppend：替换对象数组中的项或是追加项（条件函数不满足时追加）；

  1. 使用说明
    • 参数：被替换数组、用来的替换的数组、条件函数。
    • 返回值：替换或者追加后的数组。
  2. 使用代码示例
    import { replaceOrAppend } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105
  },
  {
    name: 'Salmon',
    weight: 19
  },
  {
    name: 'Trout',
    weight: 13
  }
]

const salmon = {
  name: 'Salmon',
  weight: 22
}

const sockeye = {
  name: 'Sockeye',
  weight: 8
}

replaceOrAppend(fish, salmon, f => f.name === 'Salmon') // => [marlin, salmon (weight:22), trout]
replaceOrAppend(fish, sockeye, f => f.name === 'Sockeye') // => [marlin, salmon, trout, sockeye]

replace ：查找指定项，并用传入的去替换

  1. 使用说明
    • 参数：对象数组1、用于替换的对象、条件函数。
    • 返回值：替换目标项后的原始数组副本（新数组）。
  2. 使用代码示例
    import { replace } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105
  },
  {
    name: 'Bass',
    weight: 8
  },
  {
    name: 'Trout',
    weight: 13
  }
]

const salmon = {
  name: 'Salmon',
  weight: 22
}

// read: replace fish with salmon where the name is Bass
replace(fish, salmon, f => f.name === 'Bass') // => [marlin, salmon, trout]

select ：对数组同时进行过滤和映射，筛选和转换数组中的元素；

  1. 使用说明
    • 参数：对象数组、映射条件函数、过滤条件函数。
    • 返回值：过滤完后的映射值组成的数组。
  2. 使用代码示例
    import { select } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105,
    source: 'ocean'
  },
  {
    name: 'Bass',
    weight: 8,
    source: 'lake'
  },
  {
    name: 'Trout',
    weight: 13,
    source: 'lake'
  }
]

select(
  fish,
  f => f.weight,
  f => f.source === 'lake'
) // => [8, 13]

shift ：把目标数组向右循环移动 n 个位置返回为一个新数组；

  1. 使用说明
    • 参数：目标数组、移动步数。
    • 返回值：移动后的新数组。
  2. 使用代码示例
    import { shift } from 'radash'
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
shift(arr, 3) // => [7, 8, 9, 1, 2, 3, 4, 5, 6]

sift：过滤调列表中值为false的项，返回剩余为true的项组成的数组；

  1. 使用说明
    • 参数：数组。
    • 返回值：过滤后的新数组。
  2. 使用代码示例
    import { sift } from 'radash'

const fish = ['salmon', null, false, NaN, 'sockeye', 'bass']

sift(fish) // => ['salmon', 'sockeye', 'bass']

sort ：把数组按照条件函数指定的项的数值大小排序，支持升序和降序

  1. 使用说明
    • 参数：对象数组、指定标识符的条件函数、是否降序（Boolean值，不传为false）。
    • 返回值：排序后的数组。
  2. 使用代码示例
    import { sort } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105
  },
  {
    name: 'Bass',
    weight: 8
  },
  {
    name: 'Trout',
    weight: 13
  }
]

sort(fish, f => f.weight) // => [bass, trout, marlin]
sort(fish, f => f.weight, true) // => [marlin, trout, bass]

sum：数组对象根据条件函数指定想的数组求和

  1. 使用说明
    • 参数：对象数组、指定标识符的条件函数。
    • 返回值：符合条件的项的和。
  2. 使用代码示例
    import { sum } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 100
  },
  {
    name: 'Bass',
    weight: 10
  },
  {
    name: 'Trout',
    weight: 15
  }
]

sum(fish, f => f.weight) // => 125

toggle：查找数组中是否有我们给定的项，有则删除，没有则添加；

  1. 使用说明
    • 参数：目标数组、条件值（可以是条件函数）、在前面添加还是在后边添加。
    • 返回值：处理后的新数组。
  2. 使用代码示例
    import { toggle } from 'radash'

// 基本用法
const gods = ['ra', 'zeus', 'loki']

toggle(gods, 'ra')     // => [zeus, loki]
toggle(gods, 'vishnu') // => [ra, zeus, loki, vishnu]


// 切换（数组、条件项、指定标识符的条件函数）
import { toggle } from 'radash'

const ra = { name: 'Ra' }
const zeus = { name: 'Zeus' }
const loki = { name: 'Loki' }
const vishnu = { name: 'Vishnu' }

const gods = [ra, zeus, loki]

toggle(gods, ra, g => g.name)     // => [zeus, loki]
toggle(gods, vishnu, g => g.name) // => [ra, zeus, loki, vishnu]


// 切换（数组、条件项、条件函数，覆盖项）
import { toggle } from 'radash'

const gods = ['ra', 'zeus', 'loki']

toggle(gods, 'vishnu', g => g, { strategy: 'prepend' }) // => [vishnu, ra, zeus, loki]

unique：数组去重，去除数组中重复的项；

  1. 使用说明
    • 参数：目标数组、指定唯一标识符的条件函数。
    • 返回值：去重后的数组。
  2. 使用代码示例
    import { unique } from 'radash'

const fish = [
  {
    name: 'Marlin',
    weight: 105,
    source: 'ocean'
  },
  {
    name: 'Salmon',
    weight: 22,
    source: 'river'
  },
  {
    name: 'Salmon',
    weight: 22,
    source: 'river'
  }
]

unique( fish, f => f.name )
// [
//     { name: 'Marlin', weight: 105, source: 'ocean' },
//     { name: 'Salmon', weight: 22, source: 'river' }
// ]

zipToObject：将第一个数组中的键映射到第二个数组中对应的值

  1. 使用说明
    • 参数：数组1、数组2（或者是传入一个函数）。
    • 返回值：映射后的对象。
  2. 使用代码示例
    import { zipToObject } from 'radash'

const names = ['ra', 'zeus', 'loki']
const cultures = ['egypt', 'greek', 'norse']

zipToObject(names, cultures)
// => { ra: egypt, zeus: greek, loki: norse }

zipToObject(names, (k, i) => k + i)
// => { ra: ra0, zeus: zeus1, loki: loki2 }

zipToObject(names, null)
// => { ra: null, zeus: null, loki: null }

zip：把两个数组变为二维数组，二维数组中的每个数组包含两个项分别为两个传入数组的相同位置的项

  1. 使用说明

    • 参数：数组1、数组2。
    • 返回值：映射后的二维数组。

  2. 使用代码示例

    import { zip } from 'radash'

const names = ['ra', 'zeus', 'loki']
const cultures = ['egypt', 'greek', 'norse']

zip(names, cultures)
// => [
//   [ra, egypt]
//   [zeus, greek]
//   [loki, norse]
// ]

写在后面

  • 等Radash库所有方法更新完毕，作者会整理一份完整方法目录上传，包括思维导图和使用目录。
  • 大家有任何问题或见解，欢迎评论区留言交流和批评指正！！！
  • 你的每一个收藏都是作者写作的动力！！！
  • 点击访问：radash官网

热门相关：宠宠欲恋   美食萌后：皇上，喂不饱！   侯门弃女之妖孽丞相赖上门   侯门弃女之妖孽丞相赖上门   带着仓库到大明