JavaScript常用数组属性和方法

本文给出了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>

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

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值