起源:juejin.im/post/5ea63f3ef265da47b177b4b6
几种遍历办法中 for
执行最快,它没有任何额定的函数调用栈和上下文。但在理论开发中咱们要联合语义话、可读性和程序性能,去抉择到底应用哪种计划。上面来看 for
, foreach
, map
, for...in
, for...of
五种办法现场 battle。
for
我是最早呈现的一方遍历语句,在座的各位需称我一声爷爷。我能满足开发人员的绝大多数的需要。
// 遍历数组
let arr = [1,2,3];
for(let i = 0;i < arr.length;i++){console.log(i) // 索引,数组下标
console.log(arr[i]) // 数组下标所对应的元素
}
// 遍历对象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
for(let i = 0, keys=Object.keys(profile); i < keys.length;i++){console.log(keys[i]) // 对象的键值
console.log(profile[keys[i]]) // 对象的键对应的值
}
// 遍历字符串
let str = "abcdef";
for(let i = 0;i < str.length ;i++){console.log(i) // 索引 字符串的下标
console.log(str[i]) // 字符串下标所对应的元素
}
// 遍历 DOM 节点
let articleParagraphs = document.querySelectorAll('.article > p');
for(let i = 0;i<articleParagraphs.length;i++){articleParagraphs[i].classList.add("paragraph");
// 给 class 名为“article”节点下的 p 标签增加一个名为“paragraph”class 属性。}
forEach
我是 ES5 版本公布的。按升序为数组中含有效值的每一项执行一次 callback 函数,那些已删除或者未初始化的项将被跳过(例如在稠密数组上)。我是 for 循环的加强版。
// 遍历数组
let arr = [1,2,3];
arr.forEach(i => console.log(i))
// logs 1
// logs 2
// logs 3
// 间接输入了数组的元素
// 遍历对象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
let keys = Object.keys(profile);
keys.forEach(i => {console.log(i) // 对象的键值
console.log(profile[i]) // 对象的键对应的值
})
map
我也是 ES5 版本公布的,我能够创立一个新数组,新数组的后果是原数组中的每个元素都调用一次提供的函数后的返回值。
let arr = [1,2,3,4,5];
let res = arr.map(i => i * i);
console.log(res) // logs [1, 4, 9, 16, 25]
for…in 枚举
我是 ES5 版本公布的。以任意程序遍历一个对象的除 Symbol 以外的可枚举属性。
// 遍历对象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
for(let i in profile){let item = profile[i];
console.log(item) // 对象的键值
console.log(i) // 对象的键对应的值
// 遍历数组
let arr = ['a','b','c'];
for(let i in arr){let item = arr[i];
console.log(item) // 数组下标所对应的元素
console.log(i) // 索引,数组下标
// 遍历字符串
let str = "abcd"
for(let i in str){let item = str[i];
console.log(item) // 字符串下标所对应的元素
console.log(i) // 索引 字符串的下标
}
for…of 迭代
我是 ES6 版本公布的。在可迭代对象(包含 Array,Map,Set,String,TypedArray,arguments 对象等等)上创立一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。
// 迭代数组数组
let arr = ['a','b','c'];
for(let item of arr){console.log(item)
}
// logs 'a'
// logs 'b'
// logs 'c'
// 迭代字符串
let str = "abc";
for (let value of str) {console.log(value);
}
// logs 'a'
// logs 'b'
// logs 'c'
// 迭代 map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]
for (let entry of iterable) {console.log(entry);
}
// logs ["a", 1]
// logs ["b", 2]
// logs ["c", 3]
// 迭代 map 获取键值
for (let [key, value] of iterable) {console.log(key)
console.log(value);
}
// 迭代 set
let iterable = new Set([1, 1, 2, 2, 3, 3,4]);
for (let value of iterable) {console.log(value);
}
// logs 1
// logs 2
// logs 3
// logs 4
// 迭代 DOM 节点
let articleParagraphs = document.querySelectorAll('.article > p');
for (let paragraph of articleParagraphs) {paragraph.classList.add("paragraph");
// 给 class 名为“article”节点下的 p 标签增加一个名为“paragraph”class 属性。}
// 迭代 arguments 类数组对象
(function() {for (let argument of arguments) {console.log(argument);
}
})(1, 2, 3);
// logs:// 1
// 2
// 3
// 迭代类型数组
let typeArr = new Uint8Array([0x00, 0xff]);
for (let value of typeArr) {console.log(value);
}
// logs:// 0
// 255
通过第一轮的自我介绍和技能展现后,咱们理解到:
for 语句
是最原始的循环语句。定义一个变量i
(数字类型,示意数组的下标), 依照肯定的条件,对i
进行循环累加。条件通常为循环对象的长度,当超过长度就进行循环。因为对象无奈判断长度,所以搭配Object.keys()
应用。forEach
ES5 提出。自称是for 语句
的加强版,能够发现它比for 语句
在写法上简略了很多。然而实质上也是数组的循环。forEach
每个数组元素执行一次 callback 函数。也就是调用它的数组,因而,不会扭转原数组。返回值是undefine
。map
ES5 提出。给原数组中的每个元素都按顺序调用一次 callback 函数。生成一个新数组,不批改调用它的原数组自身。返回值是新的数组。for...in
ES5 提出。遍历对象上的可枚举属性,包含原型对象上的属性,且按任意程序进行遍历,也就是程序不固定。遍历数组时把数组的下标当作键值,此时的 i 是个字符串型的。它是为遍历对象属性而构建的,不倡议与数组一起应用。for...of
ES6 提出。只遍历可迭代对象的数据。
能力甄别
作为一个程序员,仅仅意识他们是远远不够的,在理论开发中甄别他们各自的优缺点。就地取材的应用他们,取长补短。从而进步程序的整体性能才是能力之所在。
对于跳出循环体
在循环中满足肯定条件就跳出循环体,或者跳过不符合条件的数据持续循环其它数据。是常常会遇到的需要。罕用的语句是break
与 continue
。
简略的说一下二者的区别,就当温习好了。
break
语句是跳出以后循环,并执行以后循环之后的语句;continue
语句是终止以后循环,并继续执行下一次循环;
留神:forEach
与map
是不反对跳出循环体的,其它三种办法均反对。
原理 :查看forEach
实现原理,就会了解这个问题。
Array.prototype.forEach(callbackfn [,thisArg]{}
传入的 function 是这里的回调函数。在回调函数外面应用 break 必定是非法的,因为 break 只能用于跳出循环,回调函数不是循环体。
在回调函数中应用 return,只是将后果返回到下级函数,也就是这个 for 循环中,并没有完结 for 循环,所以 return 也是有效的。
map()
同理。
map()
链式调用
map()
办法是能够链式调用的,这意味着它能够不便的联合其它办法一起应用。例如:reduce()
, sort()
, filter()
等。然而其它办法并不能做到这一点。forEach()
的返回值是undefined
,所以无奈链式调用。
// 将元素乘以自身,再进行求和。let arr = [1, 2, 3, 4, 5];
let res1 = arr.map(item => item * item).reduce((total, value) => total + value);
console.log(res1) // logs 55 undefined"
for...in
会遍历出原型对象上的属性
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
var arr = ['a', 'b', 'c'];
arr.foo = 'hello
for (var i in arr) {console.log(i);
}
// logs
// 0
// 1
// 2
// foo
// arrCustom
// objCustom
然而在理论的开发中,咱们并不需要原型对象上的属性。这种状况下咱们能够应用hasOwnProperty()
办法,它会返回一个布尔值,批示对象本身属性中是否具备指定的属性(也就是,是否有指定的键)。如下:
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
var arr = ['a', 'b', 'c'];
arr.foo = 'hello
for (var i in arr) {if (arr.hasOwnProperty(i)) {console.log(i);
}
}
// logs
// 0
// 1
// 2
// foo
// 可见数组自身的属性还是无奈解脱。此时倡议应用 forEach
对于纯对象的遍历,抉择 for..in
枚举更不便;对于数组遍历,如果不须要晓得索引 for..of
迭代更适合,因为还能够中断;如果须要晓得索引,则 forEach()
更适合;对于其余字符串,类数组,类型数组的迭代,for..of
更占上风更胜一筹。然而留神低版本浏览器的是配性。
性能
有趣味的读者能够找一组数据自行测试,文章就间接给出后果了,并做相应的解释。
for > for-of > forEach > map > for-in
for
循环当然是最简略的,因为它没有任何额定的函数调用栈和上下文;for...of
只有具备 Iterator 接口的数据结构,都能够应用它迭代成员。它间接读取的是键值。forEach
,因为它其实比咱们设想得要简单一些,它实际上是array.forEach(function(currentValue, index, arr), thisValue)
它不是一般的 for 循环的语法糖,还有诸多参数和上下文须要在执行的时候思考进来,这里可能拖慢性能;map()
最慢,因为它的返回值是一个等长的全新的数组,数组创立和赋值产生的性能开销很大。for...in
须要穷举对象的所有属性,包含自定义的增加的属性也能遍历到。且for...in
的 key 是String
类型,有转换过程,开销比拟大。
总结
在理论开发中咱们要联合语义话、可读性和程序性能,去抉择到底应用哪种计划。
如果你须要将数组依照某种规定映射为另一个数组,就应该用 map。
如果你须要进行简略的遍历,用 forEach 或者 for of。
如果你须要对迭代器进行遍历,用 for of。
如果你须要过滤出符合条件的项,用 filterr。
如果你须要先依照规定映射为新数组,再依据条件过滤,那就用一个 map 加一个 filter。
总之,就地取材,因时而变。千万不要因为过分谋求性能,而疏忽了语义和可读性。在您的统治之下,他们 5 个只能是各自施展短处,谁都别想称霸。
近期热文举荐:
1.1,000+ 道 Java 面试题及答案整顿(2021 最新版)
2. 别在再满屏的 if/ else 了,试试策略模式,真香!!
3. 卧槽!Java 中的 xx ≠ null 是什么新语法?
4.Spring Boot 2.5 重磅公布,光明模式太炸了!
5.《Java 开发手册(嵩山版)》最新公布,速速下载!
感觉不错,别忘了顺手点赞 + 转发哦!