JavaScript数组操作：去重、扁平化、排序与查找-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43190804/article/details/123117567

0.改变原数组的7个方法

push pop shift unshift
reverse
splice
sort

splice() 方法用于添加或删除数组中的元素。

一.判断是否为数组

1.1 instanceof操作符

这个操作符是检测对象的原型链是否指向构造函数的prototype对象的。

var arr = [1,2,3];
console.log(arr instanceof Array)

1.2 ES6方法 Array.isArray

var arr = [12,32,3];
console.log(Array.isArray(arr));

二.数组的去重

2.1 使用ES6的Set高阶函数

var arr = [1, 2, 3, 4, 3, 7, 7];

function quchong(array) {
     return Array.from(new Set(array))
 }
 console.log(quchong(arr))

2.2 使用数组自带的fiter()

var arr = [1, 2, 3, 4, 3, 7, 7];

var arr1 = arr.filter((ele,i,self) => {
    return self.indexOf(ele)  === i;
})
 console.log(arr1);

2.3 使用indexof()

var arr = [1, 2, 3, 4, 3, 7, 7];
var arr2 = [];  // 1.定义一个新的数组 
for (var i = 0; i < arr.length; i++) {  // 2.遍历老的数组
     if (arr2.indexOf(arr[i]) < 0) {   // 3.判断新数组里没有就加进去
         arr2.push(arr[i]);
     }
 }
 console.log(arr2);

三.数组的扁平化

3.1 Array.flat(Infinity)

当传入Infinity时，相当于扁平化最深层次的数组,不传递参数的时候默认为一层

var res = [1,2,[3,[4,[5]]]]
var arr = res.flat(Infinit);
console.log(arr)

if(Array.prototype.flat){
    arr = res.flat();
}else{
    arr = res.reduce((acc, val) => {
        return acc.concat(val)
    },[])
}

3.2 reduce + 递归也可以实现

遍历数组每一项，若值为数组则递归遍历，否则concat。

var res = [1,2,[3,[4,[5]]]]
function flatten(arr) {  
    return arr.reduce((result, item)=> {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}
console.log(flatten(res))

3.3 es6的扩展运算符 + while

// es6的扩展运算符能将二维数组变为一维
var newArr  = [].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5]
// 根据这个结果我们可以做一个遍历，若arr中含有数组则使用一次扩展运算符，直至没有为止。
var res = [1,2,[3,[4,[5]]]]
function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(res))

3.4 手写基本的递归

首先想到的肯定是遍历数组，如果某一项是基本数据类型，直接push到新数组，如果某一项是数组，则直接将这一项concat到新的数组上，当然如果是多维数组，还得用上递归的方法，继续往下层寻找，上代码：

var res = [1,2,[3,[4,[5]]]]
function flatten(arr) {
    var result = []
    for (var i = 0; i < arr.length; i++) {
        // console.log(arr[i])
        if (Array.isArray(arr[i])) {
            result = result.concat(flatten(arr[i])) // 如果是数组，则直接拼接到新数组
        } else {
            result.push(arr[i]) // 基本类型数据，直接push到新数组
        }
    }
    return result
}
console.log(flatten(res));

四.数组的排序

4.1 js中的sort()方法

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

	//数组从大到小排序
    var arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5];
    function sortNum(arr) {
      arr.sort(function (a, b) {
        return b - a;
      });
    }

    sortNum(arr);
    console.log(arr); // [23, 23, 9, 9, 8, 7, 6, 5, 5, 5, 5, 3, 1, 1, 1, 1]
    
    //数组小到大排序
    function sortNum2(a, b) {
      return a - b;
    }

    var arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5];
    arr.sort(sortNum2);
    console.log(arr); //[1, 1, 1, 1, 3, 5, 5, 5, 5, 6, 7, 8, 9, 9, 23, 23]

4.2冒泡排序

基本思想：一次比较两个相邻的数，如果不符合规则互换位置，一次比较就能够将最大或最小的值放在数组最后一位
继续对除【最后一位】之外的所有元素重复上述过程

var arr = [123, 203, 23, 13, 34, 65, 65, 45, 89, 13, 1];
    for (var i = 0; i < arr.length; i++) {
      for (var j = i + 1; j < arr.length; j++) {
        //如果第一个比第二个大，就交换他们两个位置s
        if (arr[i] > arr[j]) {
          var temp = arr[i];
          arr[i] = arr[j];
          arr[j] = temp;
        }
      }
    }
 console.log(arr); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]

排序参考文章
https://blog.youkuaiyun.com/weixin_55992854/article/details/116849789

五.取数组的最大值

5.1. es6拓展运算符…

var arr = [66,7,2,0,-3,5];

var a = Math.max(...arr)
console.log(a)

5.2 sort

//3. 数组sort()
var c= arr.reduce((num1, num2) => {
    return num1 > num2 ? num1 : num2}
)
console.log(c)

六.数组是否包含指定的元素

6.1 Arrya.includes() 方法该函数返回一个布尔值，表示该值是否存在。

 let animals = ["A", "B", "C", "D"]

 console.log(animals.includes("B"))  // true
 console.log(animals.includes("F"))  // false

6.2. Arrya.indexOf() 方法。

在需要查找的元素的确切位置的情况下，可以使用indexOf(elem)方法，该方法在指定的数组中查找elem并返回其第一次出现的索引，如果数组不包含elem则返回-1。

	let grades = ["B", "D", "C", "A"]

    console.log(grades.indexOf("A"))  // 3
    console.log(grades.indexOf("F"))  // -1

    if (grades.indexOf("F") >= 0) {
        console.log("元素存在");
    } else {
        console.log("元素不存在");
    }

七.删除数组(对象数组)中的某一个元素（常用）

####### 7.1 对象数组 forEach splice

	let selectData = [
		{ depId: 44, name: '西安' },
		{ depId: 33, name: '北京' },
		{ depId: 23, name: '上海' },
		{ depId: 35, name: '广州' },
		{ depId: 64, name: '深圳' },
	]

	// 要在数组中删除的数据
	let data = { depId: 23, name: '上海' }

	//  方法1. forEach/findIndex  splice
	let num;
	// selectData.forEach((item, index) => {
	// 	if (item.depId === data.depId) {
	// 		num = index
	// 	}	
	// })
	num = selectData.findIndex(item => item.depId === data.depId)
	
	console.log(num,'num---')
	selectData.splice(num,1)
	console.log(selectData,'selectData---')

####### 7.2 一般数组 indexOf splice 普通数组可以，对象数组不行，要用上边的方法


	let nn = selectData.indexOf(data)
	console.log(nn,'nn---')   //  -1  对象数组不行，要用上边的方法

	let checkData = ["B", "D", "C", "A","h"]
	let id = "C"
	
	let key = checkData.indexOf(id)
	console.log(key,'key---')
	checkData.splice(key,1)
	console.log(checkData,'checkData---')