React 循环遍历

学习目标

• forEach
• map
• filter
• reduce
• for...in
• for..of

forEach

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

 

语法：forEach( currentValue , index , arr)

 

<script>
    let arr = [1,2,3,4,5,6,7,8];
    arr.forEach((item, index, arr) => {
        console.log('item:' + item + ',index' + index);
        console.log(arr);
    })
</script>

arr一般不作参数传入，所以一般写法为forEach(item, index)

forEach没有返回值

<script>
    let arr = [1,2,3,4,5,6,7,8];
    let res = arr.forEach((item, index, arr) => {
        console.log('item:' + item + ',index' + index);
    })
    console.log(res);
</script>

forEach没有返回值，因此res为undefined。

map

对数组每一项进行加工，加工完成之后返回一个新的数组。

 

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

 

<script>
    let arr = [1,2,3,4,5,6];
    console.log(arr);
    let res = arr.map((item, index, arr) => {
        let str = item + index;
        return str;
    })
    console.log(res);
    console.log(arr);
</script>

map前后的arr没有变化，res是新数组 res[i] = arr[i] + i;

 

列表循环选择map是因为，列表是一个数组，map的返回结果也是数组，forEach返回undefined。

 

filter

<script>
    let arr = [1,2,3,4,5,6];
    console.log(arr);
    let res = arr.filter((item, index, arr) => {
        if (item%2 == 0) {
            return true;
        } else {
            return false
        }
    })
    console.log(res);
    console.log(arr);
</script>

filter（过滤）：对内容进行筛选。false即去除，true即留下。生成新数组，不影响原来数组。

 

reduce

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

 

语法： array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

<script>
    let arr = [1,2,3,4,5,6];
    console.log(arr);
    let res = arr.reduce((total, currentValue, currentIndex) => {
        console.log("total:" + total + ",currentValue:" + currentValue + ",currentIndex:" + currentIndex)
        return total+currentValue;
    }, 0)
    console.log(res);
    console.log(arr);
</script>

for...in..

for ... in是为遍历对象属性而构建的，不适用于遍历数组。

<script>
    var obj = {a:1, b:2, c:3};
    for (var key in obj) {
      console.log("key:" + key + "; value: " + obj[key]);
    }
</script>

接受一个对象作为参数。被调用时迭代传入对象的所有可枚举属性然后返回一个所有属性名和其对应值的字符串。循环key值。

for...of

在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

<script>
    var obj = [1,2,3,4,5];
    for (var item of obj) {
      console.log(item);
    }
</script>