带有nested.forEach() 的while 循环会产生no-loop-func es-lint 警告

Question

This is a javascript question. I learned a sorting pattern in a Ruby tutorial a little while ago, now I'm trying to reuse the same pattern in javascript:

const sortMyArray = (someArr) => {

let arrToSort = [...someArr];

let sorted = false;

  while(!sorted) {
   sorted = true;

    array1.forEach((foo) => {

      array2.forEach((bar, i) => {

        if (foo.attr !== bar.attr) {

          let plucked = arrayToSort.splice(i, 1)
          arrayToSort.push(plucked[0])
          sorted = false
        }
      })
    })
  }

}

I'm comfortable with this pattern and would like to keep it. I've had to configure es-lint to ignore no-loop-func at the top of the file (the offending variable is the sorted variable being passed from outside of the inner loop), but I'd like to avoid doing this with javascript as the warning is useful, I just don't think it helps with this example.

Is there any other way to achieve this same sort that plays nicely in javascript?

Answer 1

https://eslint.org/docs/rules/no-loop-func

The warning should be more specific that it's about the sorted variable:

Function declared in a loop contains unsafe references to variable(s) 'sorted'. (no-loop-func)

What is doesn't like here is that there's a function inside a loop that modifies sorted , which is outside--it's not aware that this function is guaranteed to only run only once within your while loop.

Anyway, you can resolve this by instead using:

for (const foo of array1) {

or if you need the index (such as for the second loop):

for (let i = 0; i < array2.length; i++) {
    const bar = array2[i];

Now you are no longer creating a function inside a loop that uses an external variable.