js中常用的数组类型

今天来讲一下我们js中常用的数组

 数组是引用数据类型中的对象数据类型（特殊对象） 

         *   创建一个数组，也是要开辟一个堆内存，一个堆内存中存储数组是对象中的键值对例如：

         *     0 : 10

         *     1 : 20

         *     2 : 30

         *     length : 3（length指的是数组中的长度）

         *   1）数组中我们看到的每一项都是属性值，默认的属性名是数字，数字从零开始递增，数字代表当前是第几项，我们把代表位置的数字属性名称为“索引”；数组是以数字为索引，索引从零开始递增的结构！

         *   2）默认存在一个length属性，代表数组的长度（有多少项）

         *   3）数组中存在的每一项可以是任何数据类型

         * 真实项目中，我们从服务器获取到的数据，一般都是对象或者数组（JSON格式），而且结构层级一般也都是多级结构，所以学会数组/对象的相关操作，能够根据需求把获取的数据进行有效的解析和处理，是当下前端开发中非常重要的知识点；尤其是vue/react开发的时候，我们都是在不断的操作数据，来控制视图的渲染，而操作的数据也是以对象和数组偏多；..

        // ==== 一维数组（只有一级结构）

        // let arr = [10, 20, 30];

        // let arr = [10, 'AA', true, null, undefined, Symbol(1)];

        // ==== 二维数组（多维数组） 有两级或者多级结构

      例如：let arr = [{x: 100 }，{y: 200}];

         * 学习数组：

         *   1.掌握基础操作

         *   2.掌握数组中常用的内置方法（浏览器天生给数组提供的方法）

         *   3.掌握数组排序和去重（算法）

        //  获取每一项值：ARR[索引]   或者对某一项进行操作

        //  ARR.LENGTH - 1：最后一项的索引

        //  ARR[ARR.LENGTH] = X：向数组末尾追加一个新项

        //  基于DELETE删除数组中的某一项（把它当做普通对象操作），键值对可以删掉，但是LENGTH并不会跟着改变，一般数组删除不用它！

        //  基于ARR.LENGTH--可以实现删除数组中最后一项

        // let arr = [10, 20, 30];

        // arr[0] = 100;

        // console.log(arr[arr.length - 1]);

        // arr[3] = 40;

        // delete arr[0];

        // arr.length--;

        // 数组迭代（遍历数组中的每一项）

        /* for (let i = 0; i < arr.length; i++) {

            let item = arr[i];

            console.log(`当前遍历的是数组中索引为：${i}，数值为：${item}的这一项！`);

        } */

        // 作为普通对象，基于FOR IN遍历数组中所有的键值对

        /* for (let attr in arr) {

            console.log(attr, arr[attr]);

        } */

        /* 还可以基于 while循环、for of循环、内置的迭代方法来遍历数组每一项 */

         * 数组中常用的内置方法：基于这些方法可以让我们有效的对数组进行操作 

         *    console.dir(Array.prototype)

         * https://developer.mozilla.org/zh-CN/

         * 1.关于数组的增删改

         *   + push

         *   + pop

         *   + shift

         *   + unshift

         *   + splice

         * 2.关于数组查询和拼接

         *   + slice

         *   + concat

         * 3.转换为字符串

         *   + toString

         *   + join

         * 4.验证是否包含某一项的

         *   + indexOf / lastIndexOf

         *   + includes

         * 5.关于排序的

         *   + reverse

         *   + sort

         * 6.关于数组迭代的方法

         *   + forEach

         *   + map

         * 记忆的方式：

         *   1.方法的意义和作用

         *   2.参数（执行方法的时候传递的内容）@params:

         *   3.返回值（执行完方法返回的结果）@return：

         *   4.原始数组是否改变

         */

        设置一个变量： let arr = [10, 20, 30];

         * push：向数组末尾追加元素

         *   @params:

         *      参数个数不固定，类型也不固定，都是向数组末尾依次追加的内容

         *   @return:

         *      [NUMBER]新增后数组的长度

         *   原始数据改变

         * 基于对象键值对操作：arr[arr.length]=xx

        // let result = arr.push(40, '珠峰培训');

        // console.log(result); //=>5

          pop：删除数组最后一项 

         *   @params:无

         *   @return:    被删除的那一项内容

         *   原始数组改变

         * arr.length--  删除最后一项

        // let result = arr.pop();

          unshift：向数组开始位置新增内容

         *   @params:

          个数不定、类型不定，都是要依次新增的内容 

         *   @return:

         *      [NUMBER]新增后数组的长度

         *   原始数据改变

        // let result = arr.unshift(0, '珠峰培训');


          shift：删除数组第一项 

         *   @params:无

         *   @return:    被删除的那一项内容

         *   原始数组改变

        // let result = arr.shift();

        splice：实现数组指定位置的增删改

         *    arr.splice(n,m)：从数组索引n开始，删除m个元素，返回结果是以新数组的方式，把删除的内容进行存储（m不写就是删除到末尾）

         *    arr.splice(n,m,x1,x2...)：从索引n开始，删除m个元素，用x1（或者更多的值）替换删除的内容，返回结果是一个数组，存储删除的内容

         *    arr.splice(n,0,x1,x2...)：从索引n开始，一个都不删除（返回结果是空数组），把x1或者更多值“插入到索引n的前面”

         * 原始数组都会改变 

========================================================================

        let arr = [10, 20, 30, 40, 50, 60, 70];

       ===新增（一个都不删）

        let result = arr.splice(2, 0, 100, 200, 300);

       console.log(result, arr); //=>result=[]  arr=[10, 20,100,200,300 ,30, 40, 50, 60, 70]

============================================================================

        // ===修改（删除掉一部分，然后用一些值替换即可）

        // let result = arr.splice(2, 2, '珠峰培训', '周啸天');

        // console.log(result, arr); //=>result=[30,40]  arr=[10, 20, '珠峰培训','周啸天', 50, 60, 70]

==============================================================================

        // ===删除

        // let result = arr.splice(2, 3);

        // console.log(result, arr); //=>result=[30,40,50]  arr=[10,20,60,70]

        // let result = arr.splice(0); //=>从索引零开始，删除到末尾（清空原来数组，把原来数组中的每一项都存放到新数组RESULT中）

        // console.log(result, arr); //=>result=[10, 20, 30, 40, 50, 60, 70]  arr=[]

        // 需求：删除数组末尾这一项，你有几种办法

        // let arr = [10, 20, 30, 40, 50, 60, 70];

        // arr.length--;

        // arr.pop(); //=>返回结果70

        // arr.splice(arr.length - 1); //=>从最后一项开始，删除到末尾（删除一个）  返回结果[70]

        // delete arr[arr.length - 1]; //=>虽然可以删除，但是LENGTH长度不变（一般不用）


        // 需求：向数组末尾追加‘珠峰’

        // let arr = [10, 20, 30, 40, 50, 60, 70];

        // arr.push('珠峰');

        // arr[arr.length] = '珠峰';

        // arr.splice(arr.length, 0, '珠峰');

         slice(n,m)：实现数组的查询，从索引n开始，查找到索引为m处（不包含m），把查找到的内容以新数组的方式返回，原始数组不变

        // let arr = [10, 20, 30, 40, 50, 60, 70];

        // let result = arr.slice(2, 5);

        // console.log(result, arr); //=>result=[30, 40, 50]  arr=[10, 20, 30, 40, 50, 60, 70]

        // console.log(arr.slice(2)); //=>[30, 40, 50, 60, 70]  第二个参数不写是直接查找到数组末尾

        // console.log(arr.slice(0)); //=>[10, 20, 30, 40, 50, 60, 70] 可以理解为把原始数组中的每一项都查找到，以新数组返回，实现出“数组的克隆”：得到的新数组和原始数组是两个不同的数组（两个不同的堆），但是堆中存储的内容是一致的

         concat：实现数组拼接，把多个数组（或者多个值）最后拼接为一个数组，原始的数组都不会变，返回结果是拼接后的新数组

        // let arr1 = [10, 20, 30];

        // let arr2 = [50, 60, 70];

        // let arr = arr1.concat('珠峰', arr2);

        // console.log(arr); //=>[10, 20, 30, "珠峰", 50, 60, 70]

        let arr = [10, 20, 30, 40, 50, 60, 70];


         把数组转化为字符串：

         *   1. toString()：把数组中的每一项按照“逗号分隔”，拼接成对应的字符串

         *   2. join([char])：指定分隔符

         * 原始数组都不会改变

        // console.log(arr.toString()); //=>'10,20,30,40,50,60,70'

        // console.log(arr.join()); //=>等价于toString

        // console.log(arr.join('+')); //=>'10+20+30+40+50+60+70'  如果这个字符串能够变为JS表达式执行，则代表数组中每一项的求和 =>eval

        // let str = arr.join('+');

        // let total = eval(str);

        // console.log(total);

        /* let total = 0;

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

            total += arr[i];

        }

        console.log(total);

        5.数组的排序或者排列

reverse

sort

// 不包含

}

// 也可以直接使用ES6新提供的includes方法判断

if (ary.includes('珠峰培训')) {

// 包含：如果存在返回的是TRUE

}

 reverse : 把数组倒过来排列

* @params

* @return

*  排列后的新数组

* 原来数组改变

let ary = [12, 15, 9, 28, 10, 22];

ary.reverse();

console.log(ary); //=>[22, 10, 28, 9,

15, 12]

 sort : 实现数组的排序

* @params

*  可以没有，也可以是个函数

* @return

*  排序后的新数组

6.遍历数组中每一项的方法

forEach

* 原来数组改变

let ary = [7, 8, 5, 2, 4, 6, 9];

ary.sort();

console.log(ary); //=>[2, 4, 5, 6, 7, 8,

9]

// SORT方法中如果不传递参数，是无法处理10以上

数字排序的(它默认按照每一项第一个字符来排，不是

我们想要的效果)

/* ary = [12, 15, 9, 28, 10, 22];

ary.sort();

console.log(ary); //=> [10, 12, 15, 22,

28, 9] */

// 想要实现多位数正常排序，需要给SORT传递一个函

数，函数中返回 a-b 实现升序，返回 b-a 实现降序

ary = [12, 15, 9, 28, 10, 22];

// ary.sort(function(a,b){ return a-b;

});

ary.sort((a, b) => a - b);

console.log(ary);

/*


map:forEach是不支持返回值的，而map可以在foreach的基础上支持返回值，把原来数组中每一项得值替换成新值，最后存储在一个新数组中，但是原始数组不变；

MAP支持返回值，但是不会改变原来的数组，执行完的返回结果是修改后的新数组

ary.mop(fuction(item, index) => {

// 数组中有多少项，函数就会被默认执行多少次

// 每一次执行函数：item是数组中当前要操作的这一项，index是当前项的索引

//函数中返回啥，都是把数组中当前项替换成啥

return'@@';

}）；

let ary = [12, 15, 9, 28, 10, 22];

/* // 基于原生JS中的循环可以实现

for (let i = 0; i < ary.length; i++) {

// i:当前循环这一项的索引

// ary[i]:根据索引获取循环的这一项

console.log('索引：' + i + ' 内容：' +

ary[i]);

} 

ary.forEach(fuction(item, index){

// 数组中有多少项，函数就会被默认执行多少次

// 每一次执行函数：item是数组中当前要操作的这一项，index是当前项的索引

console.log('索引：' + index + ' 内容：' + item);});

前端是每一个人不断练习不断积累，只要努力，下一个成功的就是你！

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