Javascript面试的完美指南(开发者视角)(6)

map 函数在 JavaScript 数组中可用,使用这个函数，我们可以通过对数组中的每个元素应用一个转换函数来获得一个新的数组。map 一般语法是:

arr.map((elem){ 
    process(elem) 
    return processedValue 
}) // returns new array with each element processed  

假设，在我们最近使用的串行密钥中输入了一些不需要的字符，需要移除它们。此时可以使用 map 来执行相同的操作并获取结果数组，而不是通过迭代和查找来删除字符。

var data = ["2345-34r", "2e345-211", "543-67i4", "346-598"];  
var re = /[a-z A-Z]/;  
var cleanedData = data.map((elem) => {return elem.replace(re, "")});  
console.log(cleanedData); // ["2345-34", "2345-211", "543-674", "346-598"]  

map 接受一个作为参数的函数， 此函数接受一个来自数组的参数。我们需要返回一个处理过的元素， 并应用于数组中的所有元素。

reduce

reduce 函数将一个给定的列表整理成一个最终的结果。通过迭代数组执行相同的操作， 并保存中间结果到一个变量中。这里是一个更简洁的方式进行处理。js 的 reduce 一般使用语法如下：

arr.reduce((accumulator, 
           currentValue, 
           currentIndex) => { 
           process(accumulator, currentValue) 
           return intermediateValue/finalValue 
}, initialAccumulatorValue) // returns reduced value  

accumulator 存储中间值和最终值。currentIndex、currentValue分别是数组中元素的 index 和 value。initialAccumulatorValue 是 accumulator 初始值。

reduce 的一个实际应用是将一个数组扁平化， 将内部数组转化为单个数组， 如下：

var arr = [[1, 2], [3, 4], [5, 6]];  
var flattenedArray = [1, 2, 3, 4, 5, 6];  

我们可以通过正常的迭代来实现这一点，但是使用 reduce，代码会更加简洁。

var flattenedArray = arr.reduce((accumulator, currentValue) => { 
    return accumulator.concat(currentValue); 
}, []); // returns [1, 2, 3, 4, 5, 6]  

filter

filter 与 map 更为接近， 对数组的每个元素进行操作并返回另外一个数组(不同于 reduce 返回的值)。过滤后的数组可能比原数组长度更短，因为通过过滤条件，排除了一些我们不需要的。

filter 语法如下：

arr.filter((elem) => {  
  return true/false  
})  

elem 是数组中的元素， 通过 true/false 表示过滤元素保存/排除。假设， 我们过滤出以 t 开始以 r 结束的元素：

var words = ["tiger", "toast", "boat", "tumor", "track", "bridge"] 
var newData = words.filter((str) => { 
    return str.startsWith('t') && str.endsWith('r'); 
}) 
newData // (2) ["tiger", "tumor"]  

当有人问起JavaScript的函数编程方面时，这三个函数应该信手拈来。 如你所见，原始数组在所有三种情况下都没有改变，这证明了这些函数的纯度。

10) 理解错误处理模式

这是许多开发人员最不关心的 JavaScript。 我看到很少有开发人员谈论错误处理， 一个好的开发方法总是谨慎地将 JS 代码封装装在 try/catch 块周围。

在 JavaScript中，只要我们随意编写代码，就可能会失败，如果所示:

$("button").click(function(){ 
    $.ajax({url: "user.json", success: function(result){ 
        updateUI(result["posts"]); 
    }}); 
});  

这里，我们陷入了一个陷阱，，我们说 result 总是 JSON 对象。但有时服务器会崩溃，返回的是 null 而不是 result。在这种情况下，null["posts"] 将抛出一个错误。正确的处理方式可能是这样的：

$("button").click(function(){ 
    $.ajax({url: "user.json", success: function(result){ 
     
      try {      
        updateUI(result["posts"]); 
       } 
      catch(e) { 
        // Custom functions 
        logError(); 
        flashInfoMessage();       
      } 
    }}); 
});  

logError 函数用于向服务器报告错误。flashInfoMessage 是显示用户友好的消息，如“当前不可用的服务”等。

Nicholas 说，当你觉得有什么意想不到的事情将要发生时，手动抛出错误。区分致命错误和非致命错误。以上错误与后端服务器宕机有关，这是致命的。在那里，应该通知客户由于某种原因服务中断了。

（编辑：ASP站长网）