JavaScript学习之路-Array

一、前言

数组在JavaScript中,是除了Object之外,最常用的类型了。与其他语言中的数组相比,JavaScript中的Array有很大的不同,比如:它的每一项可以保存任何类型的数据;而且它也可以根据内容的变化自动调整大小。

二、Array创建

1.构造函数创建
  • var array = new Array(); //创建一个空数组
  • var array = new Array(20);//创建一个长度为20的数组
  • var array = Array(3)
  • var array = Array("Joshua")
2.数组字面量创建
  • var array = []
  • var array = ['Joshua','I',"AM"]
    建议大家用字面量来创建数组,简单方便,代码少。
3.length

在其他语言中例如:Objective-C,swift。数组的长度值是只读的,但是在JavaScript中它却不是只读的,你可以给它设定值,从而改变数组的长度。

var array = ["1","2","3"];
array.length = 2;
console.log(array[2]) ---> undefined

也可以利用length去添加数组内容

    var  array = ["1","2","3"];
    array[array.length] = '4';
    array[array.length] = '5';
    console.log((array));
///array : 1 2 3 4 5

数组也是有容量的,大约可以容纳4294967295个项。

4.检测数组
var array = [];
if(Array.isArray(array)){
//是数组
}

三、Array方法

1.转换方法

在JavaScript中任何对象都具有toLocaleString toString valueOf 方法。

  • toString方法会返回数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。
  • valueOf方法会返回数组本身
  • toLocaleString 返回和 toString方法一样的值,只不过数组中每一个值调用的是toLocaleString方法。
2.栈方法

所谓的栈方法就是push()pop()方法。栈的数据结构是后入先出

  • push()方法:参数可以是一个或者多个, 会在数组的最末端添加内容。
  • pop()方法:不需要参数。会在数组的最末端删除一个项。
    var  array = ["1","2","3"];
    array.push('4');  ->   ["1", "2", "3","4"]
    array.pop();   ->   ["1", "2", "3"]
    console.log((array));
3.队列方法

嘿嘿,队列方法就是 shift()unshift()方法。队列的数据结构是先进先出

  • shift()方法:移除数组中的第个一项,并返回该项。不需要参数。
  • unshift()方法:在数组第一项的前面添加一项。
   var  array = ["1","2","3"];
   array.shift(); //  ["2", "3"]
   array.unshift('w');//  ["w","2","3"];
   console.log((array));
4.重排序方法
  • reverse() 会把数组倒序输出
 var  array = ["1",'0',"2","3",'15','10'];
 console.log(array.reverse());
//输出
["10", "15", "3", "2", "0", "1"]
  • sort()方法会更加的灵活。
    该方法默认是按照升序排列的,它会调用数组每项的toString()方法,然后比较得到的字符串即使数组的每一项是数字,它也是进行字符串比较。(皮)
 var  array = [0,1,5,10,15];
  console.log(array.sort());
//输出
[0, 1, 10, 15, 5] (字符串进行比较)

sort()方法也会传入一个函数,进行比较,主要比较传入函数的俩个参数,规则是: 如果第一个参数本应该位于第二个参数之前则返回一个负数,如果第一个参数本应该位于第二个参数之后则返回一个正数,俩个参数相等返回0.。其实很简单,我们就比较数组中的前二个数字就好了,把数组前俩项当做参数一和参数二,如果想正序排列,如下代码:

    var  array = [100,1,51,11,15];  
    array.sort(function (param1, param2) {
        if (param1 < param2){
            return -1;
        }else if(param1 > param2){
            return 1;
        }else {
            return 0;
        }
    });
        console.log(array);

倒序排列:

    var  array = [100,1,51,11,15];
    array.sort(function (param1, param2) {
        if (param1 < param2){
            return 1;
        }else if(param1 > param2){
            return -1;
        }else {
            return 0;
        }
    });
        console.log(array);
5.操作方法
  • concat()
    这个数组的方法,简单来说其实就是连接的意思,它会针对当前数组创建一个副本,然后讲接受到的参数添加到副本末尾,当无参数的时候,只是把数组复制,然后返回当前这个副本。当有参数的时候,会把每一项添加到数组的末尾。concat()方法不会影响原始数组。如下🌰:
   var  array = ["I",'AM'];
   var  array1 = ['Joshua']
   console.log(array.concat(array1));
   输出 : ["I", "AM", "Joshua"]
   var array = ["I", 'AM'];
   var newArray = array.concat('Joshua', ['good', 'boy']);//副本 把参数拼
   接到 数组后,
  console.log(newArray) ;
  输出 :["I", "AM", "Joshua", "good", "boy"]
  console.log(array) ;
输出 : ["I", 'AM'];
  • slice()
    slice中文意思就是切,把什么切开的意思。slice(‘开始索引’,‘结束索引’) 包括左边索引开始的值,不包括右边索引开始的值.。如果结束位置的索引值小于开始索引值,会返回空数组
    如果传递一个参数,表示从索引值开始截取到最后。注意:slice()方法不会影响原数组。请看下面的列子
    var array = ["I", 'AM','Joshua'];
    var newArr = array.slice(1);
    console.log(newArr); // ["AM", "Joshua"]
    console.log(array); //["I", "AM", "Joshua"]
    var array = ["I", 'AM','Joshua','is','good','man'];
    var newArr = array.slice(1,3);(包左,不包右)
    console.log(newArr); // ["AM", "Joshua"]  

slice方法也可以传递一个负数,就是这个负数值+数组长度 开始的地方。如下🌰:

   var array = ["I", 'AM','Joshua','is','good','man'];

    var newArr = array.slice(-1,-3); // 结束索引值 小于 开始索引值 返回空数组
    console.log(newArr); // []

    var newArr1 = array.slice(-3,-1); // -3+6 = 3  -1+6 = 5
    console.log(newArr1); // ["is", "good"]

下面要放大招了。。。。。当当当。。。。

  • splice()方法,可以算是数组中最强大的方法了。能力强的一批。(😆)
    该方法可以做到替换,删除。还以 改变原始数组 (@ο@)。始终返回一个数组,这个数组就是从原始数组中删除的项,没有删除,返回的是一个空数组。
    splice(开始索引值,删除几个,我是替换内容1,我是替换内容2,........)
    删除
    可以删除任意数量的项,只要指定开始索引和要删除的项数。
    var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
    var removed = array.splice(0, 2); // 返回被删除的项
    console.log(removed);//["I", "AM"]  
    console.log(array);//["Joshua", "is", "good", "man"]

插入
可以向指定位置插入任意数量的项,指定3个参数。删除的项数要为0

    var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
    var removed = array.splice(2, 0,'woman','you');// 返回被删除的项为0 ,返回空数组
    console.log(removed);//[]
    console.log(array);//["I", "AM", "woman", "you", "Joshua", "is", "good", "man"]

替换
可以向指定位置替换任意数量的项,同时删除指定的项数,指定三个参数

  var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
    var removed = array.splice(2, 2,'woman','you');
    console.log(removed);//["Joshua", "is"]
    console.log(array);// ["I", "AM", "woman", "you", "good", "man"]
6.位置方法

位置方法包括:indexOf()和 lastIndexOf() 这俩个方法都是返回要查找的值在数组中的索引值,只是前者从头开始找到第一个有效的值的索引。后者从尾部开始,找到最后一个有效值索引。如果没有找到则返回 -1

 var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
console.log(array.indexOf('Joshua'));// 2
console.log(array. lastIndexOf('AM'));// 1

也可以指定从哪个索引开始查找

    var array = ["1", '2', '3', '4', '5', '4','3','2','1'];
    console.log(array.indexOf('4',4));// 5
    console.log(array. lastIndexOf('4',4));// 3
7.迭代方法

以下方法都不会修改数组中的值

  • every()
    对数组的每一项都运行回调函数,如果都返回true,every返回true,有一项为false,就停止遍历。就像极限运动一样,有一次失败了,人生就完蛋了。(原天堂没有极限
array.every(function (value, index, array2) { 
        value //每项元素
        index;//索引
        array2 ;.数组本身
return true;
    })
 var array = ["111", '222', '333', '444', '555'];
    var bool = array.every(function (value, index, array2) {
        if (value > 100) {
            return true;
        } else {
            return false;
        }
    })
    console.log(bool) // true
  • some()
    这个方法和every()方法正好相反,只要有一项为true,函数就返回true。
    var array = ["111", '99', '33', '444', '555'];
    var bool = array.some(function (value, index, array2) {
        return (value > 100);
    })
    console.log(bool) ; // true
  • fliter()
    对数组每一项运行回调函数,该函数返回结果是true的项组成的新数组
    新数组是有老数组为true的项组成的
    var array = ["111", '99', '33', '444', '555'];
    var bool = array.filter(function (value, index, array2) {
        return (value > 100);
    })
    console.log(bool) ; // ["111", "444", "555"]
  • map()
    对数组每一项运行回调函数,返回该函数的结果组成的新数组。即return 什么 新数组中就有什么,不return返回undefined。
 var array = ["111", '99', '33', '444', '555'];
    var bool = array.map(function (value, index, array2) {
        if (index == 2){
            return value;
        }
        return value - 1;
    })
    console.log(bool) ; // [110, 98, "33", 443, 554]
  • forEach()
    这个其实就是for循环嘛!但是它没有返回值哟!!!
 var array = [111, 1, 0, 2, 3];
    var  sum = 0;
    var bool = array.forEach(function (value, index, array2) {
        sum += value ;
    })
    console.log(sum); //117
    console.log(bool) ; // undefined
8.归并方法
  • reduce()
    这个方法回迭代数组的所有项,然后构建一个最终返回值。该方法从第一个项开始。reduce函数接受四个参数:前一个值,当前值,项的索引,数组对象。这个函数返回的任何值,都会做为参数传递给下一项。第一次迭代,是在第二个参数上。所以第一个参数就是第一项,第二个参数就是第二项,如下🌰:
    var array = [111, 2, 0, 2, 3];
    var  sum = array.reduce(function (pre,cure,index,array1) {
       return pre+cure;
   })
    console.log(sum); //118
  • reduceRight()
    这个方法除了从哪头开始遍历数组之外,其他完全相同。这里就不再举🌰。
9.清空数组方法

说道这个清空方法 我想大多数人应该会用
array.length = 0//伪数组不能清空
array.splice(0)//伪数组没有这个方法
提到伪数组 那最应该想到的就是函数的 arguments。这个是每个函数都包含的一个对象。除了拥有length方法外,无其他数组属性。
所以呢,推荐大家一个完美解决方法
array = [];
这个方法也可以操作伪数组

四、总结

数组的方法就是以上方法了。希望大家在平常多家运用,在有些时候能帮助我们提高开发效率。
最后呢送大家一句歌词,感觉回忆起了当年青涩的样子。

怀念啊我们的青春啊
昨天在记忆里生根发芽
爱情滋养心中那片土地
绽放出美丽不舍的泪花
怀念啊我们的青春啊
留下的脚印拼成一幅画
最美的风景是你的笑容
那一句再见有太多的放不下
那时的我们拥有
没有污染过的清晨
嘀嘀嗒嗒的秒针
却留不住一个黄昏
曾经的爱很简单
不需要费力的眼神
牵手走过无人山岗
想时间再慢几分

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

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,152评论 0 4
  • 本章内容 使用对象 创建并操作数组 理解基本的 JavaScript 类型 使用基本类型和基本包装类型 引用类型的...
    闷油瓶小张阅读 652评论 0 0
  • 数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引。 JavaScript...
    劼哥stone阅读 1,108评论 6 20
  • 第5章 引用类型 引用类型的值(对象)是引用类型的一个示例。在ECMAScript 中,引用类型是一种数据结构,用...
    力气强阅读 673评论 0 0
  • 启动页是一个 APP 启动时用户第一眼看到的界面,通常我们是将产品的logo或者名称放在上面,以便加深用户的产品...
    cpacm阅读 46,768评论 10 50