数组及操作方法(详解)

数组

数组的概念

数组是一个存放相同数据类型的容器，也是一个变量。

举个简单的例子：

货架上的商品是一堆相同的商品，而货架就是存放商品的数组。

 

创建数组

语法一：

var arr = []; // 创建了一个空数组
var arr = ["张三","李四","王五"]; // 创建了一个数组，里面存了三个姓名

语法二：使用构造函数的形式创建数组

var arr = new Array(); // 创建了一个空数组
var arr = new Array(3); // 创建了一个长度为3的数组
var arr = new Array("张三","李四","王五"); // 创建了一个数组，里面存了三个姓名

使用构造函数的方式创建数组的时候，如果其中只有一个值，如果这个值是整数，表示数组的长度，否则表示这个数组中有一个元素，就是这个值。

var arr = new Array(3)
console.log(arr);//输出结果
//Array(3)
//length: 3
//__proto__: Array(0)

数组中可以存放任意类型的值，但实际情况中，我们习惯将同类型的数据存到一个数组中。

var arr = ['张三',123,true,'underfind']

 

数组的操作

访问数组中的元素：数组[下标]，例：

var arr = ["张三","李四","王五"];
console.log(arr[1]); // 李四

数组中下标是从0开始

查看数组中元素的个数 - 数组的长度：数组.length，例：

var arr = ['张三',"李四","王五","赵六"];
var arr1 = [1,2,3,4,5,6];
console.log(arr.length); // 4

数组中长度length与下标不同，使用时易混淆

数组的长度可以访问，也可以赋值，用来修改数组的长度。例：

var arr = ['张三',"李四","王五","赵六"];
console.log(arr); // (4) ["张三", "李四", "王五", "赵六"]
console.log(arr.length); // 4
arr.length = 6;
console.log(arr); // (6) ["张三", "李四", "王五", "赵六", empty × 2] 后面的表示还有两个空元素
console.log(arr.length); // 6

给数组添加元素：数组[下标] = 值，例：

var arr = ["张三","李四"];
arr[2] = "王五";
console.log(arr); // (3) ["张三", "李四", "王五"]
arr[10] = "赵六";
console.log(arr); // (11) ["张三", "李四", "王五", empty × 7, "赵六"] 中间还有7个空元素

修改数组中元素的值：数组[下标] = 值，例：

var arr = ["张三","李四"];
arr[0] = "王五";
console.log(arr); // (2) ["王五", "李四"]

清空数组：如果下标是已经存在的，那赋值操作就是修改数组元素的值，如果下标是不存在，那赋值操作就给数组添加元素。例：

var arr = [1,2,3];
arr = [];
console.log(arr); // []
// 或者
arr.length = 0;
console.log(arr); // []

数组总结：

1. 数组的第一个元素的下标永远是0；

2. 数组的最后一个元素的下标永远是数组的长度-1

 

遍历数组

如果要将数组中的所有元素都输出，操作如下：

var arr = ["张三","李四","王五","赵六"];
console.log(arr[0]); // 张三
console.log(arr[1]); // 李四
console.log(arr[2]); // 王五
console.log(arr[3]); // 赵六

从上面输出的代码中可以看出，多次输出是在进行重复动作，并且多次重复之间是有规律可循的，所以可以使用循环进行这个重复动作：

使用数组长度遍历：

var arr = ["张三","李四","王五","赵六"];
/*
for(var i=0;i<4;i++){
    console.log(arr[i]);
}
*/
// 条件中的4写死以后，如果数组再添加了新元素，就没办法遍历了，所以将4换成数组的长度。
// 循环中的条件执行5次，也就是我们需要求5次数组的长度，所以将求数组长度的操作放到循环外面可以提高执行效率
var length = arr.length;
for(var i=0;i<length;i++){ 
    console.log(arr[i]);
}

使用for in遍历:

var arr = ["张三","李四","王五","赵六"];
for (var i in arr) {
    console.log(arr[i]); 
}

 

数组练习

利用for循环求数字数组中所有元素的和

var arr = [10,20,30,40,50];
var sum = 0;
for(var i = 0;i < arr.length; i++){
    sum += arr[i];
}
alert(sum);

利用for in 来遍历的数组：注意：for in不会遍历空元素

var arr = [10,20,30,40,50];
var sum = 0;
for (var i in arr) {
    sum += arr[i];
}
alert(sum);

利用for in 求数组中所有元素的和

var arr = [10,20,30,40,50];
var sum = 0;
for (var i in arr) {
    sum += arr[i];
}
alert(sum);

 

二维数组

二维数组就是在数组中嵌套数组，我们最常用的也就是二维数组。

var arr = [
        "Jack",
        "Rose",
        ["张三","李四"],
        ["张小三","李小四"]
    ];
    console.log(arr);//(4) ["Jack", "Rose", Array(2), Array(2)]
    console.log(arr[2]);//(2) ["张三", "李四"]
    console.log(arr[2][1]);//李四

通过下标选择元素。

 

操作数组的方法

splice : 数组任意地方删除或者添加元素

var arr = ['zs','ls','ww','zl','xmg'];
//splice(start, deletedCount)   删除元素
// start 开始         deletedCount 删除个数
arr.splice(0, 2)//无需调用变量接受数据
console.log(arr)//打印删除后的arr

//查看被删除元素
var brr=arr.splice(0,2)//需要定义变量接受数据
console.log(brr)//(2) ["zs", "ls"]    在控制台打印查看删除的元素

//splice(start, deletedCount , item) 删除+添加,  第三个参数是在原来删除的位置上新加几个元素
arr.splice(0, 2,"ni","hao")
console.log(arr)//(5) ["ni", "hao", "ww", "zl", "xmg"]
//特殊 : 
//   splice(start, 0 , item)   就是在某个位置新加元素
arr.splice(1, 0,"新增的")
console.log(arr)//(6) ["zs", "新增的", "ls", "ww", "zl", "xmg"]

数组的增删操作

var arr = ['zs','ls','ww']
arr.push(元素);//从末尾添加元素，并返回新数组的length，()不填数据没有新增
console.log(arr)//(4) ["zs", "ls", "ww", "末尾新增"]

arr.pop();//从数组的后面删除元素，返回删除的那个元素，()不填数据
console.log(arr)//(2) ["zs", "ls"]

arr.unshift(元素);//从数组的前面的添加元素，返回新数组的长度，()不填数据没有新增
console.log(arr)//(4) ["头部新增", "zs", "ls", "ww"]

arr.shift();//从数组的最前面删除元素，返回删除的那个元素，()不填数据
console.log(arr)//(2) ["ls", "ww"]
//总结:
//1. shift 在前面 ,所以处理数组前面的
//2. p+ 在后面,所以是处理后面的
//3. unshift 比 shift 多个un,,所以就是加
//4. 添加的都是返回长度
//5. 删除的都是返回删除的元素
//6. 添加要说明添加什元素,,删除直接删除

数组的排序

var arr = [9,1,6,4,3,8,2,7,5];
arr.sort();
console.log(arr);//(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

var arr = [9,1,16,4,3,28,2,7,5];
arr.sort();//数组的排序，默认按照 字母/首字符 顺序排序 => 1 11 2 3
console.log(arr);//(9) [1, 16, 2, 28, 3, 4, 5, 7, 9]

//sort方法可以传递一个函数作为参数，这个参数用来控制数组如何进行排序
arr.sort(function(a, b){
  return a - b;//a-b就是从小到大，b-a就是从大到小
});

数组的反转

var arr =  ['a','b','c','d'];
arr.reverse();//翻转数组,()不填数据
console.log(arr)//console.log(arr)

数组和字符串的转换

//语法：array.join(分隔符)
//作用：将数组的值拼接成字符串,并且返回字符串
var arr = [1,2,3,4,5];
arr.join();//不传参数，默认按【,】进行拼接
arr.join("");//按【"】进行拼接
arr.join("-");//按【-】进行拼接

//split:将字符串分割成数组（很常用）
//功能和数组的join正好相反。
var str = "张三,李四,王五";
var arr = str.split(",");

数组的拼接

//concat：数组合并，不会影响原来的数组，会返回一个新数组。
var arr=[1,2,3]
var brr=[7,8,9]
var crr = arr.concat(brr)
console.log(crr)//(6) [1, 2, 3, 7, 8, 9]

var arr=[1,2,3]
var crr = arr.concat("ni","hao");//可以在concat()中添加字符串等跟数组合并，不一定必须是数组
console.log(crr)//(5) [1, 2, 3, "ni", "hao"]