JS020. Array map()函数查到需要的元素时跳出遍历循环,不再执行到数组边界
阅读原文时间:2023年07月09日阅读:2

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 -