美文网首页JS深入浅出
JavaScript 06 数组

JavaScript 06 数组

作者: 小五丶_ | 来源:发表于2019-12-03 10:50 被阅读0次

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    欢迎大家去我的个人技术博客看看,点赞收藏注册的都是好人哦~

    https://xiaowu.xyz



    一、数组的简介和定义

    数组就是一组数(一般来说,数据类型一样),相当于一次性定义了很多相同数据类型的变量,如果说单个变量是一个小容器,数组就是有多个格档的大容器(每个格档是个小容器)。

         数组是一种数据类型。(在js中,数组的类型是object)

    为什么要使用数组?

    当我们需要表示一组数据,或者叫做一次性定义很多相似的变量时,就需要使用数组,如:表示一个班级学生的成绩,一年十二个月的销售数据等等。

    数组可以通过字面值和构造函数两种方法来创建。

    一维数组的定义

    var arr = new Array(10); //创建一个包含 10 个元素的数组,没有赋值

    var arr2 = new Array(“芙蓉姐姐”,30);//使用构造函数创建 

    var arr3 =  [1,2,3,4,5]; //创建一个包含5个元素的数组,并给每个元素分别赋值为1,2,3,4,5

     var arr = [];  //空数组

    什么是多维数组?

    多维数组就是外层的数组中的至少有一个元素是一个数组

    几维数组就是几层

    var arr  =  [1,2,3,4,[5,6,7,8]];   //二维数组

    var arr  =  [1,2,3,4,[5,6,7,8,[9,10]]];   //三维数组

    ......

    一般三维数组差不多了,更多的原理差不多,就不一一列举了

    二、数组的特性

    1.  有length 属性  

        (length代表 元素的个数)

    数组的长度(length属性)

    数组元素的个数,我们通过数组元素的个数来表达数组的长度,一个数组中有多少个元素,长度就是多少

    var arr = [1,2,3,4,5,"a","c",true];

    console.log(arr.length);   //长度为8

    2.  可以通过下标取值和赋值 

    下标就是索引,即元素的序号,从0开始,下标最大取值是:长度-1;

        下标可以是变量或表达式。

        通过下标取值

    注意:如果取值时,填入了不存在的下标,也和变量一样,会返回undefined

    var arr = [1,2,3,4,5,"a","c",true];

    console.log(arr[0]);  //  1

    console.log(arr[1]);  //  2

    console.log(arr[5]);  //  a

    console.log(arr[100]);  //  undefined 取没有定义的下标的时候就会得到undefined

    通过下标赋值

    var arr = [1,2,3,4,5,"a","c",true];

    arr[8]  = 100;

    arr[9]  = 50; 

    arr[0]  = 99; 

    注意:

            1)、如果给一个已有的值的下标赋值,会替换掉原有的值

            2)、如果给一个很大的下标赋值,js会自动补充empty到中间。

    3.  可以循环(遍历)取值/赋值

    数组可以被遍历

    在js中,只有索引数组一种,没有类似于php中的关联数组。

    遍历数组有三种语法

    1、for循环遍历数组

    var arr = [1,2,3,4,45,6,243,13,4,"hello","world"];

       for(var i=0;i<arr.length;i++){

            console.log(arr[i]);

        }

    2、for ... in 遍历数组的下标

    var arr = [1,2,3,4,45,6,243,13,4,"hello","world"];

    for(var key in arr){

        console.log(key,arr[key]);     //这里的key值的是数组的下标,for... in循环会遍历下标

    }

    3、for ... of 遍历数组的值

    var arr = [1,2,3,4,45,6,243,13,4,"hello","world"];

    for(var val of arr){

        console.log(val);     //这里的val值的是数组的值,for... of循环会遍历数组的值

    }

    其实for...of更适合遍历数组,for...in更适合遍历对象

    遍历数组能对数组进行很多操作,我会通过例子来讲解。

    小技巧:

    往数组最后增加一个值(数组的递增赋值)

    var arr  = [1,2,3,4,5,6,2131,1,245,21];

    arr[arr.length] = "我是最后一个哦";

    // 根据原理 arr.length是数组的长度,而数组的下标(index)是从0开始的,所以数组的最大下标等于length-1

    // 往数组的lenght下标添加就是往数组最后一个元素的后面添加一个新元素

    注意:(数组储存在堆内存中)

        在js中,由于数组属于引用类型,所以两个空数组也不相等,[] != []

        引用数据类型,引用的并不是同一块内存空间所以即使值相等,所引用的空间也不同。


    数组的使用技巧:

    数组的去重

    第一种方法:用新数组来保存

    var list = [1, 2, 1, 2, 3, 4, 4, 3, 5, 6, 5, 6];

        var arr = [];  

        for (var i = 0; i < list.length; i++) {

            var item = list[i]; // 循环的当前元素

            if (arr.indexOf(item) == -1) {

                arr.push(item);

            }

        }

        console.log(arr);

     第二种方法:讲重复的裁切掉

    var list = [1, 2, 1, 2, 3, 4, 4, 3, 5, 6, 5, 6];

        for (var i = 0; i < list.length; i++) {

            for (var j = i + 1; j < list.length; j++) {  //1  2  3

                if (list[i] === list[j]) {

                    list.splice(j, 1);

                    j--;

                }

            }

        }

    数组的深复制和浅复制

    var list = [["小张", 86, 79, 55], ["小李", 75, 36, 90], ["小明", 68, 75, 82]];

    数组的浅复制 (单纯的赋值)    因为 对象是引用类型  引用的是同一个空间   只要有一个改变  就都改变了

    var arr = list;

    数组的深复制  所以我们就想 要把数组所有数据  拷贝一份  (在新数组中操作不影响原数组) 

    1. 新建数组 用for循环 将数组list拷贝一份 

        var list = [1, 2, 3];

        var arr = [];

        for (var val of list) {

            arr.push(val);

        }

    2. 数组的拓展方法(concat / slice)

    var list = [1, 2, 3];

        // var arr = list.concat();

        // var arr = list.slice();

        var arr = list.map(function (item) {

            return item;

        })

        arr[0] = "小猪";

        console.log(list[0]);

    但是这两种方法都不能适用于多维数组,如果存在多维数组,就只能用多重循环,如果不清楚到底有多少层,可以使用递归。

     function deepCopy(list) {

             var arr = [];

             for (var i = 0; i < list.length; i++) {

                 var item = list[i];

                 // 判断  如果是值类型就 直接放到数组中   如果是引用类型就 把数组在深复制一遍

                 if (item instanceof Array) {

                     return deepCopy(item);

                 } else {

                     arr.push(item);

                 }

             }

             return arr;

         }


    相关文章

      网友评论

        本文标题:JavaScript 06 数组

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