Write By Monkeyfly
以下内容均为原创，如需转载请注明出处。
数组对象的学习
大纲：
- 数组对象
- 1.数组的创建
- 2.数组的获取
- 3.数组的赋值
- 4.获取数组的长度
- 5.截取数组的某一部分
- 6.添加数组元素
- 6.1头插
- 6.2尾插
- 7.删除数组元素
- 7.1头删
- 7.2尾删
- 8.数组的排序
- 9.数组颠倒顺序
- 10.将数组连接成字符串
一、什么是数组？
我们知道，一个变量可以储存一个值。
比如说一个字符串，一个数字，我们可以这样写：
var str = "monkeyfly";
var str = "5201314";如果我们要存储多个值呢？比如说一堆字符串，一堆数字，应该怎么做？
可能你会这样写：
var str1 = "html";
var str2 = "css";
var str3 = "javascript";
var str4 = "jquery";
var str5 = "ajax";
var str6 = "json";
....乍一看，怎么写了这么多？要是做“城市”的下拉列表时，要存储上百个城市的名称，一个个写不累死就怪了。
存一个值，定义一个变量，存一个值，定义一个变量，存一个值，定义一个变量，不仅代码冗长，而且还占了很多内存。
所以，就发明了一个高级的语法——“数组”。
用来让我们存储一组“相同数据类型”的数据。【一般情况下都是这么做的】
记住：数组是一种引用数据类型。
与基本数据类型不同的是：
- 引用数据类型可以拥有多个值；【值可以随意改变】
- 而基本数据类型 只能拥有一个值。【即值不能动态的改变】
很简单，为了保存多个值，我们借助“数组”这个语法实现就好了。
我们只需要创建一个数组就可以了，然后用这个数组去保存我们所要存储的值。
可以这样写：
var arr = ["html","css","javascript","jquery","ajax","json"];
var arr = ["5","2","0","1","3","1","4"];现在，我们知道了：定义一个数组，就可以用来保存多个值了。
二、数组的创建
在JavaScript中，有两种创建数组的形式：
（1）完整形式：使用new关键字来创建。（这里是new，即新建了一个数组对象，然后利用数组的构造函数来创建的。）
（2）简写形式：使用[]来创建。使用起来方便快捷。
语法：
var 数组名 = new Array(元素1,元素2,...,元素n);//完整形式
var 数组名 = ["元素1","元素2",...,"元素n"];//简写形式举例：
var arr0 = []; //创建一个空数组，不包含任何元素
/*创建了一个包含3个元素的数组*/
var arr1 = new Array("西安","苏州","上海"); //完整形式
var arr2 = ["西安","苏州","上海"]; //简写形式【推荐使用】
document.write("<br/>" + "输出数组元素arr1：" + arr1 + "<br/>");//西安,苏州,上海三、数组的获取【数组的下标，从0开始】
如果要获取数组中某个元素的值，或者说某一项的值，就要用到所谓的“数组的下标语法”来获取。
比如说：
var arr = ["1","2","3"];由上可知，该数组包含三个元素，即"1"，"2"，"3"。数组中的每个元素都有自己的“编号”，并且规定了该编号从0开始，依次往后增加。所以，编号0就对应数组的第一个元素，编号1就代表数组的第二个元素，以此类推。
数组元素与编号的对应关系：
var arr = [ "1" , "2" , "3" ];
//编号/下标： 0 1 2
//数组元素： arr[0] arr[1] arr[2]问：为什么要定义这个所谓的“编号”？【这里的“编号”其实就是：数组元素的下标】
答：当然是为了更加方便快捷地获取到我们所需要的数组中的每一个元素（或者每一项）。
所以，如果我们
想要得到数组中的第 1 个元素（第1项的值），应该这么写：arr[0]；
想要得到数组中的第 2 个元素（第2项的值），应该这么写：arr[1]；
...
想要得到数组中的第 i 个元素（第i项的值），应该这么写：arr[i-1]；因此，我们得出了一个结论：数组的下标是从0开始的，并不是从1开始的。
举例：
//创建一个包含3个元素的数组，记住：使用简写形式
var arr = ["西安","苏州","上海"];
//获取数组中的某个元素：下标为2，得到的是第3个元素
document.write("<br/>" + "获取数组元素arr[2]：" + arr[2] + "<br/>");//上海分析：
必须记住：arr[2]获取到的是数组的第2+1个元素，而不是第2个！！！
四、数组的赋值【也是通过数组下标来实现的】
这个比较简单，利用上面学到的知识：数组的下标形式来实现的。
数组的赋值，我们可以分为两步来看：
（1）数组元素的获取；【数组的下标形式】
（2）赋值给需要的数组元素；【赋值运算符：=】
作用：
给数组元素赋予一个全新的值，即覆盖原始值。
为数组新增加一项，即新增加一个元素。
（给数组新增加一项。因为该元素之前的值为空，也就是不存在。赋值之后就相当于创建了一个新的元素。）
说明：
（1）即使当前获取到的数组元素为空，即还没有值，也可以给它赋值。这种情况下的赋值，就相当于新增加了一个数组元素。
（2）给数组的某一个元素赋予一个全新的值，该元素之前存在一个值，赋新值之后会覆盖旧值。
语法：
arr[i] = 值;举例：
//创建数组
var arr1 = ["西安","苏州","上海"];
arr1[2] = "北京"; //存在即覆盖
document.write("<br/>" + "给已经存在的数组元素arr1[2]赋值：" + arr1[2] + "<br/>");//北京
document.write("<br/>" + "赋值后的数组元素arr1：" + arr1 + "<br/>");//西安,苏州,北京
arr1[3] = "南京"; //不存在即添加
document.write("<br/>" + "给不存在的数组元素arr1[3]赋值：" + arr1[3] + "<br/>");//南京
document.write("<br/>" + "赋值后的数组元素arr1：" + arr1 + "<br/>");//西安,苏州,北京,南京五、获取数组的长度【如果数组内没有元素，长度为0】
我们使用length属性来获取数组的长度。
语法：
数组名.length说明：
我们只需要掌握数组的这一个属性就可以了，因为这个经常用到，其他的属性都用不到。
举例：
//定义了一个空的数组
var arr1 = [];
var arr2 = ["西安","苏州","上海"];
//获取数组的长度
var len1 = arr1.length;
var len2 = arr2.length;
//输出数组的长度
document.write("<br/>" + "数组arr1的长度：" + len1 + "<br/>");//0
document.write("<br/>" + "数组arr2的长度：" + len2 + "<br/>");//3for循环输出数组的每一个元素：
//创建数组
var arr3 = ["1","2","3","4","5"];
//length一般都是结合for循环来使用
for (var i = 0; i < arr3.length; i++) {
document.write("<br/>" + "遍历输出数组arr3：" + arr3[i] + "<br/>");//
}/*
遍历输出数组arr3：1
遍历输出数组arr3：2
遍历输出数组arr3：3
遍历输出数组arr3：4
遍历输出数组arr3：5
*/六、截取数组的某一部分【slice[start,end)】
在JavaScript中，我们使用slice()方法类获取数组的某一部分。
注意：
该方法与截取字符串的方法substring(start,end)类似，其实用法都差不多，可以进行对比记忆。
区别：
只不过在substring()方法中的开始位置和结束位置的数字都是非负整数，不能取负数。
而slice()方法的参数可以取负数。
语法：
数组名.slice(start,end);说明：
（1）start是起始位置的下标，end是结束位置的下标。
（2）start和end都是整数，其中end大于start。且可正可负。
- 正整数：指从头开始截取；负整数：指从尾部开始截取。
- 也就是说，
-1指字符串的最后一个字符，-2指倒数第二个字符，以此类推。
（3）截取范围：[start，end)。如果end省略，表示从start位置一直截取到数组末尾。
举例：
var arr3 = ["1","2","3","4","5"];
document.write("<br/>" + "截取后的数组arr3：" + arr3.slice(1,3) + "<br/>");//2,3
document.write("<br/>" + "截取后的数组arr3：" + arr3.slice(1) + "<br/>");//2,3,4,5七、添加数组元素
7.1 头插：unshift()
在JavaScript中，使用unshift()方法可以在数组的开头添加一个或者多个新元素，并返回数组的新长度。
注意：该方法会改变数组的长度，并且该方法并没有创建一个新的数组，因为它是在原来数组的基础上进行的改变。
语法：
数组名.unshift(新元素1,新元素2,新元素3,...,新元素n);返回值：
该方法会返回数组的新长度。因为它是在原来数组的基础上添加的，直接改变了原数组的结构，始终都是一个数组。
说明：
它是如何插入的呢？
unshift()方法将把它的参数插入数组的头部，并且将已经存在的元素依次后移一个位置，即移到较高的下标处，以便为新添加的数组元素留出空间。- 该方法的第一个参数将成为数组的第一个元素，即新元素
0（这里指下标），如果还有第二个参数，它将成为数组的第二个元素，即新的元素1（这里指下标），以此类推。
举例：
var arr3 = ["1","2","3","4","5"];
console.log(arr3.unshift("0"));//返回数组的长度，输出6
console.log(arr3);// ["0","1","2","3","4","5"]7.2 尾插：push() 【vt.推动；增加】
在JavaScript中，使用push()方法可以在数组的末尾删除一个或者多个新元素，并返回数组的新长度。无需知道数组的长度，对于一个空数组可以直接使用，来给该数组添加元素。相当于一个先进后出的栈。
语法：
数组名.push(新元素1,新元素2,新元素3,...,新元素n);返回值：
该方法会返回数组的新长度。因为它是在原来数组的基础上添加的，直接改变了原数组的结构，始终都是一个数组。
说明：
它是如何插入的呢？
unshift()方法将把它的参数依次地插入数组的尾部。- 它直接修改原数组，而不是创建一个新的数组。
举例：
var arr3 = ["1","2","3","4","5"];
console.log(arr3.push("6"));//返回数组的长度，输出6
console.log(arr3);// ["1","2","3","4","5","6"]总结：给数组添加元素的方法，均不创建新的数组，都是在原有数组的基础上改变的，而且返回值都是数组的新的长度。
八、删除数组元素
8.1 头删：shift() 【vt.移动；变化】
在JavaScript中，使用shift()方法用来删除数组的第一个元素，并返回第一个元素的值。
区别：
该方法不同于数组的添加元素的方法，此时返回的不是数组的新长度，而是返回所删除的首个元素。
语法：
数组名.shift();//注意：没有参数返回值：
原来数组的第一个元素的值。即删除了数组头部的哪个元素就返回哪个元素。说明：
（1）如果要删除的数组是空的，那么 shift() 方法将不进行任何操作，并且会返回 undefined值。
（2）该方法不创建新的数组，而是直接修改原有的数组。只要记住：始终就一个数组。
举例：
var arr3 = ["0","1","2","3","4","5"];
document.write("<br/>" + "返回数组arr3所删除的元素：" + arr3.shift() + "<br/>");//0
document.write("<br/>" + "头删后的数组arr3：" + arr3 + "<br/>");//2，3，4，58.2 尾删：pop() 【vt.取出；抛出】
在JavaScript中，使用pop()方法用来删除数组的最后一个元素，并返回最后一个元素的值。
区别：
该方法不同于数组的添加元素的方法，此时返回的不是数组的新长度，而是返回所删除的最后一个元素。
语法：
数组名.shift();//注意：同样没有参数返回值：
返回原来数组的最后一个元素。即删除了数组尾部的哪个元素就返回哪个元素。说明：
（1）pop()方法会删除原数组的最后一个元素，还会将原数组的长度减 1，并且返回它所删除元素的值。
（2）如果原数组为空，则 pop()不改变原数组，并返回undefined值。
（2）该方法不创建新的数组，而是直接修改原有的数组。只要记住：始终就一个数组。
举例：
//请注意，这也会改变数组的长度：
var arr3 = ["0","1","2","3","4","5"];
document.write("<br/>" + "返回数组arr3的所删除的元素：" + arr3.pop() + "<br/>");//5
document.write("<br/>" + "尾删后的数组arr3：" + arr3 + "<br/>");//0，1，2，3，4总结：删除数组元素的方法，也不创建新的数组，都是在原有数组的基础上进行的改变，而且返回值都是原数组所删除的元素。
九、数组排序：sort()
在JavaScript中，使用sort()方法对数组元素进行排序（降序或者升序）。
语法：
数组名.sort(函数名)**说明：
（1）sort()方法中的参数规定了排序的顺序，而且必须是函数。**
（2）如果该方法未指定参数，则会按照字母顺序对数组中元素的进行排序。其本质上是根据字符的编码顺序，即ASCII码值进行排序的。
返回值：对排序后的数组的引用。
注意：数组在原数组上进行排序，不生成副本。
使用说明：
（1）如果想让数组按照数值大小进行排序，就需要提供比较函数。
（2）该比较函数需要比较两个值的大小，也就是说该函数要提供两个参数，然后返回一个用于说明这两个值的相对顺序的数字。
比较函数的说明：
比较函数应该具有两个参数 a 和 b，其返回值如下：
- 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
- 若 a 等于 b，则返回 0。
- 若 a 大于 b，则返回一个大于 0 的值。
举例1：无参数的sort()方法
var arr1 = ["i","l","o","v","e","y","o","u"];
arr1.sort();
document.write("<br/>" + "排序后的数组为：" + arr1 + "<br/>");//e,i,l,o,o,u,v,yvar arr1 = ["i","l","o","v","e","y","o","u"];
console.log(arr1.sort());//["e", "i", "l", "o", "o", "u", "v", "y"]
document.write(arr1.sort());//e,i,l,o,o,u,v,y举例1：如果要按照数值的大小对数字进行排序，就必须使用一个排序函数：
//定义一个升序函数
function up(a,b){
return a - b;
}
//定义一个降序函数
function down(a,b){
return b - a;
}
//定义数组
var arr4 = ["8","-5","60","23","99"];
document.write("<br/>" + "排序前的数组arr4：" + arr4 + "<br/>");//8,-5,60,23,99
arr4.sort(up);
document.write("<br/>" + "数组arr4升序排列：" + arr4.join("、") + "<br/>");//-5、8、23、60、99
arr4.sort(down);
document.write("<br/>" + "数组arr4降序排列：" + arr4.join("、") + "<br/>");//99、60、23、8、-5九、反转数组：reverse()
在JavaScript中，使用reverse()方法可以实现颠倒数组中元素的顺序。
语法：
数组名.reverse()//注意：该方法没有参数说明：该方法会改变原来的数组，而不会创建新的数组。
返回值：对反转后的数组的引用。
举例：
var arr5 = ["1","2","3","4","5"];
document.write("<br/>" + "颠倒前的数组arr5：" + arr5 + "<br/>");
arr5.reverse();
console.log(arr5.reverse());//["5", "4", "3", "2", "1"]十、将数组元素连接成字符串：join()
在JavaScript中，使用join()方法可以将数组中的所有元素连接成一个字符串。相当于把数组中的所有元素放入到一个字符串中。
元素是通过指定的分隔符进行分隔的。
语法：
数组名.join("连接符");//可选参数，用于指定连接元素之间的符号参数说明：指定要使用的连接符（分隔符）。如果省略该参数，即arr.join()，则默认使用逗号作为连接符（分隔符）。
返回值：返回一个将数组元素连接后的字符串。
问：数组元素是如何连接为字符串的？
答：先把数组中的每一个元素转换为字符串，然后把这些字符串连接起来，之后在两个元素之间插入连接符（分隔符）而生成的最终的字符串。
举例：
var arr6 = ["5","2","0","1","3","1","4"];
document.write("<br/>" + "连接前的数组arr6：" + arr6 + "<br/>");//5,2,0,1,3,1,4
document.write("<br/>" + "默认连接后的数组arr6：" + arr6.join() + "<br/>");//5,2,0,1,3,1,4
document.write("<br/>" + "使用“-”连接后的数组arr6：" + arr6.join("-") + "<br/>");//5-2-0-1-3-1-4练习1：数组与字符串之间的转换操作
要求：给你一个字符串“我热爱前端”，最终你要得到这个字符串“<我><热><爱><前>端>”
var str1 = "我热爱前端";
document.write("<br/>" + "初始字符串：" + str1 + "<br/>");//我热爱前端
//将字符串中的每个字符分割出来，分割后系统会自动将这个字符串转换成一个数组
var arr1 = str1.split("");
//将数组中的每个元素之间用“><”连接成字符串
var str2 = arr1.join("><");
document.write("<br/>" + "分割字符串后得到的数组：" + arr1 + "<br/>");////我,热,爱,前,端
document.write("<br/>" + "数组元素之间用\“<>\”符号连接后得到的字符串：" + str2 + "<br/>");////我><热><爱><前><端
//分割字符串为一个新的数组
var arr2 = str2.split("");
document.write("<br/>" + "分割上面的字符串为一个新的数组：" + arr2 + "<br/>");//我,>,<,热,>,<,爱,>,<,前,>,<,端
//数组头插
arr2.unshift("<");
//数组尾插
arr2.push(">");
document.write("<br/>" + "对数组进行头插\“<\”和尾插\“>\”操作：" + arr2 + "<br/>");//<,我,>,<,热,>,<,爱,>,<,前,>,<,端,>练习2：将字符串中的所有字符颠倒顺序
要求：给你一个任意的字符串，然后实现把里面字符串的顺序颠倒的功能。
//定义一个反转字符串中字符的方法
function reverseStr(str){
var arr1 = str.split("");
var result = arr1.reverse().join("");
return result;
}
document.write("<br/>" + reverseStr("monkeyfly") + "<br/>");//ylfyeknom练习3：计算长方体（rectangular solid）的面积与体积，返回一个数组
要求：设计一个函数，该函数可以计算一个长方体的底部面积和体积，并且函数最终将面积和体积的计算结果返回。
function rect(x,y,z){
var btmArea = x*y;
var Volumn = x*y*z;
//一般情况下，函数只可以返回一个值或变量。
var arr1 = [btmArea,Volumn];
return arr1;
}
var arr2 = rect(2,3,4);
document.write("<br/>" + "该长方体的面积为：" + arr2[0] + "<br/>");//6
document.write("<br/>" + "该长方体的体积为：" + arr2[1] + "<br/>");//24
扫一扫
2209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
