如何遍历两个数组并比较它们的元素

Question

I want to compare each element of two arrays. Person writes down something in input. I want to compare what person had written with another phrase. The idea I took from this site https://lingua.com/german/dictation/ , you can check to understand what i want. It is kind of dictation, person writes down something and at the end he can check mistakes and so on. I tried to realize function with two different ways, but it does not work

let [value, setValue] = useState("currentValue")
let [correctText, setCorrectText] = useState("Every day I work hard to achive my goals")
let [answer, setAnswer] = useState<string[]>([])
// first variant
let compare = () => {
        let correctTextValue = correctText.split(" ")
        let valueArray = value.split(" ")
        let arr = []
        for (let i=0; i<correctTextValue.length; i++) {
            for (let j=0; j<valueArray.length; j++) {
                if (correctTextValue[i]===valueArray[j]) {
                    arr.push(valueArray[j])
                }
                else {
                    arr.push(correctTextValue[j]
            }
        }
        }
        setAnswer([...answer, ...arr])
    }

//second variant
let compare = () => {
        let correctTextValue = correctText.split(" ")
        let valueArray = value.split(" ")
        let arr = []
        for (let i=0; i<correctTextValue.length; i++) {
            for (let j=0; j<valueArray.length; j++) {
                if (correctTextValue[i]===valueArray[j]) {
                     setAnswer([...answer, valueArray[j]])
                }
                else {
                     setAnswer([...answer, correctTextValue[j]])
            }
        }
        }
    }
// this is simple jsx code
<input value={value} onChange={e=>setValue(e.target.value)}/>
<button onClick={() => compare()}>Submit</button>
<div>{answer.map(el=><span> {el} </span>)}</div>

Answer 1

t.fail = () => {throw Error("Unit test failed.")};
t.seqsUnequal = (a, b) => {
  /* if (a === b) return false; */
  let value, done;
  const b_iter = b[Symbol.iterator]();
  for (const a_elt of a) {
    ({value, done} = b_iter.next());
    if (done) return "b short";
    if (value !== a_elt)
      return `different values ${typeof value}:${typeof a_elt}`;
  };
  ({value, done} = b_iter.next());
  if (! done) return "a short";
  return false
};
t.seqsEqual = (a, b) => ! t.seqsUnequal(a, b);
t.exp_seq_0 = ["Greens"];
if (! t.seqsEqual(t.exp_seq_0, t.exp_seq_0)) t.fail();
if (! t.seqsEqual([], [])) t.fail();
if (t.seqsEqual(["foo"], [])) t.fail();
if (t.seqsEqual([], [0])) t.fail();
if (! t.seqsEqual(["fox", "went", "out", "on", "a", "winter's", "night"]
, ["fox", "went", "out", "on", "a", "winter's", "night"])) t.fail();

The above code will shallow-compare any two iterables for equality. But given that you know that you have arrays, you can use indexing, for a much simpler solution.

Answer 2

Here's an updated version of your code that should work (if I understood correctly). It compares the words from correctText and value word by word and marks different words as isCorrect: false . It then uses that information inside the JSX to add underline styles to incorrect words.

let [value, setValue] = useState("")
let [correctText, setCorrectText] = useState("Every day I work hard to achive my goals")
let [answer, setAnswer] = useState([])

let compare = () => {
  let correctTextValue = correctText.split(" ")
  let valueArray = value.split(" ")
  let arr = correctTextValue.map((word, index) => {
    if (word === valueArray[i]) {
      return {
        isCorrect: true,
        word: word
      };
    }
    return {
      isCorrect: false,
      word: valueArray[i]
    };
  });
  setAnswer(arr);
}


<input value={value} onChange={e=>setValue(e.target.value)}/>
<button onClick={() => compare()}>Submit</button>
<div>{
  answer.map(el => {
    return el.isCorrect
      ? <span>el.word</span>
      : <span style="text-decoration:underline">el.word</span>
  })
}</div>