JS Array.reduce достигает Array.map и Array.filter

JavaScript

Вслед за предыдущей статьейArray.prototype.reduceПосле этого я намерен усердно учиться. После долгих раздумий и прочтения за последнее время нескольких статей и книг по «функциональному программированию JS» я с чувством написал эту статью.

Array.prototype.mapЯ считаю, что все знакомы с этим методом, и я также считаю, что многие люди уже внедрили его самостоятельно.mapфункция. не осознал своегоmap? Неважно, воспользуемсяforцикл для достижения следующего.

  Array.prototype.selfMap = function () {
      const ary = this
      const result = new Array(ary.length);
      const [ fn, thisArg ] = [].slice.call(arguments)
      if (typeof fn !== 'function') {
        throw new TypeError(fn + 'is not a function')  
      }
      for (let i = 0; i < ary.length; i++) {
        // fix稀疏数组的情况
        if (i in ary) {
            result[i] = fn.call(thisArg, ary[i], i, ary);
        }
      }
      return result
  }
  
  const a = new Array(1, 2, 3, 4)
  a.selfMap(item => item + 1) // [ 2, 3, 4, 5 ]

осознал его собственноеmap, это не льстит.

но, что не имеет отношения к этой статье, потому что я используюreduceвыполнитьmapАх 🤣🤣🤣

Как мы все знаем,mapФункция должна передать функцию, а необязательныйthisпараметр, но я обнаружил, что второй параметр используется редко, и я не обращаю на него особого внимания, как и я.

[1, 2, 3].map(function(item) {
    console.log(this)
    return item
}, { msg: 'mapping' })

Блок кода выше 👆 не только возвращает новый массив, но и трижды выводит его на консоль

 { msg: 'mapping' }

Есть фото и правда 👇

Возможно, некоторые друзья будут использовать при проверке моего примера выше箭头函数, затем найдите, что всегда печатаетwindow, это так👇

Тогда он подумал про себя: «Бессовестное дитя, как ты смеешь мне лгать». Мое сердце горько, стрелочная функция привязана к своему внешнему this, когда она объявлена ​​(этот примерthisдляwindow, так и не изменилось, т.{ msg: 'mapping' }Это равносильно белой биографии) 😭

Кажется, что ерунда слишком много, так что давайте использовать его в первую очередьreduceреализоватьmapБар (операционная среда по умолчанию поддерживаетArray.prototype.reduce, если не поддерживается, то пишите 🔨)

    // 这次不把方法写在Array的原型上
    const reduceMap = (fn, thisArg /*真想去掉thisArg这个参数*/ ) => {
        return (list) => {
            // 不怎么愿意写下面这两个判断条件
            if (typeof fn !== 'function') {
                throw new TypeError(fn + 'is not a function'); 
            }
            if (!Array.isArray(list)) {
                throw new TypeError('list must be a Array');
            }
            if (list.length === 0) return [];
            const result = new Array(list.length);
            return list.reduce((acc, value, index) => {
                // fix稀疏数组的情况
                if (index in list) {
                    acc[index] = fn.call(thisArg, value, index, list);
                }
                return acc;
            }, result);
        }
    }
    
    // 来使用下怎么样🧐
    
    reduceMap(x => x + 1)([ 1, 2, 3 ]) // [ 2, 3, 4 ]
    
    const mapAry1 = reduceMap(function(item) {
        console.log(this)
        return item + 1
    }, { msg: 'mapping' })([ 1, 2, 3 ]) 
    // [ 2, 3, 4 ] 
    // logging { msg: 'mapping' } three times

👆Я считаю, что каждый должен понимать принцип выполнения.

Куй железо, пока горячо, и продолжай добиватьсяfilterБар.

  • для реализации цикла
Array.prototype.selfFilter = function () {
    const ary = this
    const result = []
    const [ fn , thisArg ] = [].slice.call(arguments)
    
    if (typeof fn !== 'function') {
        throw new TypeError(fn + 'is not a function')  
    }
    const result = [];
    for (let i = 0; i < ary.length; i++) {
        if (i in ary && fn.call(thisArg, ary[i], i, ary)) {
            result.push(ary[i])
        }
    }
    return result
}

const a = new Array(1, 2, 3)
a.selfFilter(item => item % 2 === 0) // [ 2 ]
a.selfFilter(function (item) {
    console.log(this)
    return item % 2 === 0
}, {})
// [ 2 ]
// logging {} three times
  • сократить реализацию
// 同map, 不定义在Array的原型上
const reduceFilter = (fn, thisAry /* thisAry知不知你好讨厌啊 */ )  => {
    return (list) => {
        if (typeof fn !== 'function') {
            throw new TypeError(fn + 'is not a function')  
        }
        if (!Array.isArray(list)) {
            throw new TypeError('list must be a Array')
        }
        if (list.length === 0) return []
        return list.reduce((acc, value, index) => {
            return index in ary && fn.call(thisAry, value, index, list) ? acc.concat([ value ]) : acc
        }, [])
    }    
}

reduceFilter(x => x % 2 === 0)([ 1, 2, 3 ]) // [ 2 ]

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

Категории