JS數組常用操作和技巧

本文記錄的是JS中數組的一些常用操作和技巧，會持續更新。

一、求數組和數組對象中的最大最小值
二、數組去重

一、求數組和數組對象中的最大最小值

1、通過循環遍歷，臨時變量

// 求最大值，最小值類似
Array.prototype.max = function() { 
	var max = this[0];
	for (var i = 1; i < this.length; i++){ 
		if (this[i] > max) { 
			max = this[i]; 
		} 
	} 
	return max;
}

var arr = [3, 6, 1, 8, 12, 5];
arr.max();  // 12

如果你是引入工具類庫，害怕類庫也實現了同名的原型方法，可以在添加函數之前進行重名判斷：

if (typeof Array.prototype['max'] === 'undefined') { 
	Array.prototype.max = function() { 
		...
	}
}

2、通過Math.max和Math.min

可以使用 Math.max 或者 Math.min 方法來求最大最小值，但它們倆接收的參數不是數組，而是以 ,號隔開的字符串，所以結合 apply 方法，它的第一個參數是要綁定給 this 的值，第二個參數是數組形式。

Array.prototype.max = function( array ){ 
	return Math.max.apply( Math, array ); // 這裏，我們不需要改變 this指向，重要的是把我們的目標數組傳給第二個參數就行
};

3、多維數組

如果是多維數組，要求其中得最大最小值呢？
也簡單，方法都一樣，把多維數組轉化爲一維再求值就好了。

var arr = [8,5,1,[9,6],[2,10,8,[11,3]];
var target = arr.join(",").split(","); // 轉化爲一維數組
Math.max.apply(null,target); // 最大值

4、數組對象

比如，有以下數組對象：

var arr = [
	{name: 'zhangsan', age: 18},
	{name: 'lisi', age: 20},
	{name: 'wangwu', age: 17}
];

求年齡的最大值：

Array.prototype.max = function () {
    if (this.length > 0) {
        var key = arguments[0];
        return Math.max.apply(Math, this.map(function (obj) {
                return obj[key]
           }));
    }
    return false;
}

arr.max('age'); // 20

二、數組去重

1、最簡單方法（利用 indexOf ）

// 新建一個數組newArr，對要去重的數組遍歷，當值不在newArr中時（indexOf == -1）就追加入該數組中
function unique(arr){
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(newArr.indexOf(arr[i]) == -1){
            newArr.push(arr[i])
        }
    }
    return newArr;
}

var arr = [1,2,2,3,4,4,5,1,3];
var newArr = unique(arr); // [1,2,3,4,5]

2、利用對象的屬性不能相同的特點

function unique(arr){
    var newArr = [];
    var obj = {};
    for(var i=0; i<arr.length; i++){
       if(!obj[arr[i]]){
            obj[arr[i]] = 1;
            newArr.push(arr[i]);
        }
    } 
    return newArr;
}

3、使用 reduce 方法

array.reduce(function(prev, cur, index, arr), init)
它接收一個回調函數與一個初始值作爲參數，其中回調函數接受四個參數：
— 1. init 初始值，表示 reduce 方法第一次執行時的初始值，可選。
— 2. prev 上一次調用回調時的返回值，或者初始值 init，必選。prev初始值：init ? init : arr[0]；
— 3. cur 當前值，數組循環當前處理的值，必選。curr 的初始值也受到 init 的影響： init ? arr[0] : arr[1]；
— 4. index 索引值，數組循環當前處理值的索引，可選。index 的值與 cur 是同步變化的：init ? 0 : 1；
— 5. arr 當前正在被循環的數組，可選。

function unique(arr){
    return arr.reduce((prev, cur) => {
    	return prev.includes(cur) ? prev : prev.concat(cur);
	}, []);
}

4、使用 filter 方法

array.filter(function(currentValue,index,arr), thisValue)
filter()接收的回調函數，其實可以有多個參數。通常我們僅使用第一個參數，表示Array的某個元素。回調函數還可以接收另外兩個參數，表示元素的位置和數組本身。

function unique(arr){
    return arr.filter(function (cur, index, self) {
    　　return self.indexOf(cur) === index;
 　　});
}

5、利用 ES6 的 Set 方法

function unique(arr){
    //Set數據結構，它類似於數組，其成員的值都是唯一的
    return Array.from(new Set(arr)); // 利用Array.from將Set結構轉換成數組
}