zip

将多个数组压缩成一个数组。

基础用法

import { zip } from 'radash'

const names = ['Alice', 'Bob', 'Charlie']
const ages = [25, 30, 35]
const cities = ['Beijing', 'Shanghai', 'Guangzhou']

const zipped = zip(names, ages, cities)
// [
//   ['Alice', 25, 'Beijing'],
//   ['Bob', 30, 'Shanghai'],
//   ['Charlie', 35, 'Guangzhou']
// ]

语法

function zip<T extends readonly unknown[]>(
  ...arrays: T
): Array<{ [K in keyof T]: T[K] extends readonly (infer U)[] ? U : never }>

参数

• ...arrays (T): 要组合的数组，可以传入任意数量的数组

返回值

返回一个数组，每个元素是输入数组对应位置的元素组成的元组。

示例

基本组合

import { zip } from 'radash'

const letters = ['a', 'b', 'c']
const numbers = [1, 2, 3]

const zipped = zip(letters, numbers)
// [
//   ['a', 1],
//   ['b', 2],
//   ['c', 3]
// ]

组合三个数组

import { zip } from 'radash'

const fruits = ['apple', 'banana', 'cherry']
const colors = ['red', 'yellow', 'red']
const prices = [1.5, 2.0, 3.0]

const zipped = zip(fruits, colors, prices)
// [
//   ['apple', 'red', 1.5],
//   ['banana', 'yellow', 2.0],
//   ['cherry', 'red', 3.0]
// ]

处理不同长度的数组

import { zip } from 'radash'

const short = [1, 2]
const long = ['a', 'b', 'c', 'd']

const zipped = zip(short, long)
// [
//   [1, 'a'],
//   [2, 'b']
// ] (以最短数组的长度为准)

组合对象数组

import { zip } from 'radash'

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
]

const scores = [85, 92, 78]

const zipped = zip(users, scores)
// [
//   [{ id: 1, name: 'Alice' }, 85],
//   [{ id: 2, name: 'Bob' }, 92],
//   [{ id: 3, name: 'Charlie' }, 78]
// ]

创建键值对

import { zip } from 'radash'

const keys = ['name', 'age', 'city']
const values = ['Alice', 25, 'Beijing']

const zipped = zip(keys, values)
// [
//   ['name', 'Alice'],
//   ['age', 25],
//   ['city', 'Beijing']
// ]

// 转换为对象
const obj = Object.fromEntries(zipped)
// { name: 'Alice', age: 25, city: 'Beijing' }

处理混合类型

import { zip } from 'radash'

const strings = ['hello', 'world']
const numbers = [1, 2]
const booleans = [true, false]
const objects = [{ key: 'value' }, { key: 'value2' }]

const zipped = zip(strings, numbers, booleans, objects)
// [
//   ['hello', 1, true, { key: 'value' }],
//   ['world', 2, false, { key: 'value2' }]
// ]

在数据处理中使用

import { zip } from 'radash'

interface DataPoint {
  timestamp: number
  value: number
  label: string
}

function processTimeSeriesData(timestamps: number[], values: number[], labels: string[]): DataPoint[] {
  const zipped = zip(timestamps, values, labels)
  
  return zipped.map(([timestamp, value, label]) => ({
    timestamp,
    value,
    label
  }))
}

const timestamps = [1000, 2000, 3000]
const values = [10, 20, 30]
const labels = ['point1', 'point2', 'point3']

const dataPoints = processTimeSeriesData(timestamps, values, labels)
console.log(dataPoints)
// [
//   { timestamp: 1000, value: 10, label: 'point1' },
//   { timestamp: 2000, value: 20, label: 'point2' },
//   { timestamp: 3000, value: 30, label: 'point3' }
// ]

创建表格数据

import { zip } from 'radash'

function createTable(headers: string[], ...columns: any[][]) {
  const zipped = zip(...columns)
  
  return {
    headers,
    rows: zipped
  }
}

const headers = ['Name', 'Age', 'City']
const names = ['Alice', 'Bob', 'Charlie']
const ages = [25, 30, 35]
const cities = ['Beijing', 'Shanghai', 'Guangzhou']

const table = createTable(headers, names, ages, cities)
console.log(table)
// {
//   headers: ['Name', 'Age', 'City'],
//   rows: [
//     ['Alice', 25, 'Beijing'],
//     ['Bob', 30, 'Shanghai'],
//     ['Charlie', 35, 'Guangzhou']
//   ]
// }

处理表单数据

import { zip } from 'radash'

function processFormData(fieldNames: string[], fieldValues: any[]) {
  const zipped = zip(fieldNames, fieldValues)
  
  return zipped.reduce((formData, [name, value]) => {
    formData[name] = value
    return formData
  }, {} as Record<string, any>)
}

const fieldNames = ['name', 'email', 'age', 'city']
const fieldValues = ['John Doe', 'john@example.com', 30, 'New York']

const formData = processFormData(fieldNames, fieldValues)
console.log(formData)
// {
//   name: 'John Doe',
//   email: 'john@example.com',
//   age: 30,
//   city: 'New York'
// }

创建坐标点

import { zip } from 'radash'

function createPoints(xCoords: number[], yCoords: number[]) {
  const zipped = zip(xCoords, yCoords)
  
  return zipped.map(([x, y], index) => ({
    id: index + 1,
    x,
    y
  }))
}

const xCoords = [1, 2, 3, 4, 5]
const yCoords = [2, 4, 6, 8, 10]

const points = createPoints(xCoords, yCoords)
console.log(points)
// [
//   { id: 1, x: 1, y: 2 },
//   { id: 2, x: 2, y: 4 },
//   { id: 3, x: 3, y: 6 },
//   { id: 4, x: 4, y: 8 },
//   { id: 5, x: 5, y: 10 }
// ]

处理API响应

import { zip } from 'radash'

interface ApiResponse {
  ids: number[]
  names: string[]
  emails: string[]
}

function processApiResponse(response: ApiResponse) {
  const { ids, names, emails } = response
  const zipped = zip(ids, names, emails)
  
  return zipped.map(([id, name, email]) => ({
    id,
    name,
    email
  }))
}

const apiResponse: ApiResponse = {
  ids: [1, 2, 3],
  names: ['Alice', 'Bob', 'Charlie'],
  emails: ['alice@example.com', 'bob@example.com', 'charlie@example.com']
}

const users = processApiResponse(apiResponse)
console.log(users)
// [
//   { id: 1, name: 'Alice', email: 'alice@example.com' },
//   { id: 2, name: 'Bob', email: 'bob@example.com' },
//   { id: 3, name: 'Charlie', email: 'charlie@example.com' }
// ]

创建枚举映射

import { zip } from 'radash'

function createEnumMap(keys: string[], values: any[]) {
  const zipped = zip(keys, values)
  
  return zipped.reduce((enumMap, [key, value]) => {
    enumMap[key] = value
    return enumMap
  }, {} as Record<string, any>)
}

const statusKeys = ['PENDING', 'ACTIVE', 'INACTIVE', 'DELETED']
const statusValues = [0, 1, 2, 3]

const statusEnum = createEnumMap(statusKeys, statusValues)
console.log(statusEnum)
// {
//   PENDING: 0,
//   ACTIVE: 1,
//   INACTIVE: 2,
//   DELETED: 3
// }

处理CSV数据

import { zip } from 'radash'

function parseCSV(csvString: string) {
  const lines = csvString.trim().split('\n')
  const headers = lines[0].split(',')
  const dataLines = lines.slice(1)
  
  const columns = headers.map((_, columnIndex) =>
    dataLines.map(line => line.split(',')[columnIndex])
  
  const zipped = zip(...columns)
  
  return zipped.map(row => {
    const obj: Record<string, string> = {}
    headers.forEach((header, index) => {
      obj[header] = row[index]
    })
    return obj
  })
}

const csvData = `name,age,city
Alice,25,Beijing
Bob,30,Shanghai
Charlie,35,Guangzhou`

const parsed = parseCSV(csvData)
console.log(parsed)
// [
//   { name: 'Alice', age: '25', city: 'Beijing' },
//   { name: 'Bob', age: '30', city: 'Shanghai' },
//   { name: 'Charlie', age: '35', city: 'Guangzhou' }
// ]

注意事项

1. 长度处理: 以最短数组的长度为准，超出部分会被忽略
2. 保持原数组不变: zip 不会修改原数组，而是返回新的数组
3. 类型安全: 返回的数组类型会根据输入数组的类型推断
4. 性能: 时间复杂度为 O(n)，其中 n 是最短数组的长度
5. 空数组: 如果任何输入数组为空，返回空数组

与其他方法的区别

• map(): 只能处理单个数组
• zip(): 可以同时处理多个数组
• Array.from(): 需要手动创建索引映射
• Object.fromEntries(): 只能创建键值对，而 zip 更灵活

实际应用场景

1. 数据处理: 组合多个数据源的数据
2. 表格创建: 将列数据转换为行数据
3. 坐标处理: 组合x和y坐标
4. 表单处理: 将字段名和值配对
5. API处理: 处理分离的数组响应