【学习笔记23】JavaScript数组的遍历方法

笔记首发

1、forEach

• 语法: 数组.forEach(function(item, index, origin){})
• 参数：
  1. item: 数组实际每一项的值
  2. index: 数组每一项对应的下标
  3. origin:原数组
• 作用: 遍历数组
• 返回值: 返回值是undefined，哪怕你手写了return，也是undefined

        var arr = [1, 2, 3, 4, 5];
        
        arr.forEach(function(item, index, origin){
            console.log(item, index, origin);
        })

        var arr = [1, 2, 3, 4, 5];
        var newArr = arr.forEach(function(item, index, origin) {
            return item;
        })
        console.log(newArr);

2、map

• 语法: 数组.map(function (item, index, origin) {})
• 参数：
  1. 数组每一项实际的值
  2. 数组每一项实际的值对应的下标
  3. 原数组
• 作用: 映射数组
• 返回值: 返回一个和原数组长度一样的数组, 返回的数组的每一个值, 取决参数的return怎么写

       var arr = [1, 2, 3, 4, 5];

        var newArr = arr.map(function (item, index, origin) {
            console.log(item, index, origin)
            return item * 2
        })
        console.log('newArr ---> ', newArr)

3、filter

• 语法:数组.filter(function (item, index, origin) { })
• 参数：
  1. 数组每一项实际的值
  2. 数组每一项实际的值对应的下标
  3. 原数组
• 作用: 过滤数组
• 返回值: 过滤数组后的新数组, 过滤条件取决于参数的return怎么写

        var arr = [1, 2, 3, 4, 5];
        
        arr.filter(function (item, index, origin) {
            console.log(item, index, origin)
        });
​
        var newArr = arr.filter(function (item, index, origin) {
            return item > 3;
        });
         console.log('newArr ---> ', newArr)

4、find

• 语法:数组.find(function (item, index, origin) { })
• 参数：
  1. 数组每一项实际的值
  2. 数组每一项实际的值对应的下标
  3. 原数组
• 作用: 查找数据
• 返回值: 在数组内找到的第一个数据(不是数组)

        var arr = [1, 2, 3, 4, 5];
        
        arr.find(function (item, index, origin) {
            console.log(item, index, origin)
        })
​
        var newArr = arr.find(function (item, index, origin) {
            return item > 3
        })
        console.log('newArr ---> ', newArr);

5、findIndex

• 语法：数组.findIndex(function (item, index, origin) { })
• 参数：
  1. 数组每一项实际的值
  2. 数组每一项实际的值对应的下标
  3. 原数组
• 作用: 查找数据第一次出现的下标
• 返回值: 在数组内找到的第一个数据出现的下标

        var arr = [1, 2, 3, 4, 5];
        
        arr.findIndex(function (item, index, origin) {
            console.log(item, index, origin);
        });
        
        var newArr = arr.findIndex(function (item, index, origin) {
            return item > 3;
        });
        console.log('newArr ---> ', newArr);

6、every

• 语法：数组.every(function(item, index, origin){ })
• 参数：
  1. 数组每一项实际的值
  2. 数组每一项实际的值对应的下标
  3. 原数组
• 作用:判断数组内数据是否全都满足条件
• 返回值: 一个布尔值
  1. true：数组内数据全都符合条件
  2. false：数组内起码有一个数据 不符合条件

        var arr = [1, 2, 3, 4, 5];
        console.log('原数组',arr);
        
        arr.every(function (item, index, origin) {
            console.log(item, index, origin)
        })
        var newArr = arr.every(function (item, index, origin) {
            return item > 0
        })
        console.log('返回值：', newArr);

7、some

• 语法：数组.some(function (item, index, origin) {})
• 参数：
  1. 数组每一项实际的值
  2. 数组每一项实际的值对应的下标
  3. 原数组
• 作用: 判断数组内数据是否，有一项满足条件的
• 返回值: 一个布尔值
  1. true：表示数组内至少有一项满足条件
  2. false：数组内数据全都不满足条件

        var arr = [1, 2, 3, 4, 5];
​
        arr.some(function (item, index, origin) {
            console.log(item, index, origin)
        })
        var newArr = arr.some(function (item, index, origin) {
            return item > 300
        })
        console.log('返回值：', newArr);

8、reduce

• 语法：数组.reduce(function (prve, item, index, origin) {}, init)
• reduce方法的参数
  1. 如果传递第二个参数 init, 执行次数和数组长度相同
  2. 如果不传递第二个参数init, 默认第一值为数组第一项的值, 并且执行次数在数组长度上减1
• 参数1的函数中4个形参的含义：
  1. 表示初始值或者数组第一项的值(具体是什么取决于是否传递init)
  2. 数组每一项实际的值
  3. 数组每一项实际的值对应的下标
  4. 原数组
• 作用: 累加(叠加)
• 返回值: 循环运行结束后得到的值

        var arr = [1, 2, 3, 4, 5];
​
        arr.reduce(function (prve, item, index, origin) {
            console.log(prve, item, index, origin)
        })
​
        var num = arr.reduce(function (prve, item, index, origin) {
            console.log(prve)
            return prve + item
        }, 'init--->')
​
​
        var num = arr.reduce(function (prve, item, index, origin) {
            return prve * item
        }, 1)
​
        console.log(num)