JS常用数组方法及计算场景

一、常用方法

数组：let numbers = [1, 2, 3, 4, 5, 6, 7];

1、filter——返回该函数会返回true的项组成的数组

// filter
let filterResult = numbers.filter((item, index, array)=> item > 2);
console.log(filterResult); // [3, 4, 5, 6, 7]

2、map——返回每次函数调用的结果组成的数组

// 当数组为dom集合时，numbers.map(function (index, item, array)
let mapResult = numbers.map((item, index, array)=>item * 2);
console.log(mapResult); // [2, 4, 6, 8, 10, 12, 14]

3、some——如果该函数任意一项返回true，则返回true；

let someResult = numbers.some((item, index, array)=>item > 2);
console.log(someResult); // true

4、every——如果该函数每一项都返回true，则返回true；

let everyResult = numbers.every((item, index, array)=>item > 2);
console.log(everyResult); // false

5、find—返回第一个符合条件的项

let findResult = numbers.find((item, index, array)=>item > 2);
console.log(findResult); // 3

6、findIndex—返回第一个符合条件的位置，如果所有成员都不符合条件，则返回-1

let findIndex = numbers.findIndex((item, index, array)=>item > 2);
console.log(findIndex); // 2

7、includes—判断数组是否包含指定元素，如果是返回 true，否则false

numbers.includes(2);	//true
numbers.includes(10);	//false

8、reduce—累计

//语法：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

//计算数组每项加起来的和
const arr = [1,2,3,4,5];
const sum = arr.reduce((prev,cur,index,arr)=>prev + cur);
console.log('sum:',sum);	// 15

二、计算场景

1、arr1是原数组，arr2是增删改后的数组，场景：对一个list增删改，要求把删掉的数据改个状态（disabled=0）和新增修改的一起回传过去

var arr1 = [{
	"disabled": 1,
	"id": 159,
	"dictKey": "warehouse_dept_1",
	"dictValue": "仓储一部"
 },{
	"disabled": 1,
	"id": 160,
	"dictKey": "warehouse_dept_2",
	"dictValue": "仓储二部"
 },{
      "disabled": 1,
      "id": 161,
      "dictKey": "warehouse_dept_3",
      "dictValue": "仓储三部"
  }
]
var arr2 = [{
        "disabled": 1,
        "id": 159,
        "dictKey": "warehouse_dept_1",
        "dictValue": "仓储一部11"
    },
    {
        "disabled": 1,
        "id": 160,
        "dictKey": "warehouse_dept_2",
        "dictValue": "仓储二部"
    },
    {
        "disabled": 1,
        "dictValue": "ceshi"
    },
]
let commonIds = arr2.filter((x) => arr1.find((y) => y.id === x.id));
let deleteIds = arr1.filter((x) => !arr2.find((y) => y.id === x.id));
let adds = arr2.filter((x) => !x.id);
deleteIds = deleteIds.map((item) => {
  item.disabled = 0;
  return item;
});
let result = [...commonIds, ...adds, ...deleteIds];

3、一维数组转tree结构

let arr = [
  { id: 1, name: '部门1', pid: 0 },
  { id: 2, name: '部门2', pid: 1 },
  { id: 3, name: '部门3', pid: 1 },
  { id: 4, name: '部门4', pid: 3 },
  { id: 5, name: '部门5', pid: 4 },
];

方法1：

let newArray = arr.filter((item) => item.pid === 0);

function arrToTree(arr, newArray) {
	newArray.forEach((item) => {
		arr.forEach((ret) => {
			if (item.id === ret.pid) {
				if (!item.hasOwnProperty('children')) {
					item.children = [];
				}
				item.children.push(ret);
			}
		});
		if (item.hasOwnProperty('children')) {
			arrToTree(arr, item.children);
		}
	});
}
arrToTree(arr, newArray);
console.log(newArray); // 最终得到的新数组；

方法2：

function toTree(data) {
  let result = []
  if (!Array.isArray(data)) {
    return result
  }
  let map = {}
  data.forEach(item => {
    map[item.id] = item
  })
  data.forEach(item => {
    let parent = map[item.pid]
    if (parent) {
      (parent.children || (parent.children = [])).push(item)
    } else {
      result.push(item)
    }
  })
  return result
}
console.log(toTree(arr)) // 最终得到的新数组；

4、树转一维数组

const treeData = [{
	id: 1,
	label: '一级',
	parentId: '0',
	children: [{
		id: 2,
		label: '二级',
		parentId: 1,
		children: [{
			id: 3,
			label: '三级1',
			parentId: 2,
			children: [
				{
					id: 4,
					label: '四级1',
					parentId: 3
				},
				{
					id: 5,
					label: '四级2',
					parentId: 3,
				}
			]
		},
		{
			id: 6,
			label: '三级2',
			parentId: 2,
		},
		{
			id: 7,
			label: '三级3',
			parentId: 2,
		}]
	}]
}]
//计算每个节点下的所有的节点的个数，没有默认为1
const calcCount = (list) => {
	return list.reduce((prev, current, index) => {
		return prev += current.children ? calcCount(current.children) : 1
	}, 0)
}
const changeData = (list, source) => {
	return list.reduce((prev, current, index) => {
		const { children, label } = current;
		const num = children ? calcCount(children) : 1
		//计算每个节点下直系节点的个数
		//const num = children ? children.length : 1
		const item = { source, target: label, num };
		return prev.concat(item).concat(children ? changeData(children, label) : []);
	}, []);
};
const targetData = changeData(treeData, treeData[0].label);
console.log(targetData);

5、按id分组

const arr = [
    { id:1, name: "张三", age: 16 },
    { id:1, name: "李四", age: 15 },
    { id:2, name: "王五", age: 16 },
    { id:3, name: "赵六", age: 15 },
    { id:2, name: "孔七", age: 16 }
]; 
function groupArrayByKey(arr = [], key) {
    return arr.reduce((prev, cur) => (!prev[cur[key]] && (prev[cur[key]] = []), prev[cur[key]].push(cur), prev), {})
}
groupArrayByKey(arr, "id");