Javascript 链接答案

【问题标题】：Javascript chainingJavascript 链接
【发布时间】：2020-07-17 08:38:37
【问题描述】：

这可能是非常基本的，但我无法理解链接和返回是如何同时工作的，例如

let array = [1, 2, 3]
let newArray = array.map(val => val * 10).map(val => val * 10)
console.log(newArray) // [100, 200, 300]

在这里我们可以继续添加 .map ，它会不断返回一个新数组。它的行为就像当链接停止时它现在知道它必须返回值但是当链接继续时它继续将其视为对象。它是如何工作的以及如何在我的代码中实现类似的功能。

【问题讨论】：

Array.map返回新数组，其中还有一个方法.map。实际问题或预期结果是什么？
真的不清楚你的实际问题是什么？

标签： javascript method-chaining

【解决方案1】：

它是如何工作的，我怎样才能在我的代码。

我不确定你的意思。 JS 中的数组对象具有 map() 方法，该方法始终返回由您传递的回调函数修改的新数组 val => val * 10。

您可以将此表达式视为[1,2,3].map(val => val * 10) // same as [10,20,30]，并且在数组上链接 map 方法将起作用，因为您将始终获得一个数组，并且您可以再次使用数组原型方法（它从左到右同步工作）

如果您尝试不返回数组的链接方法，例如[1,2,3].forEach(val => val * 10).map(i => i)，则在执行 map 时会收到 TypeError（forEach 不返回任何值，因此在 undefined 上调用 map 方法会抛出类型错误）。这就是链接的工作原理，您需要始终使用正确的类型，并确保每个方法都以正确的类型调用（数组上的映射、字符串上的 toUpperCase 等）。

【讨论】：

【解决方案2】：

Array.prototype.map 是一种在数组上调用的方法，将给定函数应用于每个元素并返回修改后的数组。这样，您可以在其上调用其他方法。类似的方法有Array.prototype.filter 和Array.prototype.reduce。它们以类似的方式工作，因为您也可以将它们链接起来。

【讨论】：

【解决方案3】：

要了解基本的转换，让我们创建一个删除字符串首字母的函数，有点像Array.prototype.shift();

// create the strShift function
// it has to be a normal function to access this
const strShift = function(amount = 1){

    // return the output of the function, so that you can 
    // chain another prototypical function
    return this.slice(amount);
}

// add the function to the prototype of String so that its available
// with the dot syntax on all Strings for every future String you 
// create after this point in the code
String.prototype.strShift = strShift;

const myStr = "Hello";
// prints "ello"
console.log(myStr.strShift())

JSFiddle Link

除此之外，我们可以查看how chaining and return works at the same time。为此，让我们创建一个函数来反转字符串中每个字符的大小写。

const strFlipCase = function(){
    // create a temporary variable to then return after the loop.
    const result = [];

    // get an array with each letter
    const strArr = this.split('');

    // loop over the newly created array
    for(let character of strArr){
      // check whether the character is uppercase
      if(character.toUpperCase() === character){
        // character is uppercase so push the lowercase character
        // into the temporary array
        result.push(character.toLowerCase())
      } else {
        // character is lowercase so push the uppercase character
        // into the temporary array
        result.push(character.toUpperCase())
      }
  }
  // temporary array has been filled, return the temporary variable
  // as a string
  return result.join('')
}
String.prototype.strFlipCase = strFlipCase;

const myStr = "Hello";
// prints "hELLO"
console.log(myStr.strFlipCase());

JSFiddle Link

【讨论】：