JS笔记之数组

---

数组(Array)

概念：数组是一组数据的集合，其中每一个数据称为数组元素，js的数组可以放任意数据类型的元素，数组是一种将一组数据元素存储在单个变量名下的优雅方式。

示例解释：

//普通变量名只能存一个数据
var num = 10
//数组存储一组数据
var arr = [1,2,3,4,5,'a','b','c']

---

一、数组的创建

数组的创建方式：
1、通过new关键字创建（不常用）

//注意A要大写
var 数组名 = new Array()
var arr = new Array()//创建一个空数组
var arr = new Array(5)//创建一个长度为5的空数组

2、通过数组字面量创建（常用）

//1、使用数组字面量创建空数组
var 数组名 = []
//2、使用数组字面量创建带初始值的数组
var 数组名 = [元素1，元素2，元素3···]
如：var arr = [1,3,5,'a','c','e',7,9]//数组元素可以是任意数据类型的

小结：
1.数组是一组数据的集合，是将一组数据存放在同一变量的优雅方式
2.数组的字面量：[ ]
3.声明数组并赋值称为数组的初始化
4.数组中元素可以是任意类型的数据
5.注意：数组元素为字符或字符串要加引号,不加的话解释器会认为是变量从而报错

二、数组元素的访问

1.通过数组索引访问

索引(下标)：用来存放数组元素的序号(数组下标从0开始)
        我们可以通过索引来访问、设置、修改相应的元素，注意：数组的长度可以不指定，它可以随元素的增加自动扩容,当访问未赋值的元素时，返回undefined。获取方式： 数组名[索引号]
下面通过例子来演示一下：

//定义数组
var arr = [1,3,5,'a','b','c']---->//注意字符串要加引号，不然解释器会认为是变量而报错
 console.log(arr)---------------->Array(6)//输出数组长度
 console.log(arr[0])------------->1
 console.log(arr[2])------------->5
 console.log(arr[4])------------->b
 console.log(arr[6])---------- -->undefined//索引下标6没有元素，所以返回undefined
 注意：数组的下标从0开始哟！！！

2.通过循环遍历

请看下面代码：

var arr = ["red","blue","green"]
console.log(arr[0])
console.log(arr[1])
console.log(arr[2])
//输出结果：red blue green

从上面代码观察发现，取出每一个元素只是数组下标改变而已，如果数组元素多的话，一行一行访问速度很慢，为提高效率，我们可以用循环

//1、使用for循环遍历
var arr = ["red","blue","green"]
	for(var i = 0;i<arr.length;i++){//length是数组的属性，即为数组长度，没有()
		console.log(arr[i])
	}
//输出结果：red blue green

//2、使用for in循环遍历
var arr = ["red","blue","green"]
	for(var i in arr){
		console.log(arr[i])
	}
//输出结果：red blue green

以上访问数组元素的结果是一样的，使用循环可是很便利的
下面做两个小案例来演示下数组的魔力吧！
案例1
使用数组对一组数求和并求平均值，思路：定义2个变量，一个存总和，一个存平均数，通过遍历数组求和，然后除以数组长度求平均数

案例1实现代码
//使用数组对一组数求和并求平均值
var arr = [1,3,5,7,9,2,4,6,8]	//声明一个数组并初始化
var sum = 0;					//创建一个变量来存取各数字之和
var avg = 0;					//创建一个变量来存取平均数
	for(i=0;i<arr.length;i++){
		sum += arr[i];			//相当于 sum = sum + arr[i]
	}
	console.log("sum:"+sum)		//打印sum的值，即所有数的和
	avg = sum/arr.length		//求平均值并赋值给avg(arr.lengt是数组的个数)
	console.log("avg:"+avg)		//打印avg的值，即所有数的平均数
//输出结果：sum:45 avg:5(这里仅是演示，没有对结果为多位小数进行处理)

案例2
使用数组对一组数求最大值，图例思路：把数组第一个元素赋值给max，依次遍历比较，如果有元素大于max，则把此元素赋值给max，遍历后比完max即为最大值

案例2实现
//使用数组对一组数求最大值
var arr = [1,3,5,7,9,2,4,6,8]	//声明一个数组并初始化
var max=arr[0];				   //创建一个变量来存取最大值,把arr[0],即1赋值给max
	for(i=01;i<arr.length;i++){
		if(arr[i]>max){
			max=arr[i]//判断是否有数组元素大于max，有的话就把大于max的值赋值给max
		}
	}
	console.log("max:"+max)		//打印max的值，即数组中最大值
//输出结果：max:9

---

三、数组的操作

1.数组长度及数组扩容

1. 使用length属性获取数组长度

// 注意！length是属性，不是函数，所以不用加()
var arr = [1,2,3,4,5];
console.log(arr.length)
//输出结果：5
通常数组的length属性跟数组遍历一起使用，使用循环遍历数组要注意
数组元素最后一位的索引下标是数组长度-1(arr.length-1)

2. 使用length属性实现数组扩容

// 创建数组，通过length属性扩容数组
var arr = ['a','b','c','d'];
console.log(arr.length)//输出结果为4，数组长度为4
console.log(arr[3])	  //输出数组最后一位元素的值为d
arr.length=6;		 //数组长度扩容为6
console.log(arr)	//输出结果为6，数组长度为6，第四第五个元素的值为empty
console.log(arr[4])	//未赋值，默认为undefined
console.log(arr[5])	//未赋值，默认为undefined

输出结果入图

3. 通过索引号实现数组扩容

// 创建数组，通过索引号扩容数组
var arr = ['a','b','c','d'];
console.log(arr.length)//输出结果为4，数组长度为4
console.log(arr[3])	   //输出数组最后一位元素的值为d
arr[4]='A'			   //给第五个元素进行赋值,因为第5个元素没被占用，所以会在数组后面追加元素
arr[5]='B'			   //给第六个元素进行赋值
arr[10] = 'C'		   //给第11个元素进行赋值
console.log(arr)   
console.log(arr[6])   

运行结果如图，可以发现，JS数组可以直接通过索引号进行扩容，而未赋值的元素默认为empty,返回结果是undefined，如果元素不存在，则在数组后面追加元素，若已经存在，则替换数组元素–>arr[3]

注意：不要直接给数组名赋值，否则会覆盖原有数组！

// 演示
var arr=[1,2,3,4,5]
console.log(arr)//打印原数组
arr="有点意思！"
console.log(arr)

---

2.数组的常用方法

 1. shift()删除数组中的第一个元素并且返回被删除的元素，
    同时其他元素的索引向前移动一位

var fruits = ['banana', 'orange', 'apple', 'mango']
        console.log(fruits)		//打印原数组
        var x = fruits.shift(); //首元素删除
        console.log(fruits) 	//删除后的数组，数组元素向前索引移动一位
        console.log(x)			//打印被删除元素的值banana

结果如图：

 2. pop()删除数组中的最后一个元素并且返回被删除的元素

var fruits = ['banana', 'orange', 'apple', 'mango']
        console.log(fruits)		//打印原数组
        var x = fruits.pop();   //末尾元素删除
        console.log(fruits) 	//删除后的数组
        console.log(x)			//打印被删除元素的值mango

结果如图：

 3. unshift(参数1,参数2···)向数组的开头添加一个或者更多的元素并且返回新的长度，
    同时数组元素的索引向后移动

var fruits = ['orange', 'apple', 'mango']
        console.log(fruits)		//打印原数组
        var x = fruits.unshift('banana');   //添加后返回数组长度
        console.log(fruits) 	//添加后的数组
        console.log(x)			//打印新数组的总长度

结果如图：

 4. push()向数组末尾增添一个或者多个数组元素，并且返回数组的长度

var fruits = ['orange', 'apple', 'mango']
        console.log(fruits)		//打印原数组
        var x = fruits.push('banana');   //添加一个数后返回数组长度
        console.log(fruits) 	//添加一个元素后的数组
        console.log(x)			//打印添加一个数后新数组的总长度
        var x = fruits.push('pineapple','strawberry');//添加多个元素后返回数组长度
        console.log(fruits) 	//添加多个元素后的数组
        console.log(x)			//添加多个元素后的总长度

结果如图

 5. reverse()翻转数组

   var fruits = ['orange', 'apple', 'mango']
        console.log(fruits);                //打印原数组
        console.log(fruits.reverse())		//打印翻转后的数组

结果如图：

6. sort()数组排序，对字符串排序，比较的是ASCII码的顺序

 1>如["a", "A", "1"], 按ASCII码顺序排列后为["1", "A", "a"]（数字>大写字母>小写字母）
 2>如["ab", "ac", "abc"], 排序后为["ab", "abc", "ac"]
 3>字符串数字：如["10", "5", "18" , "50"], 排序后为["10", "18", "5", "50"]
 比较方法：
（第一位相同比较第二位，b>c，因此ab和abc在ac之前；再比较ab与abc, ab没有第三位，因此排在abc之前)!!!

如需要对字符串形式的数字进行排序，可以采用以下两种方式：
	1、统一格式，补足位数，如["10", "5", "18" , "50"]中, 将"5"写为"05"
	2、转换为数字，使用特殊方法对数字排序

 var arr1 = ["a", "A", "1"]
        var arr2 = ["ab", "ac", "abc"]
        var arr3 = ["10", "5", "18", "50"]
        var arr4 = ["10", "05", "18", "50"]
        console.log(arr1.sort());		
        console.log(arr2.sort());			//比较方法：按ASCII码比较排序 
        console.log(arr3.sort());
        console.log("数字排序(5改成'05'):" + arr4.sort());

结果如图：

3.拓展：数字排序

1、匿名函数当做参数使用数组排序(一维数组)

//语法格式：
arr.sort ( function (a, b) {   //arr为需要排序的数组名
    return a - b 			   //升序
})	
根据比较函数返回值正负来决定排列顺序，为正升序，为负降序
使用如下：						  

  function sortby(a, b) {
            return a - b //升序
        }				//降序就改成return b-a
        var arr = [10, 5, 8, 50];
        arr.sort(sortby)//把排序匿名函数当做参数进行调用
        console.log(arr);//输出排序后的结果
        //匿名函数的函数名任意
 结果如图：

2、匿名函数当做参数使用数组排序(二维数组)

//语法格式：
arr.sort (function (a, b) {   //arr为需要排序的数组名
    return a[1] - b [1]		 //升序，降序改为b[1]-a[1]
})	
使用如下：						  

  function sortby(a, b) {
            return a[1] - b[1] //升序
        }				//降序就改成return b-a
    var arr = [["Alice", "95"], ["Bob", "80"], ["Cart", "100"]]
        arr.sort(sortby)//把排序匿名函数当做参数进行调用
        console.log(arr);//输出排序后的结果
        //匿名函数的函数名任意
 结果如图：

3.拓展：数组筛选(巧用length属性)

将数组[2,4,5,6,8,9,12,15,3,7,26,14]中大于10的元素存入新数组
//分析：
	1、创建一个数组arr=[2,4,5,6,8,9,12,15,3,7,26,14]
	2、创建一个新数组newArr来存放大于10的元素
	3、遍历旧数组，找出大于10的元素
	4、依次添加到新数组中

// 方法1，通过变量来增加数组长度
var arr = [2,4,5,6,8,9,12,15,3,7,26,14]	//创建一个数组
var newArr=[]	//创建空的新数组，用于存放大于10的元素
var j =0 ; 		//定义变量，用于增加新数组的长度
for(var i = 0 ;i<arr.length;i++){		//for循环遍历数组
	if(arr[i]>10){			//判断数组元素是否大于10
		newArr[j]=arr[i]	//如果arr数组元素>10，则存入新数组
		j++;				//当存入元素，长度+1，即j++
	}
}
console.log(newArr)//打印新数组

// 方法2，巧用length属性
var arr = [2,4,5,6,8,9,12,15,3,7,26,14]	//创建一个数组
var newArr=[]	//创建空的新数组，用于存放大于10的元素
for(var i = 0 ;i<arr.length;i++){	//for循环遍历数组
	if(arr[i]>10){					//判断数组元素是否大于10
		newArr[newArr.length]=arr[i]//如果arr数组元素>10，则存入新数组
	}		//巧用length属性，数组索引从0开始增加
}
console.log(newArr)//打印新数组

结果如图：

四、二维数组

概念：二维数组就是一维数组的每个元素是一个一维数组

1.二维数组的创建与访问

// 创建与访问

var fruits = [["1", "Banana"], ["2", "Orange"]];//创建二维数组
        var element = ["3", "Apple"];			
        fruits[2] = element;					//给第三个元素赋值
        console.log(fruits);					//打印二维数组
        console.log(fruits[0]); // ["1", "Banana"]//打印第一个元素(数组)
        console.log(fruits[0][1]); // "Banana"   //打印第一个元素的第2个值

结果如图：

2.遍历二维数组

通过for in循环遍历二维数组

var fruits = [["1", "Banana"], ["2", "Orange"], ["3", "Apple"]];
      for (var i in fruits) {//控制外层数组元素
          for (var j in fruits[i]) {//控制内层数组元素
              console.log(fruits[i][j]);//输出数值中每一个元素
          }
      }

结果如图：

小结：二维数组跟一维数组使用差不多，只是稍微麻烦一点，访问二维数组的具体元素值：arr[外层数组索引][内层数组索引]
遍历二维数组使用双重for循环

3.使用二维数组进行排序(冒泡排序法)

图例解释：

//代码实现如下
var arr = [5,4，3,2,1];
        for (var i = 0; i < arr.length - 1; i++) {//外层循环控制交换趟数，趟数为数组长度-1
            for (var j = 0; j < arr.length - 1 - i; j++) {//内层循环控制每一趟需要交换的次数
                if (arr[j] > arr[j + 1]) {//判断前面一个数是否大于后面一个数，如果是则交换两数
                    var temp = arr[j];//临时变量，用于交换两数的临时存取
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);//输出排序后的结果

结果如图：

总结

本次笔记主要记录了数组的基本使用，但是数组的妙用远不止这些，需要我们自己去探索。