JavaScript常用循环方法介绍

JavaScript常用循环方法总结

map

map 方法会把每一次返回的值添加到新数组中，它要有 return 否则就失去了 map 的意义

map 不改变原数组，他会把值返回给新的数组

		let arr = [10, 20, 30, 40, 50]
		let newArr = arr.map(item => {
            return item += 5
		})
		console.log(newArr);
         // [15, 25, 35, 45, 55]

forEach

forEach 方法与 map 方法十分相似，都可以对数组进行循环操作，但不同的是 forEach 不返回值，只能用于操作数据。如果以得到返回值为目的，则需要用到 map 方法, 否则两者之间没有任何区别

        let arr = [10, 20, 30, 40, 50]
        arr.forEach((item, index) => {
            console.log("索引：", index, "每一项的值：", item);
        })
        // 索引： 0 每一项的值： 10
        // 索引： 1 每一项的值： 20
        // 索引： 2 每一项的值： 30
        // 索引： 3 每一项的值： 40
        // 索引： 4 每一项的值： 50

forEach 循环中 return 无效

        let arr = [10, 20, 30, 40, 50]
        let newArr = arr.forEach((item, index) => {
            return item += 5
        })
        console.log(newArr); // undefined

forEach 主要用于替代传统的 for 循环，因为 forEach 非常方便

filter

filter 顾名思义，它主要用于过滤数组中的数据

过滤大于等于30的数据然后返回给新数组

        let arr = [10, 20, 30, 40, 50]
        let newArr = arr.filter(item => {
            return item >= 30
        })
        console.log(newArr);
        // [30, 40, 50]

some

该方法用于判断数组中每一项是否为 true，只要有一个值为 true 则它的返回值就为 true

        let arr = [10, 20, 30, 40, 50]
        let newArr = arr.some(item => {
            return item === 30
        })
        console.log(newArr);
        // true

全部为false，返回值才为 false

        let arr = [10, 20, 30, 40, 50]
        let newArr = arr.some(item => {
            return item === 60
        })
        console.log(newArr);
        // false

every

该方法与 some 方法恰恰相反，只要有一个值为 false，那么结果就为 false

find

该方法用于查找数组中某个元素

        let arr = [10, 20, 30, 40, 50]
        let index = arr.find(item => {
            return item === 30
        })
        console.log(index); //30

findIndex

该方法用于查找数组中指定元素的索引下标

        let arr = [10, 20, 30, 40, 50]
        let index = arr.findIndex(item => {
            return item === 30
        })
        console.log(index); //2

reduce

该方法主要用于计算数组中的累加和，参数一为累加和的变量，参数二为每一项的值，参数三为从多少开始累加

        let arr = [10, 20, 30, 40, 50]
        let sum = arr.reduce((sum, item) => {
            return sum += item
        }, 0)
        console.log(sum); //150

sort

该方法主要用于对数组进行排序，例如：

    const list = [3, 1, 2, 7, 9]

    // 默认从小到大排序
    list.sort()
    console.log(list);
    // [1, 2, 3, 7, 9]

可以发现 sort 方法会改变原数组

接下来演示一下复杂的应用场景：循环每一项通过 cid 的大小进行排序

    const list = [
      {
        name: "zs",
        cid: 1
      },
      {
        name: "ls",
        cid: 3
      },
      {
        name: "ww",
        cid: 6
      },
      {
        name: "xm",
        cid: 2
      },
    ]

    // 从小到大排序
    list.sort((a, b) => a.cid - b.cid)
    console.log(list);
    // { name: 'zs', cid: 1 }
    // { name: 'xm', cid: 2 }
    // { name: 'ls', cid: 3 }
    // { name: 'ww', cid: 6 }

    // 从大到小排序 只需要将a与b的位置互换即可
    list.sort((a, b) => b.cid - a.cid)
    console.log(list);
    // { name: 'ww', cid: 6 }
    // { name: 'ls', cid: 3 }
    // { name: 'xm', cid: 2 }
    // { name: 'zs', cid: 1 }