美文网首页工作生活
js系列之奇妙的数组

js系列之奇妙的数组

作者: shui水mo墨 | 来源:发表于2019-07-04 18:20 被阅读0次

    了解数组之前,我们先了解下计算机是如何存储数据的。

    在计算机里面,数据是存储在一个个小盒子里面的,而每个小盒子都有自己的地址。当我们要访问某个数据的时候,就要去访问存储该数据的盒子。

    数组相对于单个数据,就比较特殊一点。它是连续的一组内存空间(盒子),存储具有相同类型的数据

    那么在javascript里面,我们是怎样初始化数组的呢?

    //第一种
    var array1=[];
    //第二种,直接放入数据
    var array2=[1,2,3,4,5,6];
    //第三种
    var array3=new Array();
    //第四种,直接放入数据
    var array4=new Array(1,2,3);
    //第五种,申请了三个盒子来存储数据
    var array5=new Array(3);
    

    在上面的五种方法中,第一和第二的效率最高。

    你可能会有疑问,申请数组的时候,是不是必须要告诉计算机,我们需要多少个盒子?
    答案很明显,不是必须的。但是你要清楚,虽然你不设置盒子的数量(数组的大小),但是实际上计算机早就帮你申请了固定数量的盒子。

    那盒子不够了怎么办?

    小明和他的两个朋友去ktv唱歌,因为人少,他们预约了一个小包间。突然小明的电话响了,原来他的另外四个朋友听说他来唱歌了,嚷嚷着也要来。
    这个时候,小明想,现在的包间肯定小了,他赶紧去找经理换了个大一点的包间。

    因为数组的连续性,要让盒子的数量变多,只能丢掉当前的盒子,重新寻找更多的连续的盒子。

    数组的连续性,导致每次扩充容量的时候,都要耗费大量的时间,重新寻找连续的盒子,而且有时候计算机提供不了那么多连续的盒子

    那我们为什么还是要用数组来存储数据呢?

    数组支持随机访问,因为每个盒子都有地址,就像我们房子的门牌号。
    假设我们数组的第一个元素门牌号是21001,那么我们要访问第十个元素,我们直接去找门牌号是21010的盒子,而不是一个一个去找,这么做大大节省了我们的时间。

    读取数组中元素的时候,要注意:数组的下标(中括号里面的数字)是以0为开始的,也就是说a[1]是数组a的第二号元素。因为数组下标是指相对第一个元素的“偏移“。另外,访问数组的时候,一定要注意不要越界(数组里总共有十个元素,但是你非要访问第十一个元素),如果越界可能会导致系统崩溃

    // 数组的读取
    var  array=[1,2,3,4,5];
    console.log(array[3]);  //该函数是将数据打印到控制台
    

    数组有了,接下来我们就要对它进行操作了。

    //数组的遍历
    var array1=[1,2,3,4,5,6];
    for(var i=0;i<array.length;i++)
    {
        console.log(array[i]);
    }
    //数组和字符串的转换
    //字符串转数组,以空格为标准,拆分字符串
    var  data1="Bob is a good boy";
    var array2=data1.split(" ");
     // 数组转字符串
    var array3=[1,2,5,8,9];
    var data2=array3.toString();  
    var data3=array3.join("-");   //拼接成的字符串以-隔开
    

    那我们怎么判断一个变量是数组呢?

    var array1=[1,2,3,4,5,6];
    var result=Array.isArray(array1);
    

    有时候我们想要复制数组,很简单的做法就是将就旧数组直接赋值给新数组。

    var array1=[1,2,5,6,8,9,11];
    var array2=array1;
    

    但是这样做有个问题,将旧数组赋值给新数组,只是相当于给旧数组增加了一个新的引用,修改原来的引用,新引用也会感知到其中的变化,这种复制被称作浅复制。(修改array1,array2也会改变)

    那么怎么样才能做到修改其中一个,另外一个不发生变化(深复制)?

    var array1=[1,2,5,6,8,9,11];
    var array2=[];
    //array1.length是指数组的长度
    for(var i=0;i<array1.length;i++)
    {
        array2[i]=array1[i];
    }
    

    查找数组中的元素,有两种情况:(1)已知该元素是数组中的第几个,求该元素的数值,这种直接按照之前说的随机访问方式寻找。(2)已知元素的值,求该元素在数组中的位置。
    若数组中包含多个相同的元素,则indexOf方法返回第一个与参数相同的索引值,而lastIndexOf方法返回最后一个与参数相同的索引值,

    var array1=[1,2,5,6,8,9,11,2,5,1];
    //indexOf方法
    var num1=array1.indexOf(2);
    // lastIndexOf方法
    var num2=array1.lastIndexOf(5);
    console.log(num1);
    console.log(num2);
    

    其实我们可以通过已知数组去创建数组
    (1) 两个 数组 合并成一个新数组;
    (2) 在某个数组中截取一段为新数组;

    //数组合并 
    var array1=[1,2,3,4,5,6,7];
    var array2=[3,4,6,7,9,11,12];
    var array3=array1.concat(array2);
    console.log(array3);
    //数组截取
    var array4=[1,2,3,4,5,6,7,8,9];
    //splice函数返回截取之前的数组片段,
    //第一个参数是截取的起始位置,第二个参数是截取长度。
    var array5=array4.splice(2,6);
    console.log(array5);
    

    有时候当我们创建数组的时候,并不知道数组里面应该填充什么数据,我们需要根据程序动态的添加元素

    var array=[];
    // 数组开头添加元素
    array.unshift(12);
    //数组最后一个元素之后添加元素
    array.push(24);
    

    但是有时候我们也需要动态去删除元素

    var array1=[1,2,3,4,5,6];
    // 删除数组最后一个元素
    array1.pop();
    //删除数组第一个元素
    array1.shift();
    

    当删除数组中的元素时,被删除元素后面的数据,要整体向前移动。(因为数组的连续性)
    每次我们删除数据,我们需要耗费比较多的时间去整理数组。
    但是在某些情况下,我们不一定要追求数组的连续性,我们可以将多次删除操作集中在一起执行。

    java中的垃圾回收,就是这种原理。
    在这里我们主要了解一下,垃圾的标记清除算法。它分为两个阶段,第一阶段是标记,虚拟机会遍历所有的数据,找到存活的对象进行标记(大多数主流的虚拟机采用可达性分析算法来判断对象是否存活),标记工作完成之后,将不存活的数据进行清理。
    不过此方法的不足在于:(1)标记清除过程效率不高,只有少量垃圾产生时会很高效。(2)会产生不连续的内存空间碎片。
    其实还要很多更高效的垃圾回收算法,如果感兴趣,可以点击下面的文章继续了解。JVM 垃圾回收算法

    有时候我们要涉及一些数组的排序

    var array1=[1,3,4,6,8,3,2,1,4,5,8];
    // 数组的翻转,也就是从尾部到头部倒序排列
    var array2=array1.reverse();
    console.log(array2);
    //数组的排序,按照从小到大的顺序排列
    var array3=["a","c","d","em","1","4","9"];
    var array4=array3.sort();
    console.log(array4);
    

    需要注意的是数组的排序方法,默认是按照字典的顺序对元素进行排序的,所有对于元素是数字的数组排序,sort函数并不准确。
    那么我们怎样才能准确的处理数字数组的排序呢?我们需要传入一个函数。

    var array1=[1,3,4,16,28,3,2,1,4,5,8];
    var array2=array1.sort(sort_data);
    console.log(array2);
    function sort_data(num1,num2)
    {
        return num1-num2;
    }
    

    相关文章

      网友评论

        本文标题:js系列之奇妙的数组

        本文链接:https://www.haomeiwen.com/subject/eyulhctx.html