javascript中数组常用的方法和属性

小鱼儿 2023-06-01 12:55 20阅读 0赞

# 前言 #

##### 在javascript中，数组是一种非常重要的数据类型，我们时常会和它打交道，最近在开发项目中频繁的使用到数组，但是自己对数组的众多方法已经是非常模糊了，为了方便自己以后能够更好的使用数组中的属性和方法，在此记录一下。 #####

# 数组常用的属性和方法 #

## 常用属性 ##

*  Array.length:返回数组的大小

## 常用方法 ##

*  Array.pop():删除并返回数组的最后一个元素
 *  Array.push():向数组的结尾添加元素
 *  Array.shift():将元素移除数组
 *  Array.unshift():向数组头部添加元素
 *  Array.join():将数组元素连接起来以构成一个字符串
 *  Array.concat():连接数组
 *  Array.reverse():将数组进行反转
 *  Array.sort():将数组进行排序
 *  Array.slice():返回数组的一部分
 *  Array.splice():插入，删除或替换数组中的元素
 *  Array.toString():将数组转换为一个字符串
 *  Array.map():对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
 *  Array.forEach():对数组中的每一项运行给定函数，这个方法没有返回值
 *  Array.filter():对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组
 *  Array.some():对数组中的每一项运行给定函数，如果该函数对任一项返回true,则返回true
 *  Array.every():对数组中的每一项运行给定函数，如果该函数对每一项都返回ture,则返回true
 *  Array.isArray():判断是否是数组
 *  Array.reduce():迭代数组的所有项，然后构建一个最终返回的值，从数组的第一项开始，遍历数组的每一项到最后
 *  Array.reduceRight():迭代数组的所有项，然后构建一个最终返回的值，从数组的最后一项开始，向前遍历到第一项

# 实例讲解 #

为了方便大家的理解和使用，我会将这些方法进行分类讲解和分析  
(1):Array.length属性

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <script type="text/javascript">
                //1：数组的定义
                var colors0=new Array();    //创建数组
                var colors1=new Array(20);    //创建数组并指定长度
                var colors2=new Array('red','blue','green');//定义数组并赋值
                var colors3=[];//字面量定义空数组
                console.log(colors0.length);//0
                console.log(colors1.length);//20
                console.log(colors2.length);//3
                //2：数组的访问和修改
                console.log(colors2[0]);//访问数组 red
                colors2[1]='小明';    //修改数组下标中的值
                console.log(colors2[1]);
                //3.遍历数组
                for(var i=0;i<colors2.length;i++){
                    console.log(colors2[i]);//red,小明，green
                }
                
            </script>
        </body>
    </html>

(2):栈方法push()和pop()

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>数组中的栈方法</title>
        </head>
        <body>
            <script type="text/javascript">
                var colors=new Array();    //创建数组
                var count=colors.push('red','green')//向数组的结尾添加元素
                console.log(colors);    //red,green
                count=colors.push('black');    
                console.log(colors);    //red,green,black
                var item=colors.pop();//移除数组的最后一项
                console.log(item);    //black
                
                
            </script>
        </body>
    </html>

(3):队列方法shift()和unshift()

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>数组中的队列方法</title>
        </head>
        <body>
            <script type="text/javascript">
                var colors=new Array();//创建数组
                var count=colors.push('red','green');    //推入两项
                console.log(count);//2
                count=colors.push('black');    //推入另一项
                console.log(count);//3 
                var item=colors.shift();//取得第一项
                console.log(item);    //red 
                console.log(colors.length);//2
                
                var color=new Array();    //创建数组
                var c=color.unshift('red','green');//推入两项
                console.log(c);//2
                c=color.unshift('black');
                console.log(c);//3
                var i=color.pop();
                console.log(i);//green
                console.log(color.length);//2
            </script>
        </body>
    </html>

(4):重排序方法sort()和reverse()

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>数组中的重排序方法</title>
        </head>
        <body>
            <script type="text/javascript">
                //reverse()方法和sort()方法
                //1：测试reverse()方法
                var values1=[1,2,3,4,5];
                values1.reverse();    //将数组进行反转
                console.log(values1);//5,4,3,2,1
                
                //2：测试sort()方法
                var values2=[0,1,5,10,15];
                values2.sort();//将数组进行排序，比较ASCII编码
                console.log(values2);//0,1,10,15,5
                
                //3：sort()方法接受函数实现升序
                function descArray(a,b){
                    if(a<b){
                        return -1;
                    }else if(a>b){
                        return 1;
                    }else{
                        return 0
                    }
                }
                var item=[0,1,3,2,4];
                item.sort(descArray);
                console.log(item);    //0,1,2,3,4    
                
                //4：sort()方法接受函数实现降序
                function ascArray(a,b){
                    if(a<b){
                        return 1;
                    }else if(a>b){
                        return -1;
                    }else{
                        return 0;
                    }
                }
                var items=[10,1,2,4,6,5,7];
                items.sort(ascArray);
                console.log(items);//10,7,6,5,4,2,1
                
            </script>
            
        </body>
    </html>

(5):操作方法slice()、splice()、concat()

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>数组中的操作方法</title>
        </head>
        <body>
            <script type="text/javascript">
                //1：测试操作方法concat()
                var colors1=['red','blue','green'];
                var colors2=colors1.concat('yellow',['black','brown']);
                console.log(colors1);    //red,blue,green
                console.log(colors2);    //red,blue,green,yellow,black,brown
                //2:测试操作方法splice(startIndex,[endIndex]);
                var colors3=['red','green','blue','yellow','purple'];
                var colors4=colors3.splice(1);
                var colors5=colors3.splice(1,4);
                console.log(colors4);    //green,blue,yellow,purple
                console.log(colors5);    //green,blue,yellow
                //3:测试splice()方法
                //(1):测试splice()删除方法
                //参数：要删除第一项的位置，删除的项数
                var item=['red','blue','green'];
                var removed=item.splice(0,1);
                console.log(removed);//red
                console.log(item);//blue,green
                //(2):测试splice()添加方法
                //参数：起始位置，0(要删除的项数)，要插入的项
                removed=item.splice(1,0,'yellow','orange');
                console.log(removed);//返回一个空的数组，因为移除的项为0
                console.log(item);    //blue,yellow,orange,green
                //(3):测试splice()修改方法
                //参数：起始位置，删除的项数，插入的任一项
                removed=item.splice(1,1,'red','purple');
                console.log(removed);//yellow
                console.log(item);//blue,red,purple,orange,green
            </script>
        </body>
    </html>

##### 使用slice()方法，如果传入一个参数，则从开始下标到截取到数组的结尾，如果传入两个参数，则从开始下标到结束下标。 #####

##### 使用splice()方法，插入的项是从移除的下标那项开始添加。 #####

(6):转换方法toString()和join()

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>数组中转换方法</title>
        </head>
        <body>
            <script type="text/javascript">
                var colors=['red','green','blue'];//创建一个包含三个字符串的数组
                //1:测试toString()方法
                console.log(colors.toString());    //red,green,blue
                //2：测试join()方法
                var item=['red','blue','green'];
                console.log(item.join('|'));//red|blue|green
                console.log(item.join('||'));//red||blue||,green
            </script>
        </body>
    </html>

(7):迭代方法some()、filter()、map()、forEach()、every()

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>数组中的迭代方法</title>
        </head>
        <body>
            <script type="text/javascript">
                //迭代方法:every(),filter(),forEach(),map(),some()
                //传递参数，数组项的值，数组中的位置，数组对象本身
                var numbers=[1,2,3,4,5,4,3,2,1];
                //1:测试erery()函数
                var everyResult=numbers.every(function(item,index,array){
                    return item>2;
                });
                console.log(everyResult);//false
                //2:测试some()函数
                var someResult=numbers.some(function(item,index,array){
                    return item>2;
                });
                console.log(someResult);//true
                //3:测试filter()函数
                var filterResult=numbers.filter(function(item,index,array){
                    return item>2;
                });
                console.log(filterResult);//3,4,5,4,3
                //4：测试map()函数
                var mapResult=numbers.map(function(item,index,array){
                    return item*2;
                });
                console.log(mapResult);//2,4,6,8,10,8,6,4,2
                //5：测试forEach()函数
                numbers.forEach(function(item,index,array){
                    //执行某些操作
                    console.log(item);//1,2,3,4,4,3,2,1
                })
                
                
            </script>
        </body>
    </html>

##### 在这些方法中，最相似的是every()和some()，它们都有用于查询数组中的项是否满足某个条件，对于every()来说，传入的函数必须对每一项都返回true,这个方法才会返回true,否则，它就会返回false，而some()方法只要传入的函数对数组中的某一项返回true,它就会返回true。 #####

(8):归并方法reduce()和reduceRight()

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>数组中的归并方法</title>
        </head>
        <body>
            <script type="text/javascript">
                //归并方法：reduce()和reduceRight()
                //传递参数：前一个值，当前值，项的索引，数组对象
                var array=[1,2,3,4,5]
                //1：测试reduce()方法
                var sum1=array.reduce(function(prev,cur,index,array){
                    return prev+cur;
                });
                console.log(sum1);//15
                //2：测试reduceRight()方法
                var sum2=array.reduceRight(function(prev,cur,index,array){
                    return prev+cur;
                });
                console.log(sum2);//15
            </script>
        </body>
    </html>

##### 使用reduce()还是reduceRight()，主要取决于要从哪头开始遍历数组。除此之外，它们完全相同。 #####

# 总结 #

##### 数组中如此之多的方法，我们并不是每一个都需要记忆，只需找到规律然后对数组中的方法进行分组便可以实现很好的记忆方式。如：Array.pop()和Array.push()，Array.shift()和Array.unshift(),Array.slice()和Array.splice(),Array.some()和Array.every()，Array.reduce()和Array.reduceRight()。 #####