JavaScript 06 数组

版权声明:本文为博主原创文章,遵循 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;

     }



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,290评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,399评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,021评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,034评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,412评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,651评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,902评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,605评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,339评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,586评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,076评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,400评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,060评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,851评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,685评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,595评论 2 270

推荐阅读更多精彩内容