JavaScript 可迭代对象


目录

    显示目录

可迭代对象是可以使用 for..of 进行迭代的对象。

从技术上讲,可迭代对象必须实现 Symbol.iterator 方法。

迭代字符串

您可以使用 for..of 循环来迭代字符串的元素:

例子

for (const x of "W3Schools") {
  // code block to be executed
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over a String:</p>

<p id="demo"></p>

<script>
// Create a String
const name = "W3Schools";

// List all Elements
let text = ""
for (const x of name) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

迭代数组

您可以使用 for..of 循环来迭代数组的元素:

例子

for (const x of [1,2,3,4,5]) {
  // code block to be executed
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over an Array:</p>

<p id="demo"></p>

<script>
// Create aa Array
const letters = ["a","b","c"];

// List all Elements
let text = "";
for (const x of letters) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

JavaScript 迭代器

迭代器协议定义如何从对象生成值序列

当对象实现 next() 方法时,它就成为迭代器

next() 方法必须返回具有两个属性的对象:

  • 值(下一个值)

  • 完成(对或错)

value

迭代器返回的值
(如果done为true则可以省略)

done

true 如果迭代器已完成
false 如果迭代器产生了新值



自制可迭代

这个迭代返回永无止境:10,20,30,40,....每次 next() 被调用:

例子

// Home Made Iterable
function myNumbers() {
  let n = 0;
  return {
    next: function() {
      n += 10;
      return {value:n, done:false};
    }
  };
}

// Create Iterable
const n = myNumbers();
n.next(); // Returns 10
n.next(); // Returns 20
n.next(); // Returns 30

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Home Made Iterable:</p>

<p id="demo"></p>

<script>
// Home Made Iterable
function myNumbers() {
  let n = 0;
  return {
    next: function() {
      n += 10;
      return {value:n, done:false};
    }
  };
}

// Create Iterable
const n = myNumbers();
n.next(); // 10
n.next(); // 20
n.next(); // 30

document.getElementById("demo").innerHTML = n.next().value;
</script>
</body>
</html>

房屋的问题变得可迭代:

它不支持 JavaScript for..of 语句。

JavaScript 可迭代对象是一个具有 Symbol.iterator 的对象。

Symbol.iterator 是一个返回 next() 函数的函数。

可以使用以下代码迭代可迭代对象: for (const x of iterable) { }

例子

// Create an Object
myNumbers = {};

// Make it Iterable
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

现在您可以使用 for..of

for (const num of myNumbers) {
  // Any Code Here
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>

<p id="demo"></p>

<script>
// Create an Object
myNumbers = {};

// Make it Iterable
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

let text = ""
for (const num of myNumbers) {
  text += num +"<br>"
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Symbol.iterator 方法由 for..of 自动调用。 <p>但我们也可以“手动”完成

例子

let iterator = myNumbers[Symbol.iterator]();

while (true) {
  const result = iterator.next();
  if (result.done) break;
  // Any Code Here
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>

<p id="demo"></p>

<script>
// Create an Object
myNumbers = {};

// Make it Iterable
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

// Create an Iterator
let iterator = myNumbers[Symbol.iterator]();

let text = ""
while (true) {
  const result = iterator.next();
  if (result.done) break;
  text += result.value +"<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>