JavaScript常用数组属性和方法

最新推荐文章于 2022-01-21 23:46:29 发布
最新推荐文章于 2022-01-21 23:46:29 发布
阅读量506 收藏 6
点赞数 1
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhzijun/article/details/108867682
版权

本文给出了js（JavaScript）数组（Array）操作所涉及到的所有常用内置函数说明及用法，希望对大家有所帮助

数组的属性和方法

属性

length属性：

length属性： 返回数组的长度（数组元素的个数）

<script>
   var lei = ["数字","字母","小数点","质数"]
   //console.log(lei.length);
   lei.length;//lei 的长度是 4
</script>

length 属性始终大于最高数组索引（下标）。

访问第一个元素：

<script>
    var lei = ["数字","字母","小数点","质数"]
    var first = lei[0];//打印的结果是 数字
     console.log(first)
</script>

访问最后一个元素：

<script>
    var lei = ["数字","字母","小数点","质数"]
    var last = lei[lei.length - 1];//打印的结果是 质数
     console.log(last)
</script>

数组末添加数组元素：

<script>
    var lei = ["数字","字母","小数点","质数"]
    var lei[lei.length] = "复数";//向 lei 里面添加新元素（复数）
    document.write(lei)
</script>

这种方法不太常用，目前向数组末添加新元素的最佳方法是使用push()方法

<script>
   var lei = ["数字","字母","小数点","质数"]
   lei.push("复数");//向 lei 里面添加新元素（复数）
   document.write(lei)
</script>

方法

1. 把数组转换成字符串

toString()方法:

toString()方法以逗号分隔的字符串返回数组：

<script>
   //toString()
    var arr = ["apple","banana","orange"]
    var arr2 = arr.toString()
    document.write(arr2)//打印结果为apple,banana,orange
    console.log(typeof(arr2))//打印结果为string
</script>

2. 数组元素结合成为一个字符串

join() 方法
它的行为类似 toString()，但是您还可以规定分隔符：

<script>
    var arr = ["apple","banana","orange"]
    var arr2 = arr.join("-")
    document.write(arr2)  //apple-banana-orange
    console.log(typeof(arr2))//字符串类型
</script>

3. 数组合并

concat()方法

注意：合并数组会产生一个新的数组作为返回值，不会影响原数组

<script>
   //concat()
   //合并两个数组
    var arr = [1,6,8,11,14];
    var arr2 = arr.concat(9,[11,13]);
    console.log(arr2); //[1, 3, 5, 7, 9, 11, 13]
    //合并三个数组
    var arr = [1,6,8,11,14];
    var arr2 = [15,16]
    var arr3 = [17,18]
    var arr4 = arr.concat(arr2,arr3);
    console.log(arr4); //[1,6,8,11,14,15,16,17,18]
</script>

4. 裁剪数组

slice()方法：返回指定数组的一个片段或子数组，里面可以传一个参数或两个参数，参数可以为正也可以为负。

<script>
   //slice()方法:
        var a = [5,6,7,3,1,2];
        var b = a.slice(3) //数字参数指的是数组的索引，一个参数表示开始的位置，不传第二个参数默认为数组中元素个数。
        document.write(b+"<br>") //[3,1,2]
        var c = a.slice(1,4)//返回起始和结束位置之间的项——但不包括结束位置的项
        document.write(c+"<br>")//[6,7,3]
        var d = a.slice(1,-3)//当参数中有负数时候，可以进行转换正数，方法就是-3+6(数组里元素个数）
        document.write(d+"<br>")//[6,7]
        var e = a.slice(-3,-2) //两个负数也是
        document.write(d+"<br>") //[3]
</script>

5. 删除元素和添加新元素

  • 删除方法
    pop()方法 和 shift()方法
    pop()方法:删除数组中最后一个元素，并返回是删除的元素
<script>
    //pop()
    var a=[5,6,7];  
    var arr= a.pop();
    document.write(arr+"<br>");//返回值为 7 
    document.write(a+"<br>");// a=[5,6]; 
</script>

shift()方法:删除数组最前面的元素，返回是删除的元素

<script>
    //shift()
    var a=[5,6,7,2,9];  
    var arr=a.shift();
    document.write(arr+"<br>");// 返回值 5
    document.write(a+"<br>");// a=[,6,7,2,9];
</script>

JavaScript也可以用 delete()方法:删除数组里的元素

<script>
    //delete()方法
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var aa=delete fruits[0];
    document.write(fruits+'<br>')//a=[,Orange,Apple,Mango]
    document.write(aa+"<br>");//true   此方法返回的结果是布尔值，当删除成功时，返回true，当删除失败时返回false
</script>

注意： 使用 delete()方法 会在数组留下未定义的空洞，所以建议还是用pop()方法 和 **shift()方法

  • 添加方法
    push()方法 和 unshift方法
    push()方法:向数组最后面添加元素，它返回的是新数组的长度
<script>
    //push()
    var a=[1,2,3];
    var arr=a.push(4,5);
    document.write(arr+"<br>");  //返回数组长度 值为5；
    document.write(a+"<br>"); //a=[1,2,3,4,5]; 
</script>

unshift方法:向数组最前面添加元素，返回的是新数组的长度

<script>
    //unshift()
    var a=[1,2,3];
    var arr=a.unshift(4,5,6);
    document.write(arr+"<br>");  //返回数组长度 值为6；
    document.write(a+"<br>"); //a=[4,5,6,1,2,3];
</script>

还有一个方法，既可以想数组里添加新元素到固定位置，也可以删除固定位置的元素

splice()方法:可用于向数组添加新项，并返回一个包含已删除项的数组，他的第一个参数定义了应添加新元素的位置，第二个参数定义了应删除多少元素，两个参数后面定义了要增加的新元素根据上面的意译，可以看出他还有一个隐藏功能–替换

<script>
  // splice()方法
        //增加元素
        var color = ["red","yellow","black","pink"]
        color.splice(2,0,"green","blue")//在下脚标为2的位置添加
        document.write(color+"<br>")
        //删除元素
        var color2 = ["red","yellow","black","pink","green","blue"]
        var color3 = color2.splice(0,4)//删除下脚标4之前的元素
        document.write(color2+"<br>") 
        //替换元素
        var color4 = ["red","yellow","black","pink","green","blue"]
        var color5 = color4.splice(1,1,"紫色","青色")删除下脚标为一的元素，在下脚标为1的位置添加
        document.write(color4+"<br>") 
</script>

6. 数组排序

  • 从大到小排序
    reverse()方法
    reverse()方法将数组中元素进行倒叙，返回倒叙的数组，它是在原来数组中进行倒叙，不产生的新数组，返回就是原来的数组，只不过里面元素已经进行倒叙重排了。
<script>
    // reverse()
        var a=[1,2,3,4,5,6]
        a.reverse();
        document.write(a)//[6,5,4,3,2,1]
</script>
  • 从小到大排序
    sort()方法
    sort()方法将数组中的元素排序，并返回排序好的数组。如果不传参数默认以字母表顺序进行排序。
<script>
   //sort()
        var a=[4,3,1,2]
        a.sort();
        document.write(a+"<br>")//[1,2,3,4]
        var b = ["a", "d", "c", "b"];
        b.sort()
        document.write(b+"<br>")// ["a", "b", "c", "d"]
</script>

注意：在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串
例如一下这种情况：

<script>
     var c = [13, 24, 51, 3];
     c.sort()
     document.write(c+"<br>")//[13,24,3,51]
</script>

所以我们要通过一个比值函数来修正此问题
比值函数：接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。

<script>
   var d = [40, 100, 1, 5, 25, 10];
   d.sort(function(a,b){return a-b;});//升序
   document.write(d+"<br>")//[1,5,10,25,40,100]
</script>

我们也可以用相同的技巧，来让他实现降序排序

<script>
   var e = [40, 100, 1, 5, 25, 10];
   e.sort(function(a,b){return b-a;});//降序
   document.write(e+"<br>")//[100,40,25,10,5,1]
</script>

拓展：
既然sort()方法可以进行排序，所以我们也可以用次来寻找最大值和最小值，我们用索引来获取最高和最低值

<script>
    var f = [40, 100, 1, 5, 25, 10];
    f.sort(function(a, b){return a - b});//升序排序  [1,5,10,25,40,100]
    document.write(f[0]+"<br>")//最低值为1
    document.write(f[f.length-1]+"<br>")//最高值为100
</script>

还有一种数组排序方法，不过这种方法不常出现

  • Math.max()方法
    可以使用 Math.max.apply 来查找数组中的最高值：
<script>
   // Math.max()
      var f=[40, 100, 1, 5, 25, 10];
      function myArrayMax(f) {
         return Math.max.apply(null, f);
       }
       var a= myArrayMax(f)
       document.write(a+"<br>")//最高值为100 
</script>

Math.max.apply([值1,值2,值3…]) 等于 Math.max(值1,值2,值3…)

  • Math.min()方法
    您可以使用 Math.min.apply 来查找数组中的最低值：
<script>
   // Math.min()
      var f=[40, 100, 1, 5, 25, 10];
      function myArrayMin(f) {
         return Math.min.apply(null, f);
       }
       var a= myArrayMin(f)
       document.write(a+"<br>")//最低值为1
</script>

7.数组迭代方法

  • indexOf()和 lastIndexOf()方法

indexOf()和 lastIndexOf()方法都是接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。
但是indexOf()方法是从数组的开头（位置 0）开始向后查找，而 lastIndexOf()方法是从 数组的末尾开始向前查找，在没找到的情况下返回 -1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

<script>
   //indexOf()和 lastIndexOf()
         //存在情况下
         var a = [1,3,6,5,6,7,7,5,3,1];
         document.write(a.indexOf(6)+"<br>")//返回索引值为2
         document.write(a.lastIndexOf(6)+"<br>")//返回索引值为4
         //没有的情况下
         document.write(a.indexOf(2)+"<br>")//-1
         document.write(a.lastIndexOf(2)+"<br>")//-1
          //两个参数的情况下
         document.write(a.indexOf(5,4)+"<br>")//返回索引值为7
         document.write(a.lastIndexOf(1,6)+"<br>")//返回索引值为0
</script>
  • reduce()和 reduceRight()方法

这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。

这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。

这两个的函数还都可接受4个参数：

  • 总数（初始值/先前返回的值）
  • 项目值
  • 项目索引
  • 数组本身
    这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项
<script>
   // reduce()和reduceRight()方法
         
         //reduce()方法
         var values = [1,2,3,4,5];
         var sum = values.reduce(function(prev, cur, index, array){
           return prev + cur;//把所有值加起来
           },10);//设置初始值为25
         document.write(sum+"<br>"); //25
         //reduceRight()方法
         //给数字添加一个初始值为10
         var values = [1,2,3,4,5];
         var sum = values.reduceRight(function(prev, cur, index, array){
           return prev + cur;//把所有值加起来
           },10);//设置初始值为25
         document.write(sum+"<br>"); //25
</script>
  • every()方法和some()方式

every() 方法检查数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

some()方式检查数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。如果回调函数仅使用第一个参数（值）时，可以省略其他参数：

这两个函数也是接受3个参数

  • 项目值
  • 项目索引
  • 数组本身
<script>
  //every()方法和some()方式
        //every()三个参数
        var numbers = [45, 4, 9, 16, 25];
        var first = numbers.every(function (value, index, array) {
        return value > 18;
        });
        document.write(first+"<br>");//所有的大于18，里面有不大于18的，所以返回false
        //every()一个参数
        var numbers = [45, 4, 9, 16, 25];
        var first = numbers.every(function(value){
          return value > 18;
        });
        document.write(first+"<br>");//所有的大于18，里面有不大于18的，所以返回false
        //some()方法
        var arr = [1, 2, 3, 4, 5];
        var arr2 = arr.some(function(x) {
          return x < 3;
        }); 
        document.write(arr2+"<br>"); //true
        var arr3 = arr.some(function(x) {
          return x < 1;
        }); 
        document.write(arr3); // false
</script>
  • find()方法和findIndex()方法
    find() 方法返回通过测试函数的第一个数组元素的值。

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

这两个函数都接受 3 个参数：

  • 项目值
  • 项目索引
  • 数组本身
<script>
    //find()方法和findIndex()方法
         //查找（返回）大于 18 的第一个元素的值
          var numbers = [4, 9, 16, 25, 29];
          var first=numbers.find(function(value, index, array) {
            return value > 18;
          })
          document.write(first+"<br>");//25
          //查找（返回）大于 18 的第一个元素的索引
          var numbers = [4, 9, 16, 25, 29];
          var first=numbers.findIndex(function(value, index, array) {
            return value > 18;
          })
          document.write(first+"<br>");//3
</script>
  • forEach()方法

forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：项目值；项目索引，数组本身。

<script>
    //Array.forEach()
        var a=[1,2,5,7,18,46];
        a.forEach(function(value,index,array){//value是项目值，index十索引值，array判断是否存在
          document.write(value+" | "+index+" | "+(array===a)+"<br>")
        });
       //输出为：
       //1 | 0 | true
       //2 | 1 | true
       //5 | 2 | true
       //7 | 3 | true
       //18 | 4 | true
       //46 | 5 | true
</script>
  • map()方法
    map()方法：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组，此方法不会对没有值得数组元素元素执行函数，并且他不会更改原始数组，默认有传参，三个参数：项目值，项目索引，项目本身（当回调函数仅使用 value 参数时，可以省略索引和数组参数）
<script>
    //map()方法
        //每个数组值都乘以2
        //三个参数
        var arr = [1, 2, 3, 4, 5]
        var arr = arr.map(function(value, index, array) {
          return value * 2;
        });
        document.write(arr+'<br>')//打印[2,4,6,8,10]

        //一个参数
        var arr = [1, 2, 3, 4, 5]
        var arr = arr.map(function(value) {
          return value * 2;
        });
        document.write(arr)//打印[2,4,6,8,10]
</script>
  • filter()方法

filter()方法：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。，他也有三个参数：项目值，项目索引，数组本身

<script>
   //filter()方法
        //满足能被三整除，或者索引值大于8
        var numbers = [1,45, 4, 9, 16, 25, 7, 8, 10];
        var numbers2 = numbers.filter(function(value, index, array) {
          return value  % 3 === 0 || index >= 3;
        })
        document.write(numbers2)//[45,9,16,25,7,8,10]
</script>

希望此篇文章可以帮助大家更好的了解并运用数组

哲子君
关注
专栏目录
js进栈出栈_JS-实现入栈出栈
weixin_39983404的博客
12-21 733
JS-实现入栈出栈1、什么是栈栈是一种遵循 后进先出(LIFO) 原则的有序集合。新添加的或者待删除的元素都保存在栈的尾部(即栈顶)，另一端叫栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。2、实现入栈出栈的方法方法一是创建一个Stack类来表示栈。具体代码如下：function Stack() {var items = [];// 添加一个(或几个)新元素到栈顶this.push = func...
Javascript数组对象的方法和属性
dinongxu8804的博客
01-09 144
2.1.1. 数组对象的方法和属性 数组对象最常用的属性之一就是length属性，它返回比数组中最后一个数组项索引大1的索引。举个例子，如果你正在处理一个数组，它拥有索引为0，1，2，3的元素，length属性就是4——它是非常有用的，如果你想添加另外的元素。 Array对象提供了许多方法用来操作数组，包括从数组中截取一部分元素的方法，或者把两个数组连接到一起。下面我们会看一下连接...
数组的应用
Cg_Companion_Xi的博客
12-09 337
1.数组与字符串的互转 （1）使用 Array 对象的 join()方法把数组转换为多种形式的字符串。join()方法包含一个参数，用来定义合并元素的连字符，如果join()方法不提供参数，则默认以逗号连接每一个元素。 代码： var a = [1,2,3,4,5]; a = a.join("+"); document.write("a类型 = " + typeof(a) + “”); ...
javascript数组的属性及方法总结
qq_33271461的博客
12-13 326
借鉴于:http://www.w3school.com.cn/jsref/jsref_obj_array.asp 外加一些个人总结 JavaScript Array 对象 Array 对象 Array 对象用于在单个的变量中存储多个值。 创建 Array 对象的语法： new Array(); new Array(size); new Array(element0, element1, ......
js进栈出栈_[js]数组栈和队列操作
weixin_39737368的博客
12-21 294
写在前面在项目中，对数组的操作还是比较常见的，有时候，我们需要模拟栈和队列的特性才能实现需求，这里记录一下这个知识点。栈栈(stack)又名堆栈，它是一种运算受限的线性表。其限制是仅允许在表的一端进行插入和删除运算。这一端被称为栈顶，相对地，把另一端称为栈底。向一个栈插入新元素又称作进栈、入栈或压栈，它是把新元素放到栈顶元素的上面，使之成为新的栈顶元素；从一个栈删除元素又称作出栈或退栈，它是把栈顶...
javascript中数组的多种定义方法和常用函数简介
10-25
下面将详细解说JavaScript中数组的多种定义方法及常用函数。 首先，数组的定义方式有多种，最常见的是使用Array构造函数和数组字面量。 使用Array构造函数定义数组是最基本的方法，可以通过new关键字创建一个新...
javascript循环数组有什么方法_javascript循环数组有哪些方法.docx
12-16
以上介绍了六种常用的 JavaScript 数组处理方法，包括基本的遍历、FIFO 和 LIFO 操作、搜索、函数应用以及数组过滤等。这些方法可以帮助开发者更高效地操作数组数据结构。值得注意的是，ECMAScript 5 引入了许多实用...
javascript的数组和常用函数详解
10-25
通过以上的知识点介绍，我们可以看出JavaScript数组在功能上虽然与传统多维数组有区别，但通过嵌套数组和数组方法的应用，可以实现丰富的数组操作功能，非常适合需要在网页中处理数据集合的场景。
Javascript中的数组常用方法解析
10-18
JavaScript数组还包含了其他一些常用方法，如concat()用于连接两个或多个数组，slice()用于截取数组的一部分形成新数组，splice()则用于添加或删除数组中的元素，slice()和splice()都可以指定开始和结束位置。...
JavaScript数组常用属性与方法详解
在JavaScript（JS）中，了解和掌握常用的属性和方法是编程的基础。数组作为JS中重要的数据结构，其`length`属性是经常使用的。`arr.length`返回数组`arr`的元素数量，这个属性常用于遍历数组的循环语句中，如`for`...
JS数组的属性以及方法
splendid_can的博客
11-26 530
数组 对象属性     constructor 返回对创建此对象的数组函数的引用。     length      设置或返回数组中元素的数目。     prototype   使您有能力向对象添加属性和方法。     数组 对象方法     concat()    连接两个或更多的数组，并返回结果。     join()      把数组的所有元素放入一个字符串。元素通过指定
js数组的常见属性和方法
qq_39148344的博客
01-01 1355
属性 length是Array的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数，并且总是大于数组最高项的下标，不只是可读。 Array.prototype 属性表示Array构造函数的原型，并允许您向所有Array对象添加新的属性和方法。 检查数组 Array.isArray()：最终判断这个值是不是数组 转换方法 valueof()：返回的还是...
JavaScript数组的属性及方法
qq_41710719的博客
07-23 154
已经连续更新了第四天了，希望各位大佬们，可以给出宝贵的意见，顺便给小弟点一赞
JavaScript数组属性和方法
qq_40526866的博客
07-07 286
数组 字面量声明数组 let arr = [1,2,3,4] 构造函数声明数组 let arr = new Array(1,2,3) arr[0] = "a" arr[1] = "b" arr[2] = "c" 数组的遍历操作 // for ... in 循环 ler arr = ["a","b","c","d"] for(let i in arr) { console.log(arr[i]) } for … in 循环 遍历数组 for … in 循环不仅可以遍历对象，也可以遍历数组，毕竟数组只是
js 数组的属性及其常用的方法
weixin_60200454的博客
01-21 573
length属性 获取数组的长度 方法 push() 向数组中添加数组到数组最后 pop() 删除数组最后一个元素 unshift() 向数组头部添加数据 shift() 删除数组第一个元素 concat() 将两个或多个数组合成一个数组 reverse() 对数组进行倒叙处理 join() ...
数据结构——数组，及数组的属性与方法
weixin_49064756的博客
09-16 248
数据结构——数组 数组基本基础 一、功能：一个标识符，存储多个数据。 二、声明数组的方式： **【字面样式名】**书写格式： 关键字 标识符 赋值符号 中括号 分号 ​ let F70 = [ ] ; ​ 构造函数的声明 书写格式 ​ let F71 = new Array(); 字面量与构造函数的区别 ​ 字面量的解析效率比构造函数高，原因： ​ 字面量属于JSON格式，可以直接被JS进行解析。 ​ 构造函数需要先调用构造函数，在进行JS引擎解析 三、赋值 （注：每
JS数组常用的属性和方法
weixin_36977678的博客
12-19 212
length 属性判断数组的长度 var arr=[11,22,33]; console.log(arr.length); //打印 3 indexOf() 返回所找元素的索引，没有则返回-1 var arr=[11,22,33]; console.log(arr.indexOf(22)) // 打印 1 var arr=[11,22,33]; console.log(arr.indexOf(...
Javascript数组属性
asing1elife's blog
09-21 288
Javascript数组属性 Javascript数组可用来存储多个数组，但他也有些不常见的内置功能 更多精彩 更多技术博客，请移步 asing1elife’s blog 数组的真面目 数组的索引其实也是数组的属性，所以如下操作是等同的 let array = ['Tom', 'Jerry'] console.log(array[0]) =&amp;gt; Tom console.log(a...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值