JavaScript 数组知识点总结

---

前言

这篇文章是对本周学习的有关数组知识点的总结，以下案例仅供参考

---

一、数组是什么？

数组是一种特殊的变量，它能够一次存放一个以上的值。
如果你有一个班级名单，在单个变量中存储班级里同学名字应该是这样的：

var name1 = "张三";
var name2 = "李四";
var name3 = "王五"; 

不过，假如你希望遍历所有人名并找到一个特定的值，例如座位号？假如不是三个人名而是三百个呢？

解决方法就是数组！

数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

二、数组定义

使用数组文本是创建 JavaScript 数组最简单的方法。

语法：

var arr = []
var arr = new Array() - 系统提供了各种构造函数用来创建各种数据

实例：

var arr = ['张三','李四','王五','赵六']

输出结果：

注意!
object数据类型的时候，object有3种表现形式：
null - 空
{} - 对象，一个大的内存空间存储多个小的内存空间，键值对组成
[]

js还提供了一个构造函数，用来创建数组：

var arr = new Array("张三","李四","王五")

以上提到的两种创建数组的方式定义的数据是一样的，但是还有一种情况，这两种定义方式就不一样了：

var arr = [5]
var brr = new Array(5)
console.log(arr,brr)

输出结果：

区别：
[]形式定义的是一个数组中有一个小空间，其中的值是5；
构造函数方式定义的，表示有5个空的小空间。

数组的规律：

第一个值的下标永远是0;

最后一个值的下标永远是值的个数-1。

也就是说，数组这种数据中每个值是有顺序的。

三、数组的基本操作

数组中值的个数：数组.length

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

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

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

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

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) ["王五", "李四"]

删除元素：delete 数组[下标]

var arr = [1,2,3];
delete arr[0];
console.log(arr)

注意：
这种删除方式，只能删除小空间中对应的数据，但是小空间还存在

当然，我们也可以利用数组的长度来删除数组

arr.length = 2 // 超出指定长度的数据都被删除掉了
arr.length = 5 // 如果赋的值超出原本的长度，就会在后面创建多个空的小空间

四、数组的遍历

将数组中每个元素都访问一次

var arr = ['a', 'b', 'c', 'd', 'e'];

console.log( arr[0] ); // a
console.log( arr[1] ); // b
console.log( arr[2] ); // c
console.log( arr[3] ); // d
console.log( arr[4] ); // e

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

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

因为数组也是object对象类型，只要是对象类型，就可以使用对象的遍历方式去遍历数组
使用 for in这种语法来遍历数组：

var arr = ['a', 'b', 'c', 'd', 'e'];
for(var a in arr){
	// console.log(a);//遍历下标  - 将下标转成字符串类型
    console.log(arr[a]);
}

以上两种遍历方法的区别：
区别1：for in遍历出来的下标是字符串，for i=0遍历出来的是数字
区别2：for in只遍历有值的空间，for i=0的方式会将空的小空间中的值也遍历出来（空的空间会遍历出undefined）
区别3：for in会遍历原型中的数据，for i=0只能遍历当前空间中的数据
建议使用for i=0的方式遍历

五、数组嵌套

数组中数据类型没有限制，可以放number、boolean、undefined、string、object、function；
数组中的数据也可以是数组，这样就形成了数组的嵌套。
包含数组的数组，叫做多维数组，我们用的最多的就是二维数组。

var obj = {
     name: '张三',
     sex: '男',
     wife: {
         nane: '翠花',
         sex: '女'
     },
     children: [
         {
             name: '阿大',
             sex: '男',
             wife: {
                 name: '如花',
                 sex: '女'
             },
             children: [
                 {
					name: '周粥',
					sex: '女'
                 }
             ]
         },
         {
             name: '阿二',
             sex: '男'
         },
         {
             name: '阿三',
             sex: '女'
         }
     ]
 }

六、基础类型和引用类型

根据不同类型的数据存储方式以及赋值方式的不同，我们将数据分为两类：基本类型和引用类型。

基础数据类型： number、string、boolean、undefined、null

引用数据类型： []、function, {}

基础类型和引用类型的区别：

1. 存储方式不同

基础类型将值存在栈内存中；引用类型将值存在堆内存中，将堆内存的内存地址存在栈中。
注意：复制值以后，修改其中一个，另一个不会受到影响。

2. 赋值过程不同

基础类型赋值时，将值复制给另一个变量；引用类型赋值时，将栈中的地址复制给别的变量。
注意：当改变其中一个变量中的值，另一个变量中的值也会发生改变。

3. 全等的比较规则不同

基础类型全等比较的时候，先比较类型是否相同，如果类型相同了，再比较值是否相等；

var a = 1
var b = 1
console.log( a === b ); // true

引用类型全等比较的时候比较栈中存的内存地址是否相同。

var arr = [1,2,3]
var brr = [1,2,3]
console.log(arr === brr); // false

七、数组方法

系统为了方便我们对数组进行操作，系统提供了一些专业操作数组的方法，分别有以下几种：

• 给数组的开头添加一个或多个元素： 数组.unshift(一个值或多个值) - 返回添加以后的新数组的长度

var arr = ['a', 'b', 'c'];
var n = arr.unshift(1,2,3);
console.log(arr); // [1, 2, 3, 'a', 'b', 'c']
console.log(n); // 6

• 给数组的开头删除一个元素： 数组.shift() - 不需要参数，返回被删除的元素

var arr = ['a', 'b', 'c'];
var ele = arr.shift();
console.log(arr); // ['b','c']
console.log(ele); // 'a'

• 给数组的末尾添加一个或多个元素： 数组.push(一个值或多个值) - 返回新数组的长度

var arr = ['a','b','c'];
var l = arr.push('d');
console.log(arr) // ['a','b','c','d']
console.log(l) // 4

• 给数组的末尾删除一个元素： 数组.pop() - 返回被删除的值

var arr = ['a','b','c'];
var ele = arr.pop()
console.log(arr) // ['a','b']
console.log(ele) // 'c'

• 对数组进行增、删、改的方法： 数组.splice()

var arr = ['a', 'b', 'c'];
// 改 - 参数1：开始下标；参数2：删除的个数；参数3：在删除的位置放上的新的元素 - 可以是多个
arr.splice(1, 1, 'd'); // ['a','d','c']
// 增
arr.splice(1, 0, 'd') // ['a','d','b','c'] - 删除0个，就是不删除，然后放上新元素
// 删 - 第三个参数可以省略
arr.splice(1, 0); // ['a','c']

• 数组的拼接： 数组.concat(1个或多个元素或数组) - 返回合并以后的大数组

var arr = ['a', 'b', 'c'];
var brr = ['d', 'e', 'f'];
// 将arr和brr合成一个更大的数组
var crr = arr.concat(brr); // ['a','b','c','d','e','f']
// 将一个或多个值和数组合并成一个大数组
var crr = arr.concat(1, 2, 3);// ['a','b','c',1,2,3]

• 数组的排序： 数组.sort() - 返回当前排序后的数组 - 将数组从小到大进行排序

var arr = [9, 5, 3, 7, 1, 6, 4, 8, 2];
// 语法1：
arr.sort(); // 默认升序
console.log(arr); // [1,2,3,4,5,6,7,8,9]
// 语法2：
arr.sort(function (a, b) { // a代表前面的数，b代表后面的数
    return a-b; // 升序 - 如果前面的数-后面的数>0，则交换位置
    return b-a; // 降序 - 如果后面的数-前面的数>0，则交换位置
})

• 数组的反转： 数组.reverse() - 返回值是当前数组，翻转以后的数组

var arr = ['a','b','c'];
arr.reverse();
console.log(arr); // ['c','b','a']

• 将数组元素使用指定的连接符连接成一个字符串： 数组.join(指定的连接符) - 返回连接以后的字符串

var arr = ['a', 'b', 'c'];
var str = arr.join('_'); // 参数是连接符
console.log(str); // a_b_c

var str = arr.join(); // 默认使用逗号连接
console.log(str); // a,b,c

var str = arr.join('');
console.log(str); // abc

• 截取数组： 数组.slice(开始下标, 结束下标) - 返回截取的结果，结果中不包含结束下标对应的元素

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// 将数组中的 'b','c','d'截取出来，组成新的数组
var brr = arr.slice(1, 4); // 参数1是开始截取的下标，参数2是截取的结束下标，结果中不包含结束下标对应的元素
console.log(brr); // ['b','c','d']
// 如果省略第2个参数，默认从开始下标截取到数组末尾
var crr = arr.slice(1);
console.log(crr); // ['b','c','d','e','f']

---

总结

JavaScript 数组是比较重要的，本文主要讲了两个大点，一是基础类型和引用类型，二是数组方法。内容较多，需要多次记忆总结，以便加深印象。
后面还有关于冒泡和选择两种排序算法，暂且留在另外新的文章再详细介绍。