JS020. Array map()函数查到需要的元素时跳出遍历循环，不再执行到数组边界

Array.prototype.map()

map( )  方法创建一个 新数组 *，其结果是该数组中的每个元素是调用一次提供的 函数后的返回值 *。[ MDN / RUNOOB ]

* map 添加在第5版的  ECMA-262  标准中，我们可以通过  polyfill  在  ES2015  之前的标准中实现。值得注意的是，对目前市场的需求来说，支持  IE9+  的 map 兼容性没有想象中那么差。

执行机制

从  img-bottom-left  可以看出，新数组的每一次元素遍历都会执行一个新的函数周期

并且  map  的执行速度经大佬统计在大数据的情况下倍数劣于  for  循环

因此当我们遍历一个很大的数组，我们很可能就必须因此放弃这一函数

然而事实上，我们可以通过 try…catch… 来使用 throw 抛出一个自定义异常

以终止  map  的遍历周期，以将它再次加入我们的应用储备

跳出代码

let arr = [1, 2, 3……]

try {
    arr.map((item, index) => {
        if(item === 2) {
            throw 'Custom Exception.'
        } else {
            return 'pass'
        }
    })
} catch(e) {
    console.log(e)
}

执行结果

当循环到  arr[2]  时，满足  ' item === 3 '  的条件，通过  throw  定义自定义异常，再通过  try…catch…  将循环抛出，避免了接下来的内存消耗和不必要的性能浪费。

扩展 - try…catch…

try…catch…  语句标记要尝试的语句块，并指定一个出现异常时抛出的响应。[ MDN / RUNOOB ]

* 需要注意的是  IE5+  就支持该方法，但  IE  至今仍然不支持省略捕获参数 。

/**
 * Browser isn't IE.
 **/
try {
    // Something.
} catch {
    // Nothing.
}

/**
 * Terrible IE.
 **/
try {
    // Something.
} catch (e) {  // Must arguments: e
    // console.error(e)
}

扩展 - throw

throw  语句用来抛出一个用户自定义的异常。当前函数的执行将被停止（ throw  之后的语句将不会执行），并且控制将被传递到调用堆栈中的第一个  catch  块，如果调用者函数中没有  catch  块，程序将会终止。 [ MDN / RUNOOB ]

function UserException(message) {
   this.message = message;
   this.name = "UserException";
}
function getMonthName(mo) {
   mo = mo-1; // 调整月份数字到数组索引 (1=Jan, 12=Dec)
   var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
      "Aug", "Sep", "Oct", "Nov", "Dec"];
   if (months[mo] !== undefined) {
      return months[mo];
   } else {
      throw new UserException("InvalidMonthNo");
   }
}

try {
   // statements to try
   var myMonth = 15; // 15 超出边界并引发异常
   var monthName = getMonthName(myMonth);
} catch (e) {
   var monthName = "unknown";
   console.log(e.message, e.name); // 传递异常对象到错误处理
}

不得不说，当  try…catch…  与  throw  产生化学反应，产出的代码是非常严谨且优雅的，它理应加入我们封装 js 必经的一步。

- END -