JavaScript寒假系统学习之数组(一)

一、数组

1.1 什么是数组

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

1.2 数组创建的2种方式

1.2.1 利用new创建数组

格式：
var 数组名 = new Array();
const 数组名 = new Array();
let 数组名 = new Array();

// 例子
var studentArr = new Array(); // 创建一个空数组studentArr

1.2.2 利用数组字面量创建数组

格式：
var 数组名 = [ ];
const 数组名 = [ ];
let 数组名 = [ ];

// 例子
var courseArr = ['Chinese', 'Math', 'English']; // 创建一个数组courseArr, 里面的元素有Chinese、Math、English

// 注意： 数组内部的类型无限制
var demoArr = [1, true, 'Amy']; // 这样创建是被JS允许的

1.3 访问数组元素

格式：
数组名[索引号]

// 例子
// 刚刚创建的数组courseArr, 里面的元素有Chinese、Math、English，其索引号（即下标）分别是0，1，2
var courseArr = ['Chinese', 'Math', 'English']; 
console.log(courseArr[0]); // 访问数组元素Chinese
console.log(courseArr[1]); // 访问数组元素Math
console.log(courseArr[2]); // 访问数组元素English

1.4 遍历数组

格式：
for循环

// 例子
var courseArr = ['Chinese', 'Math', 'English']; // 创建一个数组courseArr, 里面的元素有Chinese、Math、English

for(var i = 0; i < courseArr.length; i++) {
	console.log(courseArr[i]); // 依次打印出Chinese、Math、English
}

1.5 数组实战训练

1.5.1 计算数组的和以及平均值

 var arr = [10, 34, 22, 54, 93];
 var sum = 0; // 总和
 var average = 0; // 平均值
 for(var i = 0; i < arr.length; i++) {
     sum += arr[i];
 }
 console.log('sum = ' + sum); // 213
 average = sum / arr.length;
 console.log('average = ' + average); // 42.6

1.5.2 求数组中的最大值

 var arr = [34, 6, 55, 49, 82];
 var max = arr[0]; // 初步定义一个最大值
 for (var i = 0; i < arr.length ; i++) {
   if(arr[i] > max) { // 在遍历中拿arr中每个元素与max进行比较
     max = arr[i];
   }
 }
 console.log('max = ' + max); // 82

1.5.3 数组转化为字符串

 var arr = ['Nice', 'to', 'meet', 'you'];
 var str = '';
   for(var i = 0; i < arr.length; i++) {
     str += arr[i] + ' ';
   }
 console.log('str = ' + str); // Nice to meet you

1.5.4 数组新增元素

	var arr = ['apple'];
	
	// 方式一：
	arr[arr.length] = 'peach';
	console.log('arr = ' + arr); // apple,peach
	
	// 方式二：数组名.push(新元素) 将新增元素添加到数组尾部
	arr.push('watermelon');
	console.log('arr = ' + arr); // apple,peach,watermelon
	
	// 方式三：数组名.unshift(新元素) 将新增元素添加到数组头部
	arr.unshift('strawberry');
	console.log('arr = ' + arr); // strawberry,apple,peach,watermelon
	
	// 方式三： 数组名.splice(索引号， 数量， 新增元素) 可删除从 索引号 处开始的零个或多个元素（即数量），并且用参数列表中声明的一个或多个值（即新增元素）来替换那些被删除的元素。
	arr.splice(1, 0, 'orange', 'pear'); // 从arr[1]开始，删除原数组0个元素，插入新增元素orange、pear
	console.log('arr = ' + arr); // strawberry,orange,pear,apple,peach,watermelon

详细请参考：JS数组添加元素的三种方法 js数组反转的几种方法

1.5.5 数组存放1-10个值

var arr = [];
for(var i = 0; i < 10; i++) {
    // 法一：
    // arr[i] = i + 1;
    // 法二：
    arr[arr.length] = i + 1; // 每次完成 i + 1之后，arr.length就会自动增加1
}
console.log('arr = ' + arr);

1.5.6 筛选数组方法

 // 筛选数组中大于10的元素
 var arr = [5, 23, 14, 2];
 var newArr = [];
   for(var i = 0; i < arr.length; i++) {
       if(arr[i] > 10) {
           newArr[newArr.length] = arr[i]; // newArr存储arr数组中>10的元素
       }
   }
 console.log('newArr = ' + newArr); // 23,14
 // 如果需要改动的是原数组，那么执行下一步
 arr = newArr; // arr原内容全被newArr的内容覆盖
 console.log('arr = ' + arr); // 23,14

1.5.7 删除数组指定元素

 var arr = ['apple', 'pear', 'apple', 'watermelon'];
 var newArr = [];
  for(var i = 0; i < arr.length; i++) {
      if(arr[i] !== 'apple') {
          newArr[newArr.length] = arr[i]; //  newArr存储arr数组中非apple的元素
      }
  }
  arr = newArr; // arr原内容全被newArr的内容覆盖
  console.log('arr = ' + arr); // pear,watermelon

1.5.8 翻转数组

  // 翻转数组
   var arr = [1, 2, 3, 4, 5];
   var newArr = [];

   // 法一： arr.reverse()方法直接翻转
   arr = arr.reverse();
   console.log('arr = ' + arr); // 5,4,3,2,1

   // 法二：遍历 + unshift()
   arr.forEach((element) => {
       newArr.unshift(element); // 具体的.unshift()可参考上面的【1.5.4 数组新增元素】
   })
   console.log('newArr = ' + newArr); // 5,4,3,2,1

   // 法三：遍历 + 翻转
   for(var i = 0; i < arr.length; i++) {
       var j = arr.length - i - 1;
       if(i < j) {
           var temp = arr[i];
           arr[i] = arr[j];
           arr[j] = temp;
       }
   }
   console.log('arr = ' + arr); // 5,4,3,2,1

参考资料：js数组反转的几种方法

1.5.9 冒泡排序

 var arr = [23, 14, 33, 52, 6];
  for(var i = 0; i < arr.length; i++) {
      for(var j = 0; j < arr.length - i; j++) {
         if(arr[j] < arr[j + 1]) { // 表示后面大的元素与前面小的元素互换，即整个数组从大到小进行排序。如果是>，则相反的排序结果。
             var temp = arr[j];
             arr[j] = arr[j + 1];
             arr[j + 1] = temp;
         }
      }
  }
  console.log('arr = ' + arr); // 52,33,23,14,6