在回圈中宣告的函式包含對變數ESLint的不安全參考

我有以下函式，它接受一個物件和一個單詞，并通過用另一個字串替換所有出現的傳遞的單詞來回傳一個物件。相同的函式將計算單詞被替換的次數，并將其包含在替換的字串中。

例如，考慮以下情況：

  let noOfReplacements = 0;
  const reg = new RegExp(`\\bplease\\b`, "gi");

  const data = [
    {
      name: "please, I said please",
      title: "Test One",
      more: [
        {
          name: "another name",
          title: "please write something. I said please."
        }
      ]
    },
    { name: "testTwo", title: "Test Two" },
    { name: "testThree", title: "Test Three" },
    { name: "testFour", title: "Test Four" }
  ];

  const replace = (obj, reg) => {
    for (const key in obj) {
      if (typeof obj[key] === "object" && obj[key] !== null) {
        replace(obj[key], reg);
      } else if (key === "title") {
        obj[key] = obj[key].replace(reg, function () {
          noOfReplacements  = 1;
          return `repalced${noOfReplacements}`;
        });
      }
    }
    return obj;
  };

  const result = replace(data, reg)

  console.log("number of replacements", noOfReplacements);
  console.log("result", result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

這作業正常。但是，我收到一個 ESlint 警告：

Function declared in a loop contains unsafe references to variable(s) 'noOfReplacements'

在這種情況下，如何安全地更新noOfReplacements？

我看過這個例子，但該解決方案的問題在于它不考慮單獨的句子和單獨替換的單詞。所以在上面的例子中，雖然它會成功替換所有單詞，但它只會將計數增加 1，因為兩個單詞都在同一個屬性中。因此，noOfReplacements當它應該是 2 時，它仍然是 1。

uj5u.com熱心網友回復：

您可以簡單地遵循規則的標題（no-loop-func）并在回圈之外宣告您的函式，然后在回圈中呼叫它。

const replace = (object, reg) => {
  const incrementAndReplace = () => {
    noOfReplacements  = 1;
    return `repalced${noOfReplacements}`;
  };

  for (const key in object) {
    if (typeof object[key] === 'object' && object[key] !== null) {
      replace(object[key], reg);
    } else if (key === 'title') {
      object[key] = object[key].replace(reg, incrementAndReplace);
    }
  }

  return object;
};

顯示代碼片段

let noOfReplacements = 0;
const reg = /\bplease\b/gi;

const data = [
  {
    name: 'please, I said please',
    title: 'Test One',
    more: [
      {
        name: 'another name',
        title: 'please write something. I said please.',
      },
    ],
  },
  {name: 'testTwo', title: 'Test Two'},
  {name: 'testThree', title: 'Test Three'},
  {name: 'testFour', title: 'please Test Four'},
];

const replace = (object, reg) => {
  const incrementAndReplace = () => {
    noOfReplacements  = 1;
    return `repalced${noOfReplacements}`;
  };

  for (const key in object) {
    if (typeof object[key] === 'object' && object[key] !== null) {
      replace(object[key], reg);
    } else if (key === 'title') {
      object[key] = object[key].replace(reg, incrementAndReplace);
    }
  }

  return object;
};

replace(data, reg);

console.log('number of replacements', noOfReplacements);
console.log('result', data);

uj5u.com熱心網友回復：

無論如何，我總是會選擇一種方法，其中遞回實作的、特定于標題的替換函式對任何外部范圍都是不可知的。相反，它將在系結參考的背景關系中運行，該參考具有例如replacementCount內部將被跟蹤的屬性。更新由替換回呼處理。

下一個提供的遞回實作還具有Array專案和Object條目特定的迭代，以便僅處理物件自己的屬性，for...in這與迭代原型屬性的 OP 回圈不同。

function recursivelyReplaceTitleAndTrackBoundCount(data, regX) {
  let { replacementCount: count } = this;

  const boundRecursiveReplacer =
    recursivelyReplaceTitleAndTrackBoundCount.bind(this);

  const getTrackedCount = (/*match*/) => `repalced_${   count }`;

  if (Array.isArray(data)) {
    data.forEach(dataItem =>
      boundRecursiveReplacer(dataItem, regX)
    );
  } else {
    Object
      .entries(data)
      .forEach(([key, value]) => {
        if (value && (typeof value === 'object')) {

          boundRecursiveReplacer(value, regX);

        } else if ((key === 'title') && regX.test(value)) {

          data[key] = value.replace(regX, getTrackedCount);

          this.replacementCount = count;
        }
      });
  }
}

const data = [{
  name: "please, I said please",
  title: "Test One",
  more: [{
    name: "another name",
    title: "please write something. I said please.",
  }],
}, {
  name: "testTwo",
  title: "Test Two",
  even: {
    some: {
      more: {
        name: "another name",
        title: "please write something. I said please.",
      },
    },
  },
}, {
  name: "testThree",
  title: "Test Three",
}, {
  name: "testFour",
  title: "Test Four, if you ...please?",
}];

const tracker = { replacementCount: 0 };

recursivelyReplaceTitleAndTrackBoundCount
  .call(tracker, data, /\bplease\b/gi);

const { replacementCount } = tracker;

console.log({ data, replacementCount });

.as-console-wrapper { min-height: 100%!important; top: 0; }

標籤：

上一篇：如何避免潛在的無限回圈？

下一篇：在Angular中修改Observable并回傳新的Observable并進行更改