terator是什么

寻找Iterator

console.log([1, 2][Symbol.iterator]());

使用iterator

     const it = [1, 2][Symbol.iterator]();
      console.log(it.next());
      console.log(it.next());
      console.log(it.next());

什么是iterator

// Symbol.iterator(可遍历对象的生成方法)->it(可遍历对象)->it.next()->it.next()->(直到done位true时)

iterator解惑

• 为什么需要iterator遍历器
• 遍历数组for 循环和forEach方法
• 遍历对象 for in循环
• iterator遍历器是一个统一的遍历方式

认识for of

      const arr = [1, 2, 3];
      //   const it = arr[Symbol.iterator]();
      //   let next = it.next();
      //   console.log(next);
      //   while (!next.done) {
      //     console.log(next.value);
      //     next = it.next();
      //     console.log(next);
      //   }
      for (let val of arr) {
        console.log(val);
      }

break 和 constinue

// break 和 constinue
      const arr = [1, 2, 3];
      //   for (const val of arr) {
      //     if (val === 2) {
      //       //   break;
      //       continue;
      //     }
      //     console.log(val);
      //   }

      //在 for of中取得数组的索引.
      // keys()得到的是索引的课遍历对象可以遍历出索引值
      //   for (const key of arr.keys()) {
      //     console.log(key);
      //   }
      // values()得到的是指的可遍历对象，可以遍历出值

      //   for (const key of arr.values()) {
      //     console.log(key);
      //   }
      //   for (const value of arr) {
      //     console.log(value);
      //   }

      // entries()得到的是索引+值组成的数组的可遍历对象
      for (const entries of arr.entries()) {
        console.log(entries);
      }
      for (const [index, val] of arr.entries()) {
        console.log(index, val);
      }

原声可遍历与非原声可遍历

什么是可遍历

• 只要有Symbol.iterator方法,并且这个方法可以生成遍历对象，就是可遍历的
• 只要可遍历，就可以使用for.....of循环来统一遍历

原声可遍历的有哪些

      //数组
      //   var arr = [0, 1, 2, 3, 4];
      //   for (let val of arr) {
      //     console.log(val);
      //   }
      //   //字符串
      //   for (let val of "heelsa") {
      //     console.log(val);
      //   }
      //   //Set
      //   for (let val of new Set([1, 2, 3])) {
      //     console.log(val);
      //   }
      //   //Map
      //   for (let val of new Map([
      //     ["name", "aeage"],
      //     ["age", 18],
      //   ])) {
      //     console.log(val);
      //   }
      //   //arguments
      //   function fn() {
      //     for (let val of arguments) {
      //       console.log(val);
      //     }
      //   }
      //   fn(1, 2, 3, 4, 56);
      //   //NodeList
      //   for (let val of document.querySelectorAll("p")) {
      //     console.log(val);
      //   }
      // 非原声可遍历的有哪些

使用iterator场合

原声可遍历

• Array 数组
• String 字符串
• Set
• Map
• 函数的 arguments 对象
• NodeList 对象

数组展开运算符

        console.log(...[1, 2, 3, 4, 5]);
        console.log(..."hsabfd");
        console.log(...new Set([1, 2, 3]));
        console.log(...new Map([["asfaf", "adfaf"]]));
        function fn() {
          console.log(...arguments);
        }
        fn(1, 23, 4, 5, 6, 78);
        console.log(...document.querySelectorAll("p"));

includes方法

• 判断字符串中是否含有某些字符

基本用法

        console.log("abc".includes("ab"));
        console.log("abc".includes("b"));
        console.log("abc".includes("c"));
        console.log("abc".includes("ac"));

第二个参数

• 表示开始搜索的位置，默认是0

console.log("abc".includes("a", 1));
console.log("abc".includes("a", 0));

应用

      let url = "https://wwww.imooc.com/course/list";

      const addURLParam = (url, name, val) => {
        url += url.includes("?") ? "&" : "?";

        url += `${name}=${val}`;

        return url;
      };
      url = addURLParam(url, "c", "fe");
      console.log(url);
      url = addURLParam(url, "adf", "fe");
      console.log(url);

padStart()和padEnd()

基本用法

        console.log("x".padStart(5, "ab")); 
        console.log("x".padEnd(5, "ab")); 
        console.log("x".padEnd(4, "ab"));

注意事项

// 原字符串的长度，等于或大于最大长度不会消减原字符串，
      //字符串补全不生效，放回原字符串
      //   console.log("xxx".padStart(2, "ab"));
      //   console.log("xxx".padEnd(2, "ab"));
      // 用来补全的字符串与原字符串长度之和超过了最大长度，
      //截去超出位数的补全字符串，原字符串不动
      //   console.log("abc".padStart(10, "12345678987"));
      //   console.log("abc".padEnd(10, "12345678987"));
      // 用空格来填充
      //   console.log("x".padStart(4));

应用

• 显示日期

trimStart()和trimEnd()

• 清除字符串的首或尾空格，中间的空格不会清楚

基本用法

        const s = " a b c ";
        console.log(s.trimStart());
        console.log(s.trimEnd());
        console.log(s.trimLeft());
        console.log(s.trimRight());
        console.log(s.trim()); 

应用

      const username = document.querySelector(".username");
      const btn = document.querySelector(".userbtn");
      btn.onclick = () => {
        console.log(username.value);

        if (username.value.trim() !== "") {
          console.log("可以提交");
        } else {
          console.log("不可以提交");
        }

        // 手动提交
      };