0308 Es6

27 阅读3分钟

函数默认值设置

      const sum = (x, y = 2) => x * y;
      console.log(sum(2));

函数参数默认值的注意

  1. 默认这生效条件
      //不传参数,或者明确传递undefined作为参数,只有两种情况下,默认值才会生效
      const mutiply = (x, y = 1) => x + y;
      console.log(mutiply(2, 0));
      console.log(mutiply(2, null));
      console.log(mutiply(2, undefined));
      console.log(mutiply(2));

  1. 默认值表达式
// 如果默认值是表达是,默认值表达式的惰性求着的
  1. 设置默认值得小技巧
      // 函数参数的默认这,最好从参数列表的右边开始设置
      const mutiply = (x, y = 1) => {};

函数参数默认值得应用

  1. 接受很多参数的时候
        const lobd = (name = "zhang", age = 18, sex = "mos") => {
        console.log(name, age, sex);
      };

  1. 接受一个对象作为参数
      let lobd1 = (iop) => console.log(iop.name, iop.age);
      const lobd = ({ name = "张三", age = 18, sex = "nv" } = {}) => {
        console.log(name, age, sex);
      };
      var iop = {
        name: "Aasy",
        age: 19,
        sex: "nan",
      };
      lobd(iop);

剩余参数

      const add = (x, y, ...arr) => {
        console.log(arr);
      };
      add(1, 2, 3, 4, 5, 6, 7);

剩余参数的注意事项

  1. 箭头函数的剩余参数
  2. 建构函数的参数部分即使只有一个剩余参数,也不能省略圆括号
  3. 使用剩余参数代替arguments 获取实际参数
        const add = function () {
          console.log(arguments);
        };
        add(1, 2, 2, 3, 3, 1, 4);
        const add = (...arr) => {
          console.log(arr);
        };
        add(12, 3, 1, 4, 5, 97);

  1. 剩余参数的位置
  2. 剩余参只能是最后一个参数,之后不能有其他参数否则就会报错

数组的展开运算符

// 展开运算符
      //  console.log(Math.min([3, 2, 1]));
      // 2. 展开数组的基本用法
      console.log(Math.min(...[1, 2, 3]));

区别剩余参数和展开预算符

      // 1.根本区别
      // 展开运算符
      //[3,2,1] = 3,2,1
      // 剩余预算符
      //3,2,1=[3,2,1]

      // 剩余参数
      //   const add = (...arr) => {
      //     console.log(arr);
      //   };
      //   console.log(add(1, 2, 3));
      //展开预算符
      //   const add = (...arr) => {
      //     console.log(...arr);
      //   };
      //   add(1, 2, 3, 4);


数组展开预算符的应用

// 复制数组
      //   let a = [1, 2];
      //   let c = [...a];
      //   c[0] = 5;
      //   console.log(a);
      //   console.log(c);

      // 合并数组
      //   const a = [1, 2];
      //   const b = [4, 5];
      //   const c = [6, 7];
      //   const d = [...a, ...b, ...c];
      //   console.log(d);

      // 字符串转换为数组
      // 字符串可以按照数组的形式展开
      //   console.log([..."asxex"]);
      //   console.log("asxex".split(""));

      // 常见的类数组转化为数组
      // arguments
      //   const add = function () {
      //     console.log([...arguments].push);
      //   };
      //   add(1, 2, 3);
      //Nodelist 类数组转换为数组
      console.log([...document.querySelectorAll("p")]);

对象的展开运算符

script>
      // 展开对象
      //   const apple = {
      //     name: "显春",
      //     ageL18,
      //     sex: "nv",
      //   };
      //   console.log({ ...apple });
      //   console.log({ ...apple } === apple);
      //   false;
      // 合并对象
      //   const apple = {
      //     name: "显春",
      //     ageL: 18,
      //     sex: "nv",
      //   };
      //   const pen = {
      //     name: "显春2",
      //     ageL: 18,
      //     sex: "nv",
      //   };
      //   console.log({ ...apple, ...pen });.
      // 新对象拥有全部属性,相同属性,后者覆盖前者

对象展开运算符的注意事项

 //1.对空对象的展开
      // 如果展开一个空对象,则没有任何效果
      //   console.log(...{}); 会报错
      //   console.log({ ...{}, a: 1 });
      //2. 非对象的展开
      // 如果展开的不是对象,则会自动将其转为对象再将其属性罗列出来
      //   console.log(...1);
      //   console.log(...undefined);
      //   console.log(...null);
      //   console.log(...true);
      // 如果展开运算符后面是字符串,它会自动成一个类似数组的对象因此返回的不是空对象
      //   console.log({ ..."adbds" });
      //   console.log([..."adbds"]);
      //   console.log(..."asvsd");

      // 3.对象中对象属性的展开
      //   const aoop = {
      //     data: {
      //       name: "张三",
      //       age: 18,
      //     },
      //   };
      //   const iop = {
      //     data: {
      //       name: "李四",
      //       age: 19,
      //     },
      //     use: "男",
      //   };
      //   console.log({ ...aoop, ...iop });

对象展开运算符的应用

 //1.复制对象
      //   const a = { b: 1, d: 2 };

      //   const c = { ...a };
      //   console.log(c, c === a);

      // 2.用户参数和默认参数
      //   const add = ({ name = "zhang", age = 0, sex = "nul" } = {}) => {
      //     console.log(name, age, sex);
      //   };
      //   add(undefined);

      const aoop = {
        // name: undefined,
        age: 18,
        sex: "男",
      };
      const add = (userParam = {}) => {
        const data = {
          name: "zhangsan",
          age: 18,
          sex: "男",
        };
        console.log({ ...data, ...userParam });
      };
      add(aoop);