• 前端开发JS——数组


    25、数组
    1)声明数组:
      ①构造函数创建数组
    var arr = new Array();
    console.log(arr):        //[]
     
    var arr = new Array(20);   //设置数组的长度为20
    console.log(arr);         //[,,,,,,,,,,,]   单个打印的值为undefined
     
    var arr = new Array('zhangsan', 'lisi');
    console.log(arr);     //['zhangsan', 'lisi']
    console.log(arr.length);   //2
    console.log(arr[1]);         //lisi
    console.log(arr[100])     //undefined
     
      ②数组字面量创建数组
    var arr = [];
    console.log(arr);    //[]
    var arr = ['zhangsan', 'lisi' ];
    console.log(arr);   //['zhangsan', 'lisi']
     
    2)访问数组 
    var arr = [1, 'zhangsan', 'lisi', 'hello'];
    console.log(arr[2]);    //lisi
    console.log(arr[100]);     //undefined
     
    //给index为10的位置设置123,空余的位置补undefined
    arr[10] = 123;
    console.log(arr);                   //[1, 'zhangsan', 'lisi', 'hello',,,,,,,,,123]
    console.log(arr.length);          //11
     
    //更改数组的长度100,空余的位置补undefined
    arr.length = 100;
    console.log(arr);        //[1, 'zhangsan', 'lisi', 'hello',,,,,,,,,,,,,,,,]
    //更改数据的长度2,0,1的位置的值保持不变,其余删除
    arr.lenght = 2;
    console.log(arr);        //[1, 'zhangsan',]
     
    3)数组测试和数组序列化 
      ①数组测试
    var arr = [1,2,3,4];
    console.log(typeof arr);      //object
    consolel.log(arr instanceof Array);       //true
    console.log(arr instanceof Object);          //true
    console.log(Array.isArray(arr));       //true
     
    //arguments不是一个数组
    function test(){
    console.log(Array.isArray(arguments));
    }
    test(); //false
     
      ②数组序列化
    console.log(arr);         //[1,2,3,4]  这里是数组类型
    //数组序列化
    console.log(arr.toString());  //1,2,3,4
    console.log(arr.join());       //1,2,3,4
    console.log(arr.join(&));   //1&2&3&4
    console.log(JSON.stringify(arr));   // [1,2,3,4]  这里是字符串类型
     
    4)栈,队列方法  
      ①栈 LIFO (Last-In-First-Out) 
    push() 可接受任意类型的参数,将它们逐个添加到数组的末尾,并返回数组的长度 
    var arr = [2,3,4,5,6,7];
    console.log(arr.push(8));   //7
    console.log(arr);   //[2,3,4,5,6,7,8]
     
    pop() 从数组的末尾移除最后一项,减少数组的length值,返回移除的项 
    console.log(arr.pop());  //8
    console.log(arr);   //[2,3,4,5,6,7]
     
      ②队列 FIFO (First-In-First-Out) 
    shift() 移除数组中的第一个项并且返回该项,同时将数组的长度减一。 
    console.log(arr.shift());   //2
    console.log(arr);             //[3,4,5,6,7]
     
    unshift() 在数组的前端添加任意个项,并返回新数组的长度。
    console.log(arr.unshift(2));   //6
    console.log(arr);             //[2,3,4,5,6,7]
     
    5)排序 
      ①reverse() 反转数组项的顺序  (原数组发生更改)
    var arr = [5,2,4,67,32,64,752,45];
    console.log(arr);   //[5,2,4,67,32,64,752,45]
    console.log(arr.reverse());   // [45,752,64,32,67,4,2,5]
    console.log(arr);     //[45,752,64,32,67,4,2,5]
     
      ②sort() 
    默认排序:该方法会调用每个数组项的toString() 方法,然后按照字符序列排序 
         console.log(arr.sort());     //[2,4,5,32,45,64,67,752]
     
    自定义排序:
    a.该方法可以接受一个比较函数作为参数,比较函数有两个参数
    b.如果第一个参数位于第二个参数之前,返回负数
    c.如果第一个参数位于第二个参数之后,返回正数
    这个是相当于冒泡排序一样
    function com(a, b){
      return a-b
    }
    console.log(arr.sort(com));   //[2,4,5,32,45,64,67,752]
     
                                            //根据字段进行排序
    var stus = [
      {name:'zhangsan',age:21,},
      {name:'lisi',age:22,}
    ];
    console.log(stus);            //[{name:'zhangsan',age:21,},  {name:'lisi',age:22,}]
    stus.sort(compare('name', 'asc'))
    console.log(stus);          //[ {name:'lisi',age:22,}, {name:'zhangsan',age:21,}]
    function compare(attr,rules){
      return function(o1,o2){
        if(rules === 'asc'){
          if(o1[attr]<o2[attr){
            return -1;
          }
          else{
               return 1;
          }
        }
        else{
          if(o1[attr]>o2[attr]){
            return -1;
          }
          else{
            return 1;
          }
        }
      };
    }
     
    26、数组(后续)
    ①截取方法
      concat() 数组拼接,先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾, 返回副本,不改变原数组。
        var arr = [3,4,5,2,4];
        var arr2 = [1,2,3,4,5];
        arr.push(arr2)
      //这是直接用push的方法,会将整个列表添加在末尾,而且原数组也会改变
              console.log(arr);   //[3,4,5,2,4,[1,2,3,4,5] ] 
     
      //这里可以采用遍历arr2数组,再arr.push(arr[i])
        if(Array.isArray(arr2)){
          for(var i = 0; i < arr2.length; i++){
            arr.push(arr2[i]);
          }
        }
              //如果是数组类型的值,就展开放进去
        var result = arr.concat(arr2);
        console.log('原数组',arr);   //原数组[3,4,5,2,4]
        console.log('结果',result);//结果[3,4,5,2,4,1,2,3,4,5 ]
     
      //如果不是数组类型的数据,直接放在末尾
        var result = arr.concat('hello');
        console.log('原数组',arr);   //原数组[3,4,5,2,4]
        console.log('结果',result);//结果[3,4,5,2,4,'hello' ]
     
    concat的执行过程:
    Ⅰ.不改变原数组,创建副本
    Ⅱ.如果参数是数组,展开放进去
    Ⅲ.如果参数是其他类型,直接将这个值放在末尾
    Ⅳ.返回副本
     
    重写concat方法
    Array.prototype.myConcat = function(param){
    //1、创建副本
    var temp = [];    
    for(var i = 0; i < this.length; i++){
      temp.push(this[i]);
    }
    //2、数组类型
    if(Array.isArray(param)){
      for(var j = 0; j < param.length; i++){
        temp.push(param[i]);
      }
    }
    //3、其他类型
    else{
      temp.push(param);
    }
    //4、返回副本
    return temp;
    }
    var result = arr.myConcat(arr2);
    console.log('原数组',arr);   //原数组[3,4,5,2,4]
    console.log('结果',result);//结果[3,4,5,2,4,1,2,3,4,5 ]
     
    slice() 数组切割,可接受一个或者两个参数(返回项的起始位置,结束位置),返回的是一个数组,不改变原数组
      ①当接受一个 参数,从该参数指定的位置开始,到当前数组末尾的所有项
    var arr = [12,34,45,65,76,89,98];
    var result = arr.slice(2);
    console.log(arr);     //[12,34,45,65,76,89,98]
    console.log(resule);   //[45,65,76,89,98]
     
      ②当接受两个参数,起始 到结束之间的项,但是不包含结束位置的项。
    var result2 = arr.slice(2,4);
    console.log(result2);     //[45,65]
     
    splice() 向数组的中部插入数据将始终返回一个数组,该数组中包含从原始数组中删除的项。 
    删除:指定两个参数(删除的起始位置,要删除的项数,返回的是一个删除项组成的数组) 
    var arr = [32,4,9,3,0];
    var result = arr.splice(1,3);  
    console.log(result);    //[4,9,3]
    console.log(arr);   //[32,0]  //原数组改变
     
    插入:指定三个参数(起始位置,0,要插入的项任意数量的项) 在起始位置插入项
    arr.splice(1,0,'hello','sss');
    console.log(arr);   //[32,'hello','sss',0]
     
    替换:指定三个参数(起始位置,要删除的项数,要插入的任意数量的项)
    arr.splice(1,2,1,2);
    console.log(arr);   //[32,1,2,0]
     
      ②索引方法(索引值都是从左到右定义的) 
    indexOf() 从数组开头向后查找,使用全等操作符,找不到该元素返回-1。第一个参数为要查找 的项,第二个参数(可选)为索引开始位置
    var arr = [2,5,67,'2',3,2,45];
    console.log(arr.indexOf(2));     //0
    console.log(arr.indexOf(2,1));    //5   从索引为1的位置开始查找
    console.log(arr.indexOf(22));    //-1
     
    lastIndexOf() 从数组末尾向前查找,使用全等操作符,找不到该元素返回-1。第一个参数为要查找 的项,第二个参数(可选)为索引开始位置
              var arr = [2,5,67,'2',3,2,45];
    console.log(arr.lastIndexOf(2));     //5
    console.log(arr.lastIndexOf (2,3));    //0   从索引为1的位置开始查找
    console.log(arr.lastIndexOf (22));    //-1
       
      ③迭代方法    参数: 每一项上运行的函数,运行该函数的作用域对象(可选)
    every() 对数组中的每一运行给定的函数,如果该函数对每一项都返回true,则该函数返回true 
    var arr = [23,45,1,4,3,45,7];
    var result = arr.every(function(item, index, arr){
      console.log(this);    //{}   这个结果是因为第二个参数是{}
      return item > 40;
    },{})
    console.log(result);    //false
    //如果是return item > 20,输出是{} {} {} false
     
    every()方法重写
      Array.prototype.myEvery = function(fun, funThis){
        var result;
        for(var i = 0; i < this.length; i++){
          result = fun.call(funThis, this[i], i, this);  //result = fun.apply(funThis, [this[i], i, this];
          if(!result){
               break;
          }
        }
      return result;
      }
     
    var arr = [23,45,1,4,3,45,7];
    var result = arr.myEvery(function(item, index, arr){
    console.log(this);    //{}   这个结果是因为第二个参数是{}
      return item > 40;
    },{})
    console.log(result);    //false
    //如果是return item > 20,输出是{} {} {} false
     
    some() 对数组中的每一运行给定的函数,如果该函数对任一项都返回true,则返回true
    var stus = [
      {name:'xiaoer',age:12, },
      {name:'zhangsan',age:22,},
      {name:'lisi',age:20, },
      {name:'wangwu',age:22,},
    ];
    console.log(stus);
    //判断数组中是否都是成年人,都是返回true,否则返回false
    var result = !(stus.some(function(item,index,arr){
      return item.age < 18;
    }));
    console.log(result);   //false
    //判断是否有未成年人,有返回true,否则返回false
    var result = stus.some(function(item,index,arr){
      return item.age < 18;
    });
    console.log(result);   //true
     
    filter() 对数组中的每一运行给定的函数,会返回满足该函数的项组成的数组
    var result = stus.filter(function(item, index, arr){
      return item.age >= 18;
    });
    console.log(result);   //[{name:'zhangsan',age:22,},{name:'lisi',age:20, },{name:'wangwu',age:22,}]
     
    map() 对数组中的每一元素运行给定的函数,返回每次函数调用的结果组成的数组
    //只查找名字
    var result = stus.map(function(item, index, arr){
      return item.name;
    });
    console.log(result);   //['xiaoer','zhangsan', 'lisi', 'wangwu',]
     
    //查找所有未成年人的名字
    var result = stus.filter(function(item,index,arr){
      return item.age < 18;
    }).map(function(item, index, arr){
      return item.name;
    });
    console.log(result);  //['xiaoer']
     
    forEach() 对数组中的每一元素运行给定的函数,没有返回值,常用来遍历元素
    var arr = [ 
      {name:'zhangsan'},
      {name:'lisi'},
      {name:'terry'}
    ] ;
    var ageInit = 10;
    arr.forEach(function(item, index, arr){
      //console.log(item, index, arr);         //
      item.age = 12;     //每个对象的年龄都为12
       item.age = ageInit++;      //每个对象的年龄都在累加
    });
  • 相关阅读:
    ping 的零碎知识
    dhcp问题
    Apache相关知识与配置
    Android || IOS录制mp3语音文件方法
    Sheet can not be presented because the view is not in a window的解决办法,和window的简单使用
    测试题1 IOS面试基础题
    IOS 封装类的时候注释格式,使用的时候可以想官方库一样快捷显示
    IOS 用正则表达式解析HTML等文件,得到所有文本
    IOS源码封装成.bundle和.a文件时,使用单例作为出口的写法!任何封装都建议使用这种方法作为出口
    XMLParser解析xml--内容源自网络(在静态库中不能用GDATA来解析,因为静态库不能加动态库)
  • 原文地址:https://www.cnblogs.com/aitiknowledge/p/11541875.html
Copyright © 2020-2023  润新知