js数组操作方法学习

最新推荐文章于 2023-05-24 21:50:08 发布

自由2017

最新推荐文章于 2023-05-24 21:50:08 发布

阅读量695

点赞数

分类专栏： js 文章标签： javascript 数组方法

本文链接：https://blog.csdn.net/liujie19901217/article/details/50825327

版权

js 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

concat方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>concat</title>
    </head>
    <body>
    <script type="text/javascript">
    /*
    在没有给concat方法传递参数的情况下，concat方法会复制当前数组并返回副本
    如果传递一或多个数组，则会将这每一项都添加到结果数组中
     */
        var color=["red","blue","green"];
        console.log(color.concat());// ["red", "blue", "green"]
        var color2=color.concat("yellow",["heihei","hahha"]);
        console.log(color2);//["red", "blue", "green", "yellow", "heihei", "hahha"]
    </script>
    </body>
</html>

slice方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>slice方法</title>
    </head>
    <body>
    <script type="text/javascript">
        var color=["red", "blue", "green", "yellow", "heihei", "hahha"];
        //如果只有一个参数，则返回从指定位置开始到当前数组末尾的所有项
        var color2=color.slice(1);
        console.log(color2);// ["blue", "green", "yellow", "heihei", "hahha"]
        var color3=color.slice(1,4);//包含头不包含尾
        console.log(color3);//["blue", "green", "yellow"]
    </script>
    </body>
</html>

splice方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>splice方法</title>
    </head>
    <body>
    <script type="text/javascript">
        /*
        删除：接收两个参数：要删除的第一项的位置和要删除的项数
        插入：接收3个参数：起始位置、要删除的项数，要插入的项
        替换：三个参数：起始位置、要删除的项、要插入的项
        splice方法始终会返回一个数组，数组中包含从原始数组中删除的项
         */
        var color=["red", "blue", "green", "yellow", "heihei", "hahha"];
        //删除
        var color1=color.splice(1,2);
        console.log(color1);// ["blue", "green"]
        console.log(color);//["red", "yellow", "heihei", "hahha"]
        //插入
        var color2=color.splice(1,0,"hehe","xiaxia");
        console.log(color2);// []  返回空数组表示没有删除
        console.log(color);// ["red", "hehe", "xiaxia", "yellow", "heihei", "hahha"]
        //替换
        var color3=color.splice(1,1,"purple");
        console.log(color3);// ["hehe"]
        console.log(color);// ["red", "purple", "xiaxia", "yellow", "heihei", "hahha"]
    </script>
    </body>
</html>

位置方法indexOf和lastIndexOf

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>位置方法</title>
    </head>
    <body>
    <script type="text/javascript">
        /*
        indexOf和lastIndexOf   这两个方法都可以接收两个参数：要查找的项和查找的位置
        这两个方法都返回查找项所在的位置，找不到则返回-1
        indexOf是从前往后查找，lastIndexOf正好相反
        可以利用indexOf方法来实现数组去重
         */
         var arr=[1,2,2,4,1,3,5,4];
         function unique(msg){
            var res=[];
            for(var i=0;i<msg.length;i++){
                if(res.indexOf(msg[i])==-1){
                    res.push(msg[i]);
                }
            }
            return res;
         }
         console.log(unique(arr));// [1, 2, 4, 3, 5]
         console.log(arr.indexOf(4));//3
         console.log(arr.indexOf(4,4));//7
         console.log(arr.lastIndexOf(4));//7
         console.log(arr.lastIndexOf(4,6));//3
    </script>
    </body>
</html>

迭代方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>some和every方法</title>
    </head>
    <body>
    <script type="text/javascript">
    //some方法对数组中每一项运行给定函数，如果该函数对任意一项返回true，则返回true
    //every方法对数组中每一项运行给定函数，如果该函数对所有项返回true，则返回true
        var arr=[1,2,3,4,5,4,3,2,1];
        var res=arr.some(function(item,index,array){
            return item>3;
        });
        var res1=arr.every(function(item,index,array){
            return item>3;
        });
        console.log(res);//true
        console.log(res1);//false
    </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>迭代方法forEach</title>
    </head>
    <body>
    <script type="text/javascript">
        /*
        迭代方法都可以接收两个参数：要在每一项上运行的函数和函数运行的作用域对象
        迭代方法都不会修改原始数组中的值
         */
        //forEach方法 对数组中的每一项运行传入的函数，没有返回值
        var arr=[1,2,3,4,5,4,3,2,1];
        var res=[];
        arr.forEach(function(item,index,array){
            item++;
            res.push(item);
        });
        console.log(res);//[2, 3, 4, 5, 6, 5, 4, 3, 2]
    </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>filter方法</title>
    </head>
    <body>
    <script type="text/javascript">
        //filter方法对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组
        var arr=[1,2,3,4,5,4,3,2,1];
        var res=arr.filter(function(item,index,array){
            return item>3;
        });
        console.log(res);// [4, 5, 4]
    </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>map方法</title>
    </head>
    <body>
    <script type="text/javascript">
    //map方法返回一个数组，这个数组是在原始数组的对应项上运行传入函数的结果
        var arr=[1,2,3,4,5,4,3,2,1];
        var res=arr.map(function(item,index,array){
            return item*2;
        });
        console.log(res);// [2, 4, 6, 8, 10, 8, 6, 4, 2]
    </script>
    </body>
</html>

数组归并方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>归并方法</title>
    </head>
    <body>
    <script type="text/javascript">
        /*
        reduce()和reduceRight()，这两个方法都会迭代数组中的所有项，然后构建一个最终返回的值
        reduce()方法从数组的第一项开始，逐个遍历到最后，reduceRight()从数组的最后一项开始，向前遍历到第一项
        折两个方法的函数都接受四个参数：前一个值、当前值、项的索引和数组对象
         */
        var arr=[1,2,3,4,5];
        var res=arr.reduce(function(prev,cur,index,array){
                return prev+cur;
        });
        var res1=arr.reduceRight(function(prev,cur,index,array){
                return prev+cur;
        });
        console.log("reduce:"+res);//15
        console.log("reduceRight:"+res1);//15
    </script>
    </body>
</html>

自由2017

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js数组操作方法学习

concat方法 concat /* 在没有给concat方法传递参数的情况下，concat方法会复制当前数组并返回副本如果传递一或多个数组，则会将这每一项都添加到结果数组中 */ var color=["red","blue","green"]; c
复制链接

扫一扫

专栏目录