js数组操作方法学习

来源：互联网发布：哈尔滨php在哪找工作编辑：程序博客网时间：2024/05/16 01:45

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>

0 0