引用类型之数组array最全的详解

Array类型

今天总结一下array类型。 js中的数组是有着非常强大的功能。具有很大的灵活性,有两个方面的特点

1、数组的每一项可以保存任何的数据类型;2、数组大小可以动态的调整;看下面的例子:

           var one=new Array();      //空数组
           var two=new Array(5)      //length为5的数组
           var three=new Array("double",3)   //包含double和3的数组

           var four=[]               //用[]表示
           var five=[1,2,3,4]
           console.log(five[0])      //1 数组的索引从0开始,length-1
           console.log(five.length)  //4 数组大小length为4
           five.length=10
           console.log(five[4])      //索引从4到9都是undefined

检测类型

前面谈过,对于引用类型,可以用instanceof来检测,可以得到对象是不是数组,这只适合于只有一个全局环境。对于具有几个全局环境,可以用ES5新增的Array.isArray()方法

          var one=[]
          if(one instanceof Array){
                  console.log("true")
          }

          if(Array.isArray(one)){
                  console.log("true")    IE9支持
          }

转换方法

我们所知道的,所有对象都有toString()、toLocaleString()、valueOf()的方法

对于数组而言:valueOf()返回的是数组本身;toString()返回数组中每个值得字符串形式拼接而成的一个有逗号分隔开的字符串(数组的每一项都会调用toString()方法)

          var one=[1,"2","great"];
          var two=one.toString();         //数组每一项都调用toString()方法,组成的字符串
          var three=one.valueOf();        //返回数组本身
          var four=one.toLocaleString()   //数组的每一项都调用toLocaleString()方法,组成字符串

          console.log(typeof two)         //string
          console.log(typeof two[0])      //string
          console.log(Array.isArray(three))    //true
          console.log(typeof four)        //string
          console.log(typeof four[0])     //string

          var first=[1,2,3,4]
          console.log(first.join("||"))   //join()方法主要是连接,默认还是逗号的

补充一下关于toString()和toLocaleString()之间的区别,主要体现在日期和数字上

         1、日期上的区别,locale代表的是国际化和本土化中的概念
         var date=new Date();
         console.log(date.toString())        //默认的日期 Mon Jan 29 2018 16:01:34 GMT+0800 (中国标准时间)
         console.log(date.toLocaleString())  //本地化日期 2018/1/29 下午4:01:34

         2、数字超过3位数的区别
         var num1=100;
         var num2=1000000;
         console.log(num1.toString())        //100
         console.log(num1.toLocaleString())  //100
         console.log(num2.toString())        //1000000
         console.log(num2.toLocaleString())  //1,000,000 每3个0都会有逗号

操作数组的方法

栈方法(后进先出):push(),推入和pop(),弹出两种

         var one=[1,2]
         one.push(3,4)       //在末尾添加3,4
         console.log(one)    //1,2,3,4
         var two=one.pop()   //删除并返回末尾数
         console.log(one)    //1,2,3
         console.log(two)    //4

队列方法(先进后出):shift(),移除和unshift(),增加两种

         var one=[1,2]
         one.unshift(3,4)    //在开头添加3,4
         console.log(one)    //3,4,1,2
         var two=one.shift()   //删除并返回第一数
         console.log(one)    //2,3,4
         console.log(two)    //3

重新排序方法:reverse()和sort()方法,他们的返回值是排序后的数组

        //reverse()方法
        var one=[1,2,3,4]
        console.log(one.reverse())   //4,3,2,1 翻转数组项的顺序

        //sort()方法
        var two=[0,5,10,15]
        console.log(two.sort())      //0,10,15,5  sort方法默认是升序排列,先回把每一项调用toString()方法,按照string的规则进行排序

        //sort接受比较函数
        //普通的比较
        var three=[0,5,10,15]
        var threes=three.sort(rank1)  //调用比较函数
        function rank1(num1,num2){
               if(num1<num2){
                      return -1
               }
               if(num1>num2){
                      return 1
               }
               else{
                      return 0
               }
        }
        function rank2(num1,num2){      //或者这样
                return num1-num2        //num1-num2为升序;num2-num1为降序
               }
        console.log(threes)             //0,5,10,15     

        //对象的比较
        var objectList=[]
        function person(name,age){
            this.name=name;
            this.age=age;
        }
        objectList.push(new person("double",5))
        objectList.push(new person("single",15))
        objectList.push(new person("another",10))

        objectList.sort(function rank(a,b){    //比较函数进行排序
               return a.age-b.age
        })

        for(var i=0;i<objectList.length;i++){  //遍历一遍
             console.log("name"+objectList[i].name+" age"+objectList[i].age)
        }

concat()方法:基于当前数组中的所有项创建一个新数组(先创建当前数组的一个副本,将接受到的参数添加到该数组的末尾),对原数组没有影响

slice()方法:基于当前数组中的一项或多项创建一个新的数组,规则比较多,对原数组没有影响

这两种方法值得注意,对原数组没有影响;而其他方法是基于原数组的操作

       var one=[1,2,3]
       var two=one.concat(4,5,[6,7])       console.log(one)      //[1,2,3]    创建了副本
       console.log(two)      //[1,2,3,4,5,6,7]

       var one=[1,2,3,4,5]

       console.log(one.slice())        //截取整个数组
       console.log(one.slice(3))       //4,5   索引3开始到结束
       console.log(one.slice(0,3))     //1,2,3 不包括索引3
       console.log(one.slice(1,-1))    //出现负数,-1为倒数第一,-2为倒数第二
       console.log(one.slice(-4,-1))   //都加上length再说,2,3,4

修改数组项的万能大法:splice()方法

删除:指定2个参数,要删除的第一项位置和删除的项数

插入:指定3个参数,起始位置,0(要删除的项数),要插入的项

替换:指定3个参数,起始位置,要删除的项,要插入的任意数量的项

       var one=["a","b","c","d"]
       one.splice(3,1)           //d
       console.log(one)          //a,b,c
       one.splice(2,0,"e","f")
       console.log(one)          //a,b,e,f,c    添加是在前面添加
       one.splice(2,1,"g","h")
       console.log(one)          //a,b,g,h,f,c

位置方法

indexOf()和lastIndexOf()方法,要查找的项和(可选的)表示查找起点位置的索引;indexOf从数组的开头开始向后查找,lastIndexOf从数组前面查找

都返回要查找项在数组中的位置,找不到就返回-1,会使用全等操作符

      var one=[1,2,3,2,4]
      console.log(one.indexOf(1))     //0 返回的是要查找项的索引值
      console.log(one.indexOf("1"))   //-1 因为比较使用的是全等操作符,所以找不到直接返回-1
      console.log(one.indexOf(4,2))   //5 从索引为2开始查找
      console.log(one.lastIndexOf(2)) //3

迭代方法

es5规定的5种迭代方法,接受两个参数:每一项上运行的函数和(可选)运行该函数的作用域对象——影响this值

函数接受三个参数:item数组中的每个元素;index数组中每个元素的索引;array数组本身;item为必选,其他为可选

      every和some是数组的逻辑判定,对数组应用指定的函数判断,返回布尔值
      every传入的函数每一项都返回true才返回true,相当于&&
      而some传入的函数的任意一项返回true就会返回true,相当于||
      var one=[1,2,3,4,5]
      var everyResult=one.every(function(item,index,array){
                 return item>4
      })
      console.log(everyResult)      //flase 不是每一项都大于4

      var someResult=one.some(function(item,index,array){
                 return item>4
      })
      console.log(someResult)       //true  存在大于4的项
      filter返回一个数组,该数组的元素为指定检查数组中满足函数条件的所有元素
      var one=[1,2,3,4,5,6]
      var filterResult=one.filter(function(item,index,array){
                return item>4
      })
      console.log(filterResult)    //5,6  返回满足条件的数组

      map返回一个数组,该数组的元素为传入函数的结果的集合
      var one=[1,2,3,4]
      var mapResult=one.map(function(item,index,array){
                return item*4
      })
      console.log(mapResult)       //4,8,12,16 返回经过函数的结果的数组
     forEach用于调用数组中每一个元素,将元素返回给回调函数,没有返回值;本质上和使用for循环迭代数组是一样的

     var one=[1,2,3,4,5,6]
     one.forEach(function(item,index,array){
                  console.log(item)         //1——6的迭代
     })

     var two=[1,2,3,4]
     var sum=0
     two.forEach(function(item,index,array){
             sum+=item                //累加
     })
     console.log(sum)                //10

     two.forEach(function(item,index,array){
             two[index]=item+1       //元素自加
     })
     console.log(two)               //2,3,4,5

并归方法

reduce()和reduceRight()这两个方法都会迭代数组的所有项,然后构建一个最终返回的值,reduce从数组第一项开始遍历,reduceRight从数组最后一个遍历;

    基本语法为array.reduce(function,initialValue)
    函数接受四个参数:pre,cur,index,array
    如果有初始值,pre就是初始值,没有则pre为数组第一项,cur为数组第二项

    var one=[1,2,3,4]
    var sum=one.reduce(function(pre,cur,index,array){
            return pre+cur
    },0)
    console.log(sum)  //10

pre为0,cur为1   pre为pre和cur之和1,cur为2  ……一直遍历结束

对于reduceRight来说,没有初始值,pre就是最后一项,cur为倒数第二项;有初始值则cur为最后一项

最后:ES5中的新方法具有极强功能,代替原来用for循环遍历的种种,下次再用实际项目总结

原文地址:https://www.cnblogs.com/iDouble/p/8377426.html

时间: 2024-08-30 05:18:03

引用类型之数组array最全的详解的相关文章

JavaScript中数组Array.sort()排序方法详解

JavaScript中数组的sort()方法主要用于对数组的元素进行排序.其中,sort()方法有一个可选参数.但是,此参数必须是函数. 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编码顺序)对数组中的元素进行排序,如果想按照其他标准进行排序,就需要进行传一个参数且为函数,该函数要比较两个值,并且会返回一个用于说明这两个值的相对顺序的数字. 1.对数字数组进行由小到大的顺序进行排序. 代码: var arr = [22,12,3,43,56,47,4]; arr.sort();

HTML video 视频标签全属性详解

HTML 5 video 视频标签全属性详解 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE 9.Chrome),都不支持的(IE6.7.8).好吧,现在让我们从技术层面来认识HTML 5的视频,包括video标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件. Video标签的使用 Video标签含有src.poster.preloa

数组,异质结构以及指针的详解

数组,异质结构以及指针的详解 前言 昨天看了一部韩国电影,老千2,看到凌晨5点,不过发现韩国的棒子们确实养眼,女的贼拉漂亮,还有大尺度哦~ 咱们上一次分析了过程(方法)的实现,其中精妙的栈帧占据了首要的地位,不知道各位还能否记忆起来.今天咱们一起来看看数组的相关内容,相比之下,数组和流程控制与过程的实现难度差不多,尤其是动态数组可能还要稍微难一些,因为大家做好心理准备,不过呢,相信你每克服一个困难都是一种快乐,就像你看见一张好图,废了九牛二虎之力找到了种子那种感觉. 正文 数组简介 如果大家是一

Kubernetes YAML 文件全字段详解

Kubernetes YAML 文件全字段详解 Deployment yaml 其中主要参数都在podTemplate 中,DaemonSet StatefulSet 中的pod部分一样. apiVersion: v1 kind: Deployment metadata: name: <deploy-name> namespace: <ns-name> labels: <key>: <value> spec: replicas: 2 selector: ma

C++中二维数组传参的方法详解

C++中二维数组传参的方法详解 首先需要明确,C++中其实没有多维数组,所谓的多维数组,其实就是数组的数组: 另外,数组中元素的个数也是数组类型的一部分. 当一个数组的元素仍然是数组时,通常使用2个维度来定义它,一个数组表示数组本身的大小,另一个维度表示其元素大小(它的元素也是数组): int ia[3][4]; //大小为3的数组,每个元素是含有4个整数的数组 int (*p)[4] = ia;//p指向含有4个整数的数组(指向第一个内层数组) 1 将给定第二维长度的二维数组作为形参传递 #i

一维 + 二维树状数组 + 单点更新 + 区间更新 详解

树状数组详解: 假设一维数组为A[i](i=1,2,...n),则与它对应的树状数组C[i](i=1,2,...n)是这样定义的: C1 = A1 C2 = A1 + A2 C3 = A3 C4 = A1 + A2 + A3 + A4 C5 = A5 C6 = A5 + A6 ................. C8 = A1 + A2 + A3 + A4 + A5 + A6 + A7 + A8 ................ 如图可知: 为奇数的时候他是代表他本身,而为偶数的时候则是代表着自

二维数组作为函数参数深度详解

        前几天和同学讨论数组作为函数参数,感觉各种困惑.花了一些时间在网上查看了一些资料,并加上自己的理解.记录一下! 一. 指向指针的指针和指向数组的指针 很多人以为"指向数组的指针"就是"指向指针的指针",于是有人写这样的代码: int a[3][4]; int **p = a; //错误 数组实际类型是int [3][4],在作为右值时可以被转化为int (*)[4],它们都和int **不同,自然不可用. 那么,你要用一个指针来指向a,就要用一个

javascript引用类型之数组Array

Array:数组中的每一项可以保存任何类型的数据,且数组的大小是动态调整的(最多可包含4294967295项,大约43亿项) [1.1]数组创建: [1.1.1]使用Array构造函数(在使用Array构造函数时,也可以省略New操作符) e.g. var colors = new Array(); var colors = new Array(20); var colors = new Array('red','blue','green'); var colors = Array(3); [注

Java基础--关于分支、循环、数组的部分练习题及详解

**-----分支题-----** 1.定义一个int类型的变量为x并赋值为5,如果x<10,则让x实现自增,并输出x最后的值. package com.eduask;  //包名 public class Test {   //类 public static void main(String[] args) {  //主函数 int x=5; //声明一个int类型的变量并初始化值为5 if(x<10){  //if分支,如果x的值小于10,x=5,符合题意,进入分支 x++;   //x实