forEach、filter、find、some、map、reduce、every的用法

forEach方法

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

  • 注意: forEach() 对于空数组是不会执行回调函数的。
  • <!DOCTYPE html>
    <html lang="en">
        <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>
        <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>
    

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

    <!DOCTYPE html>
    <html lang="en">
        <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>
        <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>
        <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>
        <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>
    

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

  • 注意: find() 对于空数组,函数是不会执行的。
  • 注意: find() 并没有改变数组的原始值。
  • <!DOCTYPE html>
    <html lang="en">
        <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>
        <script>
            let arr = [1, 2, 3];
            let arr1 = arr.find(function (item) {
                return item >= 2
            console.log( arr1); // 2
        </script>
    </body>
    </html>
    

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

  • 注意: some() 不会对空数组进行检测。
  • 注意: some() 不会改变原始数组。
  • <!DOCTYPE html>
    <html lang="en">
        <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>
        <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">
        <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>
        <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>
        <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>
        <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>
        <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>
        <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">
        <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>
        <script>
            let arr = [2, 4, 6, 8];
            let flag = arr.every(function(item) {
                return item > 6