数组常用的几个方法

不念不忘少年蓝@ 2022-12-24 06:54 165阅读 0赞

这里新创建了一个专题，为自己之后的跳槽做准备，每天给自己一个小时的时间去看网上的一些面试题，并且将这些面试题的答案加上自己思考以及动手时间的内容整理成笔记，记录下来。  
尤其是在下班之后没有事情做的时候，不要想着去玩游戏，而是花一点点的时间去浏览一下这两年前端市场里面出现的一些知识点吧~~

今天记录一下平时经常会用到的一些数组方法~~

数组常用的几个方法~~·

1：ES6系列笔记-数组方法filter(过滤)  
就是留下经过我们处理的符合条件的结果 过滤也就是筛选的意思

例子1：过滤掉不能被3整除的数，打印出来能被整除的数

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
        <script>
            //过滤器filter
            let arr = [12, 33, 66, 99, 5]
            let result = arr.filter(item => {
                if (item % 3 == 0) {
                    return true;
                } else {
                    return false;
                }
            })
             console.log(result)
        </script>
    </html>

打印结果如下：

![5677e6c3b3ed37d2d60bd138845cdbab.png][]

或者这样写，效果是一样的

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
        <script>
            let arr = [11, 33, 66, 99, 5]
            let result = arr.filter(item => {
                return item % 3 == 0;
            })
            console.log(result)
        </script>
    </html>

打印结果如下：

![84a023dcaa72d2121bda1a91ca14e6af.png][]

例子2：过滤商品价格小于10000元的商品，打印大于10000元的商品

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
        <script>
            //商品列表
            let arr = [{
                    title: '笔记本电脑',
                    price: 12033
                },
                {
                    title: '智能音箱',
                    price: 99
                },
                {
                    title: '鼠标',
                    price: 33
                },
                {
                    title: '单反摄像机',
                    price: 20000
                },
            ]
            let result = arr.filter(item => item.price >= 10000);
            console.log(result)
        </script>
    </html>

打印结果如下：

![b7ec0d0f4ea551f01b1c1407e0f11070.png][]

2：ES6系列笔记-数组方法map(映射)  
一般写法

//一般写法
            let arr=[12,5,8];
            let result= arr.map(function(item){
                    return item*2;
            })  
            console.log(result)

![f90f92ecf6972ee468ea3fe4f59dbefd.png][]

箭头函数写法

//箭头函数
            let arr=[10,5,8];
            let result= arr.map(item=>{
                    return item*2;
            })  
            console.log(result)

![60686eca98755aae4ced3b0ced260d2e.png][]

去掉花括号的写法(只有一个return的时候，\{\}可以省略)

let arr=[10,5,9];
            let result=arr.map(item=>item*2);   
            console.log(result)

![e6878035da9a4e77c6cc7c39aab6b0ba.png][]

示例：判断数组所对应的的状态是否及格

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
        <script>
            let scroe = [12, 77, 88, 99, 33, 100, 59];
            let result = scroe.map(item => item >= 60 ? '及格' : '不及格');
            console.log(scroe)
            console.log(result)
        </script>
    </html>

![da583bf35073d1d543317eff58505420.png][]

3：ES6系列笔记-数组方法reduce  
reduce应用场景：计算数组中所有值的总和  
数组求和：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
        <script>
            //一堆变成一个，算总数
            let arr = [12, 33, 66, 99]
            let result = arr.reduce(function(tmp, item, index) {
                return tmp + item
            })
            console.log(result);
        </script>
    </html>

打印结果如下：

![0a751120e24fde98550f3a763fda4354.png][]

4：ES6系列笔记-数组方法 forEach循环遍历(迭代)

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
        <script>
            let arr = [12, 4, 6, 89, 2]
            arr.forEach(item => {
                console.log(item)
            })
        </script>
    </html>

打印结果如下：

![e3c6c6c7dfd2d313b652503eb7550533.png][]

参数index

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
        <script>
            let arr = [12, 4, 6, 89, 2]
            //参数index
            arr.forEach((item,index) => {
                console.log(index+ ':' +item)
            })
        </script>
    </html>

打印结果如下：

![fb4039cc0d3f69d597199827a9b24db8.png][]

[5677e6c3b3ed37d2d60bd138845cdbab.png]: /images/20221120/75f3d35dba454eccb024a82d17bc5067.png
[84a023dcaa72d2121bda1a91ca14e6af.png]: https://img-blog.csdnimg.cn/img_convert/84a023dcaa72d2121bda1a91ca14e6af.png
[b7ec0d0f4ea551f01b1c1407e0f11070.png]: https://img-blog.csdnimg.cn/img_convert/b7ec0d0f4ea551f01b1c1407e0f11070.png
[f90f92ecf6972ee468ea3fe4f59dbefd.png]: https://img-blog.csdnimg.cn/img_convert/f90f92ecf6972ee468ea3fe4f59dbefd.png
[60686eca98755aae4ced3b0ced260d2e.png]: https://img-blog.csdnimg.cn/img_convert/60686eca98755aae4ced3b0ced260d2e.png
[e6878035da9a4e77c6cc7c39aab6b0ba.png]: https://img-blog.csdnimg.cn/img_convert/e6878035da9a4e77c6cc7c39aab6b0ba.png
[da583bf35073d1d543317eff58505420.png]: https://img-blog.csdnimg.cn/img_convert/da583bf35073d1d543317eff58505420.png
[0a751120e24fde98550f3a763fda4354.png]: https://img-blog.csdnimg.cn/img_convert/0a751120e24fde98550f3a763fda4354.png
[e3c6c6c7dfd2d313b652503eb7550533.png]: https://img-blog.csdnimg.cn/img_convert/e3c6c6c7dfd2d313b652503eb7550533.png
[fb4039cc0d3f69d597199827a9b24db8.png]: https://img-blog.csdnimg.cn/img_convert/fb4039cc0d3f69d597199827a9b24db8.png