如何遵循Airbnb JavaScript风格为数组中所有元素的count属性加1

Hey there! Let's break down how to solve this while sticking strictly to Airbnb's JavaScript style guide, and also evaluate if Array.map() is a solid option for you.

First, let's recap the constraints: we need to increment the count property of every item in the array, without triggering ESLint rules like no-restricted-syntax or no-param-reassign, and avoid workarounds that defeat the purpose of those rules.

The Most Straightforward Compliant Solution: Traditional For Loop #

If you're okay with mutating the original array (since your goal is to update the existing items), a plain old for loop is your best bet. It avoids all the ESLint issues you ran into and is both performant and concise:

let list = [
  { name: '1', count: 0 },
  { name: '2', count: 10 },
  { name: '3', count: 18 },
];

for (let i = 0; i < list.length; i += 1) {
  list[i].count += 1;
}

Why this works:

• Airbnb's style guide doesn't restrict traditional for loops (unlike for-of or for-in which may be flagged in some ESLint configs)
• We're directly accessing array elements via their index, not modifying a function parameter (so no no-param-reassign violation)
• It's minimal, fast, and does exactly what you need without extra overhead

Evaluating the Array.map() Approach #

Your map() solution is totally valid in many scenarios—let's weigh its pros and cons:

Pros: #

• It follows immutable programming principles: instead of mutating the original array, you create a new array with updated items. This is especially useful in frameworks like React where immutability helps with state management and re-rendering logic.
• It's a declarative approach that clearly expresses your intent ("transform each item to have an incremented count")
• No ESLint rule violations at all, since you're not modifying existing objects or parameters

Cons: #

• Performance: You mentioned concerns about large items/arrays. While modern JS engines optimize spread operations (...item) very well, there is a small overhead compared to mutating the original array. That said, this overhead is negligible unless you're dealing with arrays containing tens of thousands of complex objects. For most everyday use cases, it's not a problem.
• Code verbosity: It's a bit longer than the for loop, but the tradeoff is immutability and clarity.

When to use map():

• If you need to preserve the original array (e.g., for reference later)
• If you're working in a codebase that prioritizes immutable patterns
• If you want to chain other array methods (like filter() or sort()) after the update

Why Your Other Approaches Fall Short #

Let's quickly revisit your initial attempts to clarify why they weren't ideal:

• for-of loop: Triggered no-restricted-syntax because some ESLint configs (including Airbnb's default) flag for-of as restricted (though this can be adjusted, it's better to follow the default rules if you're adhering strictly to Airbnb style).
• forEach with direct mutation: Violated no-param-reassign because you were modifying a property of the item parameter passed to the callback. Airbnb's config enforces this rule to prevent unintended side effects from modifying function parameters.
• Object.assign in forEach: While it might not trigger the ESLint error, it still mutates the original item object, which defeats the purpose of the no-param-reassign rule (which is meant to discourage modifying parameter objects entirely).

Final Recommendation #

• Go with the traditional for loop if you need to mutate the original array, want maximum performance, and prefer minimal code.
• Stick with map() if immutability is important in your codebase, you need to keep the original array intact, or you value declarative code over slight performance gains. Both are compliant with Airbnb's style guide—choose based on your specific use case!

内容的提问来源于stack exchange，提问作者Seaside Lee