初识JavaScript第七节

❤️没有十全十美的文章，也没有彻头彻尾的绝望。❤️

JavaScript 数组排序

  sort() 是最强大的数组方法之一。

数组排序

  sort() 会以字母顺序对数组进行排序。

实例：

<button onclick="myFunction()">点击排序</button>

<p id="jg"></p>

<script>
var fruits = ["xfx", "ds", "jg", "lg"];
document.getElementById("jg").innerHTML = fruits;

function myFunction() {
  fruits.sort();
  document.getElementById("jg").innerHTML = fruits;
}
</script>

输出结果：

xfx,ds,jg,lg
// 默认输出结果
ds,jg,lg,xfx
// 点击排序后的结果

反转数组

  reverse() 可以反转数组中的元素，您可以利用它以降序的方式对数组进行排序。

实例：

<button onclick="myFunction()">点击排序</button>

<p id="jg"></p>

<script>
var fruits = ["application", "bridge", "centos", "destination"];
document.getElementById("jg").innerHTML = fruits;

function myFunction() {
  fruits.sort();
  fruits.reverse();
  document.getElementById("jg").innerHTML = fruits;
}
</script>

输出结果：

application,bridge,centos,destination
// 默认的输出结果
destination,centos,bridge,application
// 点击排序后的输出结果

数字排序

  默认来讲sort() 函数会按照字符串顺序对值进行排序。这个函数很适合字符串（"a"开头的单词会排在 "b"开头的单词之前）。不过，如果数字按照字符串来排序，则 “35” 大于 “230”，因为 “35” 开头的"3"大于 “230"开头的"2”。正因如此，sort() 在对数值排序时会产生不正确的结果。因此我们通过一个比值函数来修正这个问题。

实例：

<button onclick="myFunction()">点击排序</button>

<p id="jg"></p>

<script>
var points = [65, 165, 2, 9, 33, 15];
document.getElementById("jg").innerHTML = points;  

function myFunction() {
  points.sort(function(a, b){return a - b});
  document.getElementById("jg").innerHTML = points;
}
</script>

输出结果：

65,165,2,9,33,15
// 默认输出结果
2,9,15,33,65,165
// 点击排序后的输出结果

使用相同的技巧对数组进行降序排序。

实例：

<button onclick="myFunction()">点击降序</button>

<p id="jg"></p>

<script>
var points = [65, 165, 2, 9, 33, 15];
document.getElementById("jg").innerHTML = points;

function myFunction() {
  points.sort(function(a, b){return b - a});
  document.getElementById("jg").innerHTML = points;
}
</script>

输出结果：

65,165,2,9,33,15
// 默认的输出结果
165,65,33,15,9,2
// 降序之后的输出结果

比值函数

  比较函数的目的就是定义另一种排序顺序。比较函数应该返回一个负，零或正值，结果取决于定义的参数。

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

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

实例：

<button onclick="myFunction1()">按字母排序</button>
<button onclick="myFunction2()">按数字排序</button>

<p id="jg"></p>

<script>
var points = [78, 351, 6, 52, 24, 95];
document.getElementById("jg").innerHTML = points;  

function myFunction1() {
  points.sort();
  document.getElementById("jg").innerHTML = points;
}
function myFunction2() {
  points.sort(function(a, b){return a - b});
  document.getElementById("jg").innerHTML = points;
}
</script>

输出结果：

78,351,6,52,24,95
// 默认输出结果
24,351,52,6,78,95
// 按字母排序的输出结果
6,24,52,78,95,351
// 按数字排序的输出结果

以随机顺序排序数组

实例：

<button onclick="myFunction()">点击排序</button>

<p id="jg"></p>

<script>
var points = [6,24,52,78,95,351];
document.getElementById("jg").innerHTML = points;  

function myFunction() {
  points.sort(function(a, b){return 0.5 - Math.random()});
  document.getElementById("jg").innerHTML = points;
}
</script>

输出结果：

6,24,52,78,95,351
// 默认排序
95,78,52,6,24,351
// 每点击一次按钮都将随机排序

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

  JavaScript 不提供查找数组中最大或最小数组值的内建函数。不过，在对数组进行排序之后，您可以使用索引来获得最高或最低值，升序排序。

实例：

<p>最低值是：<span id="jg"></span></p>

<script>
var points = [95,78,52,6,24,351];
points.sort(function(a, b){return a-b});
document.getElementById("jg").innerHTML = points[0];
</script>

输出结果：

最低值是：6
// 输出结果为数组中最小的值

对数组使用 Math.max()

  我们可以使用 Math.max.apply 来查找数组中的最高值。

实例：

<p>最高值是：<span id="jg"></span></p>

<script>
var points = [95,78,52,6,24,351];
document.getElementById("jg").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}
</script>

输出结果：

最高值是：351
// 输出结果为最大的数值

tips：Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

我的 Min / Max JavaScript 方法

  最快的解决方法是使用“自制”方法。此函数遍历数组，用找到的最高值与每个值进行比较。

实例（查找最大值）：

<p>最高值是：<span id="jg"></span></p>

<script>
var points = [95,78,52,6,24,351];
document.getElementById("jg").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
  var len = arr.length;
  var max = -Infinity;
  while (len--) {
    if (arr[len] > max) {
      max = arr[len];
    }
  }
  return max;
}
</script>

输出结果：

最高值是：351
// 使用此函数将输出数组中最大的数值

实例（查找最小值）：

<p>最小值是：<span id="jg"></span></p>

<script>
var points = [95,78,52,6,24,351];
document.getElementById("jg").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
  var len = arr.length;
  var min = Infinity;
  while (len--) {
    if (arr[len] < min) {
      min = arr[len];
    }
  }
  return min;
}
</script>

输出结果：

最小值是：6
// 使用此函数将输出数组中最小的数值

排序对象数组

实例：

<button onclick="myFunction()">排序</button>
​
<p id="jg"></p>
​
<script>
var cars = [
  {type:"xfx", year:2005},
  {type:"ds", year:2011},
  {type:"lg", year:2007}
];
​
displayCars();
​
function myFunction() {
  cars.sort(function(a, b){return a.year - b.year});
  displayCars();
}
​
function displayCars() {
  document.getElementById("jg").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

输出结果：

xfx 2005
ds 2011
lg 2007
// 默认输出结果
xfx 2005
lg 2007
ds 2011
// 点击排序后的输出结果

  即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序，解决方法是通过比较函数来对比属性值。

实例：

<button onclick="myFunction()">排序</button>

<p id="jg"></p>

<script>
var cars = [
  {type:"xfx", year:2005},
  {type:"ds", year:2011},
  {type:"lg", year:2007}
];

displayCars();

function myFunction() {
  cars.sort(function(a, b){
    var x = a.type.toLowerCase();
    var y = b.type.toLowerCase();
    if (x < y) {return -1;}
    if (x > y) {return 1;}
    return 0;
  });
  displayCars();
}

function displayCars() {
  document.getElementById("jg").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

输出结果：

xfx 2005
ds 2011
lg 2007
// 默认的输出结果
ds 2011
lg 2007
xfx 2005
// 点击排序后的输出结果

第七节到这里就结束了

我们将会在下一节学到数组迭代。

Life is like the ocean, only the strong-willed can reach the other shore. 生活就像海洋，只有意志坚强的人才能到达彼岸