JS-2023-03-13笔记总结

trimStart()和trimEnd()

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

1.基本用法

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

2.应用

const btn = document.getElementById("btn");
      const input = document.getElementById("username");

      btn.addEventListener(
        "click",
        () => {
          if (input.value.trim() !== "") {
            console.log("可以提交");
          } else {
            console.log("不能提交");
          }
        },
        false
      );

数组的includes

1.基本用法

 // // 判断数组中是否含有某个成员
      // console.log([1, 2, 3, 4].includes("2"));
      // console.log([1, 2, 3, 4].includes(2));
      // // 第二个参数表示搜索的起始位置，默认值是0
      // console.log([1, 2, 3].includes(2, 2));
      // console.log([1, 2, 3].includes(2, 1));
      // // 基本遵循严格相等 (===) ，但是对于 NaN 的判断与 === 不同，includes 认为 NaN === NaN
      // console.log(NaN === NaN);
      // console.log([1, 2, NaN].includes(NaN));

2.应用

// 去重
      const arr = [1, 1, 2, 2, 3, 4, 5];
      const result = new Set(arr);
      const newArr = [];
      for (let item of arr) {
        if (!newArr.includes(item)) {
          newArr.push(item);
        }
      }
      console.log(newArr);

Array.from()

1.基本用法

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

2.哪些可以通过 Array.from() 转换成数组

// 2.1 所有可遍历的
// 数组、字符串、Set、Map、NodeList、arguments
//   console.log([...new Set([1, 2, 3])]);
//   console.log(Array.from(new Set([1, 2, 3])));

// 2.2 拥有 length 属性的任意对象
//   const obj = {
//     0: "a",
//     1: "b",
//     length: 3,
//   };
//   console.log(Array.from(obj));

3.第二个参数

  // 作用类似于数组的 Map 方法，用来对每个元素进行处理，将处理后的值放入返回的数组
      console.log([1, 2].map((value) => value * 2));
      console.log(Array.from([1, 2]).map((value) => value * 3));

find()和findIndex()

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

1.基本用法

 //   console.log(
      //     [1, 5, 10, 15].find((value, index, arr) => {
      //       return value > 9;
      //     }, document)
      //   );
      //   console.log([1, 5, 10, 15].findIndex((value) => value > 9));

2.应用

const students = [
        { name: "小明", age: 18, gender: "男" },
        { name: "小红", age: 20, gender: "女" },
        { name: "小亮", age: 22, gender: "男" },
      ];
console.log(students.find((value) => value.name === "小红"));
console.log(students.findIndex((value) => value.name === "小红"));

Object.assign()

用来合并对象

1.基本用法

 const apple = {
      //     color: "红色",
      //     shape: "圆形",
      //     taste: "甜",
      //   };
      //   const pen = {
      //     color: "黑色",
      //     shape: "圆柱形",
      //     use: "写字",
      //   };

      //   console.log(Object.assign(apple, pen));

      // Object.assign() 直接合并到了第一个参数中，返回的就是合并后的对象
      //   console.log(apple);
      //   console.log(Object.assign(apple, pen) === apple);

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

2.注意事项

  // 2-1.基本数据类型作为源对象
      // 与对象的展开类似，先转换成对象，再合并
      //   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"));

      //2-2.同名属性的替换
      // 后面的直接覆盖前面的
      const apple = {
        color: "红色",
        shape: "圆形",
        taste: "甜",
      };
      const pen = {
        color: "黑色",
        shape: "圆柱形",
        use: "写字",
      };
      console.log(Object.assign({}, apple, pen));

3.应用

// 合并默认参数和用户参数
      const logUser = (userOptions) => {
        const DEFAULTS = {
          username: "ZhangSan",
          age: 0,
          sex: "male",
        };

        const options = Object.assign({}, DEFAULTS, userOptions);
        console.log(options);
      };
      //   logUser();
      //   logUser({});
      logUser({ username: "Alex" });

Object.keys()、Object.values()和Object.entrie()

1.基本用法

   const person = {
          name: "Alex",
          age: 18,
        };
    console.log(Object.keys(person));
    console.log(Object.values(person));
    console.log(Object.entries(person));

2.与数组类似方法的区别

      //   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()等方法是构造函数方法，返回的是数组

3.使用 for...of 循环遍历对象

      const person = {
        name: "alex",
        age: 18,
      };
      //   for (const key of Object.keys(person)) {
      //     console.log(key);
      //   }
      //   for (const value of Object.values(person)) {
      //     console.log(value);
      //   }
      //   for (const entries of Object.entries(person)) {
      //     console.log(entries);
      //   }
      for (const [key, value] of Object.entries(person)) {
        console.log(key, value);
      }

Promise是什么

1.认识Promise

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

2.什么时候使用 Promise

// Promise 一般用来解决层层嵌套的回调函数(回调地狱 callback hell)的问题
      // 运动
      const move = (el, { x = 0, y = 0 } = {}, end = () => {}) => {
        el.style.transform = `translate3d(${x}px,${y}px,0)`;
        el.addEventListener(
          "transitionend",
          () => {
            end();
          },
          false
        );
      };

      const box = document.getElementById("box");
      document.addEventListener(
        "click",
        () => {
          move(box, { x: 150 }, () => {
            move(box, { x: 150, y: 150 }, () => {
              move(box, { y: 150 }, () => {
                move(box, { x: 0, y: 0 });
              });
            });
          });
        },
        false
      );

Promise的基本用法

1.实例化构造函数生成实例对象

// promise 解决的不是回调函数，而是回调地狱
      //   const p = new Promise(() => {});
      //   console.log(p);

2.Promise 的状态

const p = new Promise((resolve, reject) => {
      //     // Promise有 3 种状态，一开始是 pending (未完成),执行 resolve,变成fulfilled(resolved),已成功
      //     // 执行 reject,变成 rejected,已失败

      //     // Promise 的状态一旦变化，就不会再改变了

      //     // pending -> fulfilled
      //     resolve();
      //     // pending -> rejected
      //     reject();
      //   });
      //   console.log(p);

3.then方法

//   p.then(
      //     () => {
      //       console.log("success");
      //     },
      //     () => {
      //       console.log("error");
      //     }
      //   );

4.resolve 和 reject 函数的参数

const p = new Promise((resolve, reject) => {
        // Promise有 3 种状态，一开始是 pending (未完成),执行 resolve,变成fulfilled(resolved),已成功
        // 执行 reject,变成 rejected,已失败

        // Promise 的状态一旦变化，就不会再改变了

        // pending -> fulfilled
        resolve({ username: "Alex" });
        // pending -> rejected
        reject(new Error("error"));
      });
      p.then(
        (data) => {
          console.log("success", data);
        },
        (err) => {
          console.log("error", err);
        }

then()

1.什么时候执行

// pending -> fulfilled 时，执行 then 的第一个回调函数
// pending -> rejected 时，执行 then 的第二个回调函数

2.执行后的返回值

then 方法执行后会返回一个新的 Promise 对象

3.then 方法返回的 Promise 对象的状态改变

  const p = new Promise((resolve, reject) => {
        resolve("success");
        // reject("error");
      });
      p.then(
        (data) => {
          console.log(data);
          // 在 then 的回调函数中， return 后面的东西，会用 Promise 包装一下
          // return undefined
          // 等价于
          //   return new Promise((resolve) => {
          //     resolve(undefined);
          //   });

          // 默认返回的永远都是成功状态的 Promise 对象
          return new Promise((resolve, reject) => {
            reject(new Error("err"));
          });
        },
        (err) => {
          console.log(err);
        }
      ).then(
        (data) => {
          console.log("success2", data);
        },
        (err) => {
          console.log("err2", err);
        }
      );