30_JavaScript之数组高级方法

1.遍历数组

方法一：for循环

    <script>
        let arr = [1, 3, 5, 7, 9];
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
    </script>

方法二：利用for in循环来遍历数组（不推荐）

    <script>
        let arr = [1, 3, 5, 7, 9];
        for (let key in arr) {
            console.log(arr[key]);
        }
    </script>

方法三：利用ES6中推出的for of循环来遍历数组

    <script>
        let arr = [1, 3, 5, 7, 9];
        for (let value of arr) {
            console.log(value);
        }
    </script>

方法四：可以利用Array对象的forEach方法来遍历数组

语法：arr.forEach(arr.forEach(function (currentValue, currentIndex, currentArray){}）

forEach() 方法对数组的每个元素执行一次给定的函数

    <script>
        let arr = [1, 3, 5, 7, 9];
        arr.forEach(function(currentValue) {
            console.log(currentValue);
        });
    </script>

2.数组的查询

方法一：indexOf 和 lastIndexOf

    <script>
        let arr = [1, 5, 3, 3, 9];
        let result1 = arr.indexOf(3); // indexOf 从左往右查找
        let result2 = arr.lastIndexOf(3); // lastIndexOf 从左往右查找.
        let flag1 = arr.includes(3); // // 从左往右查找, 找到返回true
        let flag2 = arr.includes(33); // 找不到返回false
        console.log(result1);
        console.log(result2);
        console.log(flag1);
        console.log(flag2);
    </script>

控制台输出：

方法二：findIndex方法

findIndex() 方法对数组的每个元素执行一次给定的函数

语法：arr.findIndex(arr.forEach(function (currentValue, currentIndex, currentArray){}）

    <script>
        let arr = [1, 5, 3, 3, 9];
        let result = arr.findIndex(function(currentValue) {
            if (currentValue == 3) {
                return true;
            }
        })
        console.log(result); // 找得到返回指定元素的索引，找不到返回-1
    </script>

方法三：数组的find方法

    <script>
        let arr = [1, 5, 3, 3, 9];
        let result = arr.find(function(currentValue) {
            if (currentValue == 33) {
                return true;
            }
        })
        console.log(result); // 找得到返回指定元素的索引，找不到返回undefined
    </script>

3.筛选数组并添加到一个新数组中

方法一：filter()

语法：arr.filter(arr.forEach(function (currentValue, currentIndex, currentArray){}）

filter() 方法对数组的每个元素执行一次给定的函数

    <script>
        let arr = [1, 2, 3, 4, 5];
        let newArr = arr.filter(function(currentVale) {
            if (currentVale % 2 == 0) {
                return true;
            }
        })
        console.log(newArr);
    </script>

控制台输出：

方法二：map()

    <script>
        let arr = [1, 2, 3, 4, 5];
        let newArr = arr.map(function(currentValue) {
            if (currentValue % 2 == 0) {
                return currentValue;
            }
        })
        console.log(newArr);
    </script>

控制台输出：

4.数组的删除

方法一：splice()
格式：splice(从哪个索引号开始，删除几个元素)

    <script>
        let arr = [1, 2, 3, 4, 5];
        arr.splice(0, 1);
        console.log(arr);
    </script>

控制台输出：

方法二：通过deletel

    <script>
        let arr = [1, 2, 3, 4, 5];
        for (let i = 0; i < arr.length; i++) {
            // 注意点: 通过delete来删除数组中的元素, 数组的length属性不会发生变化
            delete arr[i];
        }
        console.log(arr);
    </script>

控制台输出：

5.数组的排序

sort（）

    <script>
        let arr = [1, 22, 13, 44, 35];
        console.log("排序前：" + arr);
        arr = arr.sort();
        console.log("排序后：" + arr);
    </script>

控制台输出：

    <script>
        let arr = [1, 22, 13, 44, 35];
        console.log("排序前：" + arr);
        arr = arr.sort(function(a, b) {
            if (a > b) {
                return -1;  //降序
            } else if (a < b) {
                return 1;
            } else {
                return 0;
            }
        });
        console.log("排序后：" + arr);
    </script>

代码简化：

    <script>
        let arr = [1, 22, 13, 44, 35];
        console.log("排序前：" + arr);
        arr = arr.sort(function(a, b) {
            return b - a;
        });
        console.log("排序后：" + arr);
    </script>

规律: 如果数组中的元素是数值类型
如果需要升序排序, 那么就返回a - b;
如果需要降序排序, 那么就返回b - a;

比较字符串长度：

   <script>
        let arr = ["1234", "21", "54321", "123", "6"];
        console.log("排序前：" + arr);
        arr = arr.sort(function(a, b) {
            return b - a;
        });
        console.log("排序后：" + arr);
    </script>

控制台输出：

比较对象的年龄，并从小到大排序

    <script>
        let students = [{
            name: "zs",
            age: 34
        }, {
            name: "ls",
            age: 18
        }, {
            name: "ww",
            age: 22
        }, {
            name: "mm",
            age: 28
        }, ];
        students.sort(function(o1, o2) {
            return o1.age - o2.age;
        });
        console.log(students);
    </script>

控制台输出：