Js 高级函数 One Day

Js高级：

一.箭头函数：

几个小细节：

​ 1.如果函数体只有一句，那么可以省略{}，同时默认值会返回函数体的结果，不能写return

​ 2.如果只有一个参数，那么可以省略（）

​ 3.如果没有参数，（）也不能省略

​ let text = (a, b) => a + b //不能有大括号

 <button>点击我</button>
    <script> // 以前写函数
        function func1(num1) {
            return num1 + 100;
        }

        // 箭头函数的时候
        // const func2 = (numb1) => numb1 + 100

        // 定义一个箭头函数 没有形参 没有返回值
        const func2 = () => {
            console.log(执行业务1);
            console.log(执行业务2);
        }
        // 没有形参、没有返回值、业务只有一行代码 大括号都可以省略
        const func3 = () => console.log('执行业务1');

        // 只有一个形参、没有返回值、业务只有一行代码
        const func4 = numb => console.log(numb + 100);
        // const func4 = (numb) => console.log(numb + 100);

        // 两个或者多个参数（括号不能省略）、没有返回值、业务只有一行代码
        const func5 = (numb1, numb2) => console.log(numb1 + numb2);

        // 没有形参，有返回值 业务两行代码
        const func6 = () => {
            let numb1 = 100
            return numb1 + 100
        }

        // 没有形参、有返回值，业务一行代码
        // const func7 = () => {
        //     return 100 + 200
        // }
        // 没有形参、有返回值，业务一行代码 等价上述写法
        const func7 = () => 100 + 200; // 相等于 return 100+200

        console.log(func7());

        const button = document.querySelector("button")
        button.addEventListener("click", () => {
            console.log(`点击按钮了`)
        })
      // ()=>{}  整一个 叹号函数
      // ()!!!!{} </script> 

二.数组的方法：

1.forEach 作用：遍历数组

 <script> function forEach() {
            // forEach()	数组每个元素都执行一次回调函数。    = 类似以前的for   forEach 高阶函数（可以接收一个形参-函数）
            // for循环可以通过 break来打断、 forEach不能通过break打断
            const arr = ['a', 'b', 'c'];
            // 分别打印他们
            arr.forEach(function (value, index) {
                console.log(`值 是 ${value}  下标是 ${index}`);
            });
            arr.forEach((value, index) =>
                console.log(`值 是 ${value}  下标是 ${index}`)
            );
            arr.forEach((value) => console.log(`值 是 ${value}`));
        } </script> 

2.map 作用：根据旧数组，重新改造成新数组

 <script> map();
        function map() {
            // map 根据原来的数组 来返回新的数组
            // 也会循环数组 在循环的回调函数中可以返回新的数据 组装成新的数组
            const arr = ['a', 'b', 'c'];
            // 可以返回 ["我的字母是a","我的字母是b","我的字母是c"]

            const newArr = arr.map((value) => '我的字母是' + value); // [1,1,1]
            console.log(newArr);

            const list = [10, 11, 12];
            const newList = list.map(value => value + 1);// [11,12,13]
            console.log(newList);

            const objectArr = [{ name: "悟空" }, { name: "八戒" }];
            const newObjectArr = objectArr.map(value => {
                // 1 
                value.color = "red";
                // 2 
                return value
            })// [{name:"悟空",color:"red"},{name:"八戒",color:"red"}]
            console.log(newObjectArr);

            const texts = ["刘德华", "郭德纲", "林志颖"];
            // // 返回  [<div>刘德华</div>,<div>郭德纲</div>,<div>林志颖</div>]
            const newTexts = texts.map(value => `<div>${value}</div>`);
            // console.log(newTexts);
            // // [<div>刘德华</div>,<div>郭德纲</div>,<div>林志颖</div>] 
            // // 把它转成字符串
            const html = newTexts.join("");// <div>刘德华</div><div>郭德纲</div><div>林志颖</div>
            // console.log(html);
            document.body.innerHTML = html;

            // 简写：
            // const renderHTML=value=>`<div>${value}</div>`
            // document.body.innerHTML=["刘德华","郭德纲","林志颖"].map(renderHTML).join("");

        } </script> 

3.filter 作用：过渡或者筛选

 <script> filter();
        function filter() {
            // 过滤， 过滤出满足条件的数据 =>新的数组
            const arr = [1, 2, 3, 4, 5, 6, 7];
            // 返回 奇数
            // const newArr = arr.filter((value) => {
            //   // 如果你return 了 true 表示当前的value你想要
            //   if (value % 2 !== 0) {
            //     // value  1 2 3 4 5 6
            //     // value%2!==0   value=[1,3,5,7]
            //     // 奇数
            //     return true;
            //   } else {
            //     return false;
            //   }
            // });

            // const newArr = arr.filter((value) => value % 2 !== 0);

            console.log(newArr);
        } </script> 

4.every 作用：要求数组中每个元素都满足条件 返回true

 <script> every();
    function every() {
      // 会返回 true或者false
      // 如果数组中每一个元素都复合条件，every返回true

      const arr1 = [1, 6, 3, 4];
      // // 判断数组中每一个元素，是不是都小于 5 如果是  返回true

      // // every当中的函数，要求每一个都return 了true 最后 every的返回值才是true
      const result = arr1.every((value) => {
        if (value < 5) {
          return true;
        } else {
          return false;
        }
      });
      console.log(result);

      // 有一个数组，存放每一个人 关于肺炎的检查结果
      const arr2 = [true, true, true, true, true]; // true就表示安全，false 中招
      // 我想要判断一下  这个人群安不安全  （只要有一个为false，不安全） 要求每一个都为true才安全

      // const result = arr2.every((value) => {
      //   if (value === true) {
      //     return true;
      //   } else {
      //     return false;
      //   }
      // });
      // console.log(result);

      // 
    } </script> 

5.some 作用：要求数组中最少有一个元素满足条件 返回true

 <script> some();
        function some() {
            // 检测数组，其中只要有一个元素符合条件，some返回true (every要求每一个都符合)
            const arr = [1, 3, 4, 6, 2];
            // 这个数组里面有没有元素大于6的
            const result = arr.some((value) => value > 6);
            console.log(result);

            /* 
            every 和 some 一起记
            every 要求全部都符合
            some 最少有一个符合即可 
             */
        } </script> 

三.伪数组转真数组：

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script> const lis = document.querySelectorAll('li'); // 伪数组
        // const liList=domToArr(lis);
        // console.log(liList.every);

        // 转成真正的数组 一堆方式
        // const liList = [].concat(lis);
        // liList = [  lis伪数组  ]
        // liList[0] =  lis伪数组 
        // liList[0].every  === lis.every  伪数组调用every 
        // console.log(liList[0].every);

        // 伪数组一堆转数组的代码 
        

        // 现在先简单用一个
        // const liList=[...伪数组]
        const liList = [...lis];// 最简单的转伪数组的方式  先这么用 </script> 

四.面向对象：

概念：

• 写项目级别代码的思维
• 一种编程行业通用的写项目级的代码的思维，引导我们如何编写高质量的代码，万物皆对象 - 看待事物的角度，（属性：数据，行为：动作（方法））。代码特点是封装和继承

思维：

• 分成两个部分：
  1. 属性（颜色、名称、身高）
  2. 行为（说话、修改颜色、设置字体大小)

字面量创建对象：

 <script> const obj={} </script> 

• 简单粗暴
• 不适合创建多个同样类型的对象的场景

工厂函数：

• 容易理解
• 失去血缘关系,无法简单分辨对象的特征
• 后期无法实现继承

 <script> function createPerson(name, age, gender) {
            return {
                usename: name,
                age: age,
                gender: gender,
            }
        }
        const obj1 = createPerson('小明', 18, '男')
        console.log(obj1);
        const obj2 = createPerson('小花', 20, '女')
        console.log(obj2);
        const obj3 = createPerson('小青', 16, '女')
        console.log(obj3); </script> 

构造函数：

 <script> // 1 声明函数 
        function createStudent(name, age) {
            // 2 通过 this 赋值
            this.name = name;
            this.age = age;
        }

        // 3 通过 new 来创建对象
        const obj = new createStudent("悟能", 83);

        console.log(obj); </script> 

• 可以方便的创建对象
• 拥有血缘关系
• 还有后续更多的优势

 <script> // 对于基本类型来说，=  就是复制了一份值
        let num = 100;
        let num2 = num;// 复制值  num和 num2占两给内存 各自不影响
        num2 = 1000;
        console.log(num);

        // 对于引用类似 = 其实把地址拷贝了一份给新的对象  两个数据 公用一份数据
        let person1 = { name: '悟空' }; // person1 指向了 一个地址 0x1111 存放悟空
        let person2 = person1; // person2也指向了person1的地址 0x1111  person1和person2 通用一个数据
        //   修改了person2 person1也会发生改变
        person2.name = '八戒';
        console.log(person1);

        //   person2 和person1 共同指向了同一个地址
        console.log(person1 === person2); // true </script> 

构造函数的工作原理：

1. 开辟空间
2. 将新的创建的对象对象构造函数中的this
3. 为对象赋值
4. 将创建好的对象的地址返回

弊端：

• 同一个 say 方法占据了两份内存

   <script> function createStudent(name, age) {
              this.name = name;
              this.age = age;
              this.say = function () {
                  console.log(this.name);
              }
          }
  
          const obj = new createStudent("悟能", 83);
          const obj1 = new createStudent("悟能1", 84);
  
          console.log(obj.say === obj1.say); // false  不是同一say方法 浪费了内存 </script> 
  

解决方法：

 <script> // 提前将say 声明好
        function say() {  // 污染全局变量
            console.log(this.name);
        }
        function createStudent(name, age) {
            this.name = name;
            this.age = age;
            this.say = say
        }

        const obj = new createStudent("悟能", 83);
        const obj1 = new createStudent("悟能1", 84);

        console.log(obj.say === obj1.say); // true </script> 

• 解决了浪费内存的弊端
• 但是造成了 污染全局变量 的问题

原型模式：

在构造函数的原型上 存放函数

• 解决了同一个 say 浪费 内存的问题
• 解决了污染全局变量的问题

 <script> function createStudent(name, age) {
            this.name = name;
            this.age = age;
        }
        // 将刚才的全局函数say 直接挂载到 构造函数的原型上 即可
        // prototype 是个对象 每一个构造函数都会内置有的. 我们称之为原型
        createStudent.prototype.say = function () {
            console.log(this.name);
        }

        const obj = new createStudent("悟能", 83);
        const obj1 = new createStudent("悟能1", 84);

        console.log(obj.say === obj1.say); // true </script> 

解释：

• 原型的单词是 prototype, 原型的这个名字是行业内共同认可的名字。
• 原型本质是一个对象，理解为 JavaScript 自动帮我们添加的
• 原型是 JavaScript 自动帮我们在定义构造函数的时候添加的
• 所有构造函数的实例，共享一个原型
• 原型上一般是挂载函数