javascript - 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 −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^−−−−−−−−−−−−^

实例:

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