js对象和数组

梦蝶之变
146 阅读7分钟

引言

在js中对象和数组比较常用，对象的定义以及数组的定义和增删改查等必须掌握。

对象

  • new的方式定义对象。
    //例1，new的方式定义对象。
    var person=new Object();
    person.name="张三";
    person.age=25;
    console.log(person);
    //打印结果
    { name: '张三', age: 25 }
  • 使用对象字面量的方式定义对象，{表示字面量的开始，}表示字面量的结束。类似java里面的字符串常量的概念。
    //例2，以对象字面量的格式定义
    var person={name:"张三",age:25};
    console.log(person);
    //打印结果
    { name: '张三', age: 25 }
  • 使用对象字面量定义一个无属性对象，再赋值。
    //例3，以字面量的方式定义一个无属性对象，再赋值。
    var person={};
    person.name="张三";
    person.age=25;
    console.log(person);
    //打印结果
    { name: '张三', age: 25 }

数组

数组的创建

  • 以new的方式创建一个空数组，再往里面添加数据，数组的长度自动扩增,不会出现指针越界的情况。
    //定义空数组并添加值。
    var arr=new Array();
    arr[0]=1;
    arr[1]=2;
    console.log(arr.toString())
    //打印结果
    1,2
  • new一个指定长度的数组,但因为有自动扩容的特性，此时长度约束不了数组元素的个数,但却可以根据数组长度去删除数组元素。
    //定义了一个有初始长度的数组
    var arr=new Array(2);
    arr[0]=1;
    arr[1]=2;
    //数组长度为2，却可以添加3个元素
    arr[2]=3;
    console.log("此时数组中元素："+arr.toString());
    //通过修改数组长度删除数组元素
    arr.length=2;
    console.log("修改长度后的元素"+arr.toString());
    //打印结果
    此时数组中元素：1,2,3
    修改长度后的元素1,2
  • new的方式定义有初始元素的数组
    //定义
    var arr=new Array(1,2,3);
    console.log(arr.toLocaleString())
    //打印结果
    1,2,3
  • 以数组字面量[]的方式定义
    //以字面量的方式定义有值数组
    var arr=[1,2,3,4];
    console.log(arr.toString())
    //定义空数组
    var arr1=[];
    arr1[0]="呵呵";
    arr1[1]="哈哈";
    console.log(arr1.toString())
    //打印结果
    1,2,3,4
    呵呵,哈哈

数组的转换：valueOf(),toString()和toLocalString()。

  • 将数组转换成字符串：将数组中的元素以,连接。
    //转换为字符串
    var arr=new Array(1,2,3);
    console.log("arr:"+arr.toString())
    var arr1=[1,2,3];
    console.log("arr1:"+arr1.toLocaleString());
    var arr2=[1,2,3];
    console.log("arr2:"+arr2.valueOf());
    //打印结果
    arr:1,2,3
    arr1:1,2,3
    arr2:1,2,3
  • 自定义数组中元素的连接方式。
    //以join方法连接
    var arr=["111","222","333"];
    var str=arr.join("||");
    console.log(str);
    //打印结果
    111||222||333

检测是否为数组

  • instanceof
    var arr=["111","222","333"];
    console.log(arr instanceof Array);
    //打印结果
    true
  • isArray()可以跨版本检测。
   var arr=["111","222","333"];
   console.log(Array.isArray(arr));
   //打印结果
   true

向数组的首尾添加元素有栈方法和队列方法.

  • 栈方法(LIFO):push(压栈），pop(出栈）。
   var arr=["111","222","333"];
   //入栈
   arr.push("444");
   console.log("向数组末尾添加元素："+arr.toString());
   //出栈
   arr.pop();
   arr.pop();
   console.log("出栈后数组中的元素"+arr.toString());
   //打印结果
   向数组末尾添加元素：111,222,333,444
   出栈后数组中的元素111,222
  • 队列方法(FIFO):push(可向数组尾部添加多个元素）,shift(获取数组头元素）,unshfit(头部添加）。
   var arr=["111","222","333"];
   arr.push("444","555","666");
   console.log("向数组末尾添加元素："+arr.toString());
   var front=arr.shift()
   console.log("移除数组头元素"+front);
   arr.unshift("头部");
   console.log("头部添加后："+arr.toString());
   //打印结果
   向数组末尾添加元素：111,222,333,444,555,666
   移除数组头元素111
   头部添加后：头部,222,333,444,555,666

对数组中元素进行重排序。

  • 数组元素倒置reverse()。
   var arr=["111","222","333"];
   arr.reverse();
   console.log("倒置后的数组："+arr.toString());
   //打印结果
   倒置后的数组：333,222,111
  • 灵活排序sort()。 注意：当sort方法不传参时为升序排列，先将数组中的元素用toString()转换成字符串，再对字符串进行比较,不推荐使用。

定义一个compare函数作为参数传入sort(function)中。

  1. 定义一个compare(value1,value2),对传入的两个参数进行比较，当value1<value2,则return -1;当value1==value2,则return 0;当value1>value2,则return 1。
    //可以根据实际情况定义比较策略，类似于java中的处理方式
    function compare(value1,value2){
         if(value1<value2){
             return -1;
         }else if(value1==value2){
             return 0;
         }else{
             return 1;
         }
     }
  1. 传入sort()方法。
     var arr=[0,1,5,10,15];
     var arr1=arr.sort();
     console.log("未传参："+arr1.toString());
     var arr2=arr.sort(compare);
     console.log("传参后："+arr2.toString());
     //打印结果
     未传参：0,1,10,15,5
     传参后：0,1,5,10,15

操作方法：数组连接,截取,删除，插入，替换。

  • 连接：concat():可传入单个元素，可传入数组,也可两者都传入。
     var arr=[0];
     var p1=arr.concat("ooo");
     console.log("单个元素："+p1.toString());
     var arr1=[2,4];
     var p2=p1.concat(arr1);
     console.log("传入数组："+p2.toString());
     var arr2=[3,5];
     var p3=p2.concat("ppp",arr2);
     console.log("一起："+p3.toString());
     //打印结果
     单个元素：0,ooo
     传入数组：0,ooo,2,4
     一起：0,ooo,2,4,ppp,3,5
  • 截取(slice):
  1. 传单个参数则默认该参数为开始索引,截取从开始索引到数组末尾的元素。
  2. 传两个参数时，截取startIndex和endIndex之间的元素，且遵循左闭右开[left,right)原则。
    var arr=[1,2,3,4,5,6];
    var arr1=arr.slice(2);
    console.log("单个参数："+arr1.toString());
    var arr2=arr.slice(1,3);
    console.log("两个参数："+arr2.toString());
    //打印结果
    单个参数：3,4,5,6
    两个参数：2,3
  • 删除，插入和替换(splice):是对原数组进行修改.
  1. 删除:传入两个参数——开始索引(Index)和删除项数(items),即删除开始索引以及后几项元素，返回值为数组。
  2. 插入：传入三种参数——开始索引(Index)和删除项数(items),以及插入元素(elements)可多个。此时将items=0，即不做删除操作。
  3. 插入：传入三种参数——开始索引(Index)和删除项数(items),以及置换元素(elements)可多个。此时将items=1，即先从开始索引做删除操作，并插入置换元素。
    var arr=[1,2,3,4,5,6];
    var a=arr.splice(1,2);
    console.log("返回值是一个数组： "+Array.isArray(a));
    console.log("获取2: "+a);
    console.log("删除2： "+arr.toString());
    arr.splice(1,0,"pp","oo");
    console.log("索引为1处插入： "+arr.toString());
    arr.splice(1,2,15,16);
    console.log("替换pp,oo: "+arr.toString());
    //打印结果
    返回值是一个数组： true
    获取2: 2
    删除2： 1,3,4,5,6
    索引为1处插入： 1,pp,oo,3,4,5,6
    替换pp,oo: 1,15,16,3,4,5,6

位置方法：indexOf和lastIndexOf。

    //类似字符串
    var arr=[1,2,3,4,2,6];
    console.log("2所在的第一个索引： "+arr.indexOf(2));
    console.log("2所在的最后一个索引： "+arr.lastIndexOf(2));
    //打印结果
    2所在的第一个索引： 1
    2所在的最后一个索引： 4

迭代方法：every,filter,foreach,map和some。 相同点:参数传入一个function函数，格式为：

     function loop(item,index,arr){ }
  • every:对数组的每一项做判断，如果全部为true，则返回true,否则返回false.
     //总结：在every函数中，index和item不随循环变化，arr为原数组
     var arr=[1,2,3,4,5,6];
     var flag=arr.every(function(item,index,arr){
         console.log("item为："+item);
         console.log("index为："+index);
         console.log("arr为："+arr);
         return item % 2==0;
     });
     console.log(flag);
     //打印结果
      item为：1
      index为：0
      arr为：1,2,3,4,5,6
      false
  • some:对数组的每一项做判断，如果有一项为true，则返回true,否则返回false.
     var arr=[1,2,3];
     var flag=arr.some(function(item,index,arr1){
           return item==1;
     });
     console.log(flag);
     //打印结果
     true
  • filter:筛选留下数组中符合function函数条件的元素。
     /**
      * 1.在filter方法中，index,item会随循环变化，而arr为原数组arr
    */
      var arr=[1,2,3,4,5,6];
      var arr1=arr.filter(function(item,index,arr){
         return item % 2==0;
     });
     console.log("筛选后的数组："+arr1.toString());
     //打印结果
     过滤后的数组：2,4,6
  • foreach:循环对数组中每个元素进行操作。
     var arr=[1,2,3];
     arr.forEach(function(item,index,arr1){
          console.log("index为"+index+"的值为："+item);
     });
     //打印结果
      index为0的值为：1
      index为1的值为：2
      index为2的值为：3
  • map:对数组中的元素做映射处理。
    //可以先定义函数，再传入map方法中
    function loop(item,index,arr){
        return item=item+2;
     }
     var arr=[1,2,3,4,5,6];
     console.log("映射前的数组："+arr.toString());
     var arr1=arr.map(loop);
     console.log("映射后的数组："+arr1.toString());
     //打印结果
     映射前的数组：1,2,3,4,5,6
     映射后的数组：3,4,5,6,7,8

归并方法：reduce

  • 一般可做累加处理,reduce传入参数为function loop(prev,cur,index,arr){ }。 注意：在循环中会做prev=prev+cur处理，prev为前一个元素,cur为当前元素;
     function loop(prev,cur,index,arr){
         return prev+cur;
      }
     var arr=[1,2,3,4,5,6];
     var value=arr.reduce(loop);
     console.log("求和得值："+value);
     //打印结果
     求和得值：21
avatar
文章
阅读
粉丝