includes()

• 判断数组中是否含有某个成员
• 第二个参数表示搜索的其实位置，默认值是0
• 基本遵循严格相等(===),但是对于NaN的判断与===不同，incudes认为NaN===NaN

应用

    //去重
      let arr = [];
      for (let v of [1, 2, 1]) {
        if (!arr.includes(v)) {
          arr.push(v);
        }
      }
      console.log(arr);

Array.from应用

• 将其他数据类型转换成数组

基础用法

console.log(Array.from("str"));

• 哪些可以通过Array.form()转换成数组
• 所有可遍历的,数组，字符串，Set，Map，NodeList，arguments，

第二个参数

• 作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

 console.log(
        [1, 2, 3].map((item) => {
          return item * 2;
        })
      );
      console.log(Array.from("12", (item) => item * 2));

第三个参数

• 更改this指向

Array.from("12",item=>item*2,document)

find和findindex

• find():找到满足条件的一个立即返回
• findIndex():找到满足条件的一个，立即返回其索引

基本用法

• 第二个参数修改this指向

        console.log(
          [1, 5, 10, 15].find((item, ind) => {
            //   console.log(item, ind);
            return item > 9;
          })
        );
        console.log(
          [1, 5, 10, 15].findIndex((item, ind) => {
            //   console.log(item, ind);
            return item > 9;
          })
        );

应用

      let students = [
        { name: "张显春1", age: 20 },
        { name: "张显春2", age: 22 },
        { name: "张显春3", age: 20 },
      ];
      console.log(students.find((item) => item.age === 22));
      console.log(students.findIndex((item) => item.age === 20));

Obgect.assign应用

• 用来合并对象

基本用法

// Object.assign(目标对象，源对象1，源对象2,...)
      let apple = {
        color: "红色",
        shape: "圆形",
        taste: "甜",
      };
      let pen = {
        color: "黑色",
        shape: "圆柱形",
        use: "写字",
      };
      console.log(Object.assign(apple, pen));
      console.log(Object.assign(apple, pen) === apple);
      console.log(apple);
//   Object.assign 直接合并到了第一个参数中，返回的就是合并后的对象      

可以合并多个对象

      console.log(Object.assign({}, apple, pen));
      let a = Object.assign({}, apple, pen);
      console.log(a);

注意事项

• 基本数据类型作为源对象
• 与对象的展开类似，先转换为对象，在合并

    console.log(Object.assign({}, undefined));
    console.log(Object.assign({}, null));
    console.log(Object.assign({}, 1));
    console.log(Object.assign({}, true));
    console.log(Object.assign({}, "str"));

• 同属性的替换
• 后面的直接覆盖前面的

      let apple = {
        color: ["红色", "绿色"],
        shape: "圆形",
        taste: "甜",
      };
      let pen = {
        color: ["黑色", "银色"],
        shape: "圆柱形",
        use: "写字",
      };
      console.log(Object.assign({}, apple, pen));

应用

• 合并默认参数和用户参数

      let logUser = (useroptions) => {
        const DEFAULTS = {
          username: "张显春",
          age: 0,
          sex: "男",
        };

        const options = Object.assign({}, DEFAULTS, useroptions);
        console.log(options);
      };
      logUser({ age: 18 });

Object三种方法

• 基本用法

      let person = {
        name: "张显春",
        age: 18,
      };
      console.log(Object.keys(person));
      console.log(Object.values(person));
      console.log(Object.entries(person));

• 与数组类似方法的区别

      console.log([1, 2].keys());
      console.log([1, 2].values());
      console.log([1, 2].entries());

• 数组的keys(),values(),entries()等方法是实例方法，返回的都是Iterator
• 对象的Object.keys(),Object.values(),Object.entries()等方法是构造函数方法，返回的是数组

// 使用for...of遍历对象
      let obj = {
        name: "张显春",
        age: 189,
      };
      // for (let k of Object.keys(obj)) {
      //   console.log(k);
      // }
      // for (let value of Object.values(obj)) {
      //   console.log(value);
      // }
      // for (let entries of Object.entries(obj)) {
      //   console.log(entries);
      // }
      // for (let [key, value] of Object.entries(obj)) {
      //   console.log(key, value);
      // }

      // Object.keys()/values()/entries()并不能保证顺序一定是你看到的样子，这一点和for in是一样的

Promise是什么

 * {
        padding: 0;
        margin: 0;
      }
      .box {
        width: 300px;
        height: 300px;
        background-color: red;
        transition: all 0.5s;
      }

<div class="box"></div>

 //   认识Promise
      //   Promise是异步操作的一种解决方案
      //   回调函数
      //   document.addEventListener("click", () => {
      //     console.log("异步");
      //   });
      //   console.log("同步");

      //   什么时候使用Promise
      //   Promise 一般用来解决层层嵌套的回调函数(回调地域callback hell)的问题

      let fn = (el, { x = 0, y = 0 } = {}, end = () => {}) => {
        el.style.transform = `translate3d(${x}px,${y}px,0)`;
        el.addEventListener(
          "transitionend",
          () => {
            end();
          },
          false
        );
      };

      let div = document.querySelector(".box");
      document.addEventListener("click", () => {
        fn(div, { x: 200 }, () => {
          fn(div, { x: 200, y: 200 }, () => {
            fn(div, { y: 200 }, () => {
              fn(div);
            });
          });
        });
      });

Promise基本用法

• 实例化构造函数生成的实例对象

 //   console.log(Promise);

      //   Promise 解决的不是回到函数，而是回调地域

      //   Promise 的状态
      // let p = new Promise((resolve, reject) => {
      // Promise有三种状态，一开始是pending(未完成)，执行resolve变成fulfilled(resolved)，已成功
      //   执行reject,变成rejected,以失败
      // Promise的状态一旦变化，就不会在改变了
      // pending -> fulfilled
      // resolve("数据");
      // pending -> regected
      //     reject(new Error("请求失败"));
      //   });

      //   console.log(p);

      //   then方法
      //   p.then(
      //     () => {
      //       console.log("成功");
      //     },
      //     () => {
      //       console.log("失败");
      //     }
      //   );

      //  Promise 参数
      //   p.then(
      //     (data) => {
      //       console.log(data);
      //     },
      //     (err) => {
      //       console.log(err);
      //     }
      //   );

then方法

 //   什么时候执行
      //   pending -> fufilled时,执行then的第一个回调函数
      //   pending -> rejected时,执行then的第二个回调函数

      //   执行后的返回值
      //   then方法执行后返回一个新的Promise对象
      let p = new Promise((resolve, reject) => {
        // resolve();
        reject();
      });
      p.then(
        () => {
          console.log("成功");
        },
        () => {
          console.log("失败");
          //   then方法返回的Promise对象的状态改变

          //   在then的回调函数中，return后面的东西会用Promise包装一下
          //   return undefined
          //   等价于
          //   return new Promise((resolve, reject) => {
          //     resolve(undefined);
          //   });
          //   return 123;
          //   return new Promise((resolve, reject) => {
          //     resolve(123);
          //   });
          //   默认返回的用于都是成功状态的Promise对象

          return new Promise((resolve, reject) => {
            reject("error");
          });
        }
      )
        .then(
          (data) => {
            console.log("成功2", data);
          },
          (data) => {
            console.log("失败2", data);
          }
        )
        .then(
          () => {
            console.log("成功3");
          },
          () => {
            console.log("失败3");
          }
        );

Promise 解决回调地狱

    * {
        padding: 0;
        margin: 0;
      }
      .box {
        width: 300px;
        height: 300px;
        background-color: red;
        transition: all 0.5s;
      }

<div class="box"></div>

 let fn = (el, { x = 0, y = 0 } = {}, end = () => {}) => {
        el.style.transform = `translate3d(${x}px,${y}px,0)`;
        el.addEventListener(
          "transitionend",
          () => {
            end();
          },
          false
        );
      };
      let movePromise = (el, point) => {
        return new Promise((res) => {
          fn(el, point, () => {
            res();
          });
        });
      };
      let div = document.querySelector(".box");
      document.addEventListener(
        "click",
        () => {
          movePromise(div, { x: 150 })
            .then(() => {
              return movePromise(div, { x: 150, y: 140 });
            })
            .then(() => {
              return movePromise(div, { y: 150 });
            })
            .then(() => {
              return movePromise(div, { x: 0, y: 0 });
            });
        },
        false
      );

catch 方法

//   有什么用
      //   可以用then()专门处理reslove状态，
      //   chtch()专门处理reject状态

      //   基本用法
      new Promise((res, rej) => {
        // res(123);
        rej("err");
      })
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
          throw new Error("qwe");
        })
        .then(() => {
          console.log(123);
        })
        .catch((err) => {
          console.log(err);
        });

      //   catch()可以捕获他前面的错误
      //   一般总是建议，Promise对象后面要跟catch方法，这样可以处理Promise内部发生的错误

finally 方法

  //   什么时候执行
      //   当Promise状态发生变化时，不论如何变化都会执行，不变化不执行
      //   new Promise((res, rej) => {
      //     // res(123);
      //     rej("err");
      //   })
      //     .finally((data) => {
      //       console.log(data);
      //     })
      //     .catch((e) => {});
      //   本质
      // finally()本质上是then()的特例

      //   等同于
      new Promise((res, rej) => {
        // res(123);
        rej("err");
      })
        .then(
          (res) => {
            return res;
          },
          (err) => {
            return new Promise((res, rej) => {
              rej(err);
            });
          }
        )
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });