forEach、filter、find、some、map、red

作者: 小小前端搬运工 | 来源:发表于2022-03-17 15:24 被阅读0次

forEach、filter、find、some、map、red
数组-循环方法
不能错过系列之生动形象解析js遍历方法
JavaScript常用遍历数组的几种方法
细说数组常用的遍历方法
（转）js数组常用遍历方式
细说数组常用遍历的方法
(四)ES6数组
数组的五大迭代方法
数组的迭代遍历方法

forEach方法

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // forEach 迭代(遍历) 数组
        var arr = [1, 2, 3];
        var sum = 0;
        arr.forEach(function(value, index, array) {
            console.log('每个数组元素' + value);
            console.log('每个数组元素的索引号' + index);
            console.log('数组本身' + array);
            sum += value;
        })
        console.log(sum);
    </script>
</body>
</html>

foreach.png

filter

filter 查找满足条件的元素返回的是一个数组 而且是把所有满足条件的元素返回回来
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // filter 筛选数组
        var arr = [12, 66, 4, 88, 3, 7];
        var newArr = arr.filter(function(value, index) {
            // return value >= 20;
            return value % 2 === 0;
        });
        console.log(newArr);
    </script>
</body>
</html>

filter.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr= [
            {id:1,name: "a", age: 12},
            {id:2,name: "b", age: 15},
            {id:3,name: "c", age: 16},
            {id:4,name: "d", age: 17},
            {id:5,name: "e", age: 14},
            {id:5,name: "f", age: 10},
            {id:5,name: "g", age: 19}
        ]
        let newarr=arr.filter(function(item){
            return item.age>15
        })
        console.log(newarr)
        // [{id: 3, name: 'c', age: 16}
        //  {id: 4, name: 'd', age: 17}
        //  {id: 5, name: 'g', age: 19}]
    </script>
</body>
</html>

filter2.png

find

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined

注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = [1, 2, 3];
        let arr1 = arr.find(function (item) {
            return item >= 2
        });
        console.log( arr1); // 2
    </script>
</body>
</html>

some

some 查找满足条件的元素是否存在返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false

注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // some 查找数组中是否有满足条件的元素 
        // var arr = [10, 30, 4];
        // var flag = arr.some(function(value) {
        //     // return value >= 20;
        //     return value < 3;
        // });
        // console.log(flag);
        var arr1 = ['red', 'pink', 'blue'];
        var flag1 = arr1.some(function(value) {
            return value == 'pink';
        });
        console.log(flag1);
        // 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
        // 2. some 也是查找满足条件的元素是否存在  返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环
    </script>
</body>
</html>

Map和Set

Map类型是键值对的有序列表，键和值是任意类型
Set 是唯一值的集合。
每个值在 Set 中只能出现一次。
一个 Set 可以容纳任何数据类型的任何值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //  集合：表示无重复值的有序列表
        let set = new Set();
        console.log(set);

        // 添加元素
        set.add(2);
        set.add('4');
        set.add('4');
        // set.add(['hello','world',3]);
        // 删除元素
        set.delete(2);
        // 校验某个值是否在set中
        console.log(set.has('4')); // true
        console.log(set.size);   // 1

        /* set.forEach((val,key)=>{
            console.log(val);
            console.log(key);
        }) */

        // 将set转换成数组
        let set2 = new Set([1, 2, 3, 3, 3, 4]);
        // 扩展运算符
        let arr = [...set2]
        console.log(arr); // 1, 2, 3, 4


        // 1.set中对象的引用无法被释放
        // let set3 = new Set(),obj = {};
        // set3.add(obj);
        // // 释放当前的资源
        // obj = null;
        // console.log(set3);

        let set4 = new WeakSet(),
            obj = {};
        set4.add(obj);
        // 释放当前的资源
        obj = null;
        console.log(set4);

        // WeakSet
        // 1.不能传入非对象类型的参数
        // 2.不可迭代
        // 3.没有forEach()
        // 4.没有size属性

        // Map类型是键值对的有序列表，键和值是任意类型

        /*  let map = new Map();
         map.set('name','张三');
         map.set('age',20);
         console.log(map.get('name'));
         console.log(map);
         map.has('name');//true
         map.delete('name');
         map.clear();
         console.log(map);
         map.set(['a',[1,2,3]],'hello');
         console.log(map); */

        let m = new Map([
            ['a', 1],
            ['c', 2]
        ]);
        console.log(m);
    </script>
</body>
</html>

map set.png

map

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let first = new Map([
            [1, 'one'],
            [2, 'two'],
            [3, 'three'],
        ]);
        let second = new Map([
            [1, 'uno'],
            [2, 'dos']
        ]);
        // Map对象同数组进行合并时，如果有重复的键值，则后面的会覆盖前面的。
        let merged = new Map([...first, ...second, [1, 'eins']]);
        console.log(merged.get(1)); // eins
        console.log(merged.get(2)); // dos
        console.log(merged.get(3)); // three

        let arr = [2,3,5,6,7,8]
        let arr1 = arr.map(function(item){
            return item >5;
        })
        console.log(arr1)//[false,false,false,true,true,true]
    </script>
</body>
</html>

map.png

reduce

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var numbers = [65, 44, 12, 4];
        function getSum(total, num) {
            return total + num;
        }
        var num = [1, 2, 3]
        console.log(numbers.reduce(getSum));  // 125
        console.log(num.reduce(getSum));  // 6
    </script>
</body>
</html>

every

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = [2, 4, 6, 8];
        let flag = arr.every(function(item) {
            return item > 6
        });
        console.log(flag); // false
    </script>
</body>
</html>

forEach、filter、find、some、map、red
forEach方法迭代(遍历) 数组forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。注...
数组-循环方法
遍历数组方法for、forEach、map、filter、every、some、reduce --- find、...
不能错过系列之生动形象解析js遍历方法
本文解释了forEach、filter、map、some、every、find、findIndex间的区别前言 ...
JavaScript常用遍历数组的几种方法
介绍数组常见遍历方法：forEach、map、filter、find、every、some、reduce，它们有个...
细说数组常用的遍历方法
前言本文主要介绍数组常见遍历方法：forEach、map、filter、find、every、some、redu...
（转）js数组常用遍历方式
前言本文主要介绍数组常见遍历方法：forEach、map、filter、find、every、some、reduc...
细说数组常用遍历的方法
前言本文主要介绍数组常见遍历方法：forEach、map、filter、find、every、some、redu...
(四)ES6数组
本节主要讲解数组的方法 forEach map filter find every some reduce 先说原...
数组的五大迭代方法
forEach();some();every();map();filter();
数组的迭代遍历方法
map()--foreach()--every()---some()---filter()