JS数组

• 1.数组的定义
• 2.数组的创建
• 3.数组的属性
• 4.数组的方法
• 5.数组的操作
• 6.数组的排序
• 7.数组的迭代
• 8.数组的应用

1.数组的定义

• 数组用于在单一变量中存储多个值，数组也是一个对象，它和普通对象类似
• 普通对象是使用字符串作为属性名，而数组是使用数组来作为索引操作元素
• 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据

2.数组的创建

• 方式一：对象的形式创建数组，可以初始化数组元素

// 创建一个空值数组：new Array()
var arr = new Array();
// 创建一个指定长度空值数组：new Array(size)
var arr = new Array(10);
// 创建一个非空数组：new Array(element0, element1, ..., elementn)
var arr = new Array("功勋", 100, true, null, undefined);

• 方式二：字面量方式创建数组，可以初始化数组元素

// 创建一个空值数组：[]
var arr = [];
// 创建一个非空
var arr = ["功勋", 100, true, null, undefined];

3.数组的属性

• 属性：length/prototype/constructor

var arr = [];
// length：设置或返回数组中元素的数量
console.log(arr.length);
// prototype：允许您向数组添加属性和方法
console.log(arr.prototype);
// constructor：返回创建数组对象原型的函数
console.log(arr.constructor);

4.数组的方法

• push() 方法向数组末尾添加新元素，并返回新长度

/*
 * 功能：向数组末尾添加新项目，并返回新长度
 * 语法：array.push(item1, item2, ..., itemX)
 * 参数：item1, item2, ..., itemX
 */
var arr = [];
var len = arr.push("水浒传");
console.log(len);
var len = arr.push("红楼梦", "西游记");
console.log(len);

• pop() 方法移除数组的最后一个元素，并返回该元素

/*
 * 功能：移除数组的最后一个元素，并返回该元素
 * 语法：array.pop()
 * 参数：空
 */
var arr = ["宋江", "李逵", "武松", "大郎"];
var last = arr.pop();
console.log(last);
var last = arr.pop();
console.log(last);

• shift() 方法移除数组的第一个元素，并返回该元素

/*
 * 功能：移除数组的第一个元素，并返回该元素
 * 语法：array.shift()
 * 参数：空
 */
var arr = ["宋江", "李逵", "武松", "大郎"];
var first = arr.shift();
console.log(first);
var first = arr.shift();
console.log(first);

• slice() 方法提取数组中的一部分，返回数组中被选中的元素的新数组

/*
 * 功能：提取数组中的一部分，返回数组中被选中的元素的新数组
 * 语法：array.slice(start, end)
 * 参数：
 * - start：可选，整数，指定从哪里开始选择（第一个元素的索引为 0）。使用负数从数组的末尾进行选择。如果省略，默认为0。
 * - end：可选。整数，指定结束选择的位置。如果省略，将选择从开始位置到数组末尾的所有元素。使用负数从数组末尾进行选择。
 */
var arr = ["宋江", "李逵", "武松", "大郎"];
// 提取数组中全部元素
var new_arr = arr.slice();
console.log(new_arr);
var new_arr = arr.slice(0);
console.log(new_arr);
// 提取数组中部分元素
var new_arr = arr.slice(1, 3);
console.log(new_arr);
var new_arr = arr.slice(1, -1);
console.log(new_arr);
// 提取数组中部分元素
var new_arr = arr.slice(-3, 3);
console.log(new_arr);
var new_arr = arr.slice(-3, -1);
console.log(new_arr);

• splice() 方法向/从数组添加/删除元素，并返回删除的元素

/*
 * 功能：向/从数组添加/删除元素，并返回删除的元素
 * 语法：array.splice(index, howmany, item1, ....., itemX)
 * 参数：
 * - index：必需，添加/删除元素的位置，使用负值指定从数组末尾开始的位置
 * - howmany：可选，要删除的元素数。如果设置为0，则不会删除任何元素
 * - item1, ..., itemX：可选，要添加到数组中的新元素
 */
var arr = ["宋江", "李逵", "武松", "大郎"];
// 在索引1的位置开始添加两个元素
var ret = arr.splice(1, 0, "燕青", "吴用");
console.log(ret);
// 在索引-1的位置开始添加两个元素
var ret = arr.splice(-1, 0, "燕青", "吴用");
console.log(ret);
// 在索引1的位置开始删除两个元素
var ret = arr.splice(1, 2);
console.log(ret);
// 在索引-1的位置开始删除两个元素
var ret = arr.splice(-3, 2);
console.log(ret);

• unshift() 方法将新元素添加到数组的开头，并返回新的长度

/*
 * 功能：将新元素添加到数组的开头，并返回新的长度
 * 语法：array.unshift(item1, item2, ..., itemX)
 * 参数：
 * - item1, item2, ..., itemX：必需，要添加到数组开头的项
 */
var arr = ["宋江", "李逵", "武松", "大郎"];
var len = arr.unshift("小明", "小红");
console.log(len);

• sort() 方法对数组的元素进行排序，返回排序后的数组

/*
 * 功能：对数组的元素进行排序，对数字字符串排序时可能不正确
 * 语法：array.sort(compareFunction)
 * 参数：
 * 可选。定义替代排序顺序的函数。该函数应返回负值、零值或正值，具体取决于参数，
 * 例如：function(a, b){return a-b}
 * sort() 方法比较两个值时，将值发送给比较函数，根据返回的（负、零、正）值对值进行排序
 * 注意：如果数字按字符串排序，则 "25" 大于 "100" 
 */
// 数组以字符串的形式进行排序
var arr = ["宋江", "李逵", "武松", "大郎"];
arr.sort();
console.log(arr);
// 按升序对数组中的数字进行排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
var min = points[0], max = points[points.length-1];
// 按降序对数组中的数字进行排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
var min = points[points.length-1], max = points[0];

• reverse() 方法反转数组中元素的顺序，按照索引进行反转

/*
 * 功能：反转数组中元素的顺序，按照索引进行反转
 * 语法：array.reverse()
 * 参数：
 */
var arr = ["宋江", "李逵", "武松", "大郎"];
var ret = arr.reverse();
console.log(ret);

• concat() 方法用于连接两个或多个数组，返回一个新数组，其中包含已连接数组的值

/*
 * 功能：用于连接两个或多个数组，返回一个新数组，其中包含已连接数组的值
 * 语法：array1.concat(array2, array3, ..., arrayX)
 * 参数：array2, array3, ..., arrayX	必需。要连接的数组
 */
var arr1 = ["宋江", "李逵", "武松", "大郎"];
var arr2 = ["刘备", "曹操", "孙权", "袁绍"];
var arr3 = ["唐僧", "沙僧", "老猪", "老孙"];
var arr4 = arr1.concat(arr2, arr3);
console.log(arr4);

• join() 方法将数组作为字符串返回，元素将由指定的分隔符分隔，默认分隔符是逗号

/*
 * 功能：将数组作为字符串返回，元素将由指定的分隔符分隔，默认分隔符是逗号
 * 语法：array.join(separator)
 * 参数：
 * - separator：可选，要使用的分隔符。如果省略，元素用逗号分隔。
 */
// 一维数组字符串拼接
var arr = ["宋江", "李逵", "武松", "大郎"];
var joined = arr.join();
console.log(joined);
var joined = arr.join("|");
console.log(joined);
var joined = arr.join("-");
console.log(joined);
// 多维数组字符串拼接
var arr = [["w", "e", "r"], ["a", "s", "d"], "o", "p"];
var joined = arr.join();
console.log(joined);  // w,e,r,a,s,d,o,p

• isArray() 方法确定对象是否为数组，返回值为true或false

/*
 * 功能：确定对象是否为数组，返回值为true或false
 * 语法：Array.isArray(obj)
 * 参数：
 * - obj：必需，需检查的对象
 */
var arr = ["宋江", "李逵", "武松", "大郎"];
var ret = Array.isArray(arr);
console.log(ret);
console.log(arr instanceof Array);

• includes() 方法确定数组是否包含指定的元素，返回值为true或false

/*
 * 功能：确定数组是否包含指定的元素，返回值为true或false
 * 语法：array.includes(element, start)
 * 参数：
 * - element：必需，要搜索的元素
 * - start：可选，默认0，在数组中的哪个位置开始搜索
 */
var arr = ["宋江", "李逵", "武松", "大郎"];
var ret = arr.includes("武松");
console.log(ret);

• indexOf() 方法在数组中搜索指定元素，并返回其位置索引

/*
 * 功能：在数组中搜索指定元素，并返回其位置索引
 * 语法：array.indexOf(item, start)
 * 参数：
 * - item	必需，要搜索的项目
 * - start	可选，从哪里开始搜索。负值给定的位置将从结尾计数，然后搜索到最后。
 * 搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索。
 * 如果未找到该项目，则 indexOf() 返回 -1。
 * 如果该项目出现多次，则 indexOf() 方法返回第一次出现的位置。
 */
var arr = ["宋江", "李逵", "武松", "大郎"];
var ret = arr.indexOf("武松", 1);
console.log(ret);

• findIndex() 方法返回数组中通过测试的第一个元素的索引（作为函数提供）

/*
 * 功能：在数组中搜索指定元素，并返回其位置索引
 * 语法：array.indexOf(item, start)
 * 参数：
 * - item	必需，要搜索的项目
 * - start	可选，从哪里开始搜索。负值给定的位置将从结尾计数，然后搜索到最后。
 * 搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索。
 * 如果未找到该项目，则 indexOf() 返回 -1。
 * 如果该项目出现多次，则 indexOf() 方法返回第一次出现的位置。
 */
var arr = ["宋江", "李逵", "武松", "大郎"];
var ret = arr.indexOf("武松", 1);
console.log(ret);

5.数组的操作

• 添加元素

var arr = [];
// 方式一：array[index] = item
arr[0] = "猴王初问世";
arr[1] = "官封弼马温";
// 方式二：array.push(item1, item2...);
arr.push("千里眼", "顺风耳");  // 数组尾部添加
arr.push("花果山", "水帘洞");  // 数组尾部添加
// 方式三：arr.unshift(item1, item2...)
arr.unshift("大王", "小王");  // 数组首部添加
arr.unshift("托塔天王", "太上老尊")  // 数组首部添加
// 方式四：arr.splice(index, 0, item1, item2...)
arr.splice(3, 0, "小猴", "老猴");
arr.splice(3, 0, "猫", "猴");

• 访问元素

var arr = ["西游记", 4, true, null, undefined, "水浒传"];
// 方式一：访问单个元素，array[index]
value1 = arr[1];
value2 = arr[2];
// 方式二：访问多个元素，array.slice(start, end)
values = arr.slice(1, 3)

• 修改元素

var arr = ["西游记", 4, true, null, undefined, "水浒传"];
// 方式一：array[index] = item
arr[0] = "红楼梦";
arr[2] = "三国志";
// 方式二：array.splice(index, howmany, item1, item2...)
arr.splice(3, 1, "筋斗云");

• 删除元素

var arr = ["西游记", 4, true, null, undefined, "水浒传"];
// 方式一：array.pop()
var last_value = arr.pop();  // 删除数组尾部元素
// 方式二：array.shift()
var first_value = arr.shift();  // 删除数组首部元素
// 方式三：array.splice()
arr.splice(2, 2);

6.数组的排序

• 数组排序：sort() 方法以字母顺序对数组进行排序，对数值排序时会产生不正确的结果

// 当数组中元素为字符串类型
var strArr = ["C", "K", "A", "B"];
strArr.sort();
console.log(strArr); // {"0":"A","1":"B","2":"C","3":"K","length":4}
// 当数组中元素为数字类型
var points = [40, 100, 1, 5, 25, 10];
points.sort(); // 如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"
console.log(points); // {"0":1,"1":10,"2":100,"3":25,"4":40,"5":5,"length":6}
points.sort(function(a, b){return a-b})
console.log(points);

• 反转数组：reverse() 方法反转数组中的元素，可以使用它以降序对数组进行排序

// 当数组中元素为字符串类型
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();          
fruits.reverse(); 

• 数值排序：sort(compareFunction)参数为比值函数来对数组进行排序

// 当数组中元素为数字类型
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
console.log(points) // 数组数值升序排序
points.sort(function(a, b){return b-a});
console.log(points) // 数组数值降序排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="myFunction1()">以字母顺序排序</button>
		<button onclick="myFunction2()">以数字顺序排序</button>
		
		<p id="demo"></p>
		
		<script>
		var points = [40, 100, 1, 5, 25, 10];
		document.getElementById("demo").innerHTML = points;
		
		function myFunction1() {
				points.sort();
				document.getElementById("demo").innerHTML  = points;
		}
		function myFunction2() {
				points.sort(function(a, b){return  a - b});
				document.getElementById("demo").innerHTML = points;
		}
		</script>
	</body>
</html>

• 数组极值：使用sort()/reverse()/Math查找数值数组中的最大值或最小值

// 方式一：sort(compareFunction) + array[index]
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
var minValue = points[0], maxValue = points[points.length-1];
console.log("最小值：", minValue, " 最大值：", maxValue);
// 方式二：Math.min.apply(func, array)/Math.max.apply(func, array)
// Math.min(N1, N1, N3...N)：N1-N中的最小值
// Math.max(N1, N1, N3...N)：N1-N中的最大值
var points = [40, 100, 1, 5, 25, 10];
var minValue = Math.min.apply(null, points), maxValue = Math.max.apply(null, points);
console.log("最小值：", minValue, " 最大值：", maxValue);
// 方式三：自定义方法，遍历数组中全部值比较
function myArrayMin(arr) {
    var len = arr.length
    var min = Infinity;
    while (len--) {
        if (arr[len] < min) {
            min = arr[len];
        }
    }
    return min;
}
function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
        if (arr[len] > max) {
            max = arr[len];
        }
    }
    return max;
}

7.数组的迭代

• Array.forEach()

/*
 * 功能：forEach() 方法按顺序为数组中的每个元素调用一次函数（回调函数），不支持IE8
 * 语法：array.forEach(function(currentValue, index, arr), thisValue)
 * 参数：
 * - function(currentValue, index, arr)
 *   - currentValue：必需，当前元素的值
 *   - index：可选，当前元素的数组索引
 *   - arr：可选，当前元素所属的数组对象
 * - thisValue：可选，要传递给函数以用作其 "this" 值的值。
 *   如果此参数为空，则值 "undefined" 将作为其 "this" 值传递
 * 返回：不会改变原始数组，返回空值
 */
// 数组中每个数字元素增加10倍
var numbers = [65, 44, 12, 4];
numbers.forEach(myFunction)
function myFunction(item, index, arr) {
  arr[index] = item * 10;
}
console.log(numbers);
// 数组中每个数字元素是否偶数
var numbers = [65, 44, 12, 4];
numbers.forEach(myFunction);
function myFunction(item, index, arr) {
  if(item % 2 == 0){
	  arr[index] = true; 
  }else{
	  arr[index] = false;
  }
}
console.log(numbers);
// 数组中数字的字符串列表
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}
console.log(txt);

• Array.map()

/*
 * 功能：map() 方法按顺序为数组中的每个元素调用一次提供的函数（回调函数），不支持IE8
 * 语法：array.map(function(currentValue, index, arr), thisValue)
 * 参数：
 * - function(currentValue, index, arr)
 *   - currentValue：必需，当前元素的值
 *   - index：可选，当前元素的数组索引
 *   - arr：可选，当前元素所属的数组对象
 * - thisValue：可选，要传递给函数以用作其 "this" 值的值。
 *   如果此参数为空，则值 "undefined" 将作为其 "this" 值传递
 * 返回：不会改变原始数组，为每个数组元素调用函数的结果创建新数组
 */
// 数组中每个数字元素增加10倍
var numbers = [65, 44, 12, 4];
var results = numbers.map(myFunction)
function myFunction(item) {
  return item * 10;
}
console.log(results);
// 数组中每个数字元素是否偶数
var numbers = [65, 44, 12, 4];
var results = numbers.map(myFunction);
function myFunction(item, index, arr) {
  if(item % 2 == 0){
	  return true; 
  }else{
	  return false;
  }
}
console.log(results);
// 数组中数字的字符串列表
var txt = "";
var numbers = [45, 4, 9, 16, 25];
var results = numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}
console.log(results);
console.log(txt);

• Array.filter()

/*
 * 功能：filter() 方法创建数组，其中填充了所有通过测试的数组元素（作为函数提供），不支持IE8
 * 语法：array.filter(function(currentValue, index, arr), thisValue)
 * 参数：
 * - function(currentValue, index, arr)
 *   - currentValue：必需，当前元素的值
 *   - index：可选，当前元素的数组索引
 *   - arr：可选，当前元素所属的数组对象
 * - thisValue：可选，要传递给函数以用作其 "this" 值的值。
 *   如果此参数为空，则值 "undefined" 将作为其 "this" 值传递
 * 返回：不会改变原始数组，为每个数组元素调用函数的结果符合条件的创建新数组
 */
// 数组中每个数字元素是否偶数
var numbers = [65, 44, 12, 4];
var results = numbers.filter(myFunction);
function myFunction(item, index, arr) {
  return item % 2 == 0;
}
console.log(results);

• Array.reduce()

/*
 * 功能：reduce() 方法为数组的每个值（从左到右）执行提供的函数，不支持IE8
 * 语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
 * 参数：
 * - function(total, currentValue, currentIndex, arr)
 *   - total：必需，initialValue，或函数先前返回的值
 *   - currentValue：必需，当前元素的值
 *   - index：可选，当前元素的数组索引
 *   - arr：可选，当前元素所属的数组对象
 * - initialValue：可选，作为初始值传递给函数的值。
 * 返回：不会改变原始数组，函数的返回值存储在累加器中（结果/总计）
 */
// 不传初始化值给函数
var numbers = [65, 44, 12, 4];
var results = numbers.reduce(myFunction);
function myFunction(total, num) {
  return total - num;
}
console.log(results);
// 传初始化值给函数
var numbers = [65, 44, 12, 4];
var results = numbers.reduce(myFunction, 0);
function myFunction(total, num) {
  return total - num;
}
console.log(results);

• Array.find()

/*
 * 功能：find()  方法返回通过测试函数的第一个数组元素的值，不支持IE
 * 语法：array.find(function(currentValue, index, arr), thisValue)
 * 参数：
 * - function(currentValue, currentIndex, arr)
 *   - currentValue：必需，当前元素的值
 *   - index：可选，当前元素的数组索引
 *   - arr：可选，当前元素所属的数组对象
 * - thisValue：可选，要传递给函数以用作其 "this" 值的值。
 *   如果此参数为空，则值 "undefined" 将作为其 "this" 值传递
 * 返回：如果找到函数返回 true 值的数组元素，则 find() 返回该数组元素的值（并且不检查剩余值）
 *       否则返回 undefined
 */
// 查找第一个成年年龄大小
var ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
var age = ages.find(checkAdult);
console.log(age);

• Array.findIndex()

/*
 * 功能：findIndex() 方法返回数组中通过测试的第一个元素的索引（作为函数提供），不支持IE
 * 语法：array.find(function(currentValue, index, arr), thisValue)
 * 参数：
 * - function(currentValue, currentIndex, arr)
 *   - currentValue：必需，当前元素的值
 *   - index：可选，当前元素的数组索引
 *   - arr：可选，当前元素所属的数组对象
 * - thisValue：可选，要传递给函数以用作其 "this" 值的值。
 *   如果此参数为空，则值 "undefined" 将作为其 "this" 值传递
 * 返回：如果找到函数返回 true 值的数组元素，则 findIndex() 返回该数组元素的索引（并且不检查剩余值）否则返回 -1
 */
// 查找第一个成年年龄索引
var ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
var index = ages.findIndex(checkAdult);
console.log(index);

8.数组的应用

function Student(code, name, score) {
	this.code = code;
	this.name = name;
	this.score = score;
	this.toString = function(){
		return "Student[code="+this.code+",name="+this.name+",score="+this.score+"]"
	};
}
var stu1 = new Student("0001", "小强", 56);
var stu2 = new Student("0002", "小花", 60);
var stu3 = new Student("0003", "小明", 80);
var stu4 = new Student("0004", "小红", 59);
var stuArr = [stu1, stu2, stu3, stu4];
// 创建一个函数，给定一个全量学生数组，筛选出考试及格的学生，并以数组形式返回
function getPass(stuArr) {
	// 创建考试及格的学生数组
	var newArr = [];
	// 方式1：for语句
	for (let i=0; i<stuArr.length; i++) {
		// 判断学生是否及格并添加到数组
		if (stuArr[i].score >= 60) {
			newArr.push(stuArr[i]);
		}
	}
	// 方式2：for...of...语句
	for (let stu of stuArr) {
		// 判断学生是否及格并添加到数组
		if (stu.score >= 60) {
			newArr.push(stu);
		}
	}
	// 方式3：for...in...语句
	for (let i in stuArr) {
		// 判断学生是否及格并添加到数组
		if (stuArr[i].score >= 60) {
			newArr.push(stuArr[i]);
		}
	}
	return newArr;
}
var stuPass = getPass(stuArr);

// 创建一个函数，给定一个存放数字的数组，去除数组中重复的数字
var arrNum = [1, 2, 3, 2, 3, 4, 5, 6, 1, 4];
function getUnique(arrNum) {
	// 遍历数组中每一个元素
	for (let i=0; i<arrNum.length; i++) {
		// 遍历当前元素后的所有元素
		for (let j=i+1; j<arrNum.length; j++) {
			// 判断两个元素的值是否相等
			if (arrNum[i] == arrNum[j]) {
				// 如果相等则证明出现了重复元素，则删除对应元素
				arrNum.splice(j, 1);
				j--;
			}
		}
	}
	return arrNum;
}
var arrUnique = getUnique(arrNum);		
console.log(arrUnique);