程序与功能性Javascript

我在一个反应应用程序中有一段时间相当有限的代码，它可以在窗体中的所有用户按键上运行。它一般没有性能问题，但我正在考虑优化它，并且在for (let k in obj)和Object.keys(obj).reduce之间的performance differences有点惊讶。我认为在JS中设置函数调用堆栈等将会很昂贵，但以下例程的功能版本会将程序中的一个从水中排出（整个数量级！）。程序与功能性Javascript

这里有不同的版本：

程序

const generateProps = (fields, source, start) => { 
 
    if (!fields) return start 
 
    let finish = {...start} 
 
    for (let k of Object.keys(fields)) { 
 
    const fld = fields[k] 
 
    if (fld instanceof Array) { 
 
     if (fld.length === 0) continue 
 
     // Handle an array of scalars (e.g. phoneNumbers) 
 
     if (fld[0].hasOwnProperty('value')) { 
 
     let sf = {} 
 
     for (let i = 0; i < fld.length; i++) { 
 
      sf[i] = fld[i] 
 
     } 
 
     finish = generateProps(sf, source[k], finish) 
 
     // Handle an array of fields (e.g. addresses) 
 
     } else { 
 
     for (let i = 0; i < fld.length; i++) { 
 
      finish = generateProps(fld[i], source[k][i], finish) 
 
     } 
 
     } 
 
    } else { 
 
     finish = { 
 
     hasError: fields[k].hasError || fields[k].value === '' || finish.hasError, 
 
     isEditing: fields[k].editing || finish.isEditing, 
 
     unchanged: (!fields[k].isNew && fields[k].value === source[k]) && finish.unchanged, 
 
     hasNew: fields[k].isNew || finish.hasNew 
 
     } 
 
    } 
 
    } 
 
    return finish 
 
}

功能

const generateProps = (fields, source, start) => { 
 
    if (!fields) return start 
 
    const keys = Object.keys(fields) 
 
    return keys.reduce((props, k) => { 
 
    const fld = fields[k] 
 
    if (fld instanceof Array) { 
 
     if (fld.length === 0) return props 
 
     // Handle an array of scalars (e.g. phoneNumbers) 
 
     if (fld[0].hasOwnProperty('value')) return generateProps(fld.reduce((sf, f, i) => {sf[i] = f; return sf}, {}), source[k], props) 
 
     // Handle an array of fields (e.g. addresses) 
 
     return fld.reduce((subp, f, i) => generateProps(f, source[k][i], subp), props) 
 
    } 
 
    return { 
 
     hasError: fields[k].hasError || fields[k].value === '' || props.hasError, 
 
     isEditing: fields[k].editing || props.isEditing, 
 
     unchanged: (!fields[k].isNew && fields[k].value === source[k]) && props.unchanged, 
 
     hasNew: fields[k].isNew || props.hasNew 
 
    } 
 
    }, start) 
 
}

这里是jperf results

正如你可以看到，当你运行测试，程序版本比功能更慢了近50％。我有兴趣听到为什么会出现如此明显的差异。

来源

2017-10-13 Dallas

正如你经常那样，你链接的[基准]（https://jsperf.com/for-in-vs-for-of-keys-vs-keys-reduce）是完全有缺陷的。 – Bergi

除了有缺陷之外，'for（let ... in ...）'的运行速度比firefox ....中的最后两个快两倍，Object.keys（obj）.reduce'的运行速度比第一个快两倍两个在Chrome中 - 所以在一个浏览器上的基准测试意味着什么：p –

您使用的浏览器是什么？ '{... start}'是“程序性”jsperf中的语法错误。 – Bergi

好的，我发现了一个关键的区别！功能版本是变异start（我曾假设减少将创建一个副本，来自ramdajs背景），而程序正在创建一个副本。如果我将最高reduce调用的最后一个参数更改为{...start}，则它们差不多。

这让我想知道为什么对象传播这个慢吗？

来源

2017-10-13 04:56:17 Dallas

程序与功能性Javascript

回答

相关问题