zoukankan      html  css  js  c++  java
  • 浅谈JS引用类型之Array类型

     最近看了一下红皮书,就整理一下,提炼一下里面的知识点!

    创建方式

      先从数组的创建方式说起,有两种创建方式

    • 一种是:var arr = new Array ();

      可以给构造函数传参数,如果只传一个参数,并且这个参数是数值,那么就创建该数值大小的数组,其他情况就是创建包含这些参数的数组

    • 另一种是:var arr = [];

      数组的每一项都是可以保存任何类型的数据的,var arr = [1,"hello",true,{a:1}];但是不推荐保存不同类型的值

    length属性

      1.它的值永远等于数组索引的最后一项+1

      

    var arr = [1,2,3];
        arr[9] = 10; 
        console.log(arr.length);//10

      2.用length属性来达到push()函数的效果

      

    var arr = [1,2,3];
          arr[arr.length] = 4;
          console.log(arr);//[1, 2, 3, 4]
          arr.push(5);
          console.log(arr);//[1, 2, 3, 4, 5]

    检测方法

      可以使用instanceof操作符和isArray()函数(ES5)

    console.log([] instanceof Array);//true
    console.log({} instanceof Array);//false
    console.log(3 instanceof Array);//false
    console.log(Array.isArray([1]));//true
    console.log(Array.isArray({}));//false
    

    转换方法


    所有的对象都有toLocalString()、toString()和valueOf()方法

    对于数组的toString()方法,当数组调用的这个方法的时候是在数组的每一项上调用这个方法使他们都变成字符串,然后再把它们拼接成用逗号隔开的字符串

    调用valueOf()还是返回原数组

    栈方法和队列方法

    push()和pop()方法是LIFO(后进先出)

    shift()和unshift()方法是FIFO(先进先出)

    重排序方法

    reverse()和sort()方法

    先说简单的reverse()方法

    var arr = [1,2,3];
    var newArr = arr.reverse();
    console.log(arr);//[3, 2, 1]
    console.log(newArr);//[3, 2, 1]

    它使数组的项倒序排列,它修改了原数组,并且返回值也是修改后的数组

    sort()方法就比较麻烦了,在默认情况下即不传参时,是按升序排列数组的,为实现排序,sort()方法会调用每个数组项的toString()方法,然后比较得到的字符串,再来确定如何排序,即使每一项都是数值,也要先转换成字符串。

    var arr = [1,5,12,24,3,2];
    arr.sort();
    console.log(arr);//[1, 12, 2, 24, 3, 5]

    1,12,2,24,3,5这是什么排大小的逻辑呀,怎么不给我升序排列呀,这是因为它比较的是字符串,先从第一字符比起,然后再是第二个······

    于是,可以给这个方法传递一个比较函数,规则是这样的:如果第一个参数应该位于第二个参数之前则返回一个负数;如果两个参数相等,则返回;,如果第一个参数应该位于第二个之后则返回一个正数。

    var arr = [1,5,12,24,3,2];
    function compare(a,b) {
        if(a > b) {
            return 1;
        } else if( a < b) {
            return -1;
        } else {
            return 0;
        }
    
    }
    arr.sort(compare);
    console.log(arr);//[1, 2, 3, 5, 12, 24]

    这次就好了,对于比较的只是数值类型(注意是数值是前提)比较函数还可以这样写

    function compare(a,b) {
      return a - b;  
    }

    这个形式就简单多了!

    操作方法

    concat()方法用于拼接数组,具体说就是先创建当前数组的一个副本,然后将接受到的参数添加到这个副本的末尾,最后返回新构建的数组

    var arr = [1,2];
    var arr2 = arr.concat(3,4,[5,6]);
    console.log(arr);//[1, 2]
    console.log(arr2);//[1, 2, 3, 4, 5, 6]

    slice()方法用于截取数组,可接受一个或者是两个参数,即起始位置和结束位置,在只有一个参数时,slice()返回从该参数指定位置开始到当前数组末尾的所有项。如果是

    两个参数,则返回起始位置和结束位置(但是不包括结束位置)之间的数组项;

    var arr = [1,2,3,4,5,6];
    var arr2 = arr.slice(0,1);
    var arr3 = arr.slice(1);
    var arr4 = arr.slice(2,5);
    var arr5 = arr.slice(2,6);
    var arr6 = arr.slice(-4,-1);//等价于arr.slice(2,5)
    var arr7 = arr.slice(5,2);
    
    console.log(arr);//[1, 2, 3, 4, 5, 6]
    console.log(arr2);//[1]
    console.log(arr3);//[2,3,4,5,6]
    console.log(arr4);//[3,4,5]
    console.log(arr5);//[3,4,5,6]
    console.log(arr6);//[3,4,5]
    console.log(arr7);//[]
    可以看出不包括结束位置的项,并且允许slice方法的参数是负值,如果是负值则用数组的长度加上该负数来确定相应的位置,还有就是如果结束位置小于起始位置就返回空数组
    splice()方法虽然与slice()只有一个字母之差,但是它实现的功能很多,它能对数组实现三项功能:1.删除,2.插入,3.替换
    删除:需要指定两个参数:要删除的第一项的位置和要删除的项数
    var arr = [1,2,3,4,5,6];
    var arr2 = arr.splice(2,3);
    console.log(arr);//[1,2,6]
    console.log(arr2);//[3,4,5]
    插入:可以向指定的位置插入任意数量的项,需要提供3个参数:起始位置,0,要插入的项;如果要插入多个项,可以再传入第四个,第五个参数
    var arr = [1,2,3,4,5,6];
    var arr2 = arr.splice(2,0,7,8);
    console.log(arr);//[1, 2, 7, 8, 3, 4, 5, 6]
    console.log(arr2);//[]
    替换:可以向指定位置替换任意项,需提供三个参数,起始位置,要删除的项数和要插入的任意数量的项,插入的项数不必与删除的项数相等。
    var arr = [1,2,3,4,5,6];
    var arr2 = arr.splice(2,1,7,8);
    console.log(arr);//[1, 2, 7, 8, 4, 5, 6]
    console.log(arr2);//[3]
    splice始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除就返回空数组
    位置方法
    ES5中新添加的两个方法:indexOf()和lastIndexOf(),都接受两个参数:一个是要查找的项,和可选的表示查找的起点位置的索引,这两个方法的区别就是:indexOf()是从数组的开始查找,lastIndexOf()是从数组的末尾开始查找,它们都返回要查找项在数组的位置,如果没有找到的话就返回-1,并且在查找过程中是使用的全等操作符,还有就是他只能找到一个,如果数组中有多个相同的项要找,它只能找到第一个先发现的项
    var arr = [1,2,3,4,5,6,6,3,2];
        console.log(arr.indexOf(3));//2
        console.log(arr.lastIndexOf(6));//6
        console.log(arr.indexOf(3,3));//7
        console.log(arr.lastIndexOf(2,3));//1


    下次介绍迭代方法和归并方法




     

  • 相关阅读:
    vue Tab切换
    Vue+WebSocket 心跳机制 保持连接
    查询字符串是否包含某个字符
    vue+element 增删改查
    vue+DataV大屏数据展示
    向远程服务器发送并接受文件
    asp.net WebApi自定义权限验证消息返回
    jCryptoJS 、C#互通加密(MD5版)
    CryptoJS 、C#互通加解密(AES版)
    Dev 报表——MVC 中使用(版本号:15.2 )
  • 原文地址:https://www.cnblogs.com/todayhappy/p/4411584.html
Copyright © 2011-2022 走看看