react中以一个数组中的某个属性为索引，进行两个数组查询(相关知识点JavaScript中的reduce()和map()的区别)

最新推荐文章于 2022-11-27 11:46:47 发布

看烟火的鱼

最新推荐文章于 2022-11-27 11:46:47 发布

阅读量546

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_45336072/article/details/116596952

版权

var users=[{
	create_time: 1589444521714
	email: "18269757141@qq.com"
	password: "2d551857e93b0cc1579b36d06562d1db"
	phone: "18269757141"
	role_id: "5ebcff3b8884a52d6820ed3e"
	username: "zhangdada"
	__v: 0
	_id: "5ebcffa98884a52d6820ed3f"
}]
var roles = [
{_id: "5ebcff3b8884a52d6820ed3e",name: "超级管理员"},
{_id: "5ec4e3d3a910a50430d72509",name: "admin"},
{_id: "5f9cfd4397ac793b4424754a",name: "ee"}
]

我们看users的role_id和roles的_id相对应，所以我们希望通过users的role_id找到roles所对应的name值

 initRoleNames = (roles) => {
    const roleNames = roles.reduce((pre, role) => {
      pre[role._id] = role.name
      //我们也可以把所有的数据都放进去，不止只放一个name 
       //pre[role._id] = role
      //console.log(pre);   //{5ebcff3b8884a52d6820ed3e: "超级管理员", 5ec4e3d3a910a50430d72509: "admin", 5f9cfd4397ac793b4424754a: "ee"}
      return pre           //把pre放入{}中
    }, {})
    // 保存
    this.roleNames = roleNames     //保存数据进行所属角色渲染
    //{5ebcff3b8884a52d6820ed3e: "超级管理员", 5ec4e3d3a910a50430d72509: "admin", 5f9cfd4397ac793b4424754a: "ee"}
  }
  initRoleNames(roles);
//当我们知道某个user的role_id时，用roles匹配roleNames里面的_id得到name值(users的role_id和roles的_id相对应)
getRoleNames = (role_id) => this.roleNames[role_id]
getRoleNames(role_id);//5ebcff3b8884a52d6820ed3e=》超级管理员

相关知识点（JavaScript中的reduce()和map()的区别）
关于map()的相关知识点
 关于reduce()的相关知识点
关于map()的相关知识点
例如，如果要创建一个新数组使存储在数组中的数字翻倍，可以按如下方式编写。

var numbers = [1,2,3,4,5];

var result = numbers.map(function(num) {

  return num * 2;

})

console.log(result);    //[2,4,6,8,10]

在此示例中，将对包含数值的数组执行map()。

你可以看到在函数内将数组的各元素进行2倍的return。

由此，执行结果中知道可以生成原来的数值为2倍的数组。

严格地说，使用reduce()不可能做同样的事情，但是如果你使用map()，你可以通过一个非常简单的描述来有效地完成。
关于reduce()的相关知识点
假设我们有这样的一个数组：

var numbers = [1,2,3,4,5,6,7,8,9];
var strings = ['苹果','香蕉','梨子','葡萄','荔枝'];

在这个例子中，我们准备了一个存储数字数据的数组和一个存储字符串数据的数组。

使用reduce()最明显的方法是计算存储在这种数组中的所有值的值。

如果是数值，则可以计算求和值，如果是字符，则可以将单个字符串连接在一起。

下面我们来看如何使用reduce()?

reduce()可以在目标数组上执行任意函数。

数组.reduce(function(累积值, 元素) { })

第一个参数的“累积值”表示通过按顺序处理数组元素获得的值。

第二个参数“元素”表示当前处理的数组元素。

在该函数中使用“return”，通过返回任意处理，结果保留在累积值中，最后可以获得一个值。

我们来看具体的示例

对数组的每个元素求和

代码如下

var numbers = [1,2,3,4,5,6,7,8,9];

var result = numbers.reduce(function(a, b) {

  return a + b;

})

console.log(result);			//45

在此示例中，对存储1到9的数字的数组执行reduce()。

在函数中，您可以看到累加的值和每个元素都被简单地添加。

在第一次处理中变为“1 + 2”，将和存储在累积值中，并在下一次处理中执行“3 + 3”。

通过这样做，运行结果输出所有值相加为“45”。

最后我们需要说明一点：

reduce()的函数中使用“break”中断处理的方法是不可以的，因此作为替代方案，存在利用数组的索引号的中断方法，我们下面来简单看一下。

实际上，reduce()的函数中最多可以有四个参数。

配列.reduce(function(累积值, 元素, 索引号, 数组) { })

第三个参数“索引号”表示当前处理的数组的索引号。

第四个参数“数组”表示当前正在处理的数组本身。

利用这个参数，可以如下来实现中断过程！

var numbers = [1,2,3,4,5,6,7,8,9];

var result = numbers.reduce(function(a, b, index, arr) {

  if(index >= 3) arr.splice(1);

  return a + b;

});

console.log(result);				//10