前端循环系列笔记

jeckson

共 792字,需浏览 2分钟

 · 2021-02-24

1、map

f3bfd691ba8318a15f1c7b9675bc4ec9.webp625f508d84c6ccab8e58008b4d62de09.webp


返回新的Array

返回一个和原数组长度一样的新数组,数组中的元素为原始数组元素调用函数处理后的值。

不会改变原始数组

不会改变原始数组


2、filter

ccd07f20b3c4040b69d44b06ecd4cc41.webp


65034f2ae931ddd406be0c2dca2c3160.webp

返回新的Array

    创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

    回调函数有return返回值,若返回值为true,这个元素保存到新数组中;若返回值为false,则该元素不保存到新数组中;

不会改变原始数组

不会改变原始数组

3、foreach

c37b8b69510c83210b65b4adb10cc4ed.webp6e1b17d0df62a746fdd9fe6fb20e9b88.webp


4、for of

29f714da7463e1288ce26218aac64d95.webp6e1b17d0df62a746fdd9fe6fb20e9b88.webp

5、while

36edd5652684a7f14f509044b0e8ec89.webp6e1b17d0df62a746fdd9fe6fb20e9b88.webp

6、for

57d97271632dd2dbfac2b7494b38c5be.webp6e1b17d0df62a746fdd9fe6fb20e9b88.webp


对于for循环,我们在熟悉不过了,你是不是都在用下面一和二写法呢,不妨试一试第三种?

bad

function method1() {  

let arrCopy = []  

for (let i = 0; i < hugeArr.length; i++) {      arrCopy.push(hugeArr[i])  

}

weak

function method2() {  

let arrCopy = []  

for (let i = 0, len = hugeArr.length; i < len; i++) {    

arrCopy.push(hugeArr[i])  

}

good

function method4() {  

let arrCopy = []  

for (let i = hugeArr.length; i--;) {    arrCopy.push(hugeArr[i])  

}



总结

1、ES6新语法并不是为了提升效率而出现,使得前端更方便,代码更简洁。

2、语句的效率和环境浏览器关系密切,没有太大的区别。

3、语句的选用应根据数据结构、业务需求来。

4、尽可能的减少变量使用。

5、三思而后行。

写得质量不是很好,有什么建议和问题欢迎留言偶。

浏览 14
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报