js数组处理相关

一、数组去重

简介

处理数组时，去除重复元素是常见需求。本文阐述几种方法。

方法一：使用 Set 去重

let arr = [1, 2, 3, 4, 2, 3, 5];
let uniqueArr = Array.from(new Set(arr));each
console.log(uniqueArr); // [1, 2, 3, 4, 5]

方法二：使用 indexOf 去重

let arr = [1, 2, 3, 4, 2, 3, 5];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) uniqueArr.push(arr[i]);
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

let arrObj = [
    { name: "小红", id: 1 },
    { name: "小橙", id: 1 },
    { name: "小黄", id: 4 },
    { name: "小绿", id: 3 },
    { name: "小青", id: 1 },
    { name: "小蓝", id: 4 }
];
function fn2(tempArr) {
    let newArr = [];
    for (let i = 0; i < tempArr.length; i++) {
        if (newArr.indexOf(tempArr[i].id) == -1) {
            newArr.push(tempArr[i].id);
        } else {
            tempArr.splice(i, 1);
            i--;
        };
    };
    return tempArr;
};
console.log(fn2(arrObj));

方法三：使用 includes 去重

let arr = [1, 2, 3, 4, 2, 3, 5];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!uniqueArr.includes(arr[i])) uniqueArr.push(arr[i]);
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

方法四：双层for循环

//把重复id的删掉let arrObj = [
    { name: "小红", id: 1 },
    { name: "小橙", id: 1 },
    { name: "小黄", id: 4 },
    { name: "小绿", id: 3 },
    { name: "小青", id: 1 },
    { name: "小蓝", id: 4 }
];
function fn1(tempArr) {
    for (let i = 0; i < tempArr.length; i++) {
        for (let j = i + 1; j < tempArr.length; j++) {
            if (tempArr[i].id == tempArr[j].id) {
                tempArr.splice(j, 1);
                j--;
            };
        };
    };
    return tempArr;
};
console.log(fn1(arrObj));

方法五：对象访问属性的方法

采用对象访问属性的方法，判断属性值是否存在

let arrObj = [
    { name: "小红", id: 1 },
    { name: "小橙", id: 1 },
    { name: "小黄", id: 4 },
    { name: "小绿", id: 3 },
    { name: "小青", id: 1 },
    { name: "小蓝", id: 4 }
];
function fn3(tempArr) {
    let result = [];
    let obj = {};
    for (let i = 0; i < tempArr.length; i++) {
        if (!obj[tempArr[i].id]) {
            result.push(tempArr[i]);
            obj[tempArr[i].id] = true;
        };
    };
    return result;
};
console.log(fn3(arrObj));

方法六：Map()

has方法可以判断Map对象中是否存在指定元素,有则返回true，否则返回false

set方法可以向Map对象添加新元素 map.set(key, value)

values方法可以返回Map对象值的遍历器对象

let arrObj = [
    { name: "小红", id: 1 },
    { name: "小橙", id: 1 },
    { name: "小黄", id: 4 },
    { name: "小绿", id: 3 },
    { name: "小青", id: 1 },
    { name: "小蓝", id: 4 }
];
// 方法一：
let map = new Map();
for (let item of arrObj) {
    if (!map.has(item.id)) {
        map.set(item.id, item);
    };
};
arr = [...map.values()];
console.log(arr);
 
 
 
// 方法二： (代码较为简洁)
const map = new Map();
const newArr = arrObj.filter(v => !map.has(v.id) && map.set(v.id, v));
// const newArr = [...new Map(arrObj.map((v) => [v.id, item])).values()];
console.log(newArr);

方法7：两个数组间根据某属性值去重（适用ie）

 let list0=[
    { name: "小红", id: 1 },
    { name: "小橙", id: 2 },
    { name: "小黄", id: 3 },
    { name: "小绿", id: 4 },
    { name: "小青", id: 5 },
    { name: "小蓝", id: 6 }
];
let list1=[
    { name: "小红", id: 1 },
    { name: "小橙", id: 2 }
];list0 = this.removeDuplicates(list0, list1,'name');
 console.log(list0)
 //[{ name: "小黄", id: 3 },
 //   { name: "小绿", id: 4 },
 //   { name: "小青", id: 5 },
 //   { name: "小蓝", id: 6 }
//]
 
 
 
 removeDuplicates(a, b, prop) {
        for (var i = a.length - 1; i >= 0; i--) {
            for (var j = 0; j < b.length; j++) {
                if (a[i][prop] === b[j][prop]) {
                    a.splice(i, 1);
                    break;
                }
            }
        }
        return a;
      },

二、数组增删改及其他

• 改变原数组：push（末尾加）、pop（末尾删）、shift（开头删）、unshift（开头加）、sort（排序）、splice（删改）、reverse（倒序）
• 不改变原属组：concat（拼接）、join（字符串拼接）、map（映射）、forEach（循环）、filter（筛选）、slice（截取）

1.增加元素：

push()：将一个或多个元素添加到数组的末尾，并返回新的长度。

unshift()：将一个或多个元素添加到数组的开头，并返回新的长度。

splice()：在指定位置插入一个或多个元素。

let arr = [1, 2, 3];
arr.push(4); // arr 现在是 [1, 2, 3, 4]
arr.unshift(0); // arr 现在是 [0, 1, 2, 3, 4]
arr.splice(1, 0, 1.5); // arr 现在是 [0, 1.5, 1, 2, 3, 4]（在索引1处插入1.5）

2.删除元素：

pop()：删除并返回数组的最后一个元素。

shift()：删除并返回数组的第一个元素。

splice()：删除指定位置的元素。

let arr = [1, 2, 3, 4];
arr.pop(); // arr 现在是 [1, 2, 3]
arr.shift(); // arr 现在是 [2, 3, 4]
arr.splice(1, 1); // arr 现在是 [2, 4]（删除索引1处的元素）

3.修改元素：

直接通过索引修改元素。

使用 splice() 修改指定位置的元素。

let arr = [1, 2, 3, 4];
arr[1] = 5; // arr 现在是 [1, 5, 3, 4]
arr.splice(1, 1, 6); // arr 现在是 [1, 6, 3, 4]（替换索引1处的元素）

4.其他：

sort（排序）：

let arr_choice = [{id:1},{id:3},{id:2},{id:8},{id:6},{id:4}]
// 升序
arr_choice.sort(function(a,b){
                return b.id - a.id
            })
          console.log(arr_choice)
// 结果：[{"id":1},{"id":2},{"id":3},{"id":4},{"id":6},{"id":8}]
   
         
// 降序
arr_choice.sort(function(a,b){
                return b.id - a.id
            })
         console.log(arr_choice)
// 结果：[{"id":8},{"id":6},{"id":4},{"id":3},{"id":2},{"id":1}]

reverse（倒序）：

const arr1 = [{a:1},{b:2},{c:3},{d:4}];
const arr2 = [1,2,3,4,5,6,7];
let new1=arr1.reverse();
let new2=arr2.reverse();
console.log('倒序后',new1,new2);

concat（拼接）：（最好结合去重）

let arr1 = [1, 'a', 3];
let arr2 = ['b', 2, '0'];
let arr3 = arr1.concat(arr2);console.log(arr3); // [1, 'a', 3, 'b', 2, '0']//拼接形式字符串+字符串=字符串字符串+数组=字符串数组+数组=数组
数组+字符串=数组

join（字符串拼接）：

const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join('-'));//"Fire-Air-Water"

map（映射）:

// 在实际中，我们可以利用map方法方便获得数组对象中的特定属性值
let users = [
    {"name": "张小花", "email": "zhang@qq.com"},
    {"name": "body", "email": "body@qq.com"},
    {"name": "李小璐", "email": "li@qq.com"}
];
let newEmail = users.map(function (item) {
    return item.name;
});
console.log(newEmail.join(','));//张小花,body,李小璐
//第2种获取数组对象中的值
let emails = [];
users.map(function (item){
    emails.push(item.email);
});
console.log(emails);
// ["zhang@qq.com", "body@qq.com", "li@qq.com"]

forEach（循环）:

//forEach 循环本身不支持 continue 和 break语句的
//如果想实现break效果，可以使用 try..catch。
var brr = [1, 2, 3, 4, 5]
    try {
        brr.forEach((element)=> {
            if (element === 4) throw "number is equal to four";
            console.log(element);
        });
    } 
     catch (e) {
            console.log(e);
    }
    

filter（筛选）:

// 示例：筛选数组中的偶数
 
const numbers = [1, 2, 3, 4, 5, 6];
 
const evenNumbers = numbers.filter(number => number % 2 === 0);
 
console.log(evenNumbers); // [2, 4, 6]

slice（截取）:

//如果只传入一个大于数组长度的参数，则返回一个空数组
// 1. 正数
var arr = ['A', 'B', 'C', 'D'];
var res = arr.slice(1)

console.log('arr', arr);
// ['A', 'B', 'C', 'D']
console.log('res', res);
// ["B", "C", "D"]

// 2. 负数
var arr = ['A', 'B', 'C', 'D'];
var res = arr.slice(-1)

console.log('arr', arr);
// ['A', 'B', 'C', 'D']
console.log('res', res);
// ["D"]

// 3. 大于数组长度的值
var arr = ['A', 'B', 'C', 'D'];
var res = arr.slice(6)

console.log('arr', arr);
// ['A', 'B', 'C', 'D']
console.log('res', res);
// []

//4.两个参数var arr = ['A', 'B', 'C', 'D'];
var res = arr.slice(1, 3)

console.log('arr', arr);
// ["A", "B", "C", "D"]
console.log('res', res);
// ["B", "C"]

补充：

1.跳出多重for循环

方法一：（通常不推荐）

let list = JSON.parse(JSON.stringify(this.infoList));
let id = '6'
        let childrenobj;
        testLoop:
        for (let i = 0; i < list.length; i++){
          for (let j = 0; j < list[i].children.length; j++){
            let jlist=list[i].children[j].children
            for (let k = 0; k < jlist.length; k++){
              if(jlist[k].id==id){
                childrenobj = jlist[k].children;
                 break testLoop
              }
            }
          }
        }

方法二：（最推荐）
(function () {
    for (var i = 0; i < 6; i++) {
        for (var j = 0; j < 6; j++) {
            if (i === 2 && j === 2) {
                return;
            }
        }
    }
})();

方法三：（循环层级多的话，阅读不友好）
var breaks = false;
for (var i = 0; i < 6; i++) {
    for (var j = 0; j < 6; j++) {
        if (i === 1 && j === 1) {
            breaks = true;
            break;
        }
    }
    if (breaks) {
        break;
    }
}