얼마 전에 나는 사용하고 있었지만, 내가 예상한 기능을 보지 못했다.나는 계속 쳐다보다가 마침내 내가 사용한 것이'for of'가 아니라'for in'이라는 것을 깨달았다.


로리

단지 오랫동안 작용하지 않는 코드 단편을 주시했을 뿐이다.다음 두 문장은 모두 유효한 JS입니다...이것은 매우 다른 기능을 초래했다.
2019년 7월 2일 오후 15:48
이것은 나로 하여금 내가 이 차이들을 토론하기 위해 댓글을 한 편 써야 한다는 것을 생각하게 했다.우리 도착했어!

바탕 페인트

for...in와 for...of는 전통 for순환의 대체품이다.이렇게 해야 하는 것은 매우 흔한 일이다.

for (let i = 0; i < arr.length; i++) {
  // do something here
}

따라서 각종 데이터 구조를 교체하는 능력은 좋은 지름길이다.

위하다... 에 속하다

for...of는 진열과 기타 프로그래밍 가능한 부품을 위한 것이다.여기에 예가 하나 있다.

let arr = [1, 2, 3]
for (item of arr) {
  console.log(item)
}
// 1
// 2
// 3

JavaScript에는 편집할 수 없는 것이 많다는 것을 기억하십시오.이것은 그룹, 문자열, 맵, 집합 등을 포함한다.

위하다안에 있다

한편, for...in 처리 대상.

let obj = {a:1, b:2, c:3}
for (item in obj) {
  console.log(item)
}
// a
// b
// c

여기서 주의해야 할 것은 item는 사실상 주어진 키 값이 맞는 키를 인용하는 것이다.만약 우리가 가치를 얻고 싶다면, 우리는 이렇게 할 수 있다.

let obj = {a:1, b:2, c:3}
for (item in obj) {
  console.log(obj[item])
}
// 1
// 2
// 3

위하다이탈리아와 이탈리아에서.

사실이 증명하듯이 for...in 처리 대상도 있고 중용 대상도 처리할 수 있다.

let arr = [1, 2, 3]
for (idx in arr) {
  console.log(idx)
}
// 0
// 1
// 2

그것은 대상에 대한 인용 키가 아니라, 수조에서 지정한 요소의 인덱스를 인용합니다.
만약 우리가 요소 자체에 접근하고 싶다면, 우리의 코드는 다음과 같다.

let arr = [1, 2, 3]
for (idx in arr) {
  console.log(arr[idx])
}
// 1
// 2
// 3

나의 믿을 수 없는 예

따라서 왜 내 위의 예에서 두 버전이 모두 효과가 있는지, 그리고 그 차이가 무엇인지 이해할 필요가 있다.
우리는 for...of부터 시작할 것이다.

Note that this example uses and , if you want a refresher on those concepts.

위하다... 에 속하다

let obj = {a:1, b:2, c:3}
let newObj = {}
for (let [key, value] of Object.entries(obj)) {
  newObj[key] = value;
}
// newObj is { a: 1, b: 2, c: 3 }

이것은 그것을 분해하는 데 도움이 될 수 있다.Object.entries()obj를 다차원 그룹으로 바꾸고 있습니다.

[[a,1], [b,2], [c,3]]

이 그룹을 훑어볼 때, 우리는 모든 요소를 볼 것이다. 그 자체가 하나의 그룹이다.
여기서부터 우리는 한 단계에 잠입하여 이 수조 원소에 들어가 명칭key을 첫 번째 원소에 분배하고 명칭value을 두 번째 원소에 분배한다.
마지막으로, 우리는 이 키 값을 newObj 에 추가할 것이다.이것은 일부러 한 것 같다.
그럼 for...in무슨 일이 일어날까요?

위하다안에 있다

let obj = {a:1, b:2, c:3}
let newObj = {}
for (let [key, value] in Object.entries(obj)) {
  newObj[key] = value;
}
// newObj is { 0: undefined, 1: undefined, 2: undefined }

뭐?!분석해 봅시다.

As an aside, now you see why this was not at all the result I was expecting.

예전처럼 Object.entries() 이걸 주셨어요.

[[a,1], [b,2], [c,3]]

그러나 우리가 수조를 두루 훑어보았을 때, 우리가 본 것은 수조 인덱스이지 값이 아니다.그래서 우리의 첫 번째 항목은 0인데 분해할 수 있는 것이 없다.[key, value]가 key로 바뀌었고 0의 값은 value였다.

토끼굴

좋아, 우리는 바로 중점으로 돌아왔지만, 나는 왜 이 방법이 효과가 있는지 이해하기 위해 깊은 토끼굴에 빠졌다.만약 우리가 그것을 가장 기본적인 차원으로 분해하려고 한다면, 이것이 바로 우리가 연구하고 있는 코드이다.

const [key, value] = 0;

이것은 무효입니다!그것은 던져졌다undefined.그렇다면 왜 TypeError: 0 is not iterable를 사용할 때 이런 상황이 나타날까요?

// key is 0
// value is undefined

이것이 바로 왜
"배열 인덱스는 정수 이름의 열거 가능한 속성일 뿐 다른 면에서는 일반 객체 속성과 동일합니다."
우리의 for...in 예시에서 0는 number 형식이 아니라 문자열입니다!
따라서 우리가 const 해체 과정에서 발생한 일에 대해 깊이 있게 연구한 예는 바로 이렇다.

let num = 0;
const [key, value] = num.toString();
// key is '0'
// value is undefined

mozilla 문서 네, 본론으로 돌아가겠습니다.

만약 우리가 나의 예시에서 [key, value]를 사용하고 내가 바라는 결과를 보고 싶다면 그것을 얻을 수 있는 방법이 있다.

let obj = {a:1, b:2, c:3}
let newObj = {}
for (let idx in Object.entries(obj)){
    const [key, value] = Object.entries(obj)[idx]
    newObj[key] = value
}
// newObj is { a: 1, b: 2, c: 3 }

그러나 이런 상황에서 사용for...in이 더 좋은 선택이라는 것은 분명하다.

이렇게

이렇게 많은 선택이 있는 것은 좋지만, 일을 위해 적합한 도구를 선택하는 것은 매우 중요하다.그렇지 않으면, 너는 예상치 못한 행동을 할 것이다!