功能--数组任意类型分类

原创已于 2023-11-24 17:36:33 修改 · 97 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #服务器 #前端

于 2023-10-20 11:06:45 首次发布

本文介绍了一个JavaScript函数groupBy，用于根据给定规则对数组进行分组。通过字符串或函数表达式，对用户信息数组按照id、性别和年龄组合进行分类，并展示了如何利用eval和方括号操作符获取和设置对象属性。

数据

//5条用户信息
const user = [
	{ id: 2, name: "张三", age: 18, sex: "男", born: "1999-01-01" },
	{ id: 2, name: "张四", age: 18, sex: "男", born: "1999-01-01" },
	{ id: 3, name: "李四", age: 21, sex: "女", born: "1996-01-01" },
	{ id: 3, name: "王五", age: 21, sex: "男", born: "1983-01-01" },
	{ id: 4, name: "赵六", age: 56, sex: "女", born: "1961-01-01" },
	{ id: 4, name: "杨梅", age: 56, sex: "女", born: "1962-01-01" },
];

编写函数实现分类功能

function groupBy(array, rules) {
	if (typeof rules === "string") {
		//字符串转换成函数eval(str)
		rules = eval(`(item)=>item.${rules}`);
	}
	const result = {};
	for (const item of array) {
		const key = rules(item);
		if (!result[key]) {
			result[key] = []; //--->>{key:[]}
		}
		result[key].push(item);
	}
	return result;
}

小知识

1、数组属性值的获取

对于对象属性的访问，JavaScript 提供了两种方式，一种是通过点操作符，另一种是通过方括号操作符。

它们的区别如下：

点操作符只能访问属性名是合法标识符的属性，而方括号操作符可以访问任意属性名。
点操作符在编写代码时更加简洁易读，而方括号操作符可以使用变量作为属性名，更加灵活。

2、eval(str) --方法--字符串转函数

let fn = eval("(item)=>item");

// -->等价于
let fn =(item)=>item;

函数的使用

let stringArr = groupBy(user, "id");
console.log(stringArr);
let groupId = groupBy(user, item => item.id);
//sec-agr
let sex_age = groupBy(user, item => `${item.sex}-${item.age}`);
console.log(sex_age);
const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let numO = groupBy(num, item => (item % 2 === 0 ? "偶数" : "奇数"));
console.log(numO);

小知识

函数的定义以及使用

function set(obj) {
	return obj.id;  //--返回id的值
} //简写成item=>item.id
console.log(set(user[0]));

function get(item) {
	return item % 2 === 0; //--返回true或false
} //简写成item=>item%2===0
for (var i = 1; i < 10; i++) {
	console.log(get(i));
}