JavaScript的数据类型与数组（精讲）

在本文中，我们将介绍关于JavaScript的数组方法，这些方法可以帮助你正确地处理数据。

数据类型

在编程语言中，把能够表示并操作的值得类型称为数据类型（type），也就是我们常说的变量。
JavaScript的数据类型分为两种：原始类型和对象类型 。
原始类型包括num,string,bool,null,undefined,symbol(ES6),bigint(ES10)，除以上这些外就是对象了。
对象数据包括object,array,function
普通得对象是一个属性的集合，每个属性都有对应的键值对（key\value），是一个无序集合；array则是一种特殊的对象，表示带有编号的有序集合；function则是具有与它相关联的可执行代码的对象

数组

为什么用数组

假如有这样一个需求：保存所在城市每个月的平均温度。可以这么做：

	const averageTempJan = 31.9;
	const averageTempFeb = 35.3;
	const averageTempMar = 42.4;
	const averageTempApr = 52;
	const averageTempMay = 60.8;

当然，这肯定不是最好的方案。按照这种方式，如果只存一年的数据，我们能管理 12 个变量。
若要多存几年的平均温度呢？幸运的是，我们可以用数组来解决，更加简洁地呈现同样的信息。

	const averageTemp = [];
	averageTemp[0] = 31.9;
	averageTemp[1] = 35.3;
	averageTemp[2] = 42.4;
	averageTemp[3] = 52;
	averageTemp[4] = 60.8;

数组 averageTemp 里的内容如下图所示。

创建和初始化数组

使用 new 关键字，就能简单地声明并初始化一个数组（行{1}）
然而，用 new 创建数组并不是最好的方式。如果你想在 JavaScript 中创建一个数组，只用中括号（[]）的形式就行了（行{2}）

// 使用new关键字
let daysOfWeek = new Array(); // {1} 
daysOfWeek = new Array(7);
daysOfWeek = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'); 

// 直接赋值
let daysOfWeek = []; // {2}
let daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

访问元素和迭代数组

假如我们想输出数组 daysOfWeek 里的所有元素，可以通过循环迭代数组、打印元素，如下所示。

// 常规for循环
for (let i = 0; i < daysOfWeek.length; i++) {
 console.log(daysOfWeek[i]);
} 

// forof
for (let element in daysOfWeek){
	console.log(element);
}

// forin
for (let i in daysOfWeek){
	console.log(daysOfWeek[i]);
}

二维和多维数组

还记得本章开头平均气温测量的例子吗？现在我打算再用一下这个例子，不过把记录的数据改成数天内每小时的气温。现在我们已经知道可以用数组来保存这些数据，那么要保存两天内每小时的气温数据就可以这样做。

let averageTempDay1 = [72, 75, 79, 79, 81, 81];
let averageTempDay2 = [81, 79, 75, 75, 73, 72]; 

然而，这不是最好的方法，还可以做得更好。我们可以使用矩阵（二维数组，或数组的数组）来存储这些信息。矩阵的行保存每天的数据，列对应小时级别的数据。

let averageTemp = [];
averageTemp[0] = [72, 75, 79, 79, 81, 81];
averageTemp[1] = [81, 79, 75, 75, 73, 73];

JavaScript 只支持一维数组，并不支持矩阵。但是，我们可以像上面的代码一样，用数组套数组，实现矩阵或任一多维数组。代码也可以写成如下这样。

// day 1
averageTemp[0] = [];
averageTemp[0][0] = 72;
averageTemp[0][1] = 75;
averageTemp[0][2] = 79;
averageTemp[0][3] = 79;
averageTemp[0][4] = 81;
averageTemp[0][5] = 81;
// day 2
averageTemp[1] = [];
averageTemp[1][0] = 81;
averageTemp[1][1] = 79;
averageTemp[1][2] = 75;
averageTemp[1][3] = 75;
averageTemp[1][4] = 73;
averageTemp[1][5] = 73;

上面的代码里，我们分别指定了每天和每小时的数据。数组中的内容如下图所示。

每行就是每天的数据，每列是当天不同时段的气温。

迭代二维数组的元素

如果想看这个矩阵的输出，可以创建一个通用函数，专门输出其中的值。

function printMatrix(myMatrix) {
	for (let i = 0; i < myMatrix.length; i++) {
 		for (let j = 0; j < myMatrix[i].length; j++) {
 			console.log(myMatrix[i][j]);
 		}
 	}
} 

我们需要迭代所有的行和列。因此，使用一个嵌套的 for 循环来处理，其中变量 i 为行，变量 j 为列。在这种情况下，每个 myMatrix[i]同样代表一个数组，因此需要在嵌套的 for 循环中迭代 myMatrix[i]的每个位置。可以使用以下代码来输出矩阵 averageTemp 的内容。

printMatrix(averageTemp);

⚠： 要在浏览器控制台中打印二维数组，还可以使用 console.table(averageTemp)语句。它会显示一个更加友好的输出结果。

多维数组和上面原来一样，就是多加一个循环迭代而已。如果是一个 三维的矩阵，代码中就会用三层嵌套的 for 语句，以此类推。开发过程中很少会用到三维或者更高维数组，二维数组是最常见的。

JavaScript 的数组方法参考

• 在数组开头插入、删除元素：unshift()、pop()
• 在数组末尾插入、删除元素：push()、shift()
• 在数组末尾插入、删除元素：splice()
• 数组排序：倒叙reverse()、自定义排序sort()

例如，对象 Person 有名字和年龄属性，我们希望根据年龄排序，就可以这么写。

const friends = [
 { name: 'John', age: 30 },
 { name: 'Ana', age: 20 },
 { name: 'Chris', age: 25 }, // ES2017 允许存在尾逗号
];
function comparePerson(a, b) {
 	if (a.age < b.age) {
 		return -1;
 	}
	 if (a.age > b.age) {
	 	return 1;
	 }
	 return 0;
}
console.log(friends.sort(comparePerson)); 

在这个例子里，最后会输出 Ana(20), Chris(25), John(30)。

搜索方法

• indexOf 方法返回与参数匹配的第一个元素的索引；
• lastIndexOf 返回与参数匹配的最后一个元素的索引。我们来看看之前用过的 numbers 数组。
• find 和 findIndex 方法接收一个回调函数，搜索一个满足回调函数条件的值。上面的例子
  里，我们要从数组里找一个 13 的倍数。find 方法返回第一个满足条件的值，findIndex
  方法则返回这个值在数组里的索引。如果没有满足条件的值，find 会返回 undefined，而
  findIndex 返回-1。
• includes方法判断数组里存在某个元素，includes 方法会返回 true，否则返回 false。使用 includes
  方法的例子如下。

数组转字符串

• toString方法将把数组里所有元素输出为一个字符串
• join方法将用一个不同的分隔符（比如-）把元素隔开

类型数组

类型数组则用于存储单一类型的数据。它的语法是 let myArray = new TypedArray(length)，其中 TypedArray 需替换为下表所列之一。

正常使用中用的很少，在特定领域如WebGL API、进行位操作、处理文件和图像时，类型数组就可以大展拳脚了。