Vue.js 和 airbnb no-param-reassign lint 规则 - 如何修改对象数组中的属性？答案

【问题标题】：Vue.js & airbnb no-param-reassign lint rule - How to modify properties in array of objects?Vue.js 和 airbnb no-param-reassign lint 规则 - 如何修改对象数组中的属性？
【发布时间】：2019-03-18 02:44:38
【问题描述】：

我正在使用 vue-cli 并接受了 ESLint 默认规则，包括我以前从未使用过的 no-param-reassign。

我有一个方法需要：

接受columnDefinition对象数组
遍历对象并为每个对象分配一个columnDefinition.originalOrder 编号
重新排序并返回数组。

no-param-reassign 一直出错，除非我使用 lodash 创建一个新对象数组并返回它。

例如，我传入

                [
                    {
                        label: 'Number of Siblings',
                        searchEnabled: false,
                        sortEnabled: false,
                        newOrder: 3,
                        lotsOfNestedData: {
                            moreNesting: 'etc',
                        },
                    },
                    {
                        label: 'Pet Name',
                        searchEnabled: false,
                        sortEnabled: false,
                        newOrder: 1,
                        lotsOfNestedData: {
                            moreNesting: 'etc',
                        },
                    },
                    {
                        label: 'Favorite Hobby',
                        searchEnabled: false,
                        sortEnabled: false,
                        newOrder: 4,
                        lotsOfNestedData: {
                            moreNesting: 'etc',
                        },
                    },
                    {
                        label: 'Favorite Outfit',
                        searchEnabled: false,
                        sortEnabled: false,
                        newOrder: 2,
                        lotsOfNestedData: {
                            moreNesting: 'etc',
                        },
                    },
                ]

如果没有这条规则，我将通过数组.each 并使用item.originalOrder = idx 属性改变对象。然后基于newOrder 使用.sort 对数组进行变异。

使用 no mutating params 规则，我能想到的最好的办法是创建一个新数组（以便我可以对其进行排序），然后创建每个对象的克隆，然后我可以将 .originalOrder 属性添加到其中。

const newSrcArray = _.map(srcArray, (item, idx) => {
    const newItem = _.cloneDeep(item);
    newItem.originalOrder = idx;
    return newItem;
});

//sort newSrcArray

return newSrcArray;

这看起来像是额外的代码和内存，但我完全遗漏了什么吗？

这种样板/内存是执行此操作的首选方式吗？

或者最好的做法只是关闭规则？

【问题讨论】：

您能否提供一些数组数据并准确说明您想要什么
嗨，boussadjra，我更新了它。谢谢！
你有排序算法吗？
我在vue forum上问了这个问题，得到了vue领导的回复：“我个人不太喜欢那个预设，因为它对我的口味来说太严格了，但那是看每个人的口味。Vue 项目本身对此没有意见。”
我取消删除它，也许它会帮助别人

标签： vuejs2 eslint eslint-config-airbnb

【解决方案1】：

vue.js 上现在有官方答案vue forum

“Vue 项目本身对此没有意见。”

所以原始问题的答案是选项 2：保留 no-param-reassign 规则不是 Vue 最佳实践。

【讨论】：