JavaScript学习手册五：JS数组

04-13 阅读 0评论

第1关：数组的创建、读写和长度

第1关参考代码：

第2关：数组元素的增减

第2关参考代码：

第3关：数组的遍历和多维数组

第3关参考代码：

第4关：数组的常用方法

第4关参考代码：

第5关：数组的应用——内排序

第5关参考代码：

第1关：数组的创建、读写和长度

任务描述

本关任务：掌握创建数组的方法，获取数组的元素和长度。

相关知识

数组的出现就是为了批量处理数据。

数组的创建

创建数组有两种方法，一是使用数组字面量，简单来说就是在[]之中列出数组的所有元素：

var numberArray = [1,2,3,4,5];//数字数组
var stringArray = ["java","script","edu","coder"];//字符串数组
var mixArray = [1,2,"java",true,6.6];//混合数组

如上，各元素之间用,隔开。JavaScript中数组的元素可以是不同的数据类型，如上面的第三个数组。

创建数组的第二种方法是新建一个Array对象的实例，如：

var myArray = new Array();//创建一个初始为空的数组
var lengthMixArray = new Array(6);//创建一个长为6的数组

这种情况下可以设置数组的长度（即数组中元素的个数），也可以不设置。

数组元素的读取和写入

数组元素的读取和写入在形式上相似，都是用赋值符号连接的两个表达式。

读取时，存放读入值的变量在左边，数组元素在右边：

var readArray = [1,3,"js",true,2.22];
var read = readArray[0];//读取第一个元素到变量read中

写入时，数组元素在左边，待写值在右边：

var writeArray = [1,3,"js",true,2.22];
writeArray[0] = 2;//在第一个元素的位置写入2
console.log(writeArray[0]);//原来的1已经被覆盖，输出2

数组长度

数组长度指数组中元素的个数，等于最大索引值加1，数组的length属性即数组的长度。

var arrayLength = [1,"js",true];
console.log(arrayLength.length);//输出3

数组的长度也可以写入，当写入的值小于数组的实际长度时，数组会被删除一部分。大于实际长度时，数组会在尾部添加一些空的区域。

arrayLength.length = 2;
console.log(arrayLength);//输出[1,"js"]

编程要求

本关的编程任务是补全右侧代码片段中begin至end中间的代码，具体要求如下：

已知两个数组array1和array2，参数a是一个整数，先判断a的值与数组array1的长度值相等，如果相等，返回数组array1的最后一个元素，反之，则返回数组array2的最后一个元素；
具体请参见后续测试样例。

测试说明

测试过程：
- 平台将读取用户补全后的ArrayCreate.js；
- 调用其中的mainJs()方法，并输入若干组测试数据作为参数；
- 接着根据测试的输出判断程序是否正确。
  
  以下是测试样例：
  
  测试输入： 7 预期输出： hello
  
  第1关参考代码：
```
var array1 = [1,2,3,"js",4,true,"hello"];
var array2 = [true,true,"java",2.1];
function mainJs(a) {
	//请在此处编写代码
    /*********begin*********/
    var c=array1.length;
 if (a==c)
    return array1[array1.length-1]
else
  return array2[array2.length-1] 
 ;
    /*********end*********/
}
```
  第2关：数组元素的增减
  
  任务描述
  
  本关任务：掌握数组元素增减的方法。
  
  相关知识
  
  数组元素的增删是JavaScript的一个特点，因为其他很多编程语言的数组是不允许增加或者删除元素的。
  
  数组元素的增加
  
  在JavaScript中，为数组增加元素可以在数组头部（索引最小处）或者尾部进行，可以使用数组的方法或者直接使用运算符。
  
  在尾部添加元素
  
  最直观的方法是直接给当前尾部元素的后一个位置赋值。
```
var numberArray = [12,23,34,45];
numberArray[numberArray.length] = 56;
console.log(numberArray);//输出[12,23,34,45,56]
```
  第二种方法是使用push()函数，往数组的末尾添加一个或多个元素，参数是要添加的元素，返回数组长度。
```
//利用push()方法在数组尾部添加元素
var numberArray = [12,23,34,45];
var newLength = numberArray.push(56);
console.log(newLength);//输出5
console.log(numberArray);//输出[12,23,34,45,56]
```
  在头部添加元素
  
  unshift()方法在数组的头部添加元素，并返回数组新的长度，其余元素自动向索引大的方向移动。
```
var sArray = ["ja","va","script"];
var newLength = sArray.unshift("he","llo");
console.log(newLength)//输出5
console.log(sArray);//输出["he","llo","ja","va","script"];
```
  数组元素的删除
  
  删除也能在数组头部（索引值小）或者尾部进行。
  
  在尾部删除元素
  
  上一关介绍过一方法：直接修改数组长度为更小的值。
```
var array = [1,2,true,"hello"];
array.length = 3;//索引最大的元素被删除
console.log(array);//输出[1,2,true]
```
  第二种方法是使用delete运算符。delete运算符后接要删除的元素，但是删除后，会有一个空占位符，所以数据的长度保持不变。如：
```
var dArray = [11,22,33,44,55];
delete dArray[4];//删除索引最大的元素
console.log(dArray);//输出[11,22,33,44]
console.log(dArray.length); //长度为5
```
  第三种方法是使用pop()，一次删除一个，并返回被删除的元素。
```
//利用pop()方法在数组尾部删除元素
var numberArray = [3,4,5,6,7];
var deletedNumber = numberArray.pop();
console.log(deletedNumber);//输出被删除的元素7
console.log(numberArray);//删除后的数组为[3,4,5,6]
```
  在头部删除元素
  
  有unshift()，自然有shift()，shift()的作用是删除数组头部一个元素并返回该元素，然后所有元素往索引值小的方向移动一位。
  
  初学者很容易混淆这两个方法，建议记住shift单词的意思是：删除，去掉。
```
var dArray = [11,22,33,44,55];
console.log(dArray.shift());//输出11，11被从数组中删除
console.log(dArray);//输出[22,33,44,55]
```
  编程要求
  
  本关的编程任务是补全右侧代码片段中begin至end中间的代码，具体要求如下：
  - 将数组testArray的最后a个元素移动到最前面，这a个元素之间的相对位置不变，其余元素之间的相对位置不变；
  - 比如将数组[1,2,3,4,5]最后2个元素移动到最前面，数组变为[4,5,1,2,3]；
  - 返回移动结束后数组在索引b处的元素；
  - 具体请参见后续测试样例。
    
    测试说明
    
    测试过程：
    - 平台将读取用户补全后的ArrayAddDelete.js；
    - 调用其中的mainJs()方法，并输入若干组测试数据作为参数；
    - 接着根据测试的输出判断程序是否正确。
      
      以下是测试样例：
      
      测试输入： 2,0 预期输出： c#
      
      第2关参考代码：
```
var testArray = [12,"java","js","c","c++",24,36,"python","c#","css"];
function mainJs(a,b) {
    a = parseInt(a);
    b = parseInt(b);
    //请在此处编写代码
    /*********begin*********/
for(var i=0;i
```
      第3关：数组的遍历和多维数组
      
      任务描述
      
      本关任务：将一个一维数组转换为二维数组，行优先。
      
      相关知识
      
      数组的遍历
      
      数组的遍历指按顺序访问你数组的每一个元素。有两种方法：
      - 使用for循环
        //依次在浏览器的控制台输出one，two，three，four var stringArray = ["one","two","three","four"]; for(var i=0,sLength=stringArray.length;i max) { max = arr[j]; maxIndex = j; } } //将本次选出的最大元素移动到最终的位置上 temp = arr[aLength-i-1]; arr[aLength-i-1] = arr[maxIndex]; arr[maxIndex] = temp; var max = arr[0]; var maxIndex = 0; } console.log(arr);
        
        这里也有两个大循环，第一个循环控制总的排序趟数，第二个循环求本次选择出的最大元素的索引值，第二个循环结束后将本次的最大值与最终位置上的元素交换。
        
        编程要求
        
        本关的编程任务是补全右侧代码片段中begin至end中间的代码，具体要求如下：
        
        函数mainJs(a)中的变量arr是一个数组，你需要对该数组进行选择排序；
        
        返回选择排序进行过程中，在每一趟交换前，待排序子数组的最大元素的位置组成的数组；
        
        比如对于上面相关知识中的数组[9,5,8,0,2,6]，第一次交换前，最大的元素9的索引是0，第二次交换前，最大元素8的索引是2，第三次交换前最大元素6的索引是0，第四次交换前最大元素5的索引是1，第五次交换前最大元素2的索引是1，第六次交换前最大元素0的索引是0。索引需要返回的数组是[0,2,0,1,1,0]；
        
        具体请参见后续测试样例。
        
        测试说明
        
        测试过程：
        
        平台将读取用户补全后的ArraySort.js；
        
        调用其中的mainJs()方法，并输入若干组测试数据作为参数；
        
        接着根据测试的输出判断程序是否正确。
        
        以下是测试样例：
        
        测试输入： 9,5,8,0,2,6 预期输出： [0,2,0,1,1,0]
        
        第5关参考代码：
        
        function mainJs(a) { var arr = a.split(","); for(var i = 0;i max) { max = arr[j]; maxIndex = j; } } mi[i]=maxIndex; //将本次选出的最大元素移动到最终的位置上 temp = arr[aLength-i-1]; arr[aLength-i-1] = arr[maxIndex]; arr[maxIndex] = temp; var max = arr[0]; var maxIndex = 0; } return mi; /*********end*********/ }
        
        如果你觉得这一关的内容对你有帮助，请你在下面点赞。