JavaScript前端数组

JavaScript前端数组

#数组的基本概念

数组构成：由一个或多个数组元素组成的，各元素之间使用逗号","分割。

• 数组元素：每个数组元素由"索引下标"和"值"构成。
• 根据维数划分为一维数组、二维数组、三维数组等多维数组。

数组的创建

• 创建方式
• 实例化Array对象的方式
• 直接使用"[]"的方式

 // 元素值类型为字符串
 var area = new Array('Beijing', 'Shanghai', 'Shenzhen');
 // 元素值类型为数值型
 var score = new Array(56, 68, 98, 44);
 // 元素值类型为混合型
 var mix = new Array(123, 'abc', null, true, undefined);
 // 空数组
 var arr1 = new Array();   或var arr2 = new Array;
 
 var weather = ['wind', 'fine',]; // 相当于new  Array('wind', 'fine',)
 var empty = []; // 相当于：new Array
 // 控制台输出：["sad", empty × 3, "happy"]
 var mood = ['sad', , , ,'happy'];   

数组的基本操作

获取和设置数组长度：length属性

• 设置长度的规则设置的length>原数组长度，则没有值的数组元素会占用空存储位置。
• 设置的length=原数组长度，则数组长度不变。
• 设置的length<原数组长度，则多余的数组元素将会被舍弃。

var arr1 = [78, 88, 98];
var arr2 = ['a', , , , 'b', 'c'];
console.log(arr1.length); // 输出结果为：3
console.log(arr2.length); // 输出结果为：6

var arr2 = [1, 2, 3];
arr2.length = 4;
console.log(arr2);
 // 输出结果：[1, 2, 3, empty]
 
  var arr3 = ['a', 'b'];
  arr3.length = 2; 
  console.log(arr3); 
  // 输出结果：["a", "b"]
  
  var arr4 = ['hehe', 'xixi', 'jiujiu'];
  arr4.length = 2; 
  console.log(arr4); 
  // 输出结果：["hehe", "xixi"]

值得一提：JavaScript中不论何种方式指定数组长度后，并不影响继续为数组添加元素，同时数组的length属性值会发生相应的改变。

• 访问数组元素
  数组元素访问方式：“数组名[下标]”。
• 遍历数组元素
  利用下标遍历数组：使用for
  利用下标遍历数组：使用for…in语句

for……of语法
在ES6中，新增了一种for…of语法，可以更方便地对数组进行遍历。

var arr= [1, 2, 3];
for (var value of arr  ) {
    console.log(value);
}

变量value：表示每次遍历时对应的数组元素的值。
变量arr：表示待遍历的数组。
结果：在控制台中依次输出1、2和3。

元素的添加与修改

• 元素的添加与修改元素的方式：“数组名[下标]”。
• 提示：与访问数组中的元素的方式相同。
  元素的删除
• delete关键字只能删除数组中指定下标的元素值，删除后该元素依然会占用一个空的存储位置。

var stu= ['Tom', 'Jimmy', 'Lucy'];
console.log(stu  );            // 输出结果：["Tom", "Jimmy", "Lucy"]delete stu  [1];
// 删除数组中第2个元素
console.log(stu  );           // 输出结果：["Tom", empty, "Lucy"]

ES6中另一种结构赋值方式

//传统做法
var arr= [1, 2, 3];
var a = arr  [0];
var b = arr  [1];
var c = arr  [2];
// 解构赋值方式
[a, b, c] = [1, 2, 3];

• 当左侧变量的数量小于右侧的元素的个数，则忽略多余的元素。
• 当左侧变量数量大于右侧的元素个数时，则多余的变量会被初始化为undefined。

代码实现思路：假设法

• 假设待查找数组的第一个
• 元素为最大值max和最小值min。
• 从数组的第二个元素开始遍历数组。
• 在遍历数组时，判断当前元素是否大于max，若大于，修改max值。
• 同理，在遍历数组时，判断当前元素是否小于min，若小于，修改min值。

创建的二维数组的操作

• 创建与遍历

// 使用Array对象创建数组
var info = new Array(new Array('Tom', 13, 155), new Array('Lucy', 11, 152));
var arr= new Array(new Array, new Array); // 空二维数组
// 使用"[]"创建数组
var num= [[1, 3], [2, 4]];
var empty = [[], []];// 空二维数组

var arr= [];// 创建一维空数组
for(let i =  0;   i< 3; ++i){
       arr  [i] = []; // 将当前元素设置为数组
       arr  [i][0] = i;  // 为二维数组元素赋值
   }

若要为二维数组元素（如arr[i][0]）赋值，首先要保证添加的元素（如arr[i]）已经被创建为数组，否则程序会报"Uncaught TypeError…"错误。

二维数组转置

• 案例：二维数组转置将二维数组横向元素保存为纵向元素。

• 代码实现思路：

• ①找规律：res[0][0] = arr[0][0]、res[0][1] = arr[1][0]、res[0][2] = arr[2][0]。

• ②得结论：res[i][j] = arr[j][i]。

• ③res数组长度=arr元素（如arr[0]）的长度。

• ④res元素（如res[0]）的长度=arr数组的长度。

• ⑤按照③和④完成res的创建与遍历，按②进行转置。

• 转置前arr
  [
  [‘a’, ‘b’, ‘c’],
  [‘d’, ‘e’, ‘f’],
  [‘g’, ‘h’, ‘i’],
  [‘j’, ‘k’, ‘l’],
  ]

  转置后res
  [
  [‘a’, ‘d’, ‘g’, ‘j’],
  [‘b’, ‘e’, ‘h’, ‘k’],
  [‘c’, ‘f’, ‘i’, ‘l’],
  ]

数组排序

冒泡排序

• 计算机科学领域中较简单的排序算法
• 实现原理：在冒泡排序的过程中，按照要求从小到大排序或从大到小排序，不断比较数组中相邻两个元素的值，较小或较大的元素前移。

插入排序

• 冒泡排序的优化，是一种直观的简单排序算法实现原理：通过构建有序数组元素的存储，对于未排序的数组元素，在已排序的数组中从最后一个元素向第一个元素遍历，找到相应位置并插入。其中，待排序数组的第1个元素会被看作是一个有序的数组，从第2个至最后一个元素会被看作是一个无序数组。

常见的数组方法

栈方法

• 利用Array对象提供的栈方法实现数组元素的添加与删除。

方法名称	功能描述
push()	将一个或多个元素添加到数组的末尾，并返回数组的新长度。
unshift()	将一个或多个元素添加到数组的开头，并返回数组的新长度。
pop()	从数组的末尾移出并返回一个元素，若是空数组则返回undefined。
shift()	从数组的开头移出并返回一个元素，若是空数组则返回undefined。

push()和unshift()方法的返回值是新数组的长度。
pop()和shift()方法返回的是移出的数组元素。

检索方法
在开发中，若要检测给定的值是否是数组，或是查找指定的元素在数组中的位置。

方法名称	功能描述
includes()	用于确定数组中是否含有某个元素，含有返回true，否则返回false。
Array.isArray()	用于确定传递的值是否是一个Array，是返回true，不是返回false
indexOf()	返回在数组中可以找到给定值的第一个索引，如果不存在，则返回-1
lastIndexOf()	返回指定元素在数组中的最后一个的索引，如果不存在则返回-1

var data = ['peach', 'pear', 26, '26', 'grape'];
// 从数组下标为3的位置开始检索数字
console.log(data.includes(26, 3)); // 输出结果：false
// 从数组下标为data.length- 3 的位置查找数字
console.log(data.includes(26, -3)); // 输出结果：true
// 判断变量data是否为数组
console.log(Array.isArray(data)); // 输出结果：true

数组转字符串

方法名称	功能描述
join()	将数组的所有元素连接到一个字符串中。
toString()	返回一个字符串，表示指定的数组及其元素。

var arr= ['a','b','c'];
console.log(arr.join());      // 输出结果：a,b,c
console.log(arr.join(' -'));   // 输出结果：a-b-c
console.log(arr.toString());    // 输出结果：a,b,c

• join()和toString()方法的相同点：
  可将多维数组转为字符串，默认情况下使用逗号连接。
  当数组元素为undefined、null或空数组时，对应的元素会被转换为空字符串
• join()和toString()方法的不同点。
  join()方法可以指定连接数组元素的符号

其它方法

• 合并数组
• 数组浅拷贝
• 点到数组元素的顺序

方法名称	功能描述
sort()	对数组的元素进行排序，并返回数组。
fill()	用一个固定值填充数组中指定下标范围内的全部元素
reverse()	颠倒数组中元素的位置
splice()	对一个数组在指定下标范围内删除或添加元素
slice()	从一个数组的指定下标范围内拷贝数组元素到一个新数组中
concat()	返回一个合并两个或多个数组后的新数组

• slice()和concat()方法在执行后返回一个新的数组，不会对原数组产生影响，剩余的方法在执行后皆会原数组产生影响。
• splice()方法的第1个参数的值等于或大于数组长度时，从数组末尾开始操作；当该值为负数时，则下标位置等于数组长度加上指定的负数，若其值仍为负数，则从数组的开头开始操作。