JavaScript学习笔记（三）

19、JavaScript 数组排序

19.1 数组排序：`sort()`

sort() 方法以字母顺序对数组进行排序：

<p id="demo"></p><script>var cars01 = ["Apple", "City", "Dog", "Bad"];document.getElementById('demo').innerHTML = cars01.sort();;</script>

运行效果：Apple,Bad,City,Dog

19.2 反转数组：`reverse()`

（1）数组反转：

<p id="demo"></p><script>var cars01 = ["Apple", "City", "Dog", "Bad"];document.getElementById('demo').innerHTML = cars01.reverse();;</script>

运行效果：Bad,Dog,City,Apple

（2）您可以使用它以降序对数组进行排序：

<p id="demo"></p><script>var cars01 = ["Apple", "City", "Dog", "Bad"];document.getElementById('demo').innerHTML = cars01.sort().reverse();</script>

运行效果：Dog,City,Bad,Apple

19.3 比值函数

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

19.4 数字排序

默认地，sort() 函数按照字符串顺序对值进行排序。

该函数很适合字符串（“Apple” 会排在 “Banana” 之前）。

不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个比值函数来修正此问题：
（1）sort()实现数字升序：

<body><button onclick="myFunction()">点击</button><p id="demo"></p><script>var nums=[40,5,10,20,100,1];document.getElementById('demo').innerHTML = nums;function myFunction() {nums.sort(function(a,b){return a-b});document.getElementById('demo').innerHTML =nums;}</script>
</body>

运行效果：1,5,10,20,40,100

（2）sort()实现数字降序：

<body><button onclick="myFunction()">点击</button><p id="demo"></p><script>var nums=[40,5,10,20,100,1];document.getElementById('demo').innerHTML = nums;function myFunction() {nums.sort(function(a,b){return b-a});document.getElementById('demo').innerHTML =nums;}</script>
</body>

运行效果：100,40,20,10,5,1

19.5 以随机顺序排序数组

<body><button onclick="myFunction()">点击</button><p id="demo"></p><script>var nums=[40,5,10,20,100,1];document.getElementById('demo').innerHTML = nums;function myFunction() {nums.sort(function(a,b){return 0.5-Math.random()});document.getElementById('demo').innerHTML =nums;}</script>
</body>

19.6 查找最高（或最低）的数组值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。

（1）sort()升序排序：

<body><button onclick="myFunction()">点击</button><p id="demo"></p><script>var nums=[40,5,10,20,100,1];document.getElementById('demo').innerHTML = nums;function myFunction() {nums.sort(function(a,b){return a-b});document.getElementById('demo').innerHTML =nums[nums.length-1];//最大值//document.getElementById('demo').innerHTML =nums[0];//最小值}</script>
</body>

（2）sort()降序排序：

<body><button onclick="myFunction()">点击</button><p id="demo"></p><script>var nums=[40,5,10,20,100,1];document.getElementById('demo').innerHTML = nums;function myFunction() {nums.sort(function(a,b){return b-a});// document.getElementById('demo').innerHTML =nums[nums.length-1];//最小值document.getElementById('demo').innerHTML =nums[0];//最大值}</script>
</body>

(3)对数组使用 Math.max():

<body><button onclick="myFunction()">点击</button><p id="demo"></p><script>var nums=[40,5,10,20,100,1];document.getElementById('demo').innerHTML = nums;function myFunction() {// document.getElementById('demo').innerHTML =Math.max.apply(null,nums);//最大值document.getElementById('demo').innerHTML =Math.min.apply(null,nums);//最小值}</script>
</body>

（4）遍历（最大值）：

<body><!-- <button οnclick="myFunction()">点击</button> --><p>最大值为：<span id="demo"></span></p><script>var nums = [40, 5, 10, 20, 100, 2];// document.getElementById("demo").innerHTML = nums;document.getElementById("demo").innerHTML = myFunction(nums);function myFunction(array) {var len = array.length;var max = -Infinity;while (len--) {if (array[len] > max) {max = array[len];}}return max;}</script></body>

19.7 排序对象数组

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button onclick="myFunction()">点击</button><p><span id="demo"></span></p><script>var nums = [{ type: "BMW", year: 2017 },{ type: "Audi", year: 2019 },{ type: "porsche", year: 2018 },];showData();function myFunction() {nums.sort(function (a, b) {return a.year - b.year;});showData();}function showData() {document.getElementById("demo").innerHTML =nums[0].type +" " +nums[0].year +"<br>" +nums[1].type +" " +nums[1].year +"<br>" +nums[2].type +" " +nums[2].year +"<br>";}</script></body>
</html>

运行效果：
BMW 2017
porsche 2018
Audi 2019

20、JavaScript 数组迭代

数组迭代方法对每个数组项进行操作。

20.1 Array.forEach()

forEach() 方法为每个数组元素调用一次函数（回调函数）。

注释：该函数接受 3 个参数：

项目值：value
项目索引：index（可省略）
数组本身：array（可省略）

  <body><!-- <button οnclick="myFunction()">点击</button> --><p><span id="demo"></span></p><script>var text = "";var nums = [1, 20, 15, 6, 100];nums.forEach(MyFunction);document.getElementById("demo").innerHTML = text;// function MyFunction(value, index, array) {//   text = text + value + "<br>";// }//或者function MyFunction(value) {text = text + value + "<br>";}</script></body>

运行效果：
1
20
15
6
100

20.2 Array.map()

返回新数组
map() 方法通过对每个数组元素执行函数来创建新数组。
map() 方法不会对没有值的数组元素执行函数。
map() 方法不会更改原始数组。

请注意，该函数有 3 个参数：

项目值：value
项目索引： index,（可省略）
数组本身：array（可省略）

示例：这个例子将每个数组值乘以2：

 <body><p><span id="demo"></span></p><script>var text = "";var nums = [1, 20, 15, 6, 100];var nums2 = nums.map(MyFunction);document.getElementById("demo").innerHTML = nums2;function MyFunction(value, index, array) {return value * 2;}//或者// function MyFunction(value) {//   return value * 2;// }</script></body>

运行效果：2,40,30,12,200

20.3 Array.filter()

返回新数组
filter() 方法创建一个包含通过测试的数组元素的新数组。（筛选出满足条件的元素组成一个新的数组）

请注意此函数接受 3 个参数：

项目值：value
项目索引： index,（可省略）
数组本身：array（可省略）

示例：这个例子用值大于 18 的元素创建一个新数组：

<body><p><span id="demo"></span></p><script>var text = "";var nums = [1, 20, 15, 6, 100];var nums2 = nums.filter(MyFunction);document.getElementById("demo").innerHTML = nums2;function MyFunction(value, index, array) {return value > 18;}</script></body>

运行效果：20,100

20.4 Array.reduce()

返回单个值
reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
reduce() 方法在数组中从左到右工作。
reduce() 方法不会减少原始数组。

请注意此函数接受 4 个参数：

总数（初始值/先前返回的值）：total
项目值： value
项目索引： index
数组本身：tarray

示例：求数组元素总和：

<body><p><span id="demo"></span></p><script>var nums = [1, 20, 15, 6, 100];//返回一个值var total = nums.reduce(MyFunction);document.getElementById("demo").innerHTML = "总和=" + total;function MyFunction(total, value, index, array) {return total + value;}//或者// function MyFunction(total, value) {//   return total + value;// }</script></body>

20.5 Array.reduceRight()

返回单个值
和 Array.reduce()工作原理一样，不过reduceRight()在数组中从右到左工作。

20.6 Array.every()

返回布尔值
every() 方法检查所有数组值是否通过测试。

请注意此函数接受 3 个参数：

项目值
项目索引
数组本身

示例：这个例子检查所有数组值是否大于 18：

 <body><p><span id="demo"></span></p><script>var nums = [1, 20, 15, 6, 100];//返回一个布尔值var isSatisfy = nums.reduce(MyFunction);document.getElementById("demo").innerHTML = "是否满足：" + isSatisfy;function MyFunction(value, index, array) {return value > 18;}//或者// function MyFunction( value) {//   return  value>18;// }</script></body>

运行结果：是否满足：false

20.7 Array.some()

返回布尔值
some() 方法检查某些数组值是否通过了测试。

请注意此函数接受 3 个参数：

项目值
项目索引
数组本身

 <body><p><span id="demo"></span></p><script>var nums = [1, 20, 15, 6, 100];//返回一个布尔值var isSatisfy = nums.some(MyFunction);document.getElementById("demo").innerHTML = "是否满足：" + isSatisfy;function MyFunction(value, index, array) {return value > 18;}//或者// function MyFunction( value) {//   return  value>18;// }</script></body>

运行效果：是否满足：true

20.8 Array.indexOf()

返回int值（位置）
indexOf() 方法在数组中搜索元素值并返回其位置。
如果未找到项目，Array.indexOf() 返回 -1。
如果项目多次出现，则返回第一次出现的位置。

请注意此函数接受 2个参数：

array.indexOf(item, start)

item：必需。要检索的项目。
start：可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

示例：检索数组中的项目 “15”：

 <body><p><span id="demo"></span></p><script>var nums = [1, 20, 15, 6, 100];var index = nums.indexOf(15);document.getElementById("demo").innerHTML = "位置：" + index;</script></body>

运行效果：位置：2

20.9 Array.lastIndexOf()

返回int值（位置）
Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

请注意此函数接受 2个参数：

array.lastIndexOf(item, start)

item：必需。要检索的项目。
start：可选。从哪里开始搜索。

示例：查找元素中最后一个15的位置：

<body><p><span id="demo"></span></p><script>var nums = [1, 20, 15, 6, 100, 15];var index = nums.lastIndexOf(15);document.getElementById("demo").innerHTML = "位置：" + index;</script></body>

运行效果：位置：5

20.10 Array.find()

返回一个满足要求元素值
find() 方法返回通过测试函数的第一个数组元素的值。

请注意此函数接受 3 个参数：

项目值
项目索引
数组本身

示例：查找第一个大于18的元素：

 <body><p><span id="demo"></span></p><script>var nums = [1, 20, 15, 6, 100, 15];var index = nums.find(myFunction);document.getElementById("demo").innerHTML ="第一个大于18的元素为：" + index;function myFunction(value, index, array) {return value > 18;}</script></body>

运行结果：第一个大于18的元素为：20

20.11 Array.findIndex()

返回一个int值（位置）
findIndex() 方法返回通过测试函数的第一个数组元素的索引。

请注意此函数接受 3 个参数：

项目值
项目索引
数组本身

示例：这个例子查找大于 18 的第一个元素的索引：

<body><p><span id="demo"></span></p><script>var nums = [1, 20, 15, 6, 100, 15];var index = nums.findIndex(myFunction);document.getElementById("demo").innerHTML ="第一个大于18的元素的位置为：" + index;function myFunction(value, index, array) {return value > 18;}</script></body>