通过 function 作为参数应该使用来自同一调用的另一个参数

Question

I'm recreating the filter, map, find functions in js. And I have a function pipe , that takes the given array and passes it trough an array of functions such as filter, map etc.

These are my functions:

const filter = (arr, callback) => {
  let newArr = [];
  let j = 0;
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i])) {
      newArr[j] = arr[i];
      j++;
    }
  }
  return newArr;
};

const map = (arr, callback) => {
  let newArr = [];
  for (let i = 0; i < arr.length; i++) {
    newArr[i] = callback(arr[i], i);
  }
  return newArr;
};

const pipe = (arr, callbacks) => {
  console.log(arr, "arr");
  console.log(callbacks, "callbacks");
};

I can use filter like so, and the function works fine.

const arr = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']

filter(arr, item => item.length > 6) // returns ["exuberant", "destruction", "present"] 

However, when using pipe, I should not pass arr to each function. Instead filter and map should somehow take arr from pipe. But since those functions are being called directly in the pipe call, I do not see how can I achieve that functionality.

const arr = ['spray', 'limit', 'elite', 'exuberant', 'destruction']

pipe(
  arr,
  [
    filter(item => item.length > 6), // returns ["exuberant", "destruction"]
    map((item, index) => ({ id: index, name: item })) // returns [{ id: 0, name: 'exuberant' }, { id: 1, name: 'destruction' }]
  ]
)

// pipe returns [{ id: 0, name: 'exuberant' }, { id: 1, name: 'destruction' }]

Usually filter and map takes 2 params, arr and a callback . But in pipe it takes just the callback.

Any help would be appreciated. Thanks.

Answer 1

I see that you are trying to implement a concept of functional programming known as pipe .

There's a better way to do what you are trying to achieve.

Instead of passing the array to the pipe function, only pass the map and filter functions to the pipe function and have pipe function return another function that takes the input array and returns the result of executing each function from left to right and passing the input array to each function.

Also change map and filter functions to return another function that takes in the input array as an argument and returns a new array after iterating over the array and passing each each element to the callback function.

 const filter = callback => { return (arr) => { let newArr = []; let j = 0; for (let i = 0; i < arr.length; i++) { if (callback(arr[i])) { newArr[j] = arr[i]; j++; } } return newArr; }; }; const map = callback => { return (arr) => { const newArr = []; for (let i = 0; i < arr.length; i++) { newArr[i] = callback(arr[i], i); } return newArr; }; }; const pipe = (...funcs) => { return array => { return funcs.reduce((acc, curr) => curr(acc), array); }; }; const arr = ['spray', 'limit', 'elite', 'exuberant', 'destruction']; const result = pipe( filter(item => item.length > 6), map((item, index) => ({ id: index, name: item })) )(arr); console.log(result);

Answer 2

there is no easy solution for this since you call the function filter and map directly in the pipe creation (simple functions will execute then)

one thing you can do is change your filter and map functions so they return an object with a method.execute that needs to be called to execute the filter or the map

const filter = (callback) => {
  function execute (arr) = {
    let newArr = [];
    let j = 0;
    for (let i = 0; i < arr.length; i++) {
      if (callback(arr[i])) {
        newArr[j] = arr[i];
        j++;
      }
    }
    return newArr;
  }
  return { // return the object ready to execute
    execute
  }
};

const map = (callback) => {
  function execute (arr) {
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
      newArr[i] = callback(arr[i], i);
    }
    return newArr;
  }
  return {
    execute
  }
};

now if you want to use a filter, do

const arr = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']

filter(item => item.length > 6).execute(arr) 
// returns ["exuberant", "destruction", "present"] 

and now the pipe function

const pipe = (arr, callbacks) => {
  for (let i = 0; i < callbacks.length; i++) {
    callback.execute(arr)
  }
};

now use the pipe as wanted

const arr = ['spray', 'limit', 'elite', 'exuberant', 'destruction']

pipe(
  arr,
  [
    filter(item => item.length > 6),
    map((item, index) => ({ id: index, name: item })) 
  ]
)
// returns [{ id: 0, name: 'exuberant' }, { id: 1, name: 'destruction' }]