React js 重命名和解构数组长度

Question

我有一个如下的reduce函数：

let el = scopes.reduce ((tot, {actions}) => tot + actions.length, 0);

我尝试像这样转换它，但似乎这不是正确的方式:

let el = scopes.reduce ((tot, {actions.length: len}) => tot + len, 0);

有没有一种方法可以做到这一点，或者这是不可能的。

- Paul

Answer 1

你接近正确了，但是你使用了嵌套而不是点表示法：

// Outer −−−−−−−−−−−−−−−−−−−−v−−−−−−−−−−−−−−−−−−−−−−v
let el = scopes.reduce((tot, {actions: {length: len}}) => tot + len, 0);
// Inner −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^−−−−−−−−−−−−^

实例演示：

const scopes = [
    {actions: [1, 2, 3]},
    {actions: []},
    {actions: [4, 5]}
];
let el = scopes.reduce((tot, {actions: {length: len}}) => tot + len, 0);
console.log(el); // 5

记住解构的关键是语法与对象和数组字面量相同，包括嵌套；只不过信息流向相反。例如，在对象字面量中，数据从源（source）向目标（prop）从右往左流动：

let source = 42;
let obj = {prop: source};
//           <−−−−−*

在解构中，数据从源（prop）流向目标（target），方向是从左到右：

let {prop: target};
//     *−−−−−>
console.log(target); // 42

目标可以是一个变量，一个对象属性，甚至是另一个解构模式。这就是我们在上面使用的： actions 属性的目标是解构模式 {length: len}，它将 length 的值放入变量 len 中。以下是我新书的第7-1个图（请查看我的个人资料以获取链接）：

---

您还可以使用简写符号并在回调中使用 length ：

let el = scopes.reduce((tot, {actions: {length}}) => tot + length, 0);

实时示例：

const scopes = [
    {actions: [1, 2, 3]},
    {actions: []},
    {actions: [4, 5]}
];
let el = scopes.reduce((tot, {actions: {length}}) => tot + length, 0);
console.log(el); // 5

- T.J. Crowder

---

初始值“0”不是必需的。 - AZ_

@AZ_ - 有两个原因：1. 数组中的值不是简单的值，而是我们从中提取信息的对象。2. 我们不知道数组是否为空（如果没有种子值，则“reduce”将在空数组上抛出异常）。 - T.J. Crowder

啊，好的，我明白了。对于第一个元素，它不会获取长度。 - AZ_