如何更优雅的写for循环

Posted 2020-10-14 轻叹花开花落的流年

这是一个由for循环触发的感想。哪里写的不好欢迎拍砖。对格式有要求的 请移步: http://51viola.top

重构片段一：循环

举例：之前习惯顺着逻辑思路一层层往下写

function test1(arr) {
    for (let i = 1; i < arr.length; i++) {
        arr[i] *= 2
        if (arr[i] % 2 === 0) {
            doSomething(arr[i])
        }
    }
}

声明式方式重写这段代码

function test1(arr) {
    const evenNumbers = n => n % 2 === 0
?
    arr.slice(1)
       .map(v => v * 2)
       .filter(evenNumbers)
       .forEach(v => doSomething(v))    
}

<!-- more -->

紧接着上面demo看

重构片段二：常用的处理数组的方法

slice — arrayObject.slice(start,end)

slice 返回一个子数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

不设定end参数，表示获取从start 到 数组结尾的所有元素。

map

arr.map([1, 2, 3], function(num){ return num * 3; });
=> [3, 6, 9]

 

通过对数组里的每个元素调用转换函数(iteratee迭代器)生成一个与之相对应的数组。

filter

遍历数组中的每个值，返回所有通过函数真值检测的元素所组成的数组。

 

重构片段三：使用箭头函数

箭头函数是es6中新语法

var reflect = function(value) {
    return value;
};

等同于：

let reflect = value => value; 

let也是es6新语法，我理解的是它比var更严谨，因为let声明的变量只在所在的代码块内有效

如果只有一个表达式,大括号{...}和return都可以省略.

那么问题来了- 我们为什么使用箭头函数？

我们暂且不谈代码更加简洁 这个事，更重要的是，this总是指代外层调用对象，这样就不再需要var that = this.