数据结构补课 - JS中的数组

数组是一个存储元素的线性集合，元素可以通过索引来任意存取。

 

JS中的数组：

JS中的数组是一种特殊的对象。

JS对象的属性名必须是字符串，所以数组的索引在内部也会被转换为字符串类型。

JS数组中的元素不必是同一种数据类型，这一点也值得注意。

 

创建数组：

//通过[]操作符声明数组
var arr1 = [];
//声明数组的同时为它赋值
var arr2 = [1,2,3,4,5];
//调用Array构造函数声明数组
var arr3 = new Array();
//声明数组的同时为它赋值
var arr4 = new Array(1,2,3,4,5);
//只传入一个正整数，会被认为是数组长度
var arr5 = new Array(10);
console.log(arr5.length);//10

 

判断一个对象是否是数组：

var a1 = 123;
var a2 = [1,2,3];
console.log(Array.isArray(a1));//false
console.log(Array.isArray(a2));//true

 

数组的写入和读取：

JS数组的长度可以任意增长，甚至超出其创建时被指定的长度。

数组的length属性，可以反映当前数组中元素的个数。

所以我们通常用它来做循环的依据，从而遍历数组中的所有元素。

//写入数组
var arr = [];
for(var i=0;i<10;i++){
　　arr[i] = Math.floor(Math.random()*100);
}
//读取数组
for(var j=0;j<arr.length;i++){
　　console.log(arr[j]);
}

 

数组的拷贝：

浅拷贝：只拷贝数组的引用，新数组与旧数组指向同一个内存地址，两者的修改相互影响。

var arr1 = [1,2,3];
var arr2 = arr1;
arr1[0] = 8;
console.log(arr1);//[8,2,3]
console.log(arr2);//[8,2,3]
arr2[2] = 9;
console.log(arr1);//[8,2,9]
console.log(arr2);//[8,2,9]

深拷贝：拷贝数组的所有元素，新生成的数组与原数组有相同的元素，但不指向同一内存地址，两者的修改不互相影响。

var arr1 = [1,2,3];
var arr2 = [];
for(var i=0;i<arr1.length;i++){
　　arr2[i] = arr1[i];
}
arr1[0] = 8;
console.log(arr1);//[8,2,3]
console.log(arr2);//[1,2,3]
arr2[2] = 9;
console.log(arr1);//[8,2,3]
console.log(arr2);//[1,2,9]

 

字符串与数组：

由字符串生成数组：

var str = "My name is Bob.";
var arr = str.split(" ");
for(var i=0;i<arr.length;i++){
　　console.log(arr[i]);
}
//依次输出：
//My
//name
//is
//Bob.

由数组生成字符串：

join()和toString()都能够把数组转换为以逗号分隔的字符串

其中，在直接输出数组的时候，会隐式调用toString()，然后输出一个字符串

var arr = [1,2,3];
var str1 = arr.join();
console.log(str1);//"1,2,3"
var str2 = arr.toString();
console.log(str2);//"1,2,3"
console.log(arr);//"1,2,3"

 

在数组中查找元素：

indexOf()：在数组中查找传入的参数是否存在，存在就返回元素索引，存在多个就返回第一个匹配元素索引，不存在就返回 -1。

var arr = ["Alen","Bob","Cynthia","Alen"];
console.log(arr.indexOf("Bob"));//1
console.log(arr.indexOf("Alen"));//0
console.log(arr.indexOf("Tom"));//-1

lastIndexOf()：和indexOf()功能类似，只不过是从后向前找。

var arr = ["Alen","Bob","Cynthia","Alen"];
console.log(arr.lastIndexOf("Bob"));//1
console.log(arr.lastIndexOf("Alen"));//3
console.log(arr.lastIndexOf("Tom"));//-1

 

注意：下面介绍的方法中，直接作用于数组本身的标注粉色，不直接作用于数组本身的标注蓝色。

 

数组的拼接与截取：

concat()：可以将多个数组合并，并返回一个新数组，原数组不会被修改。

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
var arr4 = arr1.concat(arr2,arr3);
console.log(arr1);//[1,2,3]
console.log(arr2);//[4,5,6]
console.log(arr3);//[7,8,9]
console.log(arr4);//[1,2,3,4,5,6,7,8,9]

slice()：截取数组中的一部分，返回一个新数组，原数组不会被修改。

var arr1 = [1,2,3,4,5,6];
//传入两个参数，截取从start到end，包start不包end
var arr2 = arr1.slice(0,2);
console.log(arr2);//[1,2]
//传入一个参数，截取从start到最后
var arr3 = arr1.slice(2);
console.log(arr3);//[3,4,5,6]

splice()：可用作截取，也可用作插入，直接对原数组进行操作。

var arr1 = [1,2,3,4,5,6,7,8,9];
var arr2 = arr1.splice(4,2);
console.log(arr1);//[1,2,3,4,7,8,9]
console.log(arr2);//[5,6]
var arr3 = arr1.splice(1,2,"Tom");
console.log(arr1);//[1,"Tom",4,7,8,9]
console.log(arr3);//[2,3]

 

快速操作数组头尾的方法：

为数组添加元素：

push()将一个元素添加到数组末尾，unshift()将一个元素添加到数组开头。

这两个方法都直接作用于原数组，并返回被修改后的数组长度。

可以只追加一个元素，也可以追加多个元素，第一个元素必填，后续可选。

var arr1 = [1,2,3,4,5];
var arr2 = arr1.push("Tom");
console.log(arr1);//[1,2,3,4,5,"Tom"]
console.log(arr2);//输出：6，表示此时数组长度为6
var arr3 = arr1.unshift("Jerry");
console.log(arr1);//["Jerry",1,2,3,4,5,"Tom"]
console.log(arr3);//输出：7，表示此时数组长度为7

为数组删除元素：

pop()会删除数组的最后一个元素，shift()会删除数组的第一个元素。

这两个方法都直接作用于原数组，并返回被删除的数组元素。

var arr1 = [1,2,3,4,5];
var arr2 = arr1.pop();
console.log(arr1);//[1,2,3,4]
console.log(arr2);//输出：5
var arr3 = arr1.shift();
console.log(arr1);//[2,3,4]
console.log(arr3);//输出：1

 

为数组排序：

reverse()：翻转数组元素，直接作用于原数组。

var arr1 = [1,"Tom",2,"Jerry",3];
var arr2 = arr1.reverse();
console.log(arr1);//[3, "Jerry", 2, "Tom", 1]
console.log(arr2);//[3, "Jerry", 2, "Tom", 1]

sort()：对数组元素进行排序，直接作用于原数组。

//默认情况下按照字符编码升序排列
[1,"Tom",2,"Jerry",3,"Bob"].sort();
//返回：[1, 2, 3, "Bob", "Jerry", "Tom"]

//可以通过传入参数模拟一下这个排序过程
[1,"Tom",2,"Jerry",3,"Bob"].sort(function(a,b){
var a = String(a);
var b = String(b);
if(a<b){return -1;}
if(a=b){return 0;}
if(a>b){return 1;}
});
//返回：[1, 2, 3, "Bob", "Jerry", "Tom"]

//按照数值升序排列，可以按照上面的方法修改一下
[90,102,72,1,65].sort(function(a,b){
if(a<b){return -1;}
if(a=b){return 0;}
if(a>b){return 1;}
});
//返回：[1, 65, 72, 90, 102]

//按照数值降序排列，可以继续修改
[90,102,72,1,65].sort(function(a,b){
if(a<b){return 1;}
if(a=b){return 0;}
if(a>b){return -1;}
});

//也可以进行简写
[90,102,72,1,65].sort(function(a,b){return a-b;});//升序
[90,102,72,1,65].sort(function(a,b){return b-a;});//降序

 

迭代器方法：

循环元素：

forEach()和map()都可以接受一个函数做参数，并对数组中的每个元素使用该函数。

其中forEach()没有返回值，map()返回处理过的数组，但他们均不会对原数组造成影响。

var arr = [11,12,13,14,15];
var reArr1 = arr.forEach(myfun);
var reArr2 = arr.map(myfun);
function myfun(item,index,arr){
　　return item-1;
}
console.log(arr);//[11,12,13,14,15]
console.log(reArr1);//undefined
console.log(reArr2);//[10,11,12,13,14]

检测元素：

every()和some()都可以接收一个函数做参数，用于检测数组中的每一项是否符合该函数的要求。

传入的函数需要返回一个布尔值，这两种方法均不会作用于空数组，也不会对原数组造成影响。

其中，every()在全部符合时返回true，some()只要一项符合就返回true。

filter()方法和他们也类似，只不过它会返回一个包含所有符合参数条件的新数组。

var arr1 = [2,4,6,8,10];
var arr2 = [1,2,3,4,5];
var flag1 = arr1.every(isEven);
var flag2 = arr2.every(isEven);
var flag3 = arr1.some(isEven);
var flag4 = arr2.some(isEven);
var arr3 = arr1.filter(isEven);
var arr4 = arr2.filter(isEven);
function isEven(item,index,arr){
　　return item%2==0;
}
console.log(flag1);//true
console.log(flag2);//false
console.log(flag3);//true
console.log(flag4);//true
console.log(arr3);//[2,4,6,8,10]
console.log(arr4);//[2,4]

累加元素：

reduce()和reduceRight()用于对数组中的所有值进行累加并返回累加结果。

其中，reduce()从左到右累加，reduceRight()从右到左累加。

这两个方法均不会对空数组执行回调，也不会对原数组造成影响。

var arr1 = [1,2,3,4,5];
var arr2 = ["Tom ","Jerry ","Harry "];
var total1 = arr1.reduce(add);
var total2 = arr2.reduce(add);
var total3 = arr1.reduceRight(add);
var total4 = arr2.reduceRight(add);
function add(pre,item,index,arr){
　　return pre + item;
}
console.log(total1);//15
console.log(total2);//"Tom Jerry Harry "
console.log(total3);//15
console.log(total4);//"Harry Jerry Tom "

 

 

二维数组与多维数组：

JS只支持一维数组，但是JS数组中可以存任何数据类型的元素，所以我们可以通过在一维数组的元素中存储数组的形式，创建二维数组，同理也可以继续深入创建出多维数组。

创建二维数组：

//为Array对象增加一个方法
Array.matrix = function(rows,cols,initial){
　　var arr = [];
　　for(var i=0;i<rows;i++){
　　　　var colsArr = [];
　　　　for(var j=0;j<cols;j++){
　　　　　　colsArr[j] = initial;
　　　　}
　　　　arr[i] = colsArr;
　　}
　　return arr;
}

遍历二维数组：

var test = [[89,77],[76,82,81],[91,94,89,99]];
var total = 0;
for(var row = 0;row<test.length;row++){
　　for(var col = 0;col<test[row].length;col++){
　　　　total += test[row][col];
　　}
}
console.log(total);//778