JS에서 for...in과 for...of의 차이점은 무엇입니까?

이 글에서는 JavaScript에서 for...in과 for...of의 차이점을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

관련 권장 사항: "javascript 비디오 튜토리얼"

for...in과 for...of

1의 차이점은 일반적으로 for 루프를 사용합니다.

ES5 forEach를 사용할 수 있습니다. ES5에는 map, filter, some, Every, Reduce, ReduceRight 등과 같은 배열을 순회하는 기능이 있지만 반환 결과는 다릅니다. 그러나 foreach를 사용하여 배열을 순회하는 경우 break를 사용하여 루프를 중단할 수 없으며 return을 사용하여 외부 함수로 돌아갈 수 없습니다.

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="数组"
for (var index in myArray) {
  console.log(myArray[index]);
}

2. 배열 탐색 시 문제 발생1. 인덱스는 문자열 숫자이므로 기하학적 연산을 직접 수행할 수 없습니다.

2 탐색 순서가 실제 배열의 내부 순서와 일치하지 않을 수 있습니다. array

3 . for in을 사용하면 프로토타입을 포함하여 배열의 열거 가능한 모든 속성을 순회합니다. 예를 들어 Shangli의 프로토타입 메서드 메서드와 이름 속성

은 for in이 객체 순회에 더 적합하므로 배열 순회에 for in을 사용하지 마세요.

그러면 for 루프를 사용하는 것 외에도 어떻게 하면 기대치를 달성하기 위해 배열을 더 간단하고 정확하게 탐색할 수 있습니까(즉, 방법과 이름을 탐색하지 않고) ES6의 for of가 더 좋습니다.

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="数组";
for (var value of myArray) {
  console.log(value);
}

for에서 탐색되는 것은 배열의 인덱스(예: 키 이름)이고, for of에서는 배열 요소 값을 탐색한다는 점을 기억하세요. for는 배열의 요소만 순회하지만 배열의 프로토타입 특성 메서드와 인덱스 이름은 포함하지 않습니다.

3 객체 순회 객체 순회는 일반적으로 for in을 사용하여 객체의 키 이름

Object.prototype.method=function(){
　　console.log(this);
}
var myObject={
　　a:1,
　　b:2,
　　c:3
}
for (var key in myObject) {
  console.log(key);
}

for는 myObject의 프로토타입 메서드 메서드로 순회할 수 있습니다. 프로토타입 메서드와 속성을 순회하지 않으려면 루프 내에서 이를 판단할 수 있습니다.

for (var key in myObject) {
　　if（myObject.hasOwnProperty(key)){
　　　　console.log(key);
　　}
}

for..of는 숫자/배열 객체/문자 문자열/맵/집합 등을 순회하는 데 적합합니다. 그러나 forEach()와 달리 이터레이터 객체가 없기 때문에 객체를 순회할 수 없습니다. break, continue 및 return 문에 올바르게 응답할 수 있습니다

for-of 루프 일반 객체는 지원되지 않지만 객체의 속성을 반복하려는 경우 for-in 루프를 사용할 수 있습니다(이는 job) 또는 내장된 Object.keys() 메소드:

Object.prototype.method=function(){
　　console.log(this);
}
var myObject={
　　a:1,
　　b:2,
　　c:3
}

지도 반복 구조 분해는 객체에 적합합니다. 예를 들어

for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

로그인 후 복사

• myObject.toString( ) 메서드를 개체에 추가하면 개체를 문자열로 변환할 수 있습니다. 마찬가지로 myObjectSymbol.iterator를 개체 메서드에 추가하면 이 개체를 탐색할 수 있습니다.
예를 들어, 내부의 .each() 메소드를 매우 좋아하지만 jQuery 객체가 for-of 루프도 지원하길 원한다고 가정해 보겠습니다.

• for (var [key, value] of phoneBookMap) {
     console.log(key + "'s phone number is: " + value);
  }

  로그인 후 복사
  
  All Symbol.iterator가 있는 객체는 반복 가능하다고 합니다. 다음 기사에서는 반복 가능한 객체의 개념이 for-of 루프뿐만 아니라 Map 및 Set 생성자, 구조 분해 할당 및 새로운 스프레드 연산자를 포함하여 전체 언어에서 거의 사용된다는 것을 알 수 있습니다.

for...of steps
• or-of 루프는 먼저 컬렉션의 Symbol.iterator 메서드를 호출한 다음 새 반복자 개체를 반환합니다. 반복자 객체는 .next() 메서드가 있는 모든 객체일 수 있습니다. for-of 루프는 각 루프에 대해 한 번씩 이 메서드를 반복적으로 호출합니다. 예를 들어, 다음 코드는 제가 생각해 낼 수 있는 가장 간단한 반복자입니다.

  
  
  

  jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

  로그인 후 복사

Extension

• 
  
  JS 배열 탐색:

1. 일반 for 루프

길이를 반복적으로 획득하지 않도록 변수를 사용하여 배열이 클 때 최적화 효과가 분명합니다

var zeroesForeverIterator = {
 [Symbol.iterator]: function () {
   return this;
  },
  next: function () {
  return {done: false, value: 0};
 }
};

array Loop의 주요 기능은 배열을 순회하는 것입니다. 실제 성능은 for

var arr = [1,2,0,3,9];
 for ( var i = 0; i <arr.length; i++){
    console.log(arr[i]);
}

forEach보다 약합니다. 이 방법에도 작은 결함이 있습니다. break 문을 사용하여 루프를 중단할 수 없으며 return 문도 사용할 수 없습니다. 외부 함수로 돌아갑니다.

map은 "매핑"을 의미하며 사용법은 forEach와 유사합니다. 마찬가지로 break 문을 사용하여 루프를 중단하거나 return 문을 사용하여 외부로 돌아갈 수 없습니다. 기능.

for(var j = 0,len = arr.length; j < len; j++){
    console.log(arr[j]);
}

var temp=arr.map(function(val,index){
  console.log(val);  
  return val*val           
})
console.log(temp);

forEach、map都是ECMA5新增数组的方法，所以ie9以下的浏览器还不支持

5.for-of遍历

ES6新增功能

for( let i of arr){
    console.log(i);
}

• for-of这个方法避开了for-in循环的所有缺陷

• 与forEach()不同的是，它可以正确响应break、continue和return语句

for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。for-of循环也支持字符串遍历

JS对象遍历：

1.for-in遍历

for-in是为遍历对象而设计的，不适用于遍历数组。(遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串)

for-in循环存在缺陷：循环会遍历对象自身的和继承的可枚举属性(不含Symbol属性)

for (var index in arr){
    console.log(arr[index]);
    console.log(index);
}

2.使用Object.keys()遍历

返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

var obj = {'0':'a','1':'b','2':'c'};
Object.keys(obj).forEach(function(key){
     console.log(key,obj[key]);
});

3.使用Object.getOwnPropertyNames(obj)遍历

返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).

var obj = {'0':'a','1':'b','2':'c'};
Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key,obj[key]);
});

4.使用Reflect.ownKeys(obj)遍历

返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.

var obj = {'0':'a','1':'b','2':'c'};
Reflect.ownKeys(obj).forEach(function(key){
　　console.log(key,obj[key]);
});

更多编程相关知识，请访问：编程入门！！

위 내용은 JS에서 for...in과 for...of의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!