第九节: JavaScript 数组及其常用方法

一.数组

1. 数组的创建

1.1 数组的概念

数组(array)是一个有序的数据集合。说白了，数组就是一组数。

数据是一组数据的集合,数组里面可以放任意的数据类型


1.2 数组字面量，
var arr = [16,33,23,12,53]

这是定义数组的最简单的方式。至于更多创建数组的方式，以后会接触到的。

里面用逗号隔开了很多值，最后一项没有逗号。

变量arr就是一个数组变量，里面存储的不是一个数字，而是一组数。可以使用下标，或称为索引值index来访问数组中的某一个项，下标从0开始。

console.log(arr[0]);   //输出16
console.log(arr[1]);   //输出33
console.log(arr[4]);   //输出53

数组中并不规定保存相同类型的项，但实际应用中，我们一般还是将相同类型的项保存在其中。

下面的数组中，存储的内容类型都是不一样的,但是合法的。

var arr = [1,"哈哈",true,undefined,"么么哒"];

字面量创建数组注意事项

var arr = [1,2,];   // 最后一个分号不要加,不然IE8及以下会多一个undefined的值


1.3 构造函数创建数组

创建一个空数组

var arr = new Array(); // 无参数是空格加不加都可以

创建指定项的数组

var arr = new Array(6);

创建有具体内容的数组

var arr = new Array("wuwei","tiantian","xuexi");

发现()里传入数字就是数组的项数,传入其他类型,就是数组的具体内容

var arr = new Array(2);
var arr = new Array('2');

new也可以不写

var arr = Array(2);
var arr = Array('2');


1.4 数组的数据类型(引用数据类型)

数组是引用数据类型，操作数组时实际是在操作数组的内存地址

数组是由字符串属性名和属性值组成的特殊对象，我们把数组的属性名叫做数组的索引

var arr = [1,2,3,4];
console.log(typeof arr);    //object

用typeof arr来检测，你会发现数组输出object。数组是对象。

保存数组的变量，实际上保存是数组内存地址：

var a = [1,2,3,4];
var b = a;
b[0] = 88;      //修改的是数组b下标为0的项
console.log(a); //数组a的下标为0的项也改为88
// [88,2,3,4]

都是数组[1,2,3]内容、长度、项的位置完全一样，但是不==。

var a = [1,2,3];
var b = [1,2,3];
console.log(a == b);

那时因为引用类型比较的是地址，变量a和变量b指向的位置不一样，不能判相等。

如果a里面存储的是基本类型，那么语句b=a就是把a的值赋值一份给b。如果a里面存储的是引用类型，那么b将指向a现在指向的位置，a的值不会赋值一份，a、b指向同一个地方。


2. 数组的属性

数组有一个属性，就是length，英语是长度的意思，表示这个数组的项的个数。

用点来表示一个对象的属性：

arr.length

var arr = [34,563,4576,334,46,433];
alert(arr.length);      //6，数组里面一共有6项

数组中有几项，那么就会弹出几。

现在我们发现，数组最后一项的下标，是length-1。

arr[arr.length - 1]  //表示数组的最后一项

因为数组的下标是从0开始的,所以数组最大下标arr.length -1,

尝试输入大于这个数字的下标,

arr[100];   //undefined;

尝试比length-1还大的下标，就是undefined。

数组的特点:
  1. length属性表示数组的长度
  2. 数组的索引从0开始

好玩儿的是，我们可以跳跃着指定数组：

arr[66] = 88;

那么此时其他没有指定的项目就是undefined(IE中,Chrome中是empty)。数组的

arr.length;  //67了，我们设置了下标为66的项，强制“抻长”了数组

改变数组length长度,就会改变数组

写一个小于数组元素数量的值会缩短数组，写0会彻底清空数组。数组我们现在arr.length = 2;

那么它就会有两项a[0]、a[1]其他项就丢失了。


3. 数组的遍历

数组里面存放的是一组数，那么我们经常需要对这些数字都进行一些操作。

就需要用for循环语句来遍历它。这是一个经典的for壳子：

for(var i = 0 ; i <= arr.length - 1 ; i++){
   //就可以对arr[i]来进行操作、判断……
}


4. 数组常用的方法

数组是对象，现在你要知道对象都有属性和方法。

属性已经介绍了，数组有length属性。属性就是描述对象的特点的，比如“性别”、“姓名”、“身高”

方法就是对象能够执行的事情。比如“吃饭”、“睡觉”、“打dota”

我们现在就要来学数组能执行什么方法。


一.数组的头尾操作 push(),pop(), shift(),unshift()

push() 尾插

pop() 尾删

unshift() 头插

shift() 头删


4.1 push()方法

作用：在数组的后面添加一个或多个数据

在数组的末尾添加项目，可以添加1个，也可以添加多个。

使用语法:

arr.push();

在数组Array末尾添加一个或多个数据

整体返回:

返回push结束后字符串的长度,length值

是否改变原数组:

改变原数组

var arr = ["东","西","南","北"];
arr.push("中","发","白");      //在数组最后添加项
console.log(arr);

push就是推的意思，推入。现在是像数组内推入内容.


4.2 pop()方法

作用：删除数组最后一个数据

使用语法:

arr.pop();

删除数组后面最后一项

整体返回:

返回pop(),删除的最后一项数据

是否改变原数组:

改变原数组

删除数组的最后一项，只能删除最后一项，无法删除多项。能够返回被删除的元素。


4.3 unshift()方法

作用：在数组的前面添加一个或多个数据

使用语法:

arr.unshift();

在数组Array开头添加一个或多个数据

整体返回:

返回unshift结束后字符串的长度,length值

是否改变原数组:

改变原数组


4.4 shift()方法

作用：删除数组第一个数据

使用语法:

arr.shift();

删除数组开头第一项

整体返回:

返回shift(),删除的第一项数据

是否改变原数组:

改变原数组


二.数组的合并 concat()
4.5 concat()方法

concat()方法就是合并两个数组

作用：在原有数组的最后面添加任意数据类型的值使用语法:

arr.concat();

在原有数组的最后面添加任意数据类型的值使用语法:

整体返回:

返回拼接后的新数组;

是否改变原数组:

不改变原数组

var arr1 = ["东","西","南","北"];
var arr2 = ["一条","二条"];

arr1.concat(arr2);   //这里有一个超级大坑，concat是把arr1和arr2合并为一个新数组返回
console.log(arr1);   //不变

所以必须：

arr1 = arr1.concat(arr2);

concat()的参数非常灵活，可以是数组变量、数组字面量、散的值也行：

var arr1 = ["东","西","南","北"];
var arr2 = ["一条","二条"];

arr1 = arr1.concat(arr2,["一筒","八条"],"幺鸡");
console.log(arr1);

调用这个方法，是先将arr1复制一份，然后将concat()中的参数添加到赋值的数组中,形成新的数组,然后返回新数组,也就是不改变原数组


三. 数组截取方法
4.6 slice() 截取方法

slice()方法可从已有的数组中返回选定的元素。

arr.slice(start[,end]);

在原有数组中窃取新数组

start : 截取数组开始的下标

end: 截取数组结束时的下标,窃取的数组不包含这个下标对应的内容;

如果end参数省略,将截取从start开始的剩余所有内容

整体返回:

返回截取后的新数组

是否改变原数组:

不改变原数组

var arr = ["东","西","南","北","中","发","白"];
var arr2 = arr.slice(1,4); //截取下标为1、2、3的为一个新数组返回
console.log(arr2);   //["西", "南", "北"]

arr.slice(start,end) 返回一个新的数组，包含从 start 到 end （不包括该元素）的元素。

只有开头:

var arr = ["东","西","南","北","中","发","白"];
var arr2 = arr.slice(3); //  从下标为3的项目开始截取后面全部了
console.log(arr2);   // ["北", "中", "发", "白"]

slice(a,b)取出了b-a项

利用slice克隆一份数组

arr.slice(0);

slice()是基于当前数组创建新的数组,如果只有一个参数,表示返回从该参数位置开始到数组末尾所有的项所组成的新数组,如果有两个参数,返回第一参数开始到第二个参数结束位置的项组成的新数组,不包含结束项,如果参数为空,返回数组所有项组成的新数组.

参数可以为负数,负数表示数组长度加上负数,比如数组长度为5,那么arr.slice(-3,-1)等同于arr.slice(2,4),如果第二个参数比第一个从参数小,返回空数组


4.7 多功能 splice()方法

splice()方法可以,截取(删除,),插入,替换

先确认一件事情

语法:

arr.splice(index,count[,item[,item2...])

index为arr,下标

count是要截取的数量(如果这项省略,代表从下标一直截取到最后)

item,item2是截取完成后向数组中插入的内容

整体返回:

返回窃取数组,如果截取为空,则返回空数组

是否改变原数组:

改变原数组

  • 截取(不插入替换内容就是截取)
arr.splice(2,2)// 从数组下标为2开始,截取2项
  • 插入(截取的项为0,代表不截取内容,只插入内容)
var arr = ["A","B","C","D","E","F","G"];
arr.splice(2,0,"嘻嘻","哈哈");      //插入到下标为2的项前，不删除项目
console.log(arr);
  • 替换
arr.splice(3,2,"斑马","骆驼");
// 从数组下标3开始,截取2项,并插入后面的内容
// 返回截取的内容组成的新数组


var arr = ["A","B","C","D","E","F","G"];
arr.splice(3,2,"X","Y","Z","思密达"); //从数组下标为3开始这项，连数2项，改为……
console.log(arr);

splice依据参数的多少，和参数是什么，有多功能。现在你要能反应过来。

例子:

如果我想删除数组最后8项

arr.pop();
arr.pop();
arr.pop();
arr.pop();
arr.pop();
arr.pop();
arr.pop();
arr.pop();

可以用for循环来简化

for(var i = 1 ; i <= 8 ; i++){
    arr.pop();
}

我们也可以用splice()方法

arr.splice(-8);


四. 数组排序
4.8. 逆序reverse(); 反向方法

作用：把原来数组中的每一个数据颠倒顺序排列

reverse()方法就是立即让数组倒置：

使用语法:

arr.reverse();

无须传参数

整体返回:

返回翻转后的数组

是否改变原数组:

改变原数组

var arr = ["A","B","C","D","E","F","G"];
arr.reverse();   //不需要赋值
console.log(arr);  //["G", "F", "E", "D", "C", "B", "A"]


4.9 sort() 排序方法

作用：把数组中的每一个数据按照一定顺序排列

sort()方法排序

使用语法:

arr.sort();

不传参数就默认排序,可以传入一个函数作为参数,自定义排序规则

整体返回:

返回排序的数组

是否改变原数组:

改变原数组

var arr = ["G","A","C","B","I","H","G","I","B"];
arr.sort();
console.log(arr);

//sort函数默认是按照字符顺序排的，隐式将数字转为string
//比字符编码顺序
var arr = [23,435,456,23,2,345,2,32,11,324,32,43,65,667,78,43];
arr.sort();
console.log(arr);

sort()里面有一个参数，这个参数是一个函数。

arr.sort(function(a,b){
    //如果a要放在b前面，那么返回负数
    //如果a要放在b后面，那么返回正数
    //如果a和b不区分大小，那么返回0
    if(a < b){
        return -1;
    }else if(a > b){
        return 1;
    }else if(a == b){
        return 0;
    }
});

排序练习:

var  arr = [2,3,57,10,12,34]
arr.sort(function(a,b){     
    return a-b;                 //==>让数组按照数字从小到大排列
})
arr.sort(function(a,b){     
    return b-a;                 //==>让数组按照数字从大到小排列
})
arr.sort(function(a,b){     
    return Math.random()-0.5;   //==>数组随机排列
})

必须由两个参数a，b;

当return的值是正数时，a和b颠倒位置，为负数时，a和b不颠倒位置


五. 数组拼接成字符串
4.10 转为字符串,join()方法

作用：把数组中的逗号用指定的字符串代替

按照join()传入的字符将数组中的每一项进行字符串拼接

使用语法:

arr.join();

按照join()传入的字符将数组中的每一项进行字符串拼接

整体返回:

返回拼接后的新字符串

是否改变原数组:

改变原数组

var arr = [1,2,3,4,5,6,7];
var str = arr.join("★");
console.log(str);

语法:

var str = arr.join(分隔符);

如果不写join()里不写分隔符，那么等价于用逗号

var arr = [1,2,3,4,5,6,7];
var str = arr.join();
console.log(str);   
// 1,2,3,4,5,6,7


六. 数组查询位置方法
4.11 indexOf()
接收两个参数
  1. 第一个参数是要查询的项
  2. 第二个参数是可选的,表示从哪里开始向后查找,如果省略,则表示从头开始查找

作用：从前向后检测数组中某个数据第一次出现的下标

如果数组里面有这个数据，arr.indexOf()的结果是对应数据的索引值，

如果没有这个数据，arr.indexOf()的结果是-1

var num = [1,2,3,4,5,4,3,2,1]
console.log(num.indexOf(3));


4.12 lastIndexOf()
接收两个参数
  1. 第一个参数是要查询的项
  2. 第二个参数是可选的,表示从哪里开始向前查找,如果省略,则表示最后开始查找

作用：从后向前检测数组中某个数据第一次出现的索引值

如果数组里面有这个数据，arr.indexOf()的结果是对应数据的索引值，

如果没有这个数据，arr.indexOf()的结果是-1


4.13 isArray(arr)

作用：判断arr是不是数组

如果arr是数组，那么Array.isArray(arr)的结果是true

如果arr不是数组，那么Array.isArray(arr)的结果是false


七. 数组迭代方法
4.14 迭代方法

  1. forEach()

    对数组中每一项都运行给定的函数,该方法没有返回值

  2. filter()

    晒选,每一个项都运行给定的函数,返回函数返回true的项组成的新数组

  3. map()

    数组的每一项都运行给定的函数,返回函数结果组成的新数组

  4. every()

    判断数组的所有项是否符合要求,都符合才返回true,一个为false 整体为false

  5. some()

    判断数组的任意一项是否符合要求,符合返回true,所有的都不符合,为false 整体为false

forEach

不改变原数组

没有返回值

var arr = [1,2,3];
arr.forEach(function(item,index,arr){
    console.log(item * 2)
})

filter

不改变原数组

返回符合条件的新数组

var arr = [1,2,3,5,9,2,4];
var newArr = arr.filter(function(item,index,arr){
    return item >= 4;
})
console.log(newArr); // [5, 9, 4]

map

不改变原数组

返回每一项处理后所组成的新数组

var arr = [1,2,3];
var newArr = arr.map(function(item,index,arr){
    return item * 2;
})
console.log(newArr); // [2, 4, 6]

every

不改变原数组

返回布尔值

var arr = [1,2,3];
var bol = arr.every(function(item,index,arr){
    return item  >  2;
})
console.log(bol); // false

some

不改变原数组

返回布尔值

var arr = [1,2,3];
var bol = arr.some(function(item,index,arr){
    return item  >  2;
})
console.log(bol); // true

<span style="color:red;">归并方法</span>

  1. reduce
  2. reduceRight

这两个方法都是迭代数组所有项,然后构建一个最终的返回值,接受两个参数,

第一个参数
为每一项调用的函数,函数可以传递4个参数

​ 前一个值,当前值,索引,原数组

第二个参数

​ 作为归并基础的初始值

var arr = [1,2,3,4,5]
var sum = arr.reduce(function(pre,cur,index,arr){
    return pre + cur;
})


总结:

下面的数组方法没有改变原来数组;

arr.cancat() 数组拼接 结果是新的数组
arr.join() 数组转换成字符串 结果是新的字符串
arr.slice() 数组查询 结果是新的数组

下面的数组方法改变了原来数组

arr.push()
arr.unshift()
arr.pop()
arr.shift()
arr.splice()
arr.reverse()
arr.sort()

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