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

本文介绍了一个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 提供了两种方式,一种是通过点操作符,另一种是通过方括号操作符。

它们的区别如下:

  1. 点操作符只能访问属性名是合法标识符的属性,而方括号操作符可以访问任意属性名。

  2. 点操作符在编写代码时更加简洁易读,而方括号操作符可以使用变量作为属性名,更加灵活。

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));
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

煦炎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值