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结构转换成数组
}