初识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. 生活就像海洋,只有意志坚强的人才能到达彼岸