js中常用数组方法的使用

最新推荐文章于 2023-05-31 09:34:20 发布

达不U

最新推荐文章于 2023-05-31 09:34:20 发布

阅读量285

点赞数

分类专栏： js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_53963503/article/details/127489887

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

数组方法

1.foreach()，数组的遍历，一般利用箭头函数，不能用break打断循环
2.map()，数组的遍历并且返回一个新数组，一般转换成字符串后用于页面渲染
3.filter()，数组的筛选，筛选后返回一个新数组，一般用于筛选数组对象中某个属性满足条件后的新数组
4.every()，检测数组是否每一个元素都满足条件，返回true或false，数组为空时返回为true，一般用于全选按钮案例
5.some()，检测数组是否有一个满足条件的元素，返回true或false，数组为空时返回false，工作中最常用
6.find()，找到符合元素的第一个元素，返回找到的那个元素，只返回一个元素,没有则返回undefined
7.findIndex()，找到符合元素的下标，只返回找到那个元素的第一个元素的下标，不满足则返回-1
8.includes()，找到是否包含某个元素的元素并且输出包含元素的元素，不能用于复杂的查找，复杂的查找用find()，没有则返回false
9.indexOf()，判断数组中的所有元素是否包含某个元素，包含则返回数组的下标，不包含则返回-1
10.Array.isArray()，判断是否是数组
11.reduce()方法，讲将数组从左到右计算为为一个值，一般用于计算数组的总合、页面的渲染

数组去重的时候进行取反操作，意为当结果不成立时

**.sort() 方法用原地算法对数组的元素进行排序，并返回数组 **
.fill()固定填充元素，填充成指定元素，从起始索引到终止索引
.reverse() 将数组中元素的位置颠倒，并返回该数组

findIndex（）和indexOf（）方法的区别

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

findIndex（）方法可以接收一个测试函数，根据测试函数来寻找索引

用set方法数组去重

实例化一个set对象，实例化的时候传入需要去重的数组
```
let set = new Set(需要去重的数组)
```
将去重后得到的set对象转换为数组赋值给原数组
```
arr=[...set]
```
得到去重后的数组

every()，返回true或false-常用案例（全选）

1.此方法意为是否全部满足条件，全满足为true，不全满足为false

2.此方法为数组的使用方法，如果是伪数组的话是不可以使用的，伪数组可以使用[…伪数组]转为真数组

3.此方法如果数组为空时返回值是true

    <script>
        const arr = [11, 23, 45]
        let yes = arr.every(v => v > 10)
        console.log(yes);//true
    </script>

全选案例

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        .allCheck {
            width: 80px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th class="allCheck">
                <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
        </tr>
    </table>
    <script>
        const cks = document.querySelectorAll('.ck');
        const checkAll = document.querySelector('#checkAll');
        cks.forEach(v => {
            v.addEventListener('click', function () {
                let selall = [...cks].every(v => v.checked)
                if (selall) {
                    checkAll.checked = true
                } else {
                    checkAll.checked = false
                }
            })
        })
        checkAll.addEventListener('click', function () {
            if (checkAll.checked) {
                cks.forEach(v => {
                    v.checked = true
                })
            } else {
                cks.forEach(v => {
                    v.checked = false
                })
            }
        })

    </script>
</body>

</html>

数组复制（延展运算符的运用）

1.如果将两个数组直接用=连接起来的话，两个数组指向的地址是一样的，所以任意一个数组的值发生了改变的话两个数组的值都会一起改变

2.为了避免这种情况的发生，使用延展运算符进行数组的复制

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

        let obj = { u: '1', a: 'a' };
        let newobj = { ...obj };
        newobj.u = 'u';
        console.log(obj, newobj);
    </script>

Set对象

永远不会有重复元素的对象

    <script>
        let arr = [1, 3, 4, 5, 6, 6, 6];
        // 将数组转换为set对象（去重）
        let set = new Set(arr);
        console.log(set);
        // 再将对象转换为数组（延展运算符）
        arr = [...set];
        console.log(arr);
    </script>