@12luckydev/array-handler 中文文档教程

Question

@12luckydev/array-handler

用于处理数组操作的包装函数，没有突变

使用 @12luckydev/ utils

Install

# using npm
npm i @12luckydev/@12luckydev/array-handler

# using yarn
yarn add 12luckydev/@12luckydev/array-handler

Usage examples

import arrayHandler, { ARRAY_OPERATION } from '@12luckydev/array-handler';

const simpleInput = [1, 2, 3];

//ADD
const addResultArray = arrayHandler(simpleInput, ARRAY_OPERATION.ADD, { newValue: 4 });

//result: [1, 2, 3, 4]


//EDIT_AT
const editAtResultArray = arrayHandler(simpleInput, ARRAY_OPERATION.EDIT_AT, { newValue: 4, index: 1 });

//result: [1, 4, 3]


//REMOVE_AT
const removeAtResultArray = arrayHandler(simpleInput, ARRAY_OPERATION.REMOVE_AT, { index: 1 });

//result: [1, 3]


//MOVE_UP
const moveUpResultArray = arrayHandler(simpleInput, ARRAY_OPERATION.MOVE_UP, { index: 1 });

//result: [1, 3, 2]


//MOVE_DOWN
const moveUpResultArray = arrayHandler(simpleInput, ARRAY_OPERATION.MOVE_DOWN, { index: 1 });

//result: [2, 1, 3]


//EDIT_PROP_AT

const objectInput = [
  { id: 1, name: 'a' },
  { id: 2, name: 'b' },
  { id: 3, name: 'c' },
];

const editPropAtResultArray =
    arrayHandler(objectInput, ARRAY_OPERATION.EDIT_PROP_AT, { index: 1, key: 'id', propValue: 4 });

/** result:
 *  [{ id: 1, name: 'a' },
 *   { id: 4, name: 'b' },
 *   { id: 3, name: 'c' }];
 */

/**
 * changeHandler
 * Add a function as the 4th argument if you want to edit the entire array after performing the operation
*/

const changeHandler = ({
  operation,
  newArray,
  oldArray,
  newValue,
  index,
  key,
  propValue,
}) => {
  return newArray.map((el) => el * 2);
}

const changeHandlerResultArray = arrayHandler(simpleInput, ARRAY_OPERATION.ADD, { newValue: 4 }, changeHandler);

//result: [2, 4, 6, 8]

License

麻省理工学院 © 12LuckyDev