刨析|刨析 JS 中的forEach、for in、for of三类循环原理和性能
大家好,我是林一一,这是一篇比较 JS 中三类循环的原理和性能的文章,希望能给你带来点帮助性能比较 for 循环和 while 循环的性能对比
let arr = new Array(999999).fill(1)console.time('forTime')
for(let i = 0;
i< arr.length;
i++){}
console.timeEnd('forTime')console.time('whileTime')
let i = 0
while(i< arr.length){
i ++
}
console.timeEnd('whileTime')
/* 输出
* forTime: 4.864990234375 ms
* whileTime: 8.35107421875 ms
*/
- 使用
let
声明下的循环,由于for
中块级作用域的影响,内存得到释放,运行的运行的速度会更快一些。 - 使用
var
声明时因为for while
的循环都不存在块级作用域的影响,两者运行的速度基本一致。
callback
函数每一轮循环都会执行一次,且还可以接收三个参数(currentValue, index, array)
,index, array
也是可选的,thisArg
(可选) 是回调函数的this
指向。
- 【刨析|刨析 JS 中的forEach、for in、for of三类循环原理和性能】遍历可枚举的属性
let arr = new Array(999999).fill(1) console.time('forEachTime') arr.forEach(item =>{} ) console.timeEnd('forEachTime') // forEachTime: 25.3291015625 ms
- 函数式编程的
forEach
性能消耗要更大一些。
[1,2,4,5].forEach((item, index) => {
console.log(item, index)
return
})
// 1 0
// 2 1
// 4 2
// 5 3
从上面看出 forEach 中使用 return 是不能跳出循环的。
那么如何中断 forEach 的循环、
- 可以使用 try catch
- 或使用其他循环来代替,比如 用 every 和some 替代 forEach,every 中内部返回 false是跳出,some 中内部是 true 时 跳出
Array.prototype.myForEach = function (callback, context) {
let i = 0,
than = this,
len = this.length;
context = context ? window : context;
for (;
i < len;
i++) {
typeof callback === 'function' ? callback.call(context, than[i], i, than) : null
}
}let arr = [0, 1, 5, 9]
arr.myForEach((item, index, arr) => {
console.log(item, index, arr)
})//0 0 (4) [0, 1, 5, 9]
// 1 1 (4) [0, 1, 5, 9]
结果准确无误。关于 this 指向或 call 的使用的可以看看 JS this 指向 和 call, apply, bind的模拟实现for in 循环
for in
的循环性能循环很差。性能差的原因是因为:for in
会迭代对象原型链上一切可以枚举
的属性。
let arr = new Array(999999).fill(1)
console.time('forInTime')
for(let key in arr){}
console.timeEnd('forInTime')
// forInTime: 323.08984375 ms
for in
循环主要用于对象
let obj = { name: '林一一', age: 18, 0: 'number0', 1: 'number1', [Symbol('a')]: 10 }Object.prototype.fn = function(){}for(let key in obj){ //if(!obj.hasOwnProperty(key)) break 阻止获取原型链上的公有属性 fn console.log(key) } /* 输出 0 1 name age fn */
- (缺点)
for in
循环主要遍历数字优先,由小到大遍历 - (缺点)
for in
无法遍历Symbol
属性(不可枚举)。 - (缺点)
for in
会将公有(prototype) 中可枚举的属性也遍历了。可以使用hasOwnProperty
来阻止遍历公有属性。
思考
1. 怎么获取 Symbol 属性使用
Object.getOwnPropertySymbols()
,获取所有 Symbol 属性。let obj = { name: '林一一', age: 18, 0: 'number0', 1: 'number1', [Symbol('a')]:10 }Object.prototype.fn = function(){}let arr = Object.keys(obj).concat(Object.getOwnPropertySymbols(obj)) console.log(arr)//["0", "1", "name", "age", Symbol(a)]
let arr = new Array(999999).fill(1)
console.time('forOfTime')
for(const value of arr){}
console.timeEnd('forOfTime')
// forOfTime: 33.513916015625 ms
for of 循环的原理是按照是否有迭代器规范来循环的
,所有带有Symbol.iterator
的都是实现了迭代器规范,比如数组一部分类数组,Set,Map...
,对象没有实现 Symbol.iterator 规范
,所以不能使用for of
循环。
- 使用
for of
循环,首先会先执行Symbol.iterator
属性对应的函数且返回一个对象 - 对象内包含一个函数
next()
循环一次执行一次next()
,next()
中又返回一个对象 - 这个对象内包含两个值分别是
done:代表循环是否结束,true 代表结束;value:代表每次返回的值
。
// Symbol.iterator 内部机制如下 let arr = [12, 23, 34] arr[Symbol.iterator] = function () { let self = this, index = 0; return { next() { if(index > self.length-1){ return { done: true, value: undefined } } return { done: false, value: self[index++] } } } }
思考,如何让普通的类数组可以使用 for of 循环
类数组被需具备和数组类试的结果属性名从
0, 1, 2...
开始,且必须具备length
属性let obj = { 0: 12, 1: '林一一', 2: 'age18', length: 3 } // obj[Symbol.iterator] = Array.prototype[Symbol.iterator] for (const value of obj) { console.log(value) }
- 12
- 林一一
- age18
*/
> 只需要给类数组对象添加`Symbol.iterator`接口规范就可以了。
arguments
为什么不是数组?arguments
是类数组(其实是一个对象)属性从0开始排,依次为0,1,2... 最后还有callee和length
属性,arguments
的__proto__
直接指向基类的object
,不具备数组的方法。
方式一 使用 call(),[].slice/Array.prototype.slice()
let array = [12, 23, 45, 65, 32] function fn(array){ var args = [].slice.call(arguments) return args[0] } fn(array)// [12, 23, 45, 65, 32]
上面的slice
结合call
为什么可以在改变this
后可以将arguments
转化成数组?我们来模拟手写实现一下slice
,就知道里面的原理了
Array.prototype.mySlice = function(startIndex=0, endIndex){ let array = this// 通过 this 获取调用的数组 let thisArray = [] endIndex === undefined ? (endIndex = array.length) : null for(let i = startIndex; i< endIndex; i++){// 通过 `length` 属性遍历 thisArray.push(array[i]) } return thisArray }// 测试一下没有问题 let arr = [1, 3, 5, 6, 7, 23] let a a = arr.mySlice()// [1, 3, 5, 6, 7, 23] a = arr.mySlice(2, 6)// [5, 6, 7, 23]
通过
this
获取调用mySlice
的数组,再通过length
属性遍历形成一个新的数组返回。所以改变this
指向arguments
再通过arguments.length
遍历返回一个新的数组,便实现了将类数组转化成数组了。
let a = [].slice.call('stringToArray')
console.log(a)// ["s", "t", "r", "i", "n", "g", "T", "o", "A", "r", "r", "a", "y"]
同样也是可以的,理由同上。至于字符串(值类型)为什么被
this
指定,可以来看看这篇文章 [面试 | call,apply,bind 的实现原理和面试题]()
方式二 使用 ES6 的扩展运算符 ...
function fn(array){
var args = [...arguments]
return args
}
fn(12, 23, 45, 65, 32)// [12, 23, 45, 65, 32]
方式三 Array.from()
function fn(array){
return Array.from(arguments)
}
fn(12, 23, 45, 65, 32)// [12, 23, 45, 65, 32]
推荐阅读
- 热闹中的孤独
- JS中的各种宽高度定义及其应用
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售
- Android中的AES加密-下
- 放下心中的偶像包袱吧
- C语言字符函数中的isalnum()和iscntrl()你都知道吗
- C语言浮点函数中的modf和fmod详解
- C语言中的时间函数clock()和time()你都了解吗
- 如何在Mac中的文件选择框中打开系统隐藏文件夹