지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > ES6 반복자와 for.of 루프(자세한 튜토리얼)

ES6 반복자와 for.of 루프(자세한 튜토리얼)

亚连
풀어 주다： 2018-06-06 17:34:05
원래의
1477명이 탐색했습니다.

이 글은 주로 ES6 iterator(Iterator)와 for.of 루프 사용법에 대한 학습 요약을 소개하고 있습니다.

1. 반복자란 무엇인가요?

제너레이터의 개념은 Java, Python 및 기타 언어에서 사용할 수 있으며 JavaScript에도 ES6이 추가되었습니다. Iterator를 사용하면 컬렉션과 인덱스 변수를 초기화할 필요가 없습니다. 대신, 프로그래밍에 편향된 컬렉션의 다음 항목 값을 반환하기 위해 iterator 객체의 next 메서드를 사용합니다.

Iterator는 특별한 인터페이스를 가진 객체입니다. next() 메소드를 포함합니다. 호출은 value와 done이라는 두 가지 속성을 포함하는 객체를 반환합니다. Value는 현재 위치의 값을 나타내고 done은 반복이 완료되었는지 여부를 나타냅니다.

ES5의 컬렉션 탐색은 일반적으로 for 루프입니다. 배열에도 forEach 메서드가 있고 객체는 for-in입니다. ES6에는 Map과 Set이 추가되었으며 반복자는 모든 컬렉션 데이터를 통합된 방식으로 처리할 수 있습니다. Iterator는 인터페이스입니다. 데이터 구조가 반복자 인터페이스를 노출하는 한 반복은 완료될 수 있습니다. ES6에서는 for...of 루프에 대한 새로운 순회 명령을 만들었으며 Iterator 인터페이스는 주로 for...of에 의한 소비에 사용됩니다.

2. 반복자를 사용하는 방법은 무엇입니까?

1. 기본 Iterator 인터페이스

데이터 구조 Iterator 인터페이스가 배포되는 한 이 데이터 구조를 "Iterable"로 만듭니다. ES6에서는 기본 Iterator 인터페이스가 데이터 구조의 Symbol.iterator 속성에 배포되도록 규정합니다. 즉, 데이터 구조에 Symbol.iterator 데이터가 있는 한 "탐색 가능"(반복 가능)한 것으로 간주될 수 있습니다.

for...of

  1. Array

  2. Map

  3. Set

  4. String

  5. TypedArray(일반 고정 길이 버퍼 유형, 버퍼의 바이너리 데이터 읽기)

  6. 함수 내의 인수 개체

  7. NodeList 개체

위의 기본 데이터 구조에는 개체(Object)가 없는 것을 볼 수 있습니다. 왜일까요?

객체 속성의 순회 순서가 불확실하고 개발자가 수동으로 지정해야 하기 때문입니다. 본질적으로 트래버스는 선형 프로세스입니다. 비선형 데이터 구조의 경우 트래버스 인터페이스 배포는 선형 변환 배포와 동일합니다.

객체를...사용할 수 있도록 다음 처리를 수행합니다. 

// code1
function Obj(value) {
  this.value = value;
  this.next = null;
}
Obj.prototype[Symbol.iterator] = function() {
  var iterator = {
    next: next
  };
  var current = this;
  function next() {
    if (current) {
      var value = current.value;
      current = current.next;
      return {
        done: false,
        value: value
      };
    } else {
      return {
        done: true
      };
    }
  }
  return iterator;
}
var one = new Obj(1);
var two = new Obj(2);
var three = new Obj(3);
one.next = two;
two.next = three;
for (var i of one) {
  console.log(i);
}
// 1
// 2
// 3
로그인 후 복사

2. Iterator 인터페이스를 호출할 때

(1) 구조 분해 할당

// code2
let set = new Set().add('a').add('b').add('c');
let [x,y] = set;
// x='a'; y='b'
let [first, ...rest] = set;
// first='a'; rest=['b','c'];
로그인 후 복사

(2) 확장 연산자

// code3
// 例一
var str = 'hello';
[...str] // ['h','e','l','l','o']
// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']
로그인 후 복사

( 3 ) Generator 함수의 Yield* 표현식(다음 장에서 소개) 

// code4
let generator = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
var iterator = generator();
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }
로그인 후 복사

(4) 기타 경우

  1. for..of

  2. Array.from

  3. Map(), Set( ), WeakMap(), WeakSet()

  4. Promise.all()

  5. Promise.race()

3. for...of 루프의 장점

먼저 살펴보겠습니다. , 배열 forEach 메서드 단점: 

// code5
myArray.forEach(function (value) {
 console.log(value);
});
로그인 후 복사

이 쓰기 방법의 문제점은 forEach 루프를 중간에 중단할 수 없으며 break 명령이나 return 명령이 모두 적용되지 않는다는 것입니다.

다시 살펴보세요. for...in 루프 개체의 단점: 

for (var index in myArray) {
 console.log(myArray[index]);
};
로그인 후 복사

  1. 배열의 키 이름은 숫자이지만 for...in 루프는 문자열을 키 이름으로 사용합니다. "0", " 1”, “2” 등

  2. for...in 루프는 숫자 키 이름을 순회할 수 있을 뿐만 아니라 수동으로 추가된 기간 권장 사항, 심지어 프로토타입 체인의 키도 순회할 수 있습니다.

  3. 어떤 경우에는 for...in 루프 세션이 어떤 순서로든 키 이름을 순회합니다

  4. for...in 순회는 주로 객체 순회용으로 설계되었으나 배열 순회에는 적합하지 않습니다

그래서 , for...of의 중요한 장점은 무엇입니까?

  1. for...in과 동일한 간결한 구문을 가지지만 for...in의 단점은 없습니다.

  2. forEach 메소드와 다르게 break, continue, return과 함께 사용할 수 있습니다

  3. 모든 데이터 구조를 탐색하기 위한 통합 작업 인터페이스 제공

for (var n of fibonacci) {
 if (n > 1000) {
  break;
  console.log(n);
 }
}
로그인 후 복사

4. 각 데이터 유형에 대해 for...of 루프를 사용하는 방법은 무엇입니까?

(1) 배열

for...of 루프를 사용하면 배열을 순회하여 키 값을 얻을 수 있습니다. ​​

var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
  console.log(a); // 0 1 2 3
}
for (let a of arr) {
  console.log(a); // a b c d
}
로그인 후 복사

for...of 루프는 traverser 인터페이스를 호출하고, 배열의 traverser 인터페이스는 다음과 같은 값만 반환합니다. 숫자형 인덱스 

let arr = [3, 5, 7];
arr.foo = 'hello';
for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}
for (let i of arr) {
  console.log(i); // "3", "5", "7"
}
로그인 후 복사

(2) Map 및 Set 구조 

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Trident
// Webkit
var es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");
for (var [name, value] of es6) {
  console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262
로그인 후 복사

for...of 루프가 Map 및 Set 구조를 순회할 때 순회 순서는 다음과 같은 순서임을 알 수 있습니다. 각 멤버는 데이터 구조에 추가됩니다. Set 구조를 탐색할 때 반환되는 것은 값이고, Map 구조를 탐색할 때 반환되는 것은 배열입니다. 배열의 두 멤버는 키 이름과 키 값입니다. 현재 맵 멤버입니다.

(3) 배열 유사 객체

String

// 普通的字符串遍历
let str = "yuan";
for (let s of str) {
 console.log(s); // y u a n
}

// 遍历含有 32位 utf-16字符的字符串
for (let x of 'a\uD83D\uDC0A') {
 console.log(x);
}
// 'a'
// '\uD83D\uDC0A'
로그인 후 복사

DOM NodeList 객체

let paras = document.querySelectorAll("p");
for (let p of paras) {
 p.classList.add("test");
}
로그인 후 복사

arguments object

function printArgs() {
 for (let x of arguments) {
  console.log(x);
 }
}
printArgs("a", "n");
// "a"
// "n"
로그인 후 복사

배열 유사 객체의 순회 처리를 위한 Iterator 인터페이스가 없습니다.

Array.from 메서드를 빌려 프로세스로

let arrayLike = {
  length: 2,
  0 : 'a',
  1 : 'b'
};
// 报错
for (let x of arrayLike) {
  console.log(x);
}
// 正确
for (let x of Array.from(arrayLike)) {
  console.log(x);
}
로그인 후 복사

(4) 객체

일반 객체의 경우 for...of를 직접 사용하여 순회할 수 없습니다. 그렇지 않으면 오류가 보고되며 이를 사용하려면 Iterator 인터페이스를 배포해야 합니다. 다음 두 가지 방법으로 배포하세요. 

// 方法一：使用 Object.keys 方法讲对象的键名生成一个数组
for (var key of Object.keys(someObject)) {
 console.log(key + ": " + someObject[key]);
}

// 方法二：使用Generator 函数将对象重新包装一下
function * entries(obj) {
  for (let key of Object.keys(obj)) {
    yield[key, obj[key]];
  }
}
for (let[key, value] of entries(obj)) {
  console.log(key, "->", value);
}
// a -> 1
// b -> 2
// c -> 3
로그인 후 복사

三、迭代器应用实例

1、斐波那契数列

下面我们就使用迭代器来自定义自己的一个斐波那契数列组，我们直到斐波那契数列有两个运行前提，第一个前提是初始化的前两个数字为0，1,第二个前提是将来的每一个值都是前两个值的和。这样我们的目标就是每次都迭代输出一个新的值。

var it = { [Symbol.iterator]() {
    return this
  },
  n1: 0,
  n2: 1,
  next() {
    let temp1 = this.n1,
    temp2 = this.n2;
    [this.n1, this.n2] = [temp2, temp1 + temp2]
    return {
      value: temp1,
      done: false
    }
  }
}

for (var i = 0; i < 20; i++) {
  console.log(it.next())
}

// 
  "value": 0,
  "done": false
} {
  "value": 1,
  "done": false
} {
  "value": 1,
  "done": false
} {
  "value": 2,
  "done": false
} {
  "value": 3,
  "done": false
} {
  "value": 5,
  "done": false
}... {
  "value": 2584,
  "done": false
} {
  "value": 4181,
  "done": false
}
로그인 후 복사

2、任务队列迭代器

我们可以定义一个任务队列，该队列初始化时为空，我们将待处理的任务传递后，传入数据进行处理。这样第一次传递的数据只会被任务１处理，第二次传递的只会被任务２处理… 代码如下：

var Task = {
  actions: [],
  [Symbol.iterator]() {
    var steps = this.actions.slice();
    return { [Symbol.iterator]() {
        return this;
      },
      next(...args) {
        if (steps.length > 0) {
          let res = steps.shift()(...args);
          return {
            value: res,
            done: false
          }
        } else {
          return {
            done: true
          }
        }
      }
    }
  }
}

Task.actions.push(function task1(...args) {
  console.log("任务一：相乘") return args.reduce(function(x, y) {
    return x * y
  })
},
function task2(...args) {
  console.log("任务二：相加") return args.reduce(function(x, y) {
    return x + y
  }) * 2
},
function task3(...args) {
  console.log("任务三：相减") return args.reduce(function(x, y) {
    return x - y
  })
});

var it = Task[Symbol.iterator]();
console.log(it.next(10, 100, 2));
console.log(it.next(20, 50, 100)) console.log(it.next(10, 2, 1))
 // 
任务一：相乘 {
  "value": 2000,
  "done": false
}任务二：相加 {
  "value": 340,
  "done": false
}任务三：相减 {
  "value": 7,
  "done": false
}
로그인 후 복사

3、延迟执行

假设我们有一个数据表，我们想按大小顺序依次的获取数据，但是我们又不想提前给他排序，有可能我们根本就不去使用它，所以我们可以在第一次使用的时候再排序，做到延迟执行代码：

var table = {
  "d": 1,
  "b": 4,
  "c": 12,
  "a": 12
}
table[Symbol.iterator] = function() {
  var _this = this;
  var keys = null;
  var index = 0;

  return {
    next: function() {
      if (keys === null) {
        keys = Object.keys(_this).sort();
      }

      return {
        value: keys[index],
        done: index++>keys.length
      };
    }
  }
}

for (var a of table) {
  console.log(a)
} 
// a b c d
로그인 후 복사

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何实现微信分享朋友圈,发送朋友

详解如何实现vuex（详细教程）

通过vue.js实现微信支付

위 내용은 ES6 반복자와 for.of 루프(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
es6 반복자
원천：php.cn
이전 기사：WeChat 애플릿을 통해 카운트다운 효과를 얻기 위해 인증 코드를 구현하는 방법 다음 기사：vue에서 더 나은 스크롤 스크롤 플러그인 사용
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2194
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2341
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1963
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1851
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1910
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿