JS深入浅出

JavaScript 06 数组

2019-12-03  本文已影响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;

     }


上一篇下一篇

猜你喜欢

热点阅读