JavaScript数组学习+小案例

灰太狼 2023-01-14 12:59 121阅读 0赞

官方解释：数组是类似于容器的值，可以容纳其他值。数组内的值称为元素。  
数组的对象作用：使用单独的变量名来存储一系列的值。

### 1.创建数组 ###

创建空数组

//方法一：
    var arr1 = [];
    //方法二：
    var arr2 = new Array();

创建数组并赋值

//方法一：
    var arr3 = ["奔驰","宝马","奥迪"];
    //方法二：
    var arr4 = new Array("西游记","红楼梦","三国演义","水浒传");

也可以先创建在赋值，数组赋值 arr\[index\],index索引，从第0位开始，0就是数组的第一位

arr1[0] = "a";
    console.log(arr1); //["a"]

### 2.数组的属性 ###

javascript数组的属性有三个，常用的就两个，所以这里就只介绍两个。

1.length属性，是数组中最常用的属性，它会返回数组里有多少个元素。

console.log(arr4.length);//4

访问数组

console.log(arr3[1]);//宝马

2.prototype 属性使您有能力向对象添加属性和方法。  
这属性在小案例上演示

### 3.遍历数组 ###

方法一：

for(var i= 0;i <= arr3.length; i++){ 
    	console.log(arr3[i]);
    }

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]  
方法二（for in循环）：

for(j in arr4){ 
    	console.log(arr4[j]);
    }

方法三（forEach方法）：

arr4.forEach(function(e){ 
    	console.log(e);
    })

方法二和方法三的运行结果：  
![在这里插入图片描述][20210420192035567.JPG_pic_center]

### 4.数组的方法 ###

###### 4.1 isArray() ######

isArray() 方法判断一个对象是否为数组。如果是数组返回true，不是数组则返回false

var aa = "aa";//创建一个字符串
    
    console.log(Array.isArray(arr1));//true
    console.log(Array.isArray(aa));//false

###### 4.2 toString() ######

toString() 方法把数组转换为字符串

var str = arr3.toString();
    console.log(str);//奔驰,宝马,奥迪
    console.log(typeof(str));//string

###### 4.3 reverse() ######

reverse() 方法把原数组反转（倒序）

arr3.reverse();
    console.log(arr3);//["奥迪", "宝马", "奔驰"]

##### 4.4 delete() #####

delete() 方法删除数组，会在数组留下未定义的空洞 （只删除数值，不会删除位置，原来的值变为undefined，数组长度不变）

delete arr1[0];
    console.log(arr1[0]);//undefined
    console.log(arr1.length);//1

###### 4.5 join() ######

join() 方法将所有数组元素结合为一个字符串，元素是通过指定的分隔符进行分隔的。该方法可以传入参数，如果不传入参数，则使用逗号作为分隔符。

console.log(arr3.join());//奔驰,宝马,奥迪
    console.log(arr4.join("-"));//西游记-红楼梦-三国演义-水浒传

###### 4.6 unshift() ######

unshift()方法向数组开头添加新元素且返回新数组的长度

var a = arr3.unshift("大众");
     console.log(arr3);["大众", "奔驰", "宝马", "奥迪"]
     console.log(a);//4

###### 4.7 shift() ######

shift() 方法会删除首个数组元素且返回被删掉的值

var b = arr3.shift();
    console.log(arr3);//["宝马", "奥迪"]
    console.log(b);//奔驰

###### 4.8 push() ######

push() 方法在数组结尾处添加一个新的元素且返回新数组的长度

var c = arr3.push("大众");
    console.log(c);//4
    console.log(arr3);//["奔驰", "宝马", "奥迪", "大众"]

###### 4.9 pop() ######

pop() 方法从数组中删除最后一个元素且返回被删掉的值

var d = arr3.pop();
    console.log(d);//奥迪
    console.log(arr3);//["奔驰", "宝马"]

###### 4.10 splice() ######

splice(index,num,insertValue)  
index：从第几位开始  
num：删除几位  
insertValue：要添加的值

arr3.splice(2,1,"大众");
    console.log(arr3);//["奔驰", "宝马", "大众"]

###### 4.11 concat() ######

concat() 方法连接数组来创建一个新数组

var conarr = arr3.concat(arr4);
    console.log(conarr);//["奔驰", "宝马", "奥迪", "西游记", "红楼梦", "三国演义", "水浒传"]
    
    //甚至可以把值合并
    var valarr = arr1.concat(["b","c"]);
    console.log(valarr);//["a", "b", "c"]

###### 4.12 slice() ######

slice() 方法用数组的某个片段切出新数组。它不会删除原来的数组

var slarr = arr4.slice(1);//放一个参数表示从第几位开始截取
    console.log(arr4);//["西游记", "红楼梦", "三国演义", "水浒传"]
    console.log(slarr);//["红楼梦", "三国演义", "水浒传"]
    
    var myarr = arr4.slice(1,3);//放两个参数这表示从第1位索引开始到第3位索引的前一个，（从索引为1取到索引为2）
    console.log(myarr);//["红楼梦", "三国演义"]

###### 4.13 sort() ######

sort() 方法以字母顺序对数组进行排序

var arr6 = ["Vans","Converse","Supreme","Nike","Champion","Puma"];
    arr6.sort();
    console.log(arr6); //["Champion", "Converse", "Nike", "Puma", "Supreme", "Vans"]

sort()方法只能一位数，如：35:100 它会先比较第一位数 3:1，此时3比1大 所以它会把100排在35前面

var arr7 = [82,26,6,94,110];
    arr7.sort();
    console.log(arr7);//[110, 26, 6, 82, 94]

使用数字排序，你必须通过一个函数作为参数来调用。

arr7.sort(function(a,b){ 
    	return a - b;//升序
    });
    console.log(arr7);//[6, 26, 82, 94, 110]
    
    arr7.sort(function(a,b){ 
    	return b - a;//降序
    });
    console.log(arr7);//[110, 94, 82, 26, 6]

###### 4.14 indexOf() ######

indexOf() 方法可返回数组中某个指定的元素位置。如果数组中不存在这个值，就会返回-1

console.log(arr3.indexOf("奥迪"));//2
    console.log(arr3.indexOf("本田"));//-1

### 5.小案例 ###

###### 5.1 数组去重 ######

在数组原型上封装一个数组去重的方法：

数组去重的方法2

###### 5.2拷贝数组 ######

方法一：

function copy(arr){ 
        var res = [];
        for(var i = 0;i<arr.length;i++){ 
            res.push(arr[i]);
        }
        return res;
    }
    var copyarr = copy(arr4);
    console.log(copyarr);//["西游记", "红楼梦", "三国演义", "水浒传"]

方法二：

var cparr =[];
    cparr = arr4.concat();
    console.log(cparr);//["西游记", "红楼梦", "三国演义", "水浒传"]

###### 求和 ######

在数组原型上封装一个求和的方法：

var num = [4,5,6];
    Array.prototype.sum = function(){ 
        let sm = 0;
        for(var i = 0;i<this.length;i++){ 
            sm +=this[i];
        }
        return sm;
    }
    var s = num.sum();
    console.log(s);//15

###### 求平均数 ######

在数组原型上封装一个求平均数的方法：

var num = [4,5,6];
    Array.prototype.average = function(){ 
        let sum = 0,
            avg;
        for(var i = 0;i<this.length;i++){ 
            sum += this[i];
        }
        avg = sum/this.length;
        return avg;
    }
    var avg = num.average();
    console.log(avg);//5

###### 求最大值 ######

在数组原型上封装一个求最大值的方法：

###### 求最小值 ######

在数组原型上封装一个求最小值的方法：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/b95e30cd40ea45beb56d73ffbcaf74b4.png
[20210420192035567.JPG_pic_center]: /images/20221022/d78907796aa747e79b0c43b2ed3848b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/174ec34f181f4d379866ea424ec78879.png