let,const,var

    <script>
      /* 
      1 let、const、var  都可以用来声明变量 
      2 var 过时的技术 有很多弊端-外面很多老程序员 以为 了解var 各种各样的弊端-是技术 错误！ 
        1 如果你在网络上看文章 或者 视频  只要它使用 var  不用看 过时！！ 
        2 快毕业了 去刷面试题 不晚！
      3 let 和 const 
      4 const 声明了变量之后 这个变量 永远不能被修改！！！    const 声明的变量 叫做 常量！！ 
        1 使用了const定义的变量  表示它永远不会被改变
          项目名称 - 拼汐汐
        2 规范程序员设计 我们的程序 
          哪些变量需要被修改 哪些不要被修改 
          10ml  100ml 
        3 什么时候使用const
          1 多看老师的使用 
          2 担心 先使用 let 
        4 对于 有经验的程序员 都知道const和let区别程序员 
          能使用 const 就不使用let 
      5 let 
        定义变量 也可以修改变量 
      
       */

      const username = '悟空';
      //  修改 常量
      username = '八戒';
      if()
    </script>

<script>
      // 修改  等于号
      // let a = 1;
      // a = 2; // 修改
      // const b = 3;
      // b = 4; // 修改

      // const obj = { a: 1 };
      // obj.a = 2;

      const list = ['a', 'b'];
      // list.push('c');
      // console.log(list);
      // list[2]='c';
      list = 1;
    </script>

函数的简写

<script>
    /* 
    1 箭头函数 也是一种函数 写法上 简洁 灵活-飘逸-（老子都看不懂） 常用 
     */

    //  普通函数
    function func1() {
      console.log('func1');
    }

    // 普通函数
    const func2 = function () {
      console.log('func2');
    };

    // 箭头函数
    const func3 = () => {
      console.log('func3');
    };

    func1(); // 函数的调用
    func2(); // 函数的调用
    func3(); // 函数的调用
// 箭头函数是匿名函数，一般做为参数传递
// let test = function (a,b){
//     let sum = a + b 
//     return sum
// }
// let test = (参数) => {函数体}
// 几个小细节
// 1.如果函数体只有一句，那么可以省略{},同时默认会返回函数体的结果，不能写return
// 2.如果只有一个参数，那么可以省略()
// 3.如果没有参数，()也不能省略
// let test = (a,b) =>  a + b    // 不能有大括号
let test = a =>  a + 10 

let res = test(100)
console.log(res)
  </script>

函数参数默认值

    <script>
        const fun1 = () => 123
        const fun2 = () => `abc`
        const fun3 = () => true
        const fun4 = () => [1, 2, 3]
        //让箭头函数 猜猜大括号是什么意思
        //1 猜 对象的符号
        //2 猜 函数的结构 符号

        //如果拿到箭头函数 省略大括号 的情况下 想要返回一个对象 固定语法 加一个()

        const fun5 = () => ({ unername: `悟空` })

        console.log(fun5())
    </script>

返回对象

  <script>
      const func1 = () => 123;
      const func2 = () => 'abc';
      const func3 = () => true;
      const func4 = () => [1, 2, 34];

      // 让箭头函数 你猜猜 我大括号是什么意思
      // 1 猜 对象的 符号
      // 2 猜 函数体结构 符号

      // 如果你的箭头函数 省略大括号的 情境下 想要返回 一个对象  固定语法 添加一个小括号
      const func5 = () =>( { username: '悟空' });

    </script>

函数参数的默认值

<script>
      // (msg="大家好")  "大家好" 就是msg 默认值
      // 如果 调用函数的时候 你没有传递 就使用默认值
      // 如果 传递了参数     就会使用传递的参数 而不会使用 默认值

      // const func1 = (msg = '大家好') => {
      //   console.log(msg);
      // };

      // func1("你好"); // 输出什么  undefined

      // 定义一个函数  接收一个数组 告诉我们 这个数组的长度

      const getLength = (arr = []) => console.log(arr.length);

      const list=['a'];

      getLength(list);

      getLength();
    </script>

解构

<script>
        //解构 只是一直更加方便 来获取数据的写法而已
        //const arr = [`a`, `b`, `c`, `d`]
        //获取 数组的 前两个数据 lowb
         //const str1 = arr[0]
         //const str2 = arr[1]
         //console.log(str1, str2)

        //数组解构  关注  顺序
        const [str1, str2] = arr
        console.log(str1, str2)

交换变量

        //交换变量
        let a = 100
        let b = 200;

        // let c = a
        // a = b
        // b = c
        // console.log(a, b)

        [b, a] = [a, b]
        console.log(a, b)


   

对象解构

//对象解构
       const obj = { username: `悟空`, skill: `72变` }
       // const username = obj.username
       //const skill = obj.skill

       const { username, skill } = obj

       console.log(username)
       console.log(skill)
</script>

对象简写

在定义对象的时候,如果属性名和变量名一致,那么可以实现简写

 <script>
        //在定义对象的时候,如果属性名和变量名一致,那么可以实现简写
        const name = "悟空"
        // const skill = "72变"

        // const obj = {
        //     name, skill
        // }
        //console.log(obj)// {name:"悟空",skill:"72变"}



        const obj = {
            name,
            say() {
                console.log(`方法`)
            }

        }
        console.log(obj)
        obj.say()
    </script>

剩余运算符

 <script>
        /*
        剩余运算符 是一种比较方便我们获取数据的方式
        */
        const arr = [`a`, `b`, `c`, `d`, `e`]
        // const [letter1, letter2] = arr
        //console.log(letter1, letter2)
        //希望可以获得到 剩下所有的元素 都放在新的数组中

        const [let1, let2, ...list] = arr
        console.log(list)
    </script>

const obj = { a: 1, b: 2, c: 3, d: 4, e: 5 }
         const { a, b, c, d, ...obj2 } = obj
         console.log(a)//1
         console.log(obj2)//5

 //假设需求 封装函数帮我计算传入数据的 总和
        calc(1)
        calc(1, 2)
        calc(1, 2, 3)

        function calc(...parame) {
            //parame 可以获取到所有传递给calc的参数 封装到一个数组中
            console.log(parame)
        }

值类型和引用类型

<script>
        // js数据类型 分成了两种 1 值类型  2 引用类型
        // 1 值类型 简单数据类型  字符串、数字、布尔类型、
        // 2 引用类型   对象 、 数组

        // 两者区别 体现  =
        // 值类型 使用 = 复制
        // 引用类型 使用 =  关联在一起

        // let a =1 ;
        // let b = a;
        // // b a 的一份复制 两个值 一样 但是两个数据是完全独立！
        // b=10;
        // // a 不会发生变化
        // console.log(a);

        const obj = { username: '悟空' };
        // 也使用 =
        const newObj = obj; // newObj 看起来和 obj 数据一样   两个数据 本身一起！  修改了其中的任意一个，另外一个也会收到影响
        newObj.username = '八戒';
        console.log(obj);
    </script>

复制引用类型-剩余运算符

  <script>
      // 复制一份 对象 ， 修改新的数据之后 旧的数据 不要收到影响
      // const obj = { username: '悟空', height: 100 };

      // // const newObj=obj;
      // const newObj = { ...obj };
      // // const newObj = { username:"悟空",height:100 };

      // newObj.username = '八戒';
      // console.log(obj);

      const list = ['a', 'b'];
      // const newList = list; //
      const newList = [...list];
      newList.push('c');
      console.log(list);
    </script>

数组方法map

<script>
      // map  返回 处理后的数组
      // map 数组的一个方法 也会遍历 数组  接收一个函数
      const arr = ['a', 'b', 'c'];
      // ['<li>a</li>','<li>b</li>','<li>c</li>']
      // const newArr = [];
      // arr.forEach(function (value) {
      //   newArr.push(`<li>${value}</li>`);
      // });

      // console.log(newArr);

      const newArr = arr.map(function (value, index) {
        return `<li>${index}-${value}</li>`;
      });
      console.log(newArr);
    </script>

  <script>
       // 简写
        //map 数组的一个方法
        //map 数组的一个方法 也会遍历数组  接收一个函数
        const arr = [`a`, `b`, `c`, `d`]
        //[`<li>a</li> ``<li>b</li>`` <li>c</li> ``<li>d</li>`]


        const newArr = arr.map(value => `<li>${value}</li>`)
        console.log(newArr)
    </script>

数组方法 filter

 <script>
      // filter 过滤  返回 过滤后的数组
      const arr = [1, 3, 5, 7, 9];
      // 返回 大于 3的数据  重新组成数组  low!!!
      // const newArr = [];
      // arr.forEach(function (value) {
      //   if (value > 3) {
      //     newArr.push(value);
      //   }
      // });
      // console.log(newArr);

      // filter 会遍历数组 返回 满足了你条件的（函数内 返回true！！ ）  新的数组
      const newArr = arr.filter(function (value) {
        if (value > 3) {
          // 满足条件的元素
          return true;
        } else {
          return false;
        }
      });

      // 想一想 结合箭头函数 简写！！ 

      console.log(newArr);
    </script>

<script>
        //简写
        //filter 过滤 返回 过滤后的数据
        const arr = [1, 3, 5, 7, 9]
        //返回 大于 3的数据 重新组成数组

        //filter 会遍历数组 返回 满足了你条件(函数内 返回 true)的新的数组
        const newArr = arr.filter(value => value > 3)
        console.log(newArr)
    </script>

案例 选择下拉框出现对应个数姓名

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>17-filter-大案例.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div>
      同学姓名的长度
      <select>
        <option value="">请选择</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <ul></ul>
    </div>
    <script>
      // 获取到下拉列表的值
      const select = document.querySelector('select');
      // 绑定change事件
      select.addEventListener('change', function () {
        // 获取选中的值
        // console.log(this.value);
        const length = this.value; // 字符串类型
        // 数组 同学名称
        const names = [
          '黄圣飞',
          '梁子聪',
          '王锦双',
          '韦嘉敏',
          '刘雅琴',
          '王鹏',
          '黄华松',
          '温玉秋',
          '梁志斌',
          '谢骐蔚',
          '彭伟维',
          '郑鸿生',
          '文荣桩',
          '陶子路',
          '叶海民',
          '邵将',
          '郭武汉',
          '王自选',
          '方泽基',
          '吴海波',
          '黄仁杰',
          '欧阳家铭',
          '黄浩钊',
          '汪煜博',
          '赖泽赢',
          '范明健',
          '邱浩畅',
          '李文俊',
          '陈培琪',
          '邓堪锦',
          '张家铷',
          '贺淘星',
          '曾锐华',
          '邓祥威',
          '张澎',
          '饶定洲',
          '陆天豪',
          '廖蓝飞',
          '王汉亮',
          '覃雄智',
          '曾玉萍',
          '周儒浩',
          '马紫欣',
          '肖甜',
          '史溢炜',
          '陈颂文',
          '李龙章',
          '夏一鸣',
          '阳赐林',
          '何富铖',
          '廖东',
          '韦家祥',
          '王翠玲',
          '吴士钊',
          '付宇洋',
          '林仪',
          '郭倩仪',
          '黎开宙',
          '冯隆义',
          '罗健贤',
          '杨秀鸿',
          '徐志军',
          '李树昆',
          '覃启娴',
          '许龙辉',
          '曹外',
          '郝璐',
          '康梅飞',
          '陈结源',
          '黄贵斌',
          '刘玉轩',
          '吴栩然',
          '倪金辉',
          '宋炜',
          '李振林',
          '吴卓龙',
          '郭宇',
          '苏铭轩',
          '杨凯文',
          '张祖勇',
          '何冠儒',
        ];

        // 过滤数组 名字长度
        const filterList = names.filter((value) => value.length == length);

        // 对数组做遍历 拼接成 li标签
        let html = '';

        // 模拟 指定条件
        filterList.forEach((value) => {
          html += `<li>${value}</li>`;
        });
        // 插入到 ul标签中
        const ul = document.querySelector('ul');
        ul.innerHTML = html;
      });
    </script>
  </body>
</html>

优化版

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>17-filter-大案例.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div>
      同学姓名的长度
      <select>
        <option value="">请选择</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <ul></ul>
    </div>
    <script>
      const names = [
        '黄圣飞',
        '梁子聪',
        '王锦双',
        '韦嘉敏',
        '刘雅琴',
        '王鹏',
        '黄华松',
        '温玉秋',
        '梁志斌',
        '谢骐蔚',
        '彭伟维',
        '郑鸿生',
        '文荣桩',
        '陶子路',
        '叶海民',
        '邵将',
        '郭武汉',
        '王自选',
        '方泽基',
        '吴海波',
        '黄仁杰',
        '欧阳家铭',
        '黄浩钊',
        '汪煜博',
        '赖泽赢',
        '范明健',
        '邱浩畅',
        '李文俊',
        '陈培琪',
        '邓堪锦',
        '张家铷',
        '贺淘星',
        '曾锐华',
        '邓祥威',
        '张澎',
        '饶定洲',
        '陆天豪',
        '廖蓝飞',
        '王汉亮',
        '覃雄智',
        '曾玉萍',
        '周儒浩',
        '马紫欣',
        '肖甜',
        '史溢炜',
        '陈颂文',
        '李龙章',
        '夏一鸣',
        '阳赐林',
        '何富铖',
        '廖东',
        '韦家祥',
        '王翠玲',
        '吴士钊',
        '付宇洋',
        '林仪',
        '郭倩仪',
        '黎开宙',
        '冯隆义',
        '罗健贤',
        '杨秀鸿',
        '徐志军',
        '李树昆',
        '覃启娴',
        '许龙辉',
        '曹外',
        '郝璐',
        '康梅飞',
        '陈结源',
        '黄贵斌',
        '刘玉轩',
        '吴栩然',
        '倪金辉',
        '宋炜',
        '李振林',
        '吴卓龙',
        '郭宇',
        '苏铭轩',
        '杨凯文',
        '张祖勇',
        '何冠儒',
      ];

      const select = document.querySelector('select');
      select.addEventListener('change', function () {
        const length = this.value;
        renderByNameLength(length);
      });

      // 根据数字来渲染对应长度的名称
      function renderByNameLength(length) {
        const filterList = names.filter((value) => value.length == length);
        let html = '';
        filterList.forEach((value) => {
          html += `<li>${value}</li>`;
        });
        const ul = document.querySelector('ul');
        ul.innerHTML = html;
      }
    </script>
  </body>
</html>

数组方法-every

<script>
      // every 检测数值元素的每个元素是否都符合条件 全部都符合 返回 true 否则就返回false
      // const names = ['黄圣飞', '梁聪', '王锦双', '韦嘉敏', '刘雅琴'];
      // // 判断一下 上面所有同学的名称 是不是 长度 都是大于2

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

      // const result2 = names.every((v) => v.length > 2);

      // console.log(result);

      // every 对于空数组 也会直接返回true
      const arr = [];
      const result = arr.every((v) => false);
      console.log(result);
    </script>

数组方法-some

  <script>
      // some 检测数组元素中 只有有一个条件 都返回true
      const arr = [
        '健康',
        '健康',
        '健康',
        '健康',
        '健康',
        '健康',
        '健康',
        '健康',
        '健康',
        '健康',
      ];

      // some方法来判断 队列 是不是有危险
      const result = arr.some((value) => value === '中招');

      if (result) {
        console.log('有危险');
      } else {
        console.log('健康');
      }
    </script>

面试题

var变量问题

 <script>
      // console.log(abc);
      // var abc = 123;

      // var abc;
      // // console.log(abc);
      // abc = 123;
      // if(true){
      //   let a=123;
      // }
      // console.log(a);

      let a = 123;
      let a = 456;
      console.log(a);
    </script>

伪数组

  <script>
      // 伪数组 dom  具有 forEach方法
      // const liList = document.querySelectorAll('li');

      // liList.length=0;
      // console.log(liList);

      const list=[1,23];
      list.length=0;
      console.log(list);
    </script>

全局函数this指向问题

<script>
      /* 
      一般来说 this的指向 判断依据 谁调用了 函数  this 指向谁 

      其实  当我们定义了全局的函数的时候，默认是挂载到了window 全局变量上  
      全局函数 其实就是 window的一个属性而已 只不过 平时写代码的时候 可以省略这个window

      小结
      1 当我们定义全局的函数的时候 本质是给window添加了一个 属性（函数类型）
      2 当我们调用这个函数 的时候  abc()  本质  window.abc() -- window 可以被省略而已  
       */

    //    function abc() {
    //      console.log("ABC");
    //      console.log(this);
    //    }
    //   // window.abc = function () {
    //   //   console.log('ABC');
    //   //   console.log(this);
    //   // };

    //   // window.abc();
    // abc();
    // const obj ={
    //   username:"悟空",
    //   say(){
    //     console.log(this);
    //   }
    // }

    // say();
    </script>

箭头函数this执行

 <body>
    <button>点击</button>
    <script>
      /* 
      1 箭头函数没有内部的this 
      2 当你的函数执行体代码中  有出现了 this 慎用 箭头函数！！  - 遵循！！ 
      
      
       */
      // const obj = {
      //   username:"悟空",
      //   say:()=>console.log(this)
      // }
      // const func = () => console.log(this);

      const button=document.querySelector("button");
      button.addEventListener("click", ()=> {
        // this.innerText="被修改哈"
        console.log(this);
        
      })
    </script>
  </body>

bind 、call 、 apply 修改 this的指向

 <script>
      /* 
      1 bind 、call 、  apply  修改 this的指向 
        1   call 和  apply  会在调用原函数的同时也修改this的指向 
        2   bind会帮你修改this指向 但是 不会直接调用原函数 而是会返回一个 修改了this指向 的新函数 
        3   call 和  apply 区别 传递参数的方式不同而已
            obj.say.call(newObj,1,2)
            obj.say.apply(newObj,[1,2])
          


      2 默认情况下  this的指向   -  谁调用了我 this 指向谁 
       */

      const obj = {
        username: '悟空',
        // say() {
        //   console.log(this.username, 'obj中的say方法 ');
        // },
        say(a, b) {
          console.log(a, b);
        },
      };

      const newObj = {
        username: '八戒',
      };

      // obj.say.call(newObj);//  八戒    obj中的say方法
      // obj.say.apply(newObj);//  八戒    obj中的say方法
      // const fn = obj.say.bind(newObj); //  返回一个新的函数  新函数内部 修改this指向的功能

      // obj.say.call(newObj,1,2) ;
      // obj.say.apply(newObj,[1,2]) ; // 参数必须要以数组的形式来传递
      const fn = obj.say.bind(newObj);
      fn(1, 2);
    </script>