数组

基础概念

背景

  • 在生活中，一般使用仓库来保存多个数据(比如快递).仓库内部会有一个编号对应每个数据，可以通过这个编号来快速找到想要的快递。
    JavaScript数组 - 图1
    JavaScript数组 - 图2

  • 程序中的仓库:使用数组来处理.比如所有学生的成绩保存

数组概念

  • 概念：数组，即程序数据的”仓库”,可以用来保存多个数据。
  • 官方定义：数组是一个有序数据的集合，数组的每个数据都有一个对应的编号(下标)，用来快速检索。
  • 比如保存多个学生成绩

下标（数组中每个数据的编号）

  • 概念：下标是一个数字，用于表示该数据在数组中的 位置。可以通过下标来快速找到想要的数据。
  • 原理：数组中的第一个数据的下标为0,第二个数据的下标为1，依次递增。最后一个数据的下标为数组中的数据个数-1.即数组.length-1

基本使用

定义数组

  1. 空数组
  2. 1. 数组字面量: []
  3. var 变量名 = [];// 定义了一个空的数组并把数组保存到一个变量中
  4. 2. 新的数组对象
  5. var 变量名 = new Array();//定义一个新的数组对象并保存到变量中
  7. 带有默认数据的数组
  8. 1. 字面量：数据之间以逗号分割
  9. var 变量名 =[数据1,数据2,数据3,...,数据n];
  10. 2. 数组对象
  11. var 变量名 = new Array(数据1,数据2,数据3,...,数据n);

数组的基本使用

  1. var nums =[59,98,61,78,45];
  • 通过下标获取数组中的指定一个数据
  1. 数组变量名[下标];
  2. 例如：
  3. nums[2] // 得到的是61
  • 通过下标修改数组中的指定一个数据
  1. 数组变量名[下标]= 新数据
  2. 例如： 
  3. nums[2]=70;//将61改为70
  • 添加数据到数组中
  1. 数组变量名[新的下标] =数据;
  2. //给数组末尾添加数据,更灵活点
  3. 数组变量名[数组变量名.length] =数据;
  4. 例如： 
  5. nums[5]=80; // nums : 59,98,61,78,45,80
  6. nums[nums.length] =80;//效果跟上面是一致的。
  • 删除数组中的数据（删除最后一个）
  1. 数组变量名.length--;
  • 数组中 的数据个数(即数组的长度)
  1. 数组变量名.length;
  2. 例如：
  3. document.write(nums.length);// [59,98,61,78,45].length  5
  • 获取数组中的所有数据(数组遍历)
  1. for(var i=0;i<数组变量名.length;i++){
  2.   nums[i] 
  3. }
  5. //例子： 
  6. for(var i=0;i<nums.length;i++){
  7.     document.write(nums[i]+"<br>");
  8. }

练习

  1. 练习：
  2. 完成快递仓库的数据管理
  3.         1. 在仓库中追加多个快递:顺丰、圆通、韵达、韵达、百世、滴答、顺丰、顺丰
  4.         2. 输出所有的快递
  5.         3. 删除最后一个快递并输出该快递
  6.         4. 仓库中有几个快递
  7.         5. 扩展：倒序输出快递
  8.         6. 扩展：仓库中有几个顺丰快递，几个韵达快递

常规应用

随机数据

  1. var names = ["周星星", "达叔", "李云龙", "栋东", "渣渣辉", "墟锟"];
  2. //随机下标 (0-5)
  3. var index = parseInt(Math.random() * names.length);
  4. document.write(names[index]);

最大值最小值

  1. //数组中的最大值
  2. var arr= [2,30,1,9,5,7];
  3. var max =arr[0];//假设第一个就是最大值
  4. //思路：依次和 数组中的 每个数据进行对比，如果对比的数组数据比max高，把更高的数据赋给max
  5. for(var i=0;i<arr.length;i++){
  6.    if(max < arr[i]){
  7.        //重新赋给max
  8.        max = arr[i];
  9.    }
  10. }
  11. document.write(max);//30

倒序排列

  1. // 原数组交换
  2. for(var i=0;i<arr.length/2;i++){
  3.    //当下标为i的数据和下标为arr.length-1-i 进行交换
  4.     // a: arr[i]   b:arr[arr.length-i-1]
  5.    var temp =arr[i];
  6.    arr[i]  =arr[arr.length-i-1];
  7.    arr[arr.length-i-1] =temp;
  8. }
  9. document.write(arr);
  11. //2 新数组方式
  12. var arr= [2,30,1,9,5,7];//  => [7,5,9,1,30,2]
  13. var newArr =[];
  14. for(var i=arr.length-1;i>=0;i--){
  15.     //将arr[i]追加到newArr中
  16.     newArr[newArr.length] = arr[i];
  17. }
  18. document.write(newArr);

指定位置插入和删除

  1. //删除
  2. var arr = [1,2,3,4,5,6];//=>[1,2,4,5,6];
  3.  var index = 2;//待删除的下标
  4. for(var i =index;i<arr.length-1;i++){
  5.     arr[i]=arr[i+1];
  6. }
  7. arr.length--;
  1. var arr = [1,2,4,5,6];
  2. var index = 0;//插入下标
  3. var data = 3;//插入的数据
  4. arr.length++;//添加一个位置
  5. for(var i=arr.length-1;i>=index;i--){
  6.    arr[i] = arr[i-1];
  7. }
  8. //指定位置设置数据
  9. arr[index]=data;
  10. document.write(arr);

合并数组

去重

练习

  1. 1.完成数组的指定位置插入。比如[1,2,4,5]中下标为2处插入一个3，结果为[1,2,3,4,5]; 要插入的数由用户输入提供
  2. 2.完成数组的合并。比如[1,2,3,4]和[5,6,7,8]; 合并后形成一个新数组[1,2,3,4,5,6,7,8]
  3. 3.登录验证：定义两个数组分别保存用户名和密码，保持长度一致，用于存放一批用户名和密码。然后验证用户输入的用户名和密码是否正确。（用户名和密码在数组中的位置上是一一对应的)
  4. 4.第三题扩展：完成3次登录判断验证。用户有3次输入机会，用户名输入正确后剩余用户名次数作废的同时密码也有3次验证。3次用户名或密码都没输对，则程序终止。

常用api

API

  • 用户编程接口(application programming interface): 用户能够直接使用的代码。一个api带有一个功能。比如parseInt()就是一个api，功能是进行取整，再比如Math.random()、Number()、toString()、toFixed()、prompt()、alert()
  • 其实每个api就是一个函数
  • api是程序内置的，用户可以直接使用，无需知道内部如何实现。
  • 以下api都是数组相关部分api

常用api

  • push
  • pop
  • slice
  • splice
  • unshift
  • concat
  • join
  • reverse
  • indexOf
  • lastIndexOf

push：数组末尾添加数据

  1. 数组变量名.push(数据1,数据2,数据n);
  2. 例子:
  3. var arr = [1,2,3,4,5];
  4. arr.push(6);
  5. arr.push(7,8,9);
  6. document.write(arr);//[1,2,3,4,5,6,7,8,9];

pop:删除数组末尾最后一个数据，返回被删除的数据

  1. 数组变量名.pop();
  2. 例子:
  3. var arr = [1,2,3,4,5];
  4. //arr.pop();//删除最后一个数据
  5. var data = arr.pop();//删除最后一个数据,data变量保存的是被删除的数据
  6. document.write(arr);//[1,2,3,4,5];

unshift:数组开头添加一个多个数据

  1. 数组变量名.unshift(添加的数据);
  2. 例子：
  3. var arr = [1,2,3,4,5];
  4. arr.unshift(0);//开头添加0 
  5. document.write(arr);//[0,1,2,3,4,5];

splice：数组指定位置进行插入或删除数据

  1. 数组变量名.splice(插入或删除的开始下标,要删除的数量,插入的数据1,插入的数据2,插入的数据3,插入的数据n);
  2. 例子： 
  3. var arr = [1,2,3,4,5];
  4. //只删除3 和4
  5. //arr.splice(2,2);
  6. //document.write(arr);//[1,2,5];
  7. //删除2 和5 
  8. //arr.splice(1,1);
  9. //arr.splice(3,1);
  10. //document.write(arr);//[1,2,5];
  11. //在3之前插入 6 和7
  12. //arr.splice(2,0,6,7);
  13. //document.write(arr);//[1,2,6,7,3,4,5];
  14. //删除45，并追加67 
  15. arr.splice(3,2,6,7);//[1,2,3,6,7]
  • 如果只有一个参数，那么会从开始下标开始，删除数组的后续所有元素

join:能够将数组里的数据拼接转为字符串

  1. 数组变量名.join(数据的分隔符号)
  2. 例子：
  3. var arr = [1,2,3,4,5];
  4. arr.join('-');
  5. document.write(arr);
  • join中默认的分割符号是,。即数据之间以逗号分割。
  • join生成的字符串需要定义一个变量来接收，接收后进行使用

reverse:数组倒序存放

  1. 数组变量名.reverse();
  2. var arr = [1,2,3,4,5];
  3. arr.reverse();
  4. document.write(arr);
  • reverse是直接对原数组进行操作

concat ：和一个或多个数组进行合并，得到一个新数组

  1. 数组变量名.concat(数组1，数组2，数组n)；
  2. 例子：
  3. var arr1 = [1,2,3,4,5];
  4. var arr2= [6,7,8,9,10];
  5. var arr3= [11,12,13,14,15];
  6. //三个数组进行合并
  7. var newArr = arr1.concat(arr2,arr3);
  8. document.write(newArr);
  • 对原数组没有影响，得到的是新数组

slice：根据下标获取数组中的部分数据

  1. 数组变量名.slice(子数组的开始下标，子数组的结束下标);
  2. 例子：
  3. var arr1 = [1,2,3,4,5];
  4. //获取[2,3,4];
  5. var newArr =arr1.slice(1,4);
  6. document.write(newArr);
  7. //其他使用方式
  8. var arr=["顺丰","韵达","圆通","顺丰","韵达","京东","京东","韵达","顺丰","京东"];
  9. var newArr = arr.slice(arr.length-4,arr.length);
  10. var newArr = arr.slice(arr.length-4);
  11. var newArr = arr.slice(-4);
  12. document.write(newArr);//都是最后四个
  • slice获得的是一个新数组，所以一般需要变量接收后进行使用
  • slice:新数组是不包含结束下标对应数据
  • 如果直接以数组末尾结束，那么结束下标可以省略不写
  • 支持开始下标为负数，从倒数第几个开始

indexOf:获取某数据在数组中的第一次出现的下标，没有的话返回-1

  1. var index = 数组变量名.indexOf(数据);
  2. 例子：
  3. var arr = [1,2,3,4,5,2];
  4. var index = arr.indexOf(3);// 2
  5. var index = arr.indexOf(2);// 1
  6. var index = arr.indexOf(6);// -1

sort : 对数组进行排序

  1. 数组变量名.sort();//按照自然顺序进行排序
  2. 自定义排序： 
  3. 数组变量名.sort(排序函数);
  4. 例子：
  5. 自然排序
  6. var arr1 =[1,2,3,'c',7,4,'b',9,'a',8,6,5,'z'];
  7.         //默认排序
  8.  arr1.sort();
  9. document.write(arr1);
  10. 自定义排序
  11. var arr2 = [123,432,111,65,4,234,996,332];
  12. function demo(num1,num2){
  13.             //表示数组中相邻的两个数据，根据return的结果来进行排序。
  14.             //如果return的结果大于0，那么num1就排在num2前面
  15.             //如果return的结果小于0，那么num1就排在num2后面
  16.             //如果return的结果==0，那么num1num2会挨在一起
  17.             return  num2 -num1;
  18. }
  19. arr2.sort(demo);
  20. document.write(arr2);// 996,432,332,234,123,111,65,4
  22. 随机打乱顺序
  23. arr.sort(function(num1,num2){return Math.random()-0.5})
  • 第一种排序-不添加参数：按照自然顺序来处理。自然顺序是按照0-9、a-z来进行排序
  • 第二种需要我们提供一个排序函数，该函数就决定了数组里的两个相邻数据如何进行排序

lastIndexOf:获取某数据在数组中的最后一次出现的下标，没有的话返回-1

  1. var index = 数组变量名.lastIndexOf(数据);
  2. 例子：
  3. var arr = [1,2,3,4,5,2];
  4. var index = arr.lastIndexOf(3);// 2
  5. var index = arr.lastIndexOf(2);// 5
  6. var index = arr.lastIndexOf(6);// -1
  1. 练习
  2. 1.定义一个成绩数组[45,12,89,92,53,76,89,61]，完成以下题目
  3. 2.数组中追加34、89、90
  4. 3.删除第一个数据
  5. 4.删除最低分，并在同样的位置插入56、67
  6. 5.将数组转为字符串 进行输出，成绩间以”-”分割
  7. 6.获取第一次和最后一次出现89的下标
  8. 7.所有分数+5分
  9. 8.获取所有不及格的分数,并返回到一个新数组中
  10. 9.删除分数为92的分数，并在同一个位置插入67、87、90
  11. 10. 数组倒序存放
  12. 11. 获取除开第一个和最后一个的其他所有成绩

二维数组

概念

  • 指的是一个数组中的 每个数据都是一个一维数组。
  • 一维数组是一个数组中都是具体的数据。比如[1,2,3,4,5]

作用

  • 主要是用于来描述多个复合数据的集合。比如保存多个学生。每个学生又有姓名、年龄、性别等数据

基本操作

  • 定义
  1. var arr = [];
  2. arr.push(['袁东栋',23,"男",59]);
  3. arr.push(['周星星',24,"男",60]);
  4. arr.push(['李云龙',35,"男",12]);
  5. arr.push(['杨名名',24,"男",70]);
  6. arr.push(['二营长',35,"男",20]);
  8. 二维数组本身就是一个普通的数组，只不过当里面的数据都是一维数组之后，我们称该数组为二维数组
  • 获取数据
  1. 数组变量名[下标]
  2. arr[0];// =>['袁东栋',23,"男",59]
  3. arr[0][0] ;// =>['袁东栋',23,"男",59]中的袁东栋
  • 添加数据
  1. arr.push();
  2. arr[arr.length]=新数据;
  4. 例子：
  5. students.push(['詹姆斯',35,'男',80]);
  • 删除数据
  1. arr.length--;
  • 修改数据
  1. arr[0]=新数据;
  2. 例子：
  3. //把['袁东栋',23,"男",59] 改成['张于航',34,'男',95]
  4. students[0] = ['张于航',34,'男',95];
  5. //把周星星改成 9527  
  6. students[1][0]=9527;
  • 长度
  1. 数组变量名.length;
  • 遍历

排序