Принцип пайпа в JavaScript

JavaScript

Принцип пайпа в JavaScript

пример кода

const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);

принцип

Количество информации в строке кода очень велико, что можно проанализировать со следующих аспектов.

(...fns)

  • ...оператор расширения массива в стандарте ES6

  • Оператор спреда расширяет массив:Math.max(...[1,2,3])ЭквивалентноMath.max(1,2,3)

  • В то же время он сочетается с назначением деструктурирования для создания массивов.пример кодаЭтот метод используется в конкретном примере: [...fns] = [1,2,3]ноfns=[1,2,3]

    • Деструктурирующее присваивание: ES6 позволяет извлекать значения из массивов и объектов по определенному шаблону, а затем присваивать значения переменным, что называется деструктурированием; пример:let [a,b,c] = [1,2,3]
=>
  • Это стрелочная функция, левая сторона — параметр функции, правая — тело функции.
  • Стрелочные функции имеют свои особенности, например, это указывает на
    • это указывает на объект, где он был определен, а не на объект, где он использовался
    • нельзя использовать как конструктор
    • Вы не можете использовать объект arguments, вместо этого вы можете использовать параметр rest
      • Остальной параметр представляет собой некое имя, которое относится к методу передачи параметра функции записи (...имя_переменной).
    • Команда yield не может быть использована
    • Стрелочные функции не имеют свойства прототипа
    • нельзя использовать с новыми
reduce
  • Эта функция работает с объектами массива
  • Получает функцию как аккумулятор, и каждое значение в массиве (слева направо) сводится к значению
  • Прототип функции: Array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
    • Мы можем определить функцию function(total, currentValue, currentIndex, arr) как часть персонализированной логической обработки и вручную указать начальное значение initialValue.
    • Роль начального значенияКогда пользовательская функция выполняется в первый раз, значение параметра total равно установленному нами начальному значению, initialValue
    • currentValue — значение текущего массива, то есть currentValue === arr[currentIndex]
Функция Coreyization

  • Каррированная функция — это функция, которая преобразуется из функции, принимающей несколько параметров, в функцию, которая принимает только один параметр за раз: если функция принимает 3 параметра, каррированная функция примет один параметр и вернет функцию для принятия. функция, эта функция возвращает функцию для передачи в третьем параметре, а последняя функция применит результат функции всех параметров.

  • поставить вышепример кодаПреобразуйте его в форму:

    const pipe = function(x, ...fns) {
	fns.reduce((y, f) => f(y), x);
}
Дальнейший демонтаж

  • Для того, чтобы увидеть реальную роль функции конвейера, вышеперечисленные функции дополнительно разобраны и выражены в простейшем синтаксисе, чтобы более четко проследить их внутренние принципы.

    	function pipe(x, ...fns){
		let total = x;
		for(let f in fns){
			total = f(total)
		}
		return total;
	}
Пример

  • когда мы звонимpipe(x, f1, f2), возвращает f2(f1(x))

  • пример кода

    const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);

const f1 = x => {
    return x+1;
}

const f2 = x => {
    return 2 * x;
}

// (1+1)*2 = 4
let result = pipe(f1, f2)(1);
console.log(result);
Категории