JavaScript 클래스 배열 및 반복 가능한 객체의 구현 원리에 대한 자세한 설명

let arr = [1,2,3,4,5]for(let val of arr){
    console.log(val)}

let obj = {
    name:'xiaoming',
    age:12,}for(let para of obj){ //代码会报错
    console.log(para)}

let obj = {
    from:1,
    to:5,}obj[Symbol.iterator] = function(){
    //返回一个迭代器
    return {
        current:this.from,
        last:this.to,
        next(){
            if(this.current<this.last><p>代码执行效果：</p>
<p><img src="https://img.php.cn/upload/article/000/000/067/05759c456d9c107fab3194b506d39378-4.png" alt="JavaScript 클래스 배열 및 반복 가능한 객체의 구현 원리에 대한 자세한 설명"></p>
<p>注意，以上对象虽然可以进行迭代了，但是，迭代使用使用的材料并非对象，而是<code>Symbol.iterator</code>返回的迭代器（也是一个对象）。</p>
<h2>把对象本身构造成迭代器</h2>
<p>以上代码构造了一个内建函数<code>Symbol.iterator()</code>，这个函数返回了一个迭代器对象。我们还可以采用另外一种实现迭代器的方式：把对象本身做成迭代器：</p>
<pre class="brush:php;toolbar:false">let obj = {
    from:1,
    to:5,
    [Symbol.iterator](){
        this.current = this.from;
        return this;//返回对象本身
    },
    next(){//给对象添加一个next方法
        if(this.current<this.to><p>代码执行效果和上面的图片展示相同。</p>
<blockquote><p>这么做虽然代码更加简洁了，但是由于并没有新的可迭代对象产生，我们就没有办法同时执行两个<code>for ... of</code>循环迭代同一个对象了，但是两个并行的迭代在同一个对象上是非常罕见的。</p></blockquote>
<p>我们可以总结可迭代对象的概念：</p>
<p>所谓可迭代对象，就是比普通对象多了一个名为<code>Symbol.iterator</code>方法的普通对象，这个方法返回一个迭代器。</p>
<p>或者，一个具备<code>Symbol.iterator</code>同时具备<code>next</code>方法的对象也是一个可迭代的对象。</p>
<h2>String也是可迭代的</h2>
<p>数组和字符串都是可以迭代的，我们可以很方便的使用<code>for...of</code></p>간단히 작은 실험을 해볼 수 있습니다: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let str = '123'for(let c of str){
    console.log(c)}

let str = '...'for(let c of str){
    console.log(c)}

1. for ... of 루프를 사용하여 객체를 반복할 때 Symbol.iterator 메서드가 호출됩니다. 이 메소드는 Iterator(next() 메소드가 있는 객체)를 반환해야 합니다.
2. 반복자를 가져온 후 for ... of는 다음 요소를 얻기 위해 반복자의 next() 메서드를 계속 호출합니다.
3. next() 메서드에서 반환된 콘텐츠는 {done:Boolean,value:any} 형식을 준수해야 합니다. done:true, 루프가 종료되고, 그렇지 않으면 값이 다음 값입니다.

🎜Iterator: 🎜🎜Iterator는 C++와 같은 언어에서 빌려온 개념입니다. 반복자의 원리는 포인터와 같습니다. 데이터 컬렉션 요소의 특정 지점으로 이동하면 해당 요소가 가리키는 요소를 가져오거나 다른 요소를 가져오기 위해 이동할 수 있습니다. 반복자는 배열, 연결된 목록(List), 집합(Set), 지도(Map)와 같은 다양한 데이터 구조에서 첨자를 확장하는 것과 유사합니다. code> )에는 해당 반복자가 있습니다. 🎜🎜JS의 반복자는 순회 작업을 위해 특별히 설계되었습니다. 매번 얻은 반복자는 항상 처음에 첫 번째 요소를 가리키며, 반복자는 데이터 세트의 마지막 요소를 얻을 때까지 next()라는 한 가지 동작만 수행합니다. 반복자의 위치를 ​​유연하게 이동할 수 없으므로 반복자의 작업은 특정 순서로 데이터 세트의 요소를 순회하는 것입니다. 🎜

let str = '12345'let itr = str[Symbol.iterator]()while(true){
    let result = itr.next()
    if(result.done)break;
    console.log(result.value)}

let str = '123'let arr = Array.from(str)console.log(arr)

🎜이렇게 하면 코드가 더 간결해지지만 새로운 반복 가능한 객체가 생성되지 않으므로 동일한 객체를 반복하기 위해 두 개의 for...of 루프를 동시에 실행할 수 없습니다. , 그러나 동일한 객체에 대한 두 개의 병렬 반복은 매우 드뭅니다. 🎜

let str = '123'for(let c of str){
    console.log(c)}

这对于代理对（UTF-16扩展字符）同样是有效的：

let str = '...'for(let c of str){
    console.log(c)}

执行效果如下：

String的迭代器

并非只有for...of语句能够使用迭代器，我们还可以显式的调用迭代器：

let str = '12345'let itr = str[Symbol.iterator]()while(true){
    let result = itr.next()
    if(result.done)break;
    console.log(result.value)}

代码执行效果：

以上代码执行了遍历字符串字符的操作，是不是觉得可迭代对象就没有这么神秘了！

类数组对象和可迭代对象

类数组和可迭代在遍历功能上非常相似，都可以方便的方式内部元素，但是二者仍然有明显的区别：

1. iterable可迭代对象：实现了Symbol.iterator的对象；
2. array-like类数组对象：具有数字索引，并且有length属性；

字符串就是一个即使类数组又是可迭代的对象。

可迭代和类数组对象通常都不是数组，如果我们想把一个可迭代或者类数组对象转为数组，需要使用Array.from方法。

Array.from

使用Array.from将字符串转为数组：

let str = '123'let arr = Array.from(str)console.log(arr)

代码执行效果如下：

把自定义的类数组对象转为数组：

let obj = {
    0:'0',
    1:'1',
    2:'2',
    length:3}let arr = Array.from(obj)console.log(arr)

代码执行结果：

Array.from的完整语法：

Array.from(obj[, mapFunc, thisArg])

mapFunc方法会在生成数组之前对每个可迭代或类数组元素调用，如果mapFunc是一个成员方法，可以使用thisArg提供this指针。

举个例子：

let str = '12345'let arr = Array.from(str,itm=>+itm)console.log(arr)

代码执行结果：

这里通过映射函数，将本应该生成字符数组转为数字数组。

总结

1. 可以使用for...of语法的对象被称为可迭代对象
2. 可迭代对象是在普通对象的基础上实现了Symbol.iterator方法的对象
3. Symbol.iterator方法返回了一个迭代器；
4. 迭代器包含一个next方法，该方法返回下一个元素的值；
5. next方法返回值需要满足格式{done:Boolean,value:nextVal}，当done:true时，迭代结束

6. Array.from可以把类数组和可迭代对象转为数组；

【相关推荐：javascript视频教程、web前端】

위 내용은 JavaScript 클래스 배열 및 반복 가능한 객체의 구현 원리에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!