已知需求从数组中查询满足特定条件的值，我开始用的 forEach，因为有很多值需要查询，每次都要循环一遍数组，我就想直接用 for 循环是不是要快一些，于是想比较一下 for forEach map 三个谁快一些。
const tempArr = Array.from({ length: 1000 }).map(s => ({ name: ~~(Math.random() * 1000) }));
console.time('for');
const forArr = [];
for (let i = 0; i < tempArr.length; i++) {
if (tempArr[i] === 233) forArr.push(tempArr[i]);
}
console.timeEnd('for');
console.time('forEach');
const forEachArr = [];
tempArr.forEach(s => {
if (s === 233) forEachArr.push(s);
})
console.timeEnd('forEach');
console.time('map');
const mapArr = [];
tempArr.map(s => {
if (s === 233) mapArr.push(s);
});
console.timeEnd('map');
经过测试，这三者大概有 30% 的差距，但是速度并不是一直 for > forEach > map，运行多次，有时候 for 可能最慢，map 最快。
于是我打算上网搜一下，在看了一些文章和资料后，我突然意识到优化不是这样打的。
性能优化什么的，应该是底层优化，而不是语法的选择，像这类语法糖更多的是提供语义化和便捷性。
- forEach 可以更方便的循环遍历
- map 除了循环遍历还会返回一个数组
“过早优化是万恶之源”，能力不够的时候会往错误的方向使劲。
那么回到问题，我是想要减少循环次数，那直接用对象的 key 取值更快啊。只需要处理一次原数组，就不用每次都循环了。
通过测试，我发现 map 和 forEach 的差距并没有那么大，于是我打算查看一下他们的实现。
// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {
Array.prototype.map = function (callback/*, thisArg*/) {
var T, A, k;
if (this == null) {
throw new TypeError('this is null or not defined');
}
var O = Object(this);
var len = O.length >>> 0;
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function');
}
if (arguments.length > 1) {
T = arguments[1];
}
A = new Array(len);
k = 0;
while (k < len) {
var kValue, mappedValue;
if (k in O) {
kValue = O[k];
mappedValue = callback.call(T, kValue, k, O);
A[k] = mappedValue;
}
k++;
}
return A;
};
}
// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {
Array.prototype.forEach = function (callback/*, thisArg*/) {
var T, k;
if (this == null) {
throw new TypeError('this is null or not defined');
}
var O = Object(this);
var len = O.length >>> 0;
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function');
}
if (arguments.length > 1) {
T = arguments[1];
}
k = 0;
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}
};
}
发现都是用到了 while ，只是 map 多存了一个对象，对于目前前端的数据处理，这点消耗完全可以忽略，但是可读性就很重要了，明明不需要返回新数组，结果使用了 map ，可能会给读代码的人造成一点点困扰。就像 div 可以做很多事，但是官方还是推荐语义化标签。
好了，既然都写到这里了，俗话说“来都来了”，这里整理一下 JavaScript 中操作数组和对象的部分方法。
- while
const arr = [...];
let k = 0;
while( k < arr.length ) {
k++;
// do something
}
- for
- for-of
- for-in
const arr = [...];
for(let i = 0; i < arr.length; i++ ) {
// do something
}
for(let i of arr ) {
// do something
}
const dist = {};
for(let i in arr ) {
// do something
}
- forEach
const arr = [...];
arr.forEach((s,i)=>{
// do something
});
// thisArg
class Counter {
sum = 0;
count = 0;
add(array){
array.forEach( s => {
this.sum += s;
++this.count;
},this)
}
}
- map
const arr = [...];
const newArr = arr.map((s,i) => {
// do something
return xxx;
});
- reduce
- 接受一个判断函数
- 迭代执行该函数并返回最终结果
const arr= [3, 14,15, 9, 26];
const sum = arr.reduce(a,b) => a + b);
- filter
- 接收一个判断函数
- 返回一个满足条件的数组
const arr= [3, 14,15, 9, 26];
const res = arr.filter(s => s > 10); // [14,15,26]
- every
- 接收一个判断函数
- 返回 true / false
- true：全满足
- false：至少有一个不满足
const arr= [3, 14,15, 9, 26];
arr.every(s => s < 30); // true
arr.every(s => s > 10); // false
- some
- 接收一个判断函数
- 返回 true / false
- true：至少有一个满足
- false：全不满足
const arr= [3, 14,15, 9, 26];
arr.some(s => s < 30); // true
arr.some(s => s > 10); // true
arr.some(s => s < 0); // false
- find
- 接收一个判断函数
- 返回满足条件的第一个值
const arr= [3, 14,15, 9, 26];
const res = arr.find(s => s > 13); // 14
- findIndex
- 接收一个判断函数
- 返回满足条件的第一个值的 index
const arr= [3, 14,15, 9, 26];
const resIndex = arr.findIndex(s => s > 13); // 1
我是虚玩玩，与君共勉~