JavaScript study notes: taking the maximum and minimum values ​​​​in an array_javascript skills

推薦閱讀：JavaScript學習筆記之數組的增、刪、改、查

JavaScript學習筆記之數組求和方法

JavaScript學習筆記之數組隨機排序

在實際業務中有的時候要取出數組中的最大值或最小值。但在陣列中並沒有提供arr.max()和arr.min()這樣的方法。那麼是不是可以用別的方式實現類似這樣的方法呢？那麼今天我們就來整理取出數組中最大值和最小值的一些方法。

取數組中最大值

可以先把思路理一下：

將數組中第一個元素賦值給一個變量，並且把這個變數當作最大值；

開始遍歷數組，從第二個元素開始依序和第一個元素進行比較

如果目前的元素大於目前的最大值，就把目前的元素值賦值給最大值

移動到下一個元素，繼續按前面一步操作

當陣列元素遍歷結束時，這個變數儲存的就是最大值

程式碼如下:

Array.prototype.max = function () {
// 将数组第一个元素的值赋给max
var max = this[0];
// 使用for 循环从数组第一个值开始做遍历
for (var i = 1; i < this.length; i++) {
// 如果元素当前值大于max,就把这个当前值赋值给max
if (this[i] > max) {
max = this[i];
}
}
// 返回最大的值
return max;
}

來看一個範例：

var arr = [1,45,23,3,6,2,7,234,56];
arr.max(); // 234

上面的範例，陣列中都是數值，那麼如果陣列中不全是數值會是什麼樣的效果呢？來測試一下先：

var arr = [1,45,23,3,6,2,7,234,56,'2345','a','c'];
arr.max(); // 'c'

這並不是我們想要的結果吧。 (此處跪求解)

透過前段時間的學習，都知道for迴圈表現要比forEach()差，那可以將上面的方法改成forEach()方法：

Array.prototype.max = function (){
var max = this[0];
this.forEach (function(ele,index,arr){
if(ele > max) {
max = ele;
}
})
return max;
}
var arr = [1,45,23,3,6,2,7,234,56];
arr.max(); // 234

取數組中最小值

類似取最大值的思路一樣，我們可以很輕鬆的實作arr.min()方法，取出數組中的最小值：

Array.prototype.min = function () {
var min = this[0];
this.forEach(function(ele, index,arr) {
if(ele < min) {
min = ele;
}
})
return min;
}
var arr = [1,45,23,3,6,2,7,234,56];
arr.min(); // 1

其他方法

除了上面的方案，還可以有其他方法，例如使用陣列的reduce()方法。回想前面的學過的知識，reduce()方法可以接收一個回調函數callbackfn，可以在這個回調函數中拿數組中的初始值(preValue)與數組中當前被處理的數組項(curValue)做比較，如果preValue大於curValue值回傳preValue,反之回傳curValue值，依此類推取出數組中最大值：

Array.prototype.max = function() {
return this.reduce(function(preValue, curValue,index,array) {
return preValue > curValue ? preValue : curValue;
})
}
var arr = [1,45,23,3,6,2,7,234,56];
arr.max(); // 234

同樣的也可以使用類似的方法實作arr.mix()方法，取出數組中的最小值：

Array.prototype.min = function() {
return this.reduce(function(preValue, curValue,index,array) {
return preValue > curValue ? curValue : preValue;
})
}
var arr = [1,45,23,3,6,2,7,234,56];
arr.min(); // 1

內建函數Math.max()和Math.min()方法

對於純數字數組，可以使用JavaScript中的內建函數Math.max()和Math.min()方法。使用這兩個內建函數可以分別找出數組中的最大值和最上值。在使用這兩種內建函數取出陣列最大和最小值之前，先學習Math.max()和Math.min()兩個函數。

Math.max()

Math.max()函數傳回一組數中的最大值。

Math.max(1,32,45,31,3442,4); // 3442
Math.max(10, 20); // 20
Math.max(-10, -20); // -10
Math.max(-10, 20); // 20

Math.min()

Math.min()函數和Math.max()函數剛好相反，其會傳回一組數中的最小值：

Math.min(10,20); //10
Math.min(-10,-20); //-20
Math.min(-10,20); //-10
Math.min(1,32,45,31,3442,4); //1

這些函數如果沒有參數，則結果為 -Infinity;如果有任一參數不能轉換為數值，則結果為 NaN。最主要的是這兩個函數對於數字組成的陣列是不能直接使用的。但是，這有一些類似地方法。

Function.prototype.apply()讓你可以使用提供的this與參數組與的陣列來呼叫參數。

// 取出数组中最大值
Array.max = function( array ){
return Math.max.apply( Math, array );
};
// 取出数组中最小值
Array.min = function( array ){
return Math.min.apply( Math, array );
};
var arr = [1,45,23,3,6,2,7,234,56];
Array.max(arr); // 234
Array.min(arr); // 1

Math對像也是一個對象，可以用對象的字面量來寫，如：

Array.prototype.max = function () {
return Math.max.apply({},this);
}
Array.prototype.min = function () {
return Math.min.apply({},this);
}
var arr = [1,45,23,3,6,2,7,234,56];
arr.max(); // 234
arr.min(); // 1

其實還有更簡單的方法。基於ES2015的方法來實現此功能，是使用展開運算子：

var numbers = [1, 2, 3, 4];
Math.max(...numbers) // 4
Math.min(...numbers) // 1

This operator causes the values ​​in the array to be expanded at the location of the function call.

Summary

This article summarizes several methods for extracting the maximum and minimum values ​​from an array. These methods are only for numeric arrays, but when the array contains other data types, how to only extract the largest value and the smallest value (if you know how to implement it, please give me some advice). Among these methods, using JavaScript's built-in functions Math.max() and Math.min() together with Function.prototype.apply() can easily retrieve the maximum and minimum values ​​in the array. Of course, the simplest method is to use the display operator in ES2015.

This is all about the method of obtaining the maximum and minimum values ​​​​in an array in JavaScript study notes. If you have a better solution, I hope you can share it with us in the comments below.