Undercore:对象到平面对象的数组.什么'这就是魔法

Underscore: Array of objects to flat object. What's the magic?

本文关键字：对象 什么 平面 Undercore 数组      更新时间：2023-09-26

我正在转换这个对象数组：

[
  {
    first: {
      blah: 1,
      baz: 2
    }
  },
  {
    second: {
      foo: 1,
      bar: 2
    }
  }
]

对于这个更简单、扁平的对象：

{
  first: {
    blah: 1,
    baz: 2
  },
  second: {
    foo: 1,
    bar: 2
  }
}

我发现使用Undercore/LoDash实现这一点的两种最简单的方法是：

// Using reduce and extend
_.reduce(myArray, _.extend)
// Using assign and apply
_.assign.apply(_, myArray);

完整的代码记录在JSBin中：http://jsbin.com/kovuhu/1/edit?js，控制台

我读了很多关于apply/bind/call/assign/reduced/extend的文档……但我就是不知道幕后到底发生了什么。

有人能帮我理解这两句俏皮话的魔术秘诀吗？

为了理解这一点，让我们制作一个简单版本的assign（别名扩展）。我们只接受一个参数，我们称之为source，并将其添加到结果中。

function assign(result, source) {
  var keys = Object.keys(source),
    length = keys.length;
  for (var i=0 ; i < length; i ++) {
    var key = keys[i];
    result[key] = source[key];
  }
  return result;
}

现在让我们将输入分解为多个部分：

var a = {
  first: {
    blah: 1,
    baz: 2
  }
}
var b = {
  second: {
    foo: 1,
    bar: 2
  }
}
var input = [a, b];

现在我们可以称之为reduce:

_.reduce(input, assign);

reduce将调用分配两次：

assign(result, a);
// assigns the (key, value) pair ("first", {blah: 1, baz: 2}) to result
assign(result, b);
// assigns the (key, value) pair ("second", {foo: 1, bar: 2}) to result

谈话很便宜，给我看看代码：http://jsbin.com/hexiza/3/edit?js，控制台

您可以在Lo Dash源代码中看到如何使用createAssigner（）和baseAssign（）实现assign。

reduce获取数组中的所有值/对象中的属性，并聚合它们。在这种情况下，extend被传递给reduce，这意味着您将传递一个function(a,b)，用于扩展值a（随每个步骤进行）和对象b的所有属性（数组中的每个值，一次一个）。在单行中，下划线的reduce遍历数组，从一个对象｛｝开始，并在该对象沿输入数组遍历时将所有数组元素属性转储到该对象中。在简单的JS中，它将类似于：

var thing = {};
var deeparray = [{...}, {...}, {...}];
deeparray.forEach(function(v) {
  Object.keys(v).forEach(function(k) {
    thing[k] = v[k];
  }
}); 
return thing;

assign（在下划线中找不到）也做同样的事情，取一个对象数组并将它们全部压缩在一起。这确实是它唯一能做的事。调用_assign.apply(_, myArray)与_调用this.assign(myArray)相同——apply是一个基本的JavaScript函数，用于调用一个函数，同时"手动覆盖"该函数中关键字this的含义。_.assign.apply(_,myArray)与调用_.assing(myArray)相同，只是增加了this将是lodash的保证，而不是一些随机函数范围的上下文。

相关文章：