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

前言

在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()。

原文地址：https://www.cnblogs.com/jjgw/p/11608609.html

时间： 2024-10-14 07:07:57

javascript中数组常用的方法和属性的相关文章

javascript中数组常用的方法

在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. 运行[] instanceof Array他会返回ture.虽然结果是这样,但也有复杂的类数组对象,如字符串或arguments对象,但arguments对象并非是Array的实例,但他却拥有length属性,而且他的值是可以被索引的,因此他可以像一个数组那样被遍历. 这本文中,我将介绍数组原型的一

javaScript DOM编程常用的方法与属性

DOM是Document Object Model文档对象模型的缩写.根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件. Node接口的特性和方法 特性/方法 类型/放回类型 说明 nodeName String 节点的名字:根据节点的类型而定义 nodeValue String 节点的值:根据节点的类型而定义 nodeType Number 节点的类型常量值之一 ownerDocument Document 指向这个节点所属的文档 first

javascript中数组比较大小方法

javascript中数组取最大值和最小值 1.排序法 我们给数组进行排序,可以按照从小到大的顺序来排,排序之后的数组中第一个和最后一个就是我们想要获取的最小值和最大值.排序我们会用到数组的 sort 方法. var arr = [12,56,25,5,82,51,22]; arr.sort(function (a, b) { return a-b; }); // [5,12,22,25,51,56] var min = arr[0]; // 5 var max = arr[arr.length

Javascript中数组的判断方法

摘要: 1.数组检测的方法: 1) typeof . 2) instanceof . 3) constructor . 4) Object.prototype.toString. 5) Array.isArray(). 以上为数组检测的方法,但是这些方法中: Array.isArray()方法是最为简单方便的方法,但是存在版本支持性问题,没有版本支持性问题且较好的检测方法是使用Object.prototype.toString结合call()方法来检查,通常数组检测中我们常用的做法是两种方法结合

javascript中数组的concat()方法 - 数组连接

1 <html> 2 <head> 3 <title>数组的concat()方法</title> 4 5 <script> 6 /* 7 数组的concat()方法: 8 1.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 9 2.返回一个新的数组.该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的. 10 如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组. 11 */

【前端_js】javascript中数组的map()方法

数组的map()方法用于遍历数组,每遍历一个元素就调用回调方法一次,并将回调函数的返回结果作为新数组的元素,被遍历的数组不会被改变. 语法:let newAarray = arr.map(function callback(currentValue, index, array) { // Return element for newArray } 示例: let numbers = [1, 5, 10, 15]; let doubles = numbers.map((x) => { return

一张图看懂JavaScript中数组的迭代方法：forEach、map、filter、reduce、every、some

好吧,竟然不能单发一张图,不够200字啊不够200字! 在<JavaScript高级程序设计>中,分门别类介绍了非常多数组方法,其中迭代方法里面有6种,这6种方法在实际项目有着非常广泛的作用.其中本人最爱用forEach和map,好用又高效,不用什么都是for循环大法.但是初学的时候往往觉得头大,这些方法都很像,到底有什么区别?趁着今天有空,我把对着6个方法的认知,用最浅显的图画出来,希望看到的同学觉得有用.

javascript中数组的map方法

map方法原型:array1.map(callbackfn[, thisArg]) 参数: array1,必选. 一个数组对象.该函数一般用于数组对象 callbackfn,必选. 最多可以接受三个参数的函数. 对于数组中的每个元素,map 方法都会调用 callbackfn 函数一次. thisArg,可选. callbackfn 函数中的 this 关键字可引用的对象. 如果省略 thisArg,则 undefined 将用作 this 值. 返回值: 一个新数组,其中的每个元素均为关联的原

javaScript中 数组的新方法（reduce）

定义和用法 reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. reduce() 可以作为一个高阶函数,用于函数的 compose. 注意: reduce() 对于空数组是不会执行回调函数的. 浏览器支持 表格中的数字表示支持该方法的第一个浏览器版本号. 语法 :array.reduce(function(total, currentValue, currentIndex, arr), initialValue) 参数 栗子1: var arr