JavaScript数组

创建一个数组两种常用的方式:字面量方式,和实例创建方式。

var ary = [1, 2, 3, 4]; // 字面量方式创建数组
var ary = new Array(); // 实例方式创建数组
// 看数组的详细信息,包含数组中常用的几个方法(__proto__中找,里面提供了数组中常用的所有方法)
console.dir(ary);

数组是由多个项组成的,每一项之间用","隔开,并且每一项存储的数据类型,可以是任何的数据类型。

    var ary = ['derrick', 'rose', 30, true, null, undefined, {}, function(){}, []];
    console.log(ary);

数组也是对象数据类型的,对象数据类型是由"属性名: 属性值"组成,数组中代表当前第几项的那个数字(0, 1, 2...)是它的,属性名,把它也可以称之为数组的索引。
ary[索引],就是获取 "第 索引+1 "项对应的内容。
如果写的索引超过了总长度,则返回 undefined。

    // ary.length/ ary["length"]: 获取数组的长度
    console.log(ary[1]);

数组的遍历

    var ary = ['derrick', 'rose', 'sg'];
    for (var i = 0; i < ary.length; i++) {
        // i = 0 -> 第一项 ary[0]
        // i = 1 -> 第二项 ary[1]
        // ...
        // ary[i] 在每一次循环的时候获取数组中的当前项
        console.log(ary[i]);
    }

数组中常用的方法
学习方法:

  1. 方法是做什么用的,实现的是什么功能
  2. 传递的参数是什么
  3. 返回值是什么
  4. 原来的数组是否发生了改变

对于数组:

var ary = [10, 12, 13, 11, 19, 17];

来对这个数组进行数组中常用方法等操作。

第一组:关于数组的增加、删除、修改

  1. push() -> 向数组末尾添加新的内容,返回的内容是添加后新数组最终的长度,原有的数组改变了。
    var res = ary.push(16, 10);
    console.log(ary); // 10, 12, 13, 11, 19, 17, 16, 10
    console.log(res); // 返回值是数组的长度
  1. unshift() -> 向数组开头增加新的内容,返回的内容是添加后新数组最终的长度,原有的数组改变了。
    var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.unshift(1, 2);
    console.log(ary); // 1, 2, 10, 12, 13, 11, 19, 17
    console.log(res); // 8
  1. splice(n, 0, x) -> 向数组的中间某个位置添加新内容,从索引n开始,删除0个内容,把新增加的内容x放在索引n的前面,返回的是空数组,原有数组改变。
    var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.splice(2, 0, 100);
    console.log(ary); // 10, 12, 100, 13, 11, 19, 17
    console.log(res); // 空

splice(n, m) -> 删除数组中指定的某些项,从索引n开始(包含n),删除m个元素,把删除的内容当做一个新的数组返回,原有数组改变。

    var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.splice(2, 2);
    console.log(ary); // 10, 12, 19, 17
    console.log(res); // [13, 11]

splice(n, m, x) -> 把原有数组中的某些项进行替换,先删除,然后用x替换,从索引n开始删除m个元素,然后用x替换原来的,返回是删除的元素。

    var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.splice(2, 2, 'a');
    console.log(ary); // 10, 12, 'a', 19, 17
    console.log(res); // [13, 11]

规律:splice(0, 0, x) -> 相当于我们的unshift(),splice(ary.length, 0, x); -> 相当于push()

  1. pop() -> 删除数组最后一个,返回的是删除的那一项,原有数组改变。
    var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.pop();
    console.log(ary); // 10, 12, 13, 11, 19
    console.log(res); // 17
  1. shift() -> 删除数组第一个,返回的是删除的那一项,原有数组改变。
    var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.shift();
    console.log(ary); // 12, 13, 11, 19, 17
    console.log(res); // 10

第二组:数组的查询和复制

  1. slice(n, m) -> 从索引n开始(包含n),找到索引m初(不包含m),然后把找到的内容作为一个新的数组返回,原有数组不变。
    var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.slice(2, 5);
    console.log(ary); // 10, 12, 13, 11, 19, 17
    console.log(res); // 13, 11, 19
    // slice(n) -> 从索引n开始(包含n),查找到数组的末尾
    var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.slice(2);
    console.log(ary); // 10, 12, 13, 11, 19, 17
    console.log(res); // 13, 11, 19, 17
    // slice(0)或者slice() -> 将原有的数组原封不动的复制一份,属于数组的克隆
  1. concat() -> 也可是实现数组的克隆,原来的数组不改变(相当于slice(0))。
    var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.concat();
    console.log(ary); // 10, 12, 13, 11, 19, 17
    console.log(res); // 10, 12, 13, 11, 19, 17

concat() 的本意是实现数组的拼接, ary.concat(ary2) -> 将数组ary和ary2拼接成一个数组。

    var ary2 = ['a', 'b', 'c'];
    ary.concat(ary2);
    console.log(ary); // 10, 12, 13, 11, 19, 17, 'a', 'b', 'c'

第三组:将数组转化为字符串

  1. toString() -> 把数组中的每一项拿出来,用","隔开,原有数组不发生改变。
    var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.toString();
    console.log(res); // 10, 12, 13, 11, 19, 17
  1. join(分隔符) -> 把数组中的每一项拿出来,用指定分隔符隔开。
    var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.join('+');
    console.log(res); // 10+12+13+11+19+17
    // 实现数组中数字的求和
    var ary = [10, 12, 13, 11, 19, 17];
    var str = ary.join('+');
    console.log(eval(str)); // eval() -> 将指定的字符串变成真正的表达式执行

第四组:数组的排列和排序,以及查找

  1. reverse() -> 数组倒过来排列,原有的数组改变。
   var ary = [10, 12, 13, 11, 19, 17];
    var res = ary.reverse();
    console.log(res); // 17, 19, 11, 13, 12, 10
    console.log(ary); // 17, 19, 11, 13, 12, 10
  1. sort() -> 数组排序,可以实现由大到小,也可以实现有小到大,原有的数组发生改变。
    var ary = [10, 12, 23, 6, 19, 17];
    ary.sort();
    console.log(ary); // 10,12,17,19,23,6

处理10以上的数字,我们需要哦这么做,需要传递一个参数,这个参数是一个函数。

    var ary = [10, 12, 23, 6, 19, 17];
    ary.sort();
    console.log(ary); // 10,12,17,19,23,6

    // 处理10以上的数字,我们需要哦这么做,需要传递一个参数,这个参数是一个函数
    var ary = [10, 12, 23, 6, 19, 17];
    ary.sort(function (a, b) {
        // 有6项,循环5次
        // a 代表的是每一次循环的时候,当前的这个项
        // b 代表的是后面的那个项
        // return a - b; -> 让当前项减去后一项,如果大于0,代表前面的比后面大,
        // 这样的话,就交换位置
        // 这种机制叫做冒泡排序:sort()实现排序就是遵循的冒泡排序的思想实现的
        return a - b; // 由小到大排序
    });
    console.log(ary); // 6, 10, 12, 17, 19, 23

    var ary = [10, 12, 23, 6, 19, 17];
    ary.sort(function (a, b) {
        return b - a; // 由大到小
    });
    console.log(ary); // 23,19,17,12,10,6

第五组:一些常用但是不兼容的
indexOf(), forEach(), map()


实例:数组去重

<script>
    // 数组去重
    var ary = [1, 2, 1, 2, 3, 4, 2, 1, 5, 3, 2, 1];
    for (var i = 0; i < ary.length - 1; i++) {
        var cur = ary[i];
        // i = 0 -> 第一次循环 开始比较的索引是1,一直到末尾
        // i = 1 -> 第二次循环 开始比较的索引是2,一直到末尾
        // ...
        // 当开始比较的索引 是i + 1
        // 数组塌陷问题:通过splice删除,原有的数组改变了,删除的那个索引以后所有的索引都往前提了一位
        for (j = 1; j < ary.length; j++) {
            if (cur === ary[j]) {
                ary.splice(j, 1);
                j--;
            }
        }
    }
    console.log(ary);

    // 方法二
    // 把数组中的每一项当做一个新对象的属性名和属性值存起来,在存储的时候判断当前的属性名是否已经存在,
    // 存在了就代表数组该项重复了,我们就删除,否则就代表不重复,直接存储
    var ary = [1, 2, 1, 2, 3, 4, 2, 1, 5, 3, 2, 1];
    var obj = {};
    for (var i = 0; i < ary.length; i++) {
        var cur = ary[i];
        if (obj[cur] == cur) {
            ary.splice(i, 1);
            i--;
            continue;
        }
        obj[cur] = cur;
    }
    obj = null

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

推荐阅读更多精彩内容

  • 一、数组的判断 arr instance Array; Array.isArray(arr); 方法: 1. pu...
    你听cmy1994阅读 322评论 0 0
  • 数组对于一个编程语言而言可谓举足轻重,当然 JavaScript 也对其相当重视,下面我就将自己接触到的数组有关的...
    ghwaphon阅读 741评论 0 2
  • Javascript数组基本操作 Javascript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性...
    haveSnap阅读 277评论 0 0
  • 数组的定义 数组是按序号排列的一组值,每个值的位置都有编号(从0开始)。数组本质上是一种特殊的对象。它的键名是按(...
    Allin_Lin阅读 545评论 0 0
  • 漫步青春 似水流年 本文参与#漫步青春#征文活动,作者:罗时风,本人承诺,文章内容为原创,未在其他平台发布。 ...
    不用诉离殇阅读 110评论 0 0