JavaScript——数组

SouthernWind
59 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情

JavaScript 数组

今天来说一下什么js数组方面

什么是数组

数组是使用单独的变量名来存储一系列的值。 1.数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。 2.数组中的每个元素都有自己的的ID(index 下标)，以便它可以很容易地被访问到。

1.数组的创建

定义了一个名为myCars的数组对象并初始化,有如下三种方式：

1.常规方式

var myCars = new Array(3); //创建指定长度的数组(注意不是上限，是长度)
myCars[0] = "Saab";
myCars[1] = "Volvo";
myCars[2] = "BMW";
myCars[3] = "BYD";
myCars[4] = "BYD";
myCars[6] = "BYD";
console.log(myCars);//{"0":"Saab","1":"Volvo","2":"BMW","3":"BYD","4":"BYD","6":"BYD","length":7}，从这个打印结果可以推断出，JavaScript中不会对数组进行默认初始化，并且数组长度也是可变的，这两点与Java不同。
console.log(myCars[5]); //undefined
​
var myCars1 = new Array(); //创建未指定长度的数组
myCars1[0] = "Saab";
myCars1[1] = "Volvo";
myCars1[2] = "BMW";
console.log(myCars1); //{"0":"Saab","1":"Volvo","2":"BMW","length":3}

2.简洁方式

var myCars2 = new Array("Saab", "Volvo", "BMW"); //创建一个数组并初始化
console.log(myCars2); //{"0":"Saab","1":"Volvo","2":"BMW","length":3}

3.字面方式

var myCars3 = ["Saab", "Volvo", "BMW"]; //创建一个数组并初始化
console.log(myCars3); //{"0":"Saab","1":"Volvo","2":"BMW","length":3}

2.数组的元素的访问

通过指定数组名以及索引号码，你可以访问某个特定的元素：

var name = myCars[0]; //访问myCars数组的第一个值 
myCars[0] = "Opel"; //修改了数组myCars的第一个元素

3.获取数组的长度

length 属性

var array = [23, 12, 5, 19, 3]; //创建一个数组并初始化
console.log(array.length); //判断数组中元素的个数  5  

4.数组的遍历

使用for循环实现数组的遍历

var array = [23, 12, 5, 19, 3]; //创建一个数组并初始化
console.log(array.length); //判断数组中元素的个数  5  
​
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

image-20210318154919254.png

5.数组元素的添加

1.添加到末尾：arrayObj.push();

将一个或多个新元素添加到数组结尾，并返回数组新长度。

image-20210318154919254.png

var array = [1, 2, 3, 4, 5];
var len = array.push(12); //添加元素到数组的最后，返回新数组的长度。
console.log(array); //{"0":1,"1":2,"2":3,"3":4,"4":5,"5":12,"length":6}
console.log(len); //6

2.添加到开始：arrayObj.unshift();

将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度。

var array2 = [1, 2, 3, 4, 5];
var len2 = array2.unshift(0); //添加元素到数组的最前面，返回新数组的长度。
console.log(array2); //{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"length":6}
console.log(len2); //6

6.数组元素的删除

1.删除最后一个：arrayObj.pop();

移除最后一个元素并返回该元素值。

var array = [23, 12, 5, 19, 3];
var temp = array.pop(); //移除最后一个元素并返回该元素值
console.log(temp); //3
console.log(array); //23,12,5,19
console.log(array.toString()); //{"0":23,"1":12,"2":5,"3":19,"length":4}

image-20210318160623990.png

2.删除第一个：arrayObj.shift();

移除最前一个元素并返回该元素值，数组中元素自动前移。

var array2 = [23, 12, 5, 19, 3];
var temp2 = array2.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移
console.log(temp2); //23
console.log(array2); //{"0":12,"1":5,"2":19,"3":3,"length":4}
console.log(array2.toString()); //12,5,19,3

image-20210318160725688.png

3.删除指定的1至多个元素：

1.arrayObj.splice(deletePos);

删除从指定位置deletePos开始、一直到数组末尾的元素，以数组形式返回删除的元素。

var array3 = [23, 12, 5, 19, 3];
var temp3 = array3.splice(2); //删除从数组下标2开始、一直到数组末尾的元素，以数组形式返回删除的元素
console.log(temp3); //{"0":5,"1":19,"2":3,"length":3}
console.log(temp3.toString()); //5,19,3
console.log(array3); //{"0":23,"1":12,"length":2}
console.log(array3.toString()); //23,12
2.arrayObj.splice(deletePos,deleteCount);

删除从指定位置deletePos开始的、指定数量deleteCount的元素，以数组形式返回删除的元素。

var array4 = [23, 12, 5, 19, 3];
var temp4 = array4.splice(1, 4); //删除从数组下标1开始往后总共4个元素，以数组形式返回删除的元素
console.log(temp4); //{"0":12,"1":5,"2":19,"3":3,"length":4}
console.log(temp4.toString()); //12,5,19,3
console.log(array4); //{"0":23,"length":1}
console.log(array4.toString()); //23

image-20210318160919841.png

3.arrayObj.splice(deletePos, deleteCount, insert);

删除从指定位置deletePos开始的、指定数量deleteCount的元素，以数组形式返回删除的元素。

然后将新元素从指定位置deletePos处添加到数组中。

var array5 = [23, 12, 5, 19, 3];
var temp5 = array5.splice(1, 2, 28); //删除从数组下标1开始往后总共2个元素，以数组形式返回删除的元素。然后将新元素28从指定位置1处添加到数组中。
console.log(temp5); //{"0":12,"1":5,"length":2}
console.log(temp5.toString()); //12,5
console.log(array5); //{"0":23,"1":28,"2":19,"3":3,"length":4}
console.log(array5.toString()); //23,28,19,3

7.数组元素的截取：arrayObj.slice(start, [end]);

以数组的形式返回数组的一部分（即获取子数组），注意不包括 end 对应的元素，如果省略 end 将复制start 之后的所有元素 。

var array = [23, 12, 5, 19, 3];
var temp = array.slice(1, 3); //以数组的形式返回数组的下标为1和2(3-1)这两个元素组成的数组。
console.log(temp); //{"0":12,"1":5,"length":2}-->这是复制得到的新数组。
console.log(temp.toString()); //12,5
console.log(array); //{"0":23,"1":12,"2":5,"3":19,"4":3,"length":5}-->这是原数组，保持不变。
console.log(array.toString()); //23,12,5,19,3

image-20210318161006350.png

8.数组元素的合并：arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);

将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组。

var aArray = [1, 2, 3];
​
var bArray = aArray.concat(4, 5); //使用concat，在数组aArray后拼接数字4、5。
console.log(aArray); //{"0":1,"1":2,"2":3,"length":3}
console.log(aArray.toString()); //1,2,3
console.log(bArray); //{"0":1,"1":2,"2":3,"3":4,"4":5,"length":5}
console.log(bArray.toString()); //1,2,3,4,5
​
var cArray = aArray.concat(bArray, 6, '李雷'); //使用concat，在数组aArray后拼接数组bArray、数字6、字符串“李雷”，将拼接后的结果赋值给数组cArray。
console.log(cArray); //{"0":1,"1":2,"2":3,"3":1,"4":2,"5":3,"6":4,"7":5,"8":6,"9":"李雷","length":10}
console.log(cArray.toString()); //1,2,3,1,2,3,4,5,6,李雷

9.数组元素的拷贝：arrayObj.concat();

返回数组的拷贝数组，注意是一个新的数组，不是指向。

var aArray = [10, 11, 13, 14]; //创建一个数组并初始化
var bArray = aArray.concat() //返回数组的拷贝数组
console.log(aArray); //{"0":10,"1":11,"2":13,"3":14,"length":4}
console.log(aArray.toString()); //10,11,13,14
console.log(bArray); //{"0":10,"1":11,"2":13,"3":14,"length":4}
console.log(bArray.toString()); //10,11,13,14

image-20210317171655030.png

10.数组的反转：arrayObj.reverse();

反转元素（最前的排到最后、最后的排到最前），返回数组地址（即返回的还是原来数组，只不过里面的元素位置发生了反转）。 注意这个方法会改变原来的数组，而不会创建新的数组。

var array = [10, 11, 13, 14]; //创建一个数组并初始化
var a = array.reverse(); //反转数组元素。返回的还是原来数组。
console.log(array); //{"0":14,"1":13,"2":11,"3":10,"length":4}
console.log(array.toString()); //14,13,11,10
console.log(a); //{"0":14,"1":13,"2":11,"3":10,"length":4}
console.log(a.toString()); //14,13,11,10

image-20210317171941307.png

11.数组的排序：arrayObj.sort();

对数组元素排序，返回数组地址（即返回的还是原来数组，只不过里面的元素位置发生了变化）。

var array = [10, 11, 13, 14, 100, 21];
// console.log(array); //{"0":10,"1":11,"2":13,"3":14,"4":100,"5":21,"length":6}
// console.log(array.toString()); //10,11,13,14,100,21
array.sort(); //对数组元素进行默认排序
console.log(array); //{"0":10,"1":100,"2":11,"3":13,"4":14,"5":21,"length":6}
console.log(array.toString()); //10,100,11,13,14,21

image-20210317171832888.png

sort()默认的排列方式是按照字符的unicode码进行排列的（ 以字母顺序或数字的字符串顺序），在排列数值的时候会出现问题，因此需要依赖一个比值函数function(a,b){return a-b}。

var array2 = [10, 11, 13, 14, 100, 21];
// console.log(array2); //{"0":10,"1":11,"2":13,"3":14,"4":100,"5":21,"length":6}
// console.log(array2.toString()); //10,11,13,14,100,21
​
/* 对数组元素进行指定规则的排序_按从小到大的顺序 */
array2.sort(function(a, b) {
    return a - b;
})
console.log(array2); //{"0":10,"1":11,"2":13,"3":14,"4":21,"5":100,"length":6}
console.log(array2.toString()); //10,11,13,14,21,100

image-20210317172127984.png

编写代码实现数组的排序

var array3 = [10, 2, 16, 30, 8];
// console.log(array3); //{"0":2,"1":8,"2":10,"3":16,"4":30,"length":5}
// console.log(array3.toString()); //10,2,16,30,8
​
/* 冒泡排序法 */
for (var i = 0; i < array3.length - 1; i++) { //i用于控制总共有几个数要与其后面的数进行对比，显然总共有length-1个数要与其后面的数进行对比。这里写成for (var i = 1; i < array3.length; i++) {亦可，当然这样之后，下面i出现的地方也要跟着改。
    for (var j = 0; j < array3.length - i - 1; j++) { //j用于控制当前数的后面要与之对比的数的个数。针对上面的改变，此处对应要改为for (var j = 0; j < array3.length - i; j++) {
        if (array3[j] > array3[j + 1]) { //当前数大于其后面的那个数
            /* 将当前数与其后面的那个数对调位置 */
            var temp = array3[j]; //备份当前数
            array3[j] = array3[j + 1]; //后面的那个数前移
            array3[j + 1] = temp; //当前数后移
        }
    }
}
console.log(array3); //{"0":2,"1":8,"2":10,"3":16,"4":30,"length":5}
console.log(array3.toString()); //2,8,10,16,30

12.数组与字符串类型的相互转换

1.数组转换为字符串

1.arrayObj.toString(); --->返回连接后的字符串，由逗号(,)连接。 2.arrayObj.join(bystr); -->返回连接后字符串，bystr作为连接数组中元素的分隔符。

var arr1 = [1, 2, 3, 4]; //创建一个数组并初始化
console.log(arr1.toString()); //1,2,3,4
console.log(arr1.join("-")); //1-2-3-4

2.字符串转换为数组

1.str.split(bystr); -->将字符串按bystr字符切割之后以数组形式返回。

var str = "a,b,c,d,e"; // 字符串
var aArray = str.split(","); // 用逗号分隔
var bArray = str.split(""); // 用空分隔
var cArray = str.split(" "); // 用空格分隔
var dArray = str.split("|"); // 用竖线分隔
console.log(aArray); //{"0":"a","1":"b","2":"c","3":"d","4":"e","length":5}
console.log(bArray);//{"0":"a","1":",","2":"b","3":",","4":"c","5":",","6":"d","7":",","8":"e","length":9}
console.log(cArray); //{"0":"a,b,c,d,e","length":1}
console.log(dArray); //{"0":"a,b,c,d,e","length":1}
var str2 = "Hello";
var eArray = str2.split(""); // 用空分隔
console.log(eArray); //{"0":"H","1":"e","2":"l","3":"l","4":"o","length":5}
avatar
文章
阅读
粉丝