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

Question

我有一个像下面这样的减少功能：

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

我试图这样改造它，但似乎它不是正确的方法：

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

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

Answer 1

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

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

现场示例：

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

解构要记住的关键是语法与对象和数组文字相同，并带有嵌套；只是信息流是另一个方向。例如，在对象字面量中，数据从右向左流动，从源 ( 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: len}}) => tot + len, 0);
console.log(el); // 5