js数组方法，数组排序

作者：@kuaiquxie
作者的github：https://github.com/bitebita
本文为作者原创，如需转载，请注明出处：https://www.cnblogs.com/dzwj/p/15864943.html

js数组方法

<!DOCTYPE html>
<html>
<body>

<h2>pop()</h2>

<p>pop() 方法从数组中删除最后一个元素。</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
document.getElementById("demo2").innerHTML = fruits;

fruits.push("Kiwi");       //  向 fruits 添加一个新元素
document.getElementById("demo3").innerHTML = fruits;

fruits.shift();            // 从 fruits 删除第一个元素 "Banana"
document.getElementById("demo4").innerHTML = fruits;

</script>

</body>
</html>

删除数组元素

<!DOCTYPE html>
<html>
<body>

<p>splice() 方法可用于删除数组元素。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
  fruits.splice(0, 2);//第一个参数（0）定义新元素应该被添加的位置,第二个参数（2）定义应该删除多个元素。
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

合并数组

<!DOCTYPE html>
<html>
<body>

<p>concat() 方法用于合并（连接）数组：</p>

<p id="demo"></p>

<script>
var arr1 = ["Emma", "Isabella"];
var arr2 = ["Jacob", "Michael", "Ethan"];
var arr3 = ["Joshua", "Daniel"];

var myChildren = arr1.concat(arr2, arr3); 

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

选择数组元素

<!DOCTYPE html>
<html>
<body>

<p>当给 slice() 方法赋予两个参数时，它从 <i>start</i> 参数中选择数组元素，直到（但不包括）<i>end</i> 参数：</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

数组排序

<!DOCTYPE html>
<html>
<body>

<p>reverse() 方法反转数组中的元素。</p>

<p>通过组合 sort() 和 reverse()，您可以按降序对数组进行排序。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {

  fruits.sort();//数组排序

  fruits.reverse();//数组反转
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

该函数很适合字符串("Apple”会排在"Banana"之前)。
不过，如果数字按照字符串来排序，则"25"大于"100"，因为“2"大于"1".。
正因如此，sort()方法在对数值排序时会产生不正确的结果。

通过比值函数来改正

<!DOCTYPE html>
<html>
<body>

<p>单击按钮以升序对数组进行排序。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

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

</body>
</html>