1.不用委托事件删除动态新增元素的前提 12.22的待办事项案例

必须发布成功了 新增成功了节点元素 才会有X按钮 否则在外发布点击事件外面 永远拿不到
// 一定要先有li,才可以获取删除按钮:
// doucument.querySelector():整个页面查询元素
// 父元素.querySelector():父元素中查找元素
image.png

1.1委托事件测试

  1.       <div>点我</div>
  2.     <ul>
  3.         <input type="text">
  4.     </ul>
  5.     <script>
  6.         let input = document.querySelector('input')
  7.         input.onkeydown = function (e) {
  8.             if (e.key == 'Enter') {
  9.                 console.log(e.key);
  10.                 console.log(input.value);
  11.                 //创建空标签
  12.                 let li = document.createElement('li')
  13.                 // 3.2为空标签新增内容
  14.                 li.innerHTML = `            
  15.                 <input type="checkbox" name="" id="">
  16.                 <span>${input.value}</span>
  17.                 <button class = "delete">x</button>    
  18.                 `
  19.                 // 3.添加到DOM树 父元素.appendChild(子元素)
  20.                 document.querySelector('ul').appendChild(li)
  21.             }
  22.         }
  24.         // 委托事件  处理动态新增元素、节点
  25.         document.querySelector('ul').onclick = function (e) {
  26.             if (e.target.classList.contains('delete')) {
  27.                 this.removeChild(e.target.parentNode)
  28.             }
  29.         }
  31.         document.querySelector('div').onclick = function () {
  32.             this.style.backgroundColor = 'pink'
  33.             this.style.textDecoration = "line-through"
  34.         }

1.2删除对应勾选框测试：

image.png

  1.  <ul>
  2.         <li class="dis"><input type="checkbox" name="num" id="" checked>0</li>
  3.         <li><input type="checkbox" name="num" id="">1</li>
  4.         <li><input type="checkbox" name="num" id="">2</li>
  5.         <li><input type="checkbox" name="num" id="">3</li>
  6.         <li><input type="checkbox" name="num" id="">4</li>
  7.     </ul>
  8.     <button>删除</button>
  9.     <script>
  10.         let button = document.querySelector('button')
  11.         let inputList = document.querySelectorAll('input')
  12.         // 1.点击按钮
  13.         button.onclick = function () {
  14.             //遍历每个选择框
  15.             for (let i = 0; i < inputList.length; i++) {
  16.                 console.log(inputList[i].checked);
  17.                 // 如果选择框被勾选了
  18.                 if (inputList[i].checked) {
  19.                     // 就删除 这个选择框
  20.                     let liList = document.querySelectorAll('li')
  21.                     liList[i].classList.add('dis')
  22.                 }
  23.             }
  24.         }
  26.     </script>

12.22随机点名思路:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         body {
  16.             /* background-image: linear-gradient(rgb(255, 24, 24), rgb(37, 37, 255)); */
  17.             background-attachment: fixed;
  18.             transition: all 10s !important;
  19.         }
  21.         h1 {
  22.             text-align: center;
  23.             background-color: chartreuse;
  24.             transition: all 1s !important;
  25.         }
  27.         .sn {
  28.             margin: 10px;
  29.             color: #c07ac8;
  30.         }
  32.         .btn {
  33.             background-color: #9acc32;
  34.             color: #fff;
  35.             width: 50px;
  36.             height: 50px;
  37.             margin: 10px;
  38.         }
  40.         select {
  41.             width: 80px;
  42.             height: 26px;
  43.             background-color: #feebcd;
  44.         }
  46.         .uname ul li {
  47.             float: left;
  48.             list-style: none;
  49.             background-color: #000;
  50.             font-size: 14px;
  51.             color: #fff;
  52.             width: 70px;
  53.             height: 35px;
  54.             margin: 3px;
  55.             line-height: 35px;
  56.             text-align: center;
  58.         }
  60.         .uname ul li.active {
  61.             background-color: #acfe2f;
  62.             color: #c07ac8;
  63.         }
  65.         .sn span {
  66.             margin-left: 10px;
  67.         }
  68.     </style>
  71. </head>
  73. <body>
  74.     <!--  ### 题2：数据的基本添加和渲染
  76.     - 目标   
  77.     - 能够收集页面元素的数据，并生成自己需要的数据
  78.     - 理解页面操作与数据之前的关联，理解页面操作本质上就是数据操作，这对后期及至项目的学习都有重大的意义
  79.     - 掌握页面元素数据的收集
  80.     - 能够理解封装的需要，实现功能的封装
  82.     - 效果：
  83.     - 需要掌握的技能
  84.     - 根据dom元素数据生成需要的数据对象
  85.     - 数组操作api的使用
  86.     - 添加数据之后的页面刷新--函数封装 -->
  88.     <h1>点名系统</h1>
  90.     <h2 class="sn">被选中的小伙伴: <span>彭雅娴</span></h2>
  92.     <button class="btn">开始</button>
  93.     时间:
  94.     <select name="" id="" class="timer">
  95.         <option value="10">10</option>
  96.         <option value="9">9</option>
  97.         <option value="8">8</option>
  98.         <option value="7">7</option>
  99.         <option value="6">6</option>
  100.         <option value="5">5</option>
  101.         <option value="4">4</option>
  102.         <option value="3">3</option>
  103.         <option value="2">2</option>
  104.         <option value="1">1</option>
  105.     </select>
  107.     <div class="uname">
  108.         <ul>
  109.             <li class="active">吕毕丹</li>
  110.             <!-- <li>孙庆材</li> -->
  111.         </ul>
  112.     </div>
  114.     <script>
  115.         let unameArr = [
  116.             '梦洁',
  117.             '雅静',
  118.             '韵寒',
  119.             '莉姿',
  120.             '沛玲',
  121.             '欣妍',
  122.             '歆瑶',
  123.             '凌菲',
  124.             '靖瑶',
  125.             '阮秋帛',
  126.             '赵同原',
  127.             '邹月蕴',
  128.             '马文松',
  129.             '熊可渊',
  130.             '唐飘遥',
  131.             '严 华',
  132.             '叶 霞',
  133.             '韵寒',
  134.             '莉姿',
  135.             '沛玲',
  136.             '欣妍',
  137.             '歆瑶',
  138.             '凌菲',
  139.             '靖瑶',
  140.             '阮秋帛',
  141.             '赵同原',
  142.             '邹月蕴',
  143.             '马文松',
  144.             '熊可渊',
  145.             '唐飘遥',
  146.             '严 华',
  147.             '叶 霞',
  148.             '韵寒',
  149.             '莉姿',
  150.             '沛玲',
  151.             '欣妍',
  152.             '歆瑶',
  153.             '凌菲',
  154.             '靖瑶',
  155.             '阮秋帛',
  156.             '赵同原',
  157.             '邹月蕴',
  158.             '马文松',
  159.             '熊可渊',
  160.             '唐飘遥',
  161.             '严 华',
  162.             '叶 霞',
  163.             '封 英',
  164.             '方顺清',
  165.             '何 芹',
  166.             '叶 霞',
  167.             '封 英',
  168.             '崔致敏',
  169.             '邹月蕴',
  170.             '马文松',
  171.             '夏 良',
  172.             '崔致敏',
  173.             '封腾麟',
  174.             '马文松',
  175.             '熊可渊',
  176.             '唐飘遥',
  177.         ]
  179.         // 新增节点
  180.         // 循环得到每个li
  181.         for (let i = 0; i < unameArr.length; i++) {
  182.             // 1.创建空标签 
  183.             let li = document.createElement('li')
  184.             // 2.将后台数据渲染到页面
  185.             li.innerText = unameArr[i]
  186.             // 3.添加到DOM树
  187.             document.querySelector('.uname ul').appendChild(li)
  188.         }
  190.         // 1.获取元素
  191.         let btn = document.querySelector('.btn')//按钮
  192.         let liList = document.querySelectorAll('.uname li')
  195.         // 2.事件注册 点击
  196.         btn.onclick = function () {
  197.             let timeID = setInterval(function () {
  198.                 // 2.1事件处理 姓名随机li              
  199.                 // 2.2 得到随机下标
  200.                 let rondomIndex = Math.floor(Math.random() * (unameArr.length)) //含最大值，含最小值 
  201.                 console.log(unameArr[rondomIndex]);
  202.                 // 得到每个li 这个循环好像可以省略
  203.                 for (let i = 0; i < liList.length; i++) {
  204.                     //排他思想  狙击排他思想 找到含有active类名的兄弟 移除他   不移除就可以依次显示在页面
  205.                     document.querySelector('.uname li.active').classList.remove('active')
  206.                     // 通过随机下标 为自己添加样式
  207.                     liList[rondomIndex].classList.add('active')
  208.                 }
  209.             }, 200)
  211.             // 3.开启定时器
  212.             //3.1定义 自定义倒计时    取得时间框的对应下拉菜单value时间
  213.             let timer = document.querySelector('.timer').value
  214.             let timeID2 = setInterval(function () {
  215.                 // 3.2  对应的下拉菜单时间time--
  216.                 timer--
  217.                 console.log(timer);
  218.                 if (timer <= 0) {
  219.                     // 清除随机点名倒计时
  220.                     clearInterval(timeID)
  221.                     // 清除自身定时器
  222.                     clearInterval(timeID2)
  223.                     // 将被点到的人 显示在页面
  224.                     // document.querySelector('.sn span').innerText += document.querySelector('.uname li.active').innerText
  225.                     let span = document.createElement('span')
  226.                     span.innerText = document.querySelector('.uname li.active').innerText
  227.                     document.querySelector('.sn').appendChild(span)
  228.                 }
  229.             }, 1000)
  230.         }
  235.         //3.背景颜色变化 随机颜色
  236.         let timeID = setInterval(function () {
  237.             let h1 = document.querySelector('h1')
  238.             let randomColor1 = Math.floor(Math.random() * (255 - 0 + 1) + 0)
  239.             let randomColor2 = Math.floor(Math.random() * (255 - 0 + 1) + 0)
  240.             let randomColor3 = Math.floor(Math.random() * (255 - 0 + 1) + 0)
  241.             // console.log("rgb" + "(" + randomColor + "," + randomColor1 + "," + randomColor2 + ")");
  242.             h1.style.color = "rgb" + "(" + randomColor1 + "," + randomColor2 + "," + randomColor3 + ")"
  243.             // document.body.style.backgroundImage = ""
  244.             // console.log("linear - gradient" + "(" + "rgb" + "(" + randomColor + "," + randomColor1 + "," + randomColor2 + ")" + "," + "rgb" + "(" + randomColor3 + "," + randomColor2 + "," + randomColor1 + ")" + ")")
  246.         }, 1000)
  248.         // let bg = setInterval(function () {
  249.         //     let h1 = document.querySelector('h1')
  250.         //     let randomColor1 = Math.floor(Math.random() * (255 - 0 + 1) + 0)
  251.         //     let randomColor2 = Math.floor(Math.random() * (255 - 0 + 1) + 0)
  252.         //     let randomColor3 = Math.floor(Math.random() * (255 - 0 + 1) + 0)
  253.         //     document.body.style.backgroundImage = "linear-gradient" + "(" + "rgb" + "(" + randomColor1 + "," + randomColor2 + "," + randomColor3 + ")" + "," + "rgb" + "(" + randomColor3 + "," + randomColor2 + "," + randomColor1 + ")" + ")"
  254.         // }, 1000)
  256.     </script>
  258. </body>
  260. </html>

2.开关思想:

开关思想 : 用于解决一类问题的思路
判断数组中是否所有元素都满足条件
1.选择框是否全部勾选
2.表单是否全部填写
3.正则是否全部通过

let flag = true 全部成立
if(条件不满足){ //只要有一个条件不成立
flag =false //条件就不成立 后面就没有必要检查
break
}
全部条件 =flag
image.png
image.png

image.png
JS高级开关

3.localStorage: 本地存储 将数据存储到浏览器 (内存存储)(永久存储)

  1.         2.语法:   <br />            存：  localStorage.setItem('属性名', '属性值')<br />            取：let 变量名 =  localStorage.getItem('属性名')<br />            删：  localStorage.removeItem('属性名')<br />            清空： localStorage.clear()<br />    <br />        3.注意点<br />           3.0 存储没有返回值  读取需要返回值<br />           3.1 存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串<br />           3.2 永久存储。除非自己删，否则一直存在于浏览器
  1.  */
  2.        document.querySelector('.btn1').onclick = function () {
  3.             localStorage.setItem('uname', '张三')//硬盘存储
  4.             localStorage.setItem('password', '123456')
  5.             localStorage.setItem('age', 18)
  6.             localStorage.setItem('nickname', ['测试', '测试'])//存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
  7.         }
  8.     取数据:
  9.     let 变量名= localStorage.getItem('age')//存储没有返回值  读取需要返回值
  10.     console.log(变量名)
  12. sessionStorage.setItem('uname', '张三') // 临时存储---内存存储
  1. /4.将用户名和密码存入 localStorage
  2.         let obj = {
  3.           username : username.value,
  4.           password : password.value
  5.         }
  6.         /* localStorage只能存储字符串类型，如果是对象需要转成JSON字符串 */
  7.         localStorage.setItem('user', JSON.stringify(obj) )

4.正则判断

image.png

5.面向对象:

  • 面向对象不是一门技术，而是一种解决问题的思维方式
  • 面向对象的本质是对面向过程的一种封装

面向对象：注重的是结果
面向过程：注重的是过程

6.数组对象api常用:

image.png

7.字符串常用api

  1.  <script>
  3.         let str = '风止意难平'
  5.         //1.字符串也可以像数组一样 通过下标获取某个字符串
  6.         console.log(str[1]);//止
  8.         //2.indexOf()  返回某个指定首字符串的位置下标
  9.         //应用:检查一个字符串中是否有某个字符
  10.         //有:则返回下标  没有:返回固定值 -1
  11.         let a = str.indexOf('难平')
  12.         console.log(a);//3 //有:则返回下标位置
  14.         let b = str.indexOf('嗯')
  15.         console.log(b) //-1 //没有:返回固定值 -1
  18.         // 3.split('分隔符') :切割字符串
  19.         //返回值一定是数组: 元素对应切割的每一个部分
  20.         let url = 'https://www.yuque.com?name="张三",age="18"'
  21.         let c = url.split('?')
  22.         console.log(c);// ['https://www.yuque.com', 'name="张三",age="18"']
  23.         d = c[1].split(',')
  24.         console.log(d);//['name="张三"', 'age="18"']
  26.         let f = d.join() //把数组元素拼接成一个字符串
  27.         console.log(f); //name = "张三", age = "18"
  29.         //4.substr(起始下标,截取长度) :截取部分字符串
  30.         let str2 = "好好学习,天天向上"
  31.         let l = str2.substr(5, 4)
  32.         console.log(l)//天天向上
  34.         // 5.replace("要替换的内容","替换成的文字")
  35.         let str3 = "好好学习,天天向上"
  36.         let m = str3.replace("好好学习,天天向上", "键盘敲烂,月薪过万")
  37.         console.log(m)//键盘敲烂,月薪过万
  38.     </script>

8.了解工厂函数

  1.     <script>
  2.         // 解决代码冗余方案: 封装函数
  3.         // 什么是工厂函数 : 创建多个对象的函数
  5.         function creatPerson(name, age, sex) {
  6.             // 1.声明对象
  7.             let p = {
  8.                 // 2.属性名:属性值
  9.                 namer: name,
  10.                 ager: age
  11.             }
  12.             //2.对象.属性名 = 属性值
  13.             p.sex = sex
  14.             // 3. 返回值
  15.             return p
  16.         }
  18.         let zxy = creatPerson('张学友', 18, '男')
  19.         let ldh = creatPerson('刘德华', 20, "男")
  20.         console.log(zxy);
  21.         console.log(ldh);
  22.     </script>

9.(重点)构造函数

构造函数:作用于工厂函数一致,但是代码更少
构造函数:使用new来调用的函数
new 工作原理:
1.创建一个空对象{}
2.this指向这个对象 this = {}
3.对象赋值 this.属性名 = 属性值
4.返回这个对象
new 细节:
(1)构造函数首字母大写:为了提醒别人不要忘记new关键字
(2)构造函数里主动写了return:
如果是值类型:无效 继续返回new创建的对象
引用类型:有效 会覆盖new创建的对象

  1. function Person(name, age) {
  2.             // 1.创建一个空对象{}
  3.             // 2.this指向这个对象 this.属性名 = {}
  4.             // 3.对象赋值
  5.             this.name = name
  6.             this.age = age
  7.             //4.返回这个对象
  8. }
  9.         let zs = new Person('张三', 18)
  10.         let l4 = new Person('李四', 19)
  11.         console.log(zs, l4);

10.(重点)原型对象

  • 1.原型对象: 

    1. - 创建函数的时候,系统会自动帮我们创建一个与之对应的对象,称为原型对象

  • 2.原型对象作用: 

    1. - **解决内存浪费+ 变量污染**

  • 3.构造函数 原型对象 实例对象的关系

    • 3.1 prototype:属于构造函数,指向原型对象

      1.         作用:解决内存浪费+变量污染

    • 3.2 proto:属于实例对象,指向原型对象

      1.        作用:实例对象 访问原型对象的成员

    • 3.3 constructor:属于原型对象,指向构造函数

      1.         作用让实例对象知道自己是谁创建的

先有构造函数 再有原型对象 再有实例对象
image.png
image.png

11.面向对象的三大特征

封装:

  • 将某个具体功能封装在对象中,只对外部暴露指定的接口,外界在使用的时候,只需考虑怎么用,不需要考虑内部怎么实现

    (重点)继承:

  • 一个对象拥有其他对象的属性和方法/行为

    多态:

  • 一个对象在不同情况下的多种状态

1.混入式继承

遍历 父对象 的所有属性值，添加给 子对象
特点：每继承一次，就要执行一次循环
应用场景：单个对象继承
image.png

  1. //继承：让一个对象拥有另一个对象的属性和方法
  2.         let father = {
  3.             house: {
  4.                 address: '北京一环',
  5.                 price: 100000000
  6.             },
  7.             car: {
  8.                 brand: '劳斯莱斯',
  9.                 price: 5000000
  10.             }
  11.         }
  12.         let son = {
  13.             name: 'ikun',
  14.             age: 30
  15.         }
  17.         //1.混入式
  18.         //解决方案：遍历父对象的所有属性值，添加给子对象
  19.         //特点：每继承一次，就要执行一次循环
  20.         //应用场景 ： 单个对象继承
  22.         for (let key in father) {
  23.            son[key] = father[key]
  24.         }
  25.         console.log(son)

2.替换原型:

将父对象作为子对象构造函数的原型
特点：会丢失原型之前的成员变量
应用场景：多个对象继承
image.png

  1. let father = {
  2.             house: {
  3.                 address: '北京一环',
  4.                 price: 100000000
  5.             },
  6.             car: {
  7.                 brand: '劳斯莱斯',
  8.                 price: 5000000
  9.             }
  10.         }
  12.         function Son(name, age) {
  13.             this.name = name
  14.             this.age = age
  15.         }
  16.         Son.prototype.sayHi = function () {
  17.             console.log('你好')
  18.         }
  19.         //让父对象成为子对象构造函数的原型
  20.         Son.prototype = father
  22.         console.log(Son.prototype);
  24.         //实例化对象
  25.         let son1 = new Son('ikun', 30)
  26.         console.log(son1)
  27.         let son2 = new Son('班长', 20)
  28.         console.log(son2)

3. 混合式继承

混入式 + 替换原型
特点 :遍历 父对象 所有的属性值,添加给 子对象构造函数 的原型
应用场景:多个对象继承,但是不会覆盖原来的默认原型
image.png

  1. let father = {
  2.         house:{
  3.             address:'北京一环',
  4.             price:100000000
  5.         },
  6.         car:{
  7.             brand:'劳斯莱斯',
  8.             price:5000000
  9.         }
  10.     }
  11.         //1.构造函数
  12.     function Son (name,age  ) {
  13.         this.name = name
  14.         this.age = age
  15.     }
  16.         //2.默认原型对象
  17.     Son.prototype.sayHi = function(){
  18.         console.log('你好')
  19.     }
  21.    //4.(混合式继承)将父对象的所有属性添加到子对象构造函数的原型中
  22.     for(let key in father){
  23.         Son.prototype[key] = father[key];
  24.     }
  26.     //3.实例化对象
  27.     let son1 = new Son('ikun',30)
  28.     console.log ( son1 )
  29.     let son2 = new Son('班长',20)
  30.     console.log ( son2 )

12.(重点)原型链(框架底层基础)

1.原型链:

每一个对象，都有proto指向自身的原型。 而原型也是对象，也有自己的
proto指向原型的原型，以此类推形成链式结构，称之为原型链。

2.对象访问原型链中成员的规则 ：就近原则

当访问对象的成员，先看自己有没有。有则访问，没有则看原型有没有。原型有则访问，
没有则访问原型的原型，没有则继续往上找。以此类推，一直找到原型链终点 ：null .
如果还找不到， 如果是属性 ： 则获取undefined 如果是方法 ，则报错xxx is not defined .
原型对象里的成员 实例对象可以直接使用 因为实例对象里面有proto属性指向原型对象

3.原型链作用 : 继承

js语言 通过 原型链 实现面向对象继承

只有对象才有原型，这里一定要把基本数据类型string、number、boolean，和基本包装类型（特殊的引用类型对象）String、Number、Boolean区分开来，不要搞混淆
image.png

  1. <script>
  3.         /* 
  4.         1.原型链 ：每一个对象，都有__proto__指向自身的原型。 而原型也是对象，也有自己的
  5.         __proto__指向原型的原型，以此类推形成链式结构，称之为原型链。
  7.         2.对象访问原型链中成员的规则 ：就近原则
  8.             当访问对象的成员，先看自己有没有。有则访问，没有则看原型有没有。原型有则访问，
  9.             没有则访问原型的原型，没有则继续往上找。以此类推，一直找到原型链终点 ： null.
  10.             还没有， 如果是属性 ： 则获取undefined  如果是方法 ，则报错xxx is not defined 
  11.          */
  13.         //1.构造函数
  14.         function Person(name,age){
  15.             this.name = name;
  16.             this.age = age;
  17.         };
  19.         //2.原型对象
  20.         Person.prototype.sayHi = function(){
  21.             console.log('人生若只如初见，何事秋风悲画扇');
  22.         };
  24.         Person.prototype.type = '哺乳动物';
  26.         //3.实例化对象
  27.         let p1 = new Person('又又',18);
  28.         console.log(p1);
  30.         //请说出以下代码执行结果
  31.         console.log(p1.name);//又又      p1自己有name属性
  32.         console.log(p1.type);//哺乳动物   p1自己没有type，但是p1的原型有
  33.         console.log(p1.hobby);//undefined p1自己没有hobby，原型也没有
  34.         p1.sayHi();// 人生若只如初见，何事秋风悲画扇   p1自己没有这个方法，原型有
  35.        // p1.eat();//报错 xxx is not defined    p1自己没有这个方法，原型也没有
  37.        //为什么不报错？  p1自己没有这个方法，原型也没有这个方法，但是原型的原型有
  38.         p1.toString();
  40.         //查看p1的原型链
  41.         console.log(p1.__proto__.constructor);//Person
  42.         console.log(p1.__proto__ === Person.prototype);//true
  44.         //查看p1的原型的原型
  45.         console.log(p1.__proto__.__proto__.constructor);//Object
  46.         console.log(p1.__proto__.__proto__ === Object.prototype);//true
  48.         //查看p1的原型的原型的原型
  49.         console.log(p1.__proto__.__proto__.__proto__);//null
  51.     </script>

image.png

13.instanceof 运算符

instanceof运算符作用: 限制函数参数数据类型

例如: …… not of type …… 报错 函数参数数据类型错误
用于检测构造函数的prototype属性 是否出现在某个实例对象的原型链上

instanceof语法： 实例对象 instanceof 构造函数

  1.     let arr = [10,20,30]
  2.     //数组原型链  arr->Arr.prototype->Object.prototype->null
  3.     console.log ( arr instanceof Array )//true
  4.     console.log ( arr instanceof Object )//true
  6.     //报错： 参数不是节点   
  7.         //instanceof关键字一般用在函数中，用于限制参数的数据类型
  8.         //例如 appendChild()参数只能是node节点，如果你传了其他类型就会报错。底层就会用到instanceof来检测参数数据类型
  9.         let h1 = document.createElement('h1')
  10.         h1.innerText = '我是h1标签'
  11.         document.body.appendChild(h1)

14.ES6类与继承

1.class关键字 :

作用： 声明一个类函数
相当于ES5的构造函数，只是代码的阅读性大大提高
 1. 把构造函数和原型全部写在一个大括号里面，提高代码阅读性
2. 必须要使用new才可以调用class函数，否则会报错 提高代码规范
*class关键字语法：
class 构造函数名{
constructor(){
//(1)这里写构造函数代码
};
//(2)原型里面的方法写在下面
eat(){
};
play(){
};
};

class本质其实就是构造函数的另一种写法，本质还是给prototype添加成员
使用了class，一样可以继续使用ES5的prototype

左右两边的结果完全一致
image.png

2.extends关键字 : 作用:类继承

  1.    语法:<br />**class 子类函数 extends 父类函数 **  (extends不能脱离class单独使用)<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/25421229/1640421632791-e6e509c4-e7a3-44f4-93fb-fa64063a9303.png#clientId=u76ff8b62-4ba3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=323&id=uf8a20314&margin=%5Bobject%20Object%5D&name=image.png&originHeight=336&originWidth=683&originalType=binary&ratio=1&rotation=0&showTitle=false&size=147749&status=done&style=none&taskId=u8a64225e-6d61-4c7a-9ba9-6a07c748a39&title=&width=657.4943237304688)<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/25421229/1640433870091-99d1d425-94f2-4f0f-8f8e-f9550698b84f.png#clientId=u76ff8b62-4ba3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=364&id=uff4be596&margin=%5Bobject%20Object%5D&name=image.png&originHeight=624&originWidth=1227&originalType=binary&ratio=1&rotation=0&showTitle=false&size=231466&status=done&style=none&taskId=u54d85198-3314-4f9d-9c26-e86ad159b08&title=&width=715.4943237304688)
  1.     <script>
  2.         class Person {
  3.             //1.构造函数
  4.             constructor(name, age) {
  5.                 this.name = name
  6.                 this.age = age
  7.             }
  8.             //2.原型方法
  9.             eat() {
  10.                 console.log('学习');
  11.             }
  12.         }
  13.         //3.实例多选
  14.         let p1 = new Person('李四', 20)
  15.         console.log(p1);// Person { name: '李四', age: 20 }
  17.         //extends关键字作用:类继承
  18.         // 语法: class 子类函数 extends 父类函数   (extends不能脱离class单独使用)
  19.         // 底层: 替换原型的原型继承(不会覆盖自构造器的原型)
  20.         // Student.prototype.__proto__ = Person.prototype
  21.         /* 
  22.             s1.__proto__ == Student.prototype //s1指向的原型对象 等于构造函数的prototype属性指向
  23.             s1.__proto__.__proto__ == Student.prototype.__proto__ == Person.prototype
  25.         */
  27.         class Student extends Person {
  28.             //子构造函数原型方法
  29.             learn() {
  30.                 console.log('我今天学的很开心');
  31.             }
  32.         }
  34.         let s1 = new Student('张三', 22)
  35.         console.log(s1)//Student { name: '张三', age: 22 }
  36.         s1.learn()//调用子类自己的方法   //我今天学的很开心
  37.         s1.eat()//调用父类方法      //学习
  39.     </script>

3.super关键字 ： 子类中调用父类的方法

如果在子类中，也写了 constructor函数，则必须要调用 super()否则程序报错
语法: super(父类构造函数参数1,父类构造函数参数2)

class 子类函数 extends 父类函数{
//子类构造函数
constructor(父类构造函数参数1,父类构造函数参数2,子类参数){
super(父类构造函数参数1,父类构造函数参数2)
this className = className
}
}
image.png

  1.  // 4.子类继承父类
  2.         class Teacher extends Person {
  3.             // 5.子类构造函数
  4.             constructor(name, age, className) {
  5.                 //6.子类如果想拥有自己的额外属性,就需要加上constructor (父类构造函数参数1,父类构造函数参数2,自己的参数...)
  6.                 //此时必须要调用super(父类构造函数参数1,父类构造函数参数2),否则报错
  7.                 super(name, age)
  8.                 this.className = className
  9.             }
  10.             //7.子构造函数原型方法
  11.             teacher() {
  12.                 console.log('看书');
  13.             }
  14.         }
  1. <script>
  2.         // 1.class类
  3.         class Person {
  4.             // 2.父类构造函数
  5.             constructor(name, age) {
  6.                 this.name = name
  7.                 this.age = age
  8.             }
  9.             //3.原型对象
  10.             sayHi() {
  11.                 console.log('sayHI');
  12.        }
  13. }
  15.         // 4.子类继承父类
  16.         class Teacher extends Person {
  17.             // 5.子类构造函数
  18.             constructor(name, age, className) {
  19.                 //6.子类不能有自己的constructor,
  20.                 // 如果要自己写constructor (父类构造函数参数1,父类构造函数参数2,自己的参数...)
  21.                 // 则必须要调用super(父类构造函数参数1,父类构造函数参数2)
  22.                 super(name, age)
  23.                 this.className = className
  24.             }
  25.             //7.子构造函数原型方法
  26.             teacher() {
  27.                 console.log('看书');
  28.             }
  29.         }
  30.         let t1 = new Teacher('张三', 20, '十一班')
  31.         console.log(t1);
  32. </script>

14.函数补充内容

1.函数中的关键字： arguments

arguments 是一个伪数组arguments 的作用是动态获取函数的实参什么时候用arguments：参数不固定的时候用这个arguments注意：建议如果参数固定用形参，参数不固定用arguments

  1.         作用：arguments:获取函数所有的实参(伪数组)<br />            场景： 例如  arr.push() 底层就是用arguments获取实参
  1.        function fn(a,b){
  2.         console.log(a,b)//10,20
  3.         console.log( arguments )//获取函数所有实参
  4.        }
  6.        fn(10,20,30,40,50)

2.rest参数(剩余参数) : …形参名

  1.         作用：获取所有的剩余参数（真数组）<br />            场景： 绝大多数情况下，剩余参数可以替代arguments
  1. 1.剩余参数（rest参数） ： 获取函数剩余的所有实参
  2.                 * 是一个真数组
  3.                 * 只能写在函数最后形参位置
  4. 2.场景：大多数情况下， rest参数可以替代arguments
  5.             arguments是老语法，浏览器兼容性好
  6.             rest参数：新语法，有些老的浏览器不支持
  7.         */
  8.         function fn(a, b, ...c) {
  9.             console.log(arguments)//获取所有实参 10 20 30 40
  10.             console.log(a, b)//10 20
  11.             console.log(c)//[30,40] 获取剩余参数
  12.         }
  14.         fn(10, 20, 30, 40)

3.函数默认参数：

1.函数传参本质是：实参给形参赋值
2.函数形参和实参数量可以不一致，但是会按照顺序一一赋值
3.函数默认参数：
ES5 : 逻辑 或 中断
ES6 : 形参 = 默认值

  1.                 function fn(a=10,b=20){
  2.             //找真 ： 左边为真，返回左边的值。反之返回右边的值
  3.             // a = a || 10
  4.             // b = b || 20
  5.             console.log(a)//5
  6.             console.log(b)//20
  7.         }    
  9.         fn(5)//底层  fn(5,undefined)

1.this指向

  • 函数三种执行模式 ： 全局函数 、 对象方法 、 构造函数
  • this : 谁 调用 我，我就指向谁 (与函数的声明无关 取决于函数的调用)
    1. 全局函数 ：函数名( ) —————————>this指向window
    2. 对象方法 ：对象名.方法名( ) ———-> this指向对象
    3. 构造函数 ：new 函数名( )——————>this指向new创建的空对象

分析this指向心得 ： this指向取决于函数调用，而函数有三种调用方式。所以this指向也会有三种情况
(1)优先用排除法分析， 如果有new关键字，则指向new创建的对象。 否则不是window就是对象
(2)如何判断this是window还是对象，就看调用是： 函数名() 还是 对象名.方法名()

  1.         let obj = {
  2.             name: 'ikun',
  3.             sayHi: function () {
  4.                 function fn() {
  5.                     console.log(this);
  6.                 }
  7.                 fn()// 普通函数调用 ：函数名()  fn调用了this  所以this指向window 
  8.             }
  9.         }
  10.         obj.sayHi()//window
  1.         let obj1 = {
  2.             name: 'ikun',
  3.             sayHi: function () {
  4.                 console.log(this);
  5.             }
  6.         }
  7.         obj1.sayHi() //对象方法调用 ：对象名.方法名()  对象obj1调用了this  所以this指向obj1对象
  1.         function Fn() {
  2.             console.log(this);
  3.         }
  4.         new Fn()//构造函数调用 ：new 函数名()  根据new执行流程/创建一个空对象-this指向这个对象-对象赋值-返回对象  这里的this指向new创建的空对象

共同的特点： this的指向无法动态修改

2.函数上下文执行模式(call/apply/bind)

2.1上下文模式注意点

  • a.函数上下文三个方法：call() apply() bind(),它们定义在Function构造函数的原型中
  • b.如果将this指向修改为值类型:(number,boolean,string)，则函数会自动帮我们包装成对应的引用类型（基本包装类型)
    • 值类型： '123',1,true
    • 基本包装类型:String('123'),Number(1),Boolean(true)

2.2函数上下文作用：可以动态修改函数中的this指向

2.3 异同点:

  • 相同之处：都可以修改函数中this指向
  • 不同点：
    1.传参方式不同 : call是一一传参，apply是数组/伪数组传参
    2.执行机制不同 : call、apply会立即执行函数， bind不会立即执行函数

2.3 语法

有3种写法，作用都是一样改this，应用场景不同

  • call()语法： 函数名.call(this修改后的指向，参数1,参数2,...)———————适用于函数原本形参 <= 1
  • apply()语法：函数名.apply(this修改之后的指向,伪数组或者数组)——————-适用于函数原本形参 >= 2
  • bind()语法：函数名.bind(this修改后的指向)
    bind()语法并不会立即执行函数，而是返回一个修改指向后的新函数,常用于回调函数
    如果bind的时候传参,则参数也会绑定,之后无法传递实参
  1.       <script>
  2.         /* 
  3.         1.函数三种执行方式 ： 
  4.             全局函数 ： this指向window
  5.             对象方法：  this指向对象
  6.             构造函数 ： this指向new创建的对象
  7.                 共同的特点： this的指向无法动态修改
  9.         2.函数上下文模式 ： 
  10.             2.1 作用： 可以动态修改函数中的this
  11.             2.2 语法： 有3种写法，作用都是一样改this，应用场景不同
  12.                 a. 函数名.call(修改的this,arg1,arg2…………) 
  13.                     * 适用于函数原本形参 <= 1
  14.                 b. 函数名.apply(修改的this,[数组或伪数组])
  15.                     * 适用于函数原本形参 >= 2
  16.                 c. 函数名.bind(修改的this,arg1,arg2…………)
  17.                     * 特点：不会立即执行这个函数，而是返回修改this后的新函数
  18.                     * 适用于不会立即执行的函数 : 事件处理函数，定时器函数
  19.         */
  21.         // function fn(){
  22.         //     //三种执行模式this无法动态修改
  23.         //     //this = {age:18};
  25.         //     console.log(this);
  27.         // };
  29.         // fn();//this:window
  31.         /* 上下文模式 */
  32.         function fn(a, b) {
  33.             console.log(this);
  34.             console.log(a + b);
  35.         };
  37.         //a. 函数名.call(修改的this,arg1,arg2…………) 
  38.         //应用场景： 适用于函数原本形参 <= 1
  39.         fn(10, 20);//this:window   30
  40.         fn.call({ age: 18 }, 100, 200); //age:18  300
  42.         //b. 函数名.apply(修改的this,[数组或伪数组])
  43.         //应用场景： 适用于函数原本形参 >=2
  44.         //apply传参的时候会自动的遍历这个数组，然后按照循序逐一传参
  45.         fn.apply({ age: 88 }, [20, 30]);
  47.         //c. 函数名.bind(修改的this)
  48.         //特点：这个函数不会立即执行，而是返回一个修改this之后的新函数
  49.         //应用场景 ： 事件处理函数，定时器
  50.         let newFn = fn.bind({ name: '坤坤' });
  51.         console.log(newFn);
  52.         newFn(50, 60);
  55.         //4. 定时器中的this一定是指向window
  57.         // 定时器：一段代码间隔事件执行 setTimeout(一段代码，间隔时间)
  59.         //4.1 具名函数
  60.         let test = function () {
  61.             console.log('我是具名函数');
  62.             console.log(this);
  63.         };
  65.         let newTest = test.bind({ name: '张三' })
  67.         setTimeout(newTest, 3000);
  69.         //4.2 匿名函数
  70.         setTimeout(function () {
  71.             console.log('我是定时器中的函数');
  72.             console.log(this);
  73.         }.bind({ name: '李四' }), 2000);
  74.     </script>

call()上下文调用

  1.         function fn(a,b){
  2.             console.log( this )
  3.             console.log(a+b)
  4.         }
  6.         fn(1,2)//this指向window
  8.         //函数名.call(修改的this,参数1,参数2,....)
  9.         fn.call({name:'张三'},10,20)

函数.call() 应用场景

Object.prototype.toString.call()万能检测数据类型
1.Object.prototype.toString() 得到固定格式字符串
2.检测数据类型固定格式语法:Object.prototype.toString.call()
得到一个固定格式字符串： [object 数据类型]**

  1.  /* call场景：数据类型检测 */
  3.         //1. typeof 数据 : 检测数据类型 
  4.         /* typeof有两种数据类型无法检测： null,array  都会得到object */
  6.         console.log( typeof '123' )// 'string'
  7.         console.log( typeof 123 )//'number'
  8.         console.log( typeof true )//'boolean'
  9.         console.log( typeof undefined )//'undefined'
  10.         console.log( typeof null )//'object'
  11.         console.log( typeof [10,20,30] )//'object'
  12.         console.log( typeof function(){} )//'function'
  13.         console.log( typeof {name:'123'} )//'object'
  15.         //2. Object.prototype.toString() : 得到固定格式字符串 
  16.         //"[object type]"，其中 type 是对象的类型
  17.         //检测数据类型固定格式语法：  Object.prototype.toString.call(数据)
  19.         console.log( Object.prototype.toString.call('123') )//[object String]
  20.         console.log( Object.prototype.toString.call(123) )//[object Number]
  21.         console.log( Object.prototype.toString.call(true) )//[object Boolean]
  22.         console.log( Object.prototype.toString.call(undefined) )//[object Undefined]
  23.         console.log( Object.prototype.toString.call(null) )//[object Null]
  24.         console.log( Object.prototype.toString.call([10,20,30]) )//[object Array]
  25.         console.log( Object.prototype.toString.call(function(){}) )//[object Function]
  26.         console.log( Object.prototype.toString.call({name:'123'}) )//[object Object]

apply()上下文调用

  1.         function fn(a,b){
  2.             console.log(this)
  3.             console.log(a+b)
  4.         }
  6.         fn(1,2)//普通函数  this->window
  8.         //(1)函数名.call(修改的this,参数1,参数2,....)
  9.         fn.call({name:'张三'},10,20)
  10.         //(2)函数名.apply(修改的this, 数组/伪数组 )
  11.         //apply传参的时候会自动的遍历这个数组，然后按照循序逐一传参  a = [30,40][0] b=[30,40][1]
  12.         fn.apply({name:'李四'},[30,40])
  13.     </script>

arr.push.apply(arr,伪数组)的应用场景:伪数组转真数组

  1. <script>
  3.  /* 
  4.         伪数组： 有数组三要素（下标、元素、长度），但是不能使用数组的方法
  5.             伪数组 本质是对象
  6.             伪数组不能使用数组方法： 伪数组的原型指向对象的原型，而不是Array的原型
  7. */
  8.         let obj = {
  9.             0: 10,
  10.             1: 20,
  11.             2: 30,
  12.             3: 40,
  13.             length: 4,//length 省略不了
  14.         }
  15.         console.log(obj[0]);
  17.         //将伪数组转成真数组 arr.push 往数组后面新增元素 返回的是数组的长度
  18.         let newArr = []
  19.         let a = newArr.push(obj[0], obj[1], obj[2], obj[3])
  20.         console.log(newArr)//[10, 20, 30, 40]
  21.         console.log(a)//数组长度 4
  23.         // ES5:上下文
  24.         let newArr1 = []
  25.         newArr1.push.apply(newArr1, obj)
  26.         //第一个参数:newArr1 本来this就是newArr 这里不需要修改this(相当于this不变)
  27.         //第二个参数:obj 借助apply特点:自动遍历伪数组/数组,逐一传参(自己省去了for循环)
  28.         console.log(newArr1);
  30.         // ES6推荐: Arr.from(伪数组)   伪数组转成真数组
  31.         let arr = Array.from(obj)
  32.         console.log(arr);
  33.     </script>

Math.max.apply(Math, arr)应用场景:求数组最大值

  1.  <script>
  2.         //求数组最大值
  3.         let arr = [10, 13, 12, 3, 14, 23, 32]
  5.         // 1.arr.sort() 数组排序 参数:回调函数 固定语法死记硬背
  6.         //     arr.sort(function (a, b) {
  7.         //         return a - b//从小到大排
  8.         //         return b - a//从大到小排序
  9.         //     })
  10.         arr.sort(function (a, b) {
  11.             return b - a
  12.         })
  13.         console.log(arr[0]);
  15.         //2.擂台思想
  16.         let max = 0
  17.         for (let i = 0; i < arr.length; i++) {
  18.             if (arr[i] > max) {
  19.                 max = arr[i]
  20.             }
  21.         }
  22.         console.log(max)
  24.         // ES5:  Math.max.apply(Math, 数组名)
  25.         //函数名.apply(修改的this,数组/伪数组)
  26.         //第一个参数 Math: Math调用了方法 this指向的就是Math,这里就不需要修改this(传Math,相当于this不变)
  27.         //第二个参数 arr :借助apply的特点.自动遍历数组/伪数组  逐一传参
  28.         let max3 = Math.max.apply(Math, arr)
  29.         console.log(max3);
  31.         //ES6(推荐):
  32.         let max4 = Math.max(...arr)
  33.         console.log(max4)
  34.     </script>

bind()上下文调用

  1.   function fn(a,b){
  2.             console.log(this)
  3.             console.log(a+b)
  4.         }
  6.         fn(1,2)//普通函数  this->window
  8.         //(1)函数名.call(修改的this,参数1,参数2,....)
  9.         fn.call({name:'张三'},10,20)
  10.         //(2)函数名.apply(修改的this, 数组/伪数组 )
  11.         //apply传参的时候会自动的遍历这个数组，然后按照循序逐一传参  a = [30,40][0] b=[30,40][1]
  12.         fn.apply({name:'李四'},[30,40])
  13.         //(3)函数名.bind(修改this)
  14.         //bind不会立即调用函数，而是得到一个修改this之后的新函数
  15.         let newFn = fn.bind({name:'王五'})
  16.         newFn(25,66)

bind()应用场景

bind场景主要是修改 ‘不需要立即执行的函数
//事件处理函数、定时器函数

  1.  //bind场景主要是修改 '不需要立即执行的函数'
  2.         //   事件处理函数、定时器函数
  4.         //1.定时器中的this一定是window
  5.         let fn = function(){
  6.             console.log( this )
  7.         }
  8.         //使用bind修改this
  9.         let newFn = fn.bind({name:'666'})
  10.         // fn() : 调用函数， 运行结果是函数返回值
  11.         // fn : 变量取值， 取出fn中存储的堆地址
  12.         setTimeout( newFn ,3000)
  14.         //下面这个写法和上面写法是一样的 ：   函数是数据类型,也可以像其他数据一样直接使用语法
  15.         setTimeout(function(){
  16.             console.log(this)
  17.         }.bind({name:'干饭'}),3000)

上下文模式注意点

  1. /* 
  2.         1. 函数上下问执行模式 ： 动态修改this
  3.             注意点 ： 修改的this只能是引用类型
  5.            2.注意点： this一定是指向对象（引用类型）
  6.                 a.如果修改的this是 ： string,number,boolean则编译器会自动转成对应的对象类型。
  7.             基本包装类型 ： new String()   new Number()  new Boolean()
  8.              b.如果修改的this是： undefined和null，则修改无效
  9. */
  11.         function fn() {
  12.             console.log(this);
  14.         };
  16.         fn.call('str');//String
  17.         fn.call(1);//Number
  18.         fn.call(true);//Boolean
  20.         //如果传的是undefined和null，或者不传。代码不会报错，也不会帮我们修改this，还是原来的window
  21.         fn.call(undefined);//Window
  22.         fn.call(null);//Window
  23.         fn.call();//Window
  24.         fn.call(window);//Window

3.递归函数 ：

/ 高阶函数： 自调用函数、回调函数、闭包、递归 /

什么是递归函数？ ： 函数内部调用自己
注意点： 需要满足条件才会递归，否则会导致死循环
 递归函数和循环功能类似

  1.         //一个函数递归
  2.         // function fn(){
  3.         //     console.log('哈哈');
  4.         //     fn();           
  5.         // };
  7.         // fn();
  9.         //两个函数递归
  10.         // function fn1(){
  11.         //     console.log('哈哈');
  12.         //     fn2();
  14.         // };
  16.         // function fn2(){
  17.         //     console.log('呵呵');
  18.         //     fn1();
  20.         // };
  21.         // fn2();
  24.         //需求：写一个函数，打印三次 班长爱坤哥
  26.         let i = 1;
  27.         function fn(){
  28.             console.log('好好学习');
  29.             i++;
  30.             if(i <= 3){
  31.                 fn();
  32.             };
  34.             //循环实现
  35.             // for(let i = 1;i<=3;i++){
  36.             //     console.log('班长爱坤哥');
  38.             // };
  39.         };
  40.         fn();

递归应用场景:

2.1 浅拷贝与深拷贝

1.浅拷贝： 拷贝的是地址， 修改拷贝后的数据对原数据有影响
  1.        //声明一个对象
  2.         //拷贝： 把对象中存储的数据 拷贝一份赋值给其他对象
  3.         let obj = {
  4.             name:'ikun',
  5.             age:30,
  6.             hobby:['讲课','学生','学习'],
  7.             friend:{
  8.                 name:'朋友',
  9.                 sex:'男'
  10.             }
  11.         }
  13.         //浅拷贝： 拷贝的是地址
  14.         let obj1 = obj
  15.         //由于浅拷贝，拷贝的是地址。 所以修改拷贝后的数据，原来的数据也会变化
  16.         obj1.hobby = '美食'
  17.         console.log(obj1,obj)

2.深拷贝：拷贝的是数据， 修改拷贝后的数据对原数据没有影响
  1.   let obj = {
  2.             name:'ikun',
  3.             age:30,
  4.             hobby:['讲课','学生','学习'],
  5.             friend:{
  6.                 name:'朋友',
  7.                 sex:'男'
  8.             }
  9.         }  
  11.         /* 
  12.         (1)遍历obj，把所有的属性添加给newObj
  13.         (2)如果obj[key]是引用类型(数组、对象)，则不能直接拷贝地址
  14.             (2.1)数组：给newObj声明一个空数组,然后遍历obj[key],把里面元素添加给newObj[key]
  15.             (2.2)对象：给newObj声明一个空对象,然后遍历obj[key],把里面元素添加给newObj[key]
  16.         (3)如果obj[key]不是引用类型，则直接赋值。结束递归
  17.         */
  19.         function kaobei(newObj,obj){
  20.             for(let key in obj){
  21.                 //判断 obj[key] 是不是数组类型
  22.                 if( obj[key] instanceof Array ){
  23.                     //声明一个空数组，然后继续拷贝数组里面的数据
  24.                     newObj[key] = []
  25.                     kaobei(newObj[key],obj[key])
  26.                 }else if(obj[key] instanceof Object){
  27.                     //声明一个空对象，然后继续拷贝数组里面的数据
  28.                     newObj[key] = {}
  29.                     kaobei(newObj[key],obj[key])
  30.                 }else{
  31.                     newObj[key] = obj[key]
  32.                 }
  33.             }
  34.         }
  36.         //调用深拷贝函数
  37.         let newObj = {}
  38.         kaobei(newObj,obj)
  39.         //深拷贝：修改拷贝的数据，对原数据没有影响
  40.         newObj.hobby[0] = '111'
  41.         console.log( newObj,obj)

3.用JSON转换实现深拷贝
  1. /*   2.深拷贝有两种实现方式
  2.             2.1 推荐使用：json转换
  3.             2.2 递归 ：
  4. */
  5.   let obj = {
  6.             name:'ikun',
  7.             age:30,
  8.             hobby:['讲课','学生','学习'],
  9.             friend:{
  10.                 name:'朋友',
  11.                 sex:'男'
  12.             }
  13.         }    
  15.         //(1)先把js对象转成json格式字符串 :  JSON.stringify(js对象)
  16.         //json在把js转成json格式字符串的时候，底层会自动帮你深拷贝
  17.         // let json = JSON.stringify(obj)
  18.         // console.log( json )
  19.         //(2)再把刚才的json字符串，转成js对象 ： JSON.parse( json格式 )
  20.         // let js = JSON.parse( json )
  22.         // js.hobby = '学习'
  23.         // console.log( js,obj )
  25.         //以上两个流程，可以简写成一行代码
  26.         let newObj = JSON.parse( JSON.stringify( obj ) )
  27.         newObj.friend = '小狗'
  28.         console.log(newObj,obj)

4.遍历dom树
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.       }
  14.       .menu p {
  15.         width: 100px;
  16.         border: 3px solid;
  17.         margin: 5px;
  18.       }
  20.       .menu > div p {
  21.         margin-left: 10px;
  22.         border-color: red;
  23.       }
  25.       .menu > div > div p {
  26.         margin-left: 20px;
  27.         border-color: green;
  28.       }
  30.       .menu > div > div > div p {
  31.         margin-left: 30px;
  32.         border-color: yellow;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="menu">
  38.       <!-- <div>
  39.         <p>第一级菜单</p>
  40.         <div>
  41.           <p>第二级菜单</p>
  42.           <div>
  43.             <p>第三级菜单</p>
  44.           </div>
  45.         </div>
  46.       </div> -->
  47.     </div>
  48.     <script>
  49.       //服务器返回一个不确定的数据结构,涉及到多重数组嵌套
  50.       let arr = [
  51.         {
  52.           type: '电子产品',
  53.           data: [
  54.             {
  55.               type: '手机',
  56.               data: ['iPhone手机', '小米手机', '华为手机']
  57.             },
  58.             {
  59.               type: '平板',
  60.               data: ['iPad', '平板小米', '平板华为']
  61.             },
  62.             {
  63.               type: '智能手表',
  64.               data: []
  65.             }
  66.           ]
  67.         },
  68.         {
  69.           type: '生活家居',
  70.           data: [
  71.             {
  72.               type: '沙发',
  73.               data: ['真皮沙发', '布沙发']
  74.             },
  75.             {
  76.               type: '椅子',
  77.               data: ['餐椅', '电脑椅', '办公椅', '休闲椅']
  78.             },
  79.             {
  80.               type: '桌子',
  81.               data: ['办公桌']
  82.             }
  83.           ]
  84.         },
  85.         {
  86.           type: '零食',
  87.           data: [
  88.             {
  89.               type: '水果',
  90.               data: []
  91.             },
  92.             {
  93.               type: '咖啡',
  94.               data: ['雀巢咖啡']
  95.             }
  96.           ]
  97.         }
  98.       ]
  100.       //arr:数据   father：父盒子
  101.       function addElement(arr,father){
  102.         //遍历数组，生成div>p添加到父元素中
  103.         for(let i = 0;i<arr.length;i++){
  104.             //(1)创建空标签
  105.             let div = document.createElement('div')
  106.             //(2)设置内容
  107.             div.innerHTML = `<p>${arr[i].type || arr[i]}</p>`
  108.             //(3)添加到父盒子
  109.             father.appendChild(div)
  110.             //如果菜单还有data,说明还有子菜单，则需要继续遍历添加
  111.             if( arr[i].data ){
  112.                 addElement(arr[i].data,div)
  113.             }
  114.         }
  115.       }
  117.       let menu = document.querySelector('.menu')
  118.       //调用函数
  119.       addElement(arr,menu)
  121.     </script>
  122.   </body>
  123. </html>

image.png

4.闭包(closure):

  • 1.闭包是什么 : 闭包是一个可以访问其他函数内部变量的函数
    • 或者理解为 闭包 = 函数 + 上下文引用 的组合
  • 2.闭包的作用 : 解决变量污染

image.png
后期闭包出现较多的一般都会在回调函数里面

  1.         function fn(){
  2.             let a = 1
  3.             //在fn1函数中， 访问了其他函数fn内部的变量。  fn1 + a 形成闭包
  4.             function fn1(){
  5.                 console.log(a)
  6.             }
  7.             fn1()
  8.         }
  9.         fn()
  11.         function test(){
  12.             let num = 1
  14.             setTimeout( function(){
  15.                 console.log(num)  
  16.             },2000)
  17.         }
  19.         test()

闭包场景:

  1.     <script>
  2.         /* 
  3.         1.闭包（closure）是什么？
  4.             1.1 闭包是一个访问其他函数内部变量的函数
  5.             1.2 闭包 = 函数 + 上下文引用   的组合
  6.             总结：形成闭包要有两个条件，缺一不可。 (1)函数  (2)访问其他函数内部变量
  8.         2.闭包作用 : 变量污染
  9.             * 后期闭包出现较多的一般都会在回调函数里面
  10.         */    
  12.         //获取元素
  13.         let input = document.querySelector('input')
  14.         let button = document.querySelector('button')
  17.         button.onclick = function(){
  18.             //有一个变量存储搜索结果
  19.             let str = '6666'
  20.             //模拟网络请求：2秒钟之后获取搜索结果
  21.             setTimeout(function(){
  22.                 alert(`搜索结束，本次搜索结果是${str}`)
  23.             },2000)
  24.         }
  25.     </script>

5.总结梳理:

5.1this三种指向

  1. 全局函数 ：函数名( ) —————————>this指向window
  2. 对象方法 ：对象名.方法名( ) ———-> this指向对象
  3. 构造函数 ：new 函数名( )——————>this指向new创建的空对象

5.2call、apply、bind区别

  • 相同点：都是修改函数this指向
  • 不同点
    • 传参方式不同： call用于单个参数，apply用于多个参数
    • 执行机制不同： call与apply会立即执行， bind不会立即执行
      • call、apply用一次修改一次
      • bind；一次修改，终生有效

5.3闭包

  • 什么是闭包：以下两种回答都可以
    • 闭包是一个访问其他函数内部变量的函数
    • 闭包是 函数 + 上下文代码组合
  • 闭包作用：解决变量污染

5.4递归

  • 什么是递归：函数内部调用自己
  • 递归场景
    • 深拷贝
    • 遍历dom树

Var的关键字特点:(预解析/没有块级)

预解析:js代码从上往下解析前 会现对变量声明进行提升
image.png

1.ES6新语法

1.1-变量声明let与const


 重复定义 修改值 声明提升 块级作用域 循环
var 可以 可以 会 严格来说不支持 可以
let 不可以 可以 不会 支持 可以
const 不可以 不可以(除数组和对象) 不会 支持 不可以

1.没有预解析 : 变量必须要先声明,才能使用
2.有块级作用域 : if for 大括号里面声明的变量是局部变量
let 变量 : 可以修改变量中的数据
const 常量 : 只能在声明的时候赋值一次,不可修改

1.2-解构赋值语法

1.对象解构赋值

1.1 取出对象的值赋值给变量

ES6 解构赋值
let { name, age, sex } = obj

  2.       //1：取出 对象的属性 赋值 给变量
  4.       let obj = {
  5.         name: '张三',
  6.         age: 18,
  7.         sex: '男'
  8.       }
  10.       /* ES5 */
  11.      let name = obj.name;
  12.      let age = obj.age;
  13.      let sex = obj.sex;
  14.      console.log(name,age,sex);
  16.       /* ES6 */
  17.       /* a.这行代码本质:声明三个变量 name，age，sex。取出右边obj对象对应的属性名赋值给左边的变量*/
  18.       let {name,age,sex} = obj;
  19.       console.log(name,age,sex);
  21.       /* b.由于obj对象没有score属性，所以变量score的值为undefined。 */
  22.       let {name,score} = obj;
  23.       console.log(name,score);
  25.       /* c. sex:gender 的含义 ： let gender = obj.sex */
  26.       let {name,sex:gender} = obj;
  27.       console.log(name,gender);

1.2 取出变量的值 赋值给对象的属性

ES6 解构赋值
let obj = { name, age, sex, }

  1. //2：取出变量的值 赋值给对象的属性
  3.      let name = '李四';
  4.      let age = 20;
  5.      let sex = '男';
  6.      let sayHi = function(){
  7.         console.log('你好');
  8.      }
  10.       /* ES5  */
  11.       let person = {
  12.           name : name,
  13.             age : age,
  14.             gender : sex,
  15.           sayHi :sayHi
  16.       }
  17.      console.log(person);
  19.       /* ES6 */
  20.      let person = {
  21.           name,//等价于 name:name
  22.           age,
  23.         gender:sex,//如果属性名和变量名不一致，还是按照以前ES5的写法来赋值
  24.          sayHi,
  25.         play(){//等价于：play:function(){}
  26.              console.log('学习使我快乐');
  27.         }
  28.        };
  29.         console.log(person);

2.数组解构赋值

  1.  <script>
  2.       //数组解构赋值
  4.       let arr = [10, 20, 30]
  6.       /* ES5 */
  7.       // let n1 = arr[0];
  8.       // let n2 = arr[1];
  9.       // let n3 = arr[2];
  11.       // console.log(n1,n2,n3);
  13.       /* ES6 */
  14.       let [n1, n2, n3 = 50, n4 = 100] = arr
  15.       console.log(n1, n2, n3, n4) // 10 20 30 100
  16.     </script>

3.函数参数解构赋值

  1.  <script>
  2.       /* 
  3.     1.学习目标 ： 掌握函数参数的解构赋值
  4.     2.学习路线
  5.         （1）复习 函数 传参的本质是 实参给形参赋值的过程
  6.         （2）使用解构赋值语法 给函数传参
  7.         （3）使用解构赋值语法 设置 函数的默认参数
  8.     */
  10.       /* (1) ES5 :函数传参  */
  12.       /**
  13.        * @description:
  14.        * @param {Object}  obj:对象类型  {name:名字 age:年龄 sex:性别}
  15.        * @return:
  16.        */
  17.       // function fn(obj){
  18.       //     console.log(obj);
  19.       //     //声明三个变量接收对象的参数值
  20.       //     let name = obj.name;
  21.       //     let age = obj.age;
  22.       //     let sex = obj.sex;
  23.       //     console.log(name,age,sex);
  24.       // };
  26.       // fn({
  27.       //     name:'黑马李宗盛',
  28.       //     age:32,
  29.       //     sex:'男'
  30.       // });
  32.       /* (2) ES6 :函数传参  */
  34.       // function fn1({name,age,sex}){
  35.       //     //声明三个变量接收对象的参数值
  36.       //     console.log(name,age,sex);
  37.       // };
  39.       // fn1({
  40.       //     name:'黑马李宗盛',
  41.       //     age:32,
  42.       //     sex:'男'
  43.       // });
  45.       //添加解构语法默认值
  46.       // function fn2({name = '班长',age = 38,sex:gender='女'}){
  47.       //     //声明三个变量接收对象的参数值
  48.       //     console.log(name,age,gender);
  49.       // };
  51.       // fn2({
  52.       //     name:'黑马李宗盛',
  53.       // });
  55.       /* (3)函数默认参数 */
  57.       /* ES5:使用逻辑或短路运算实现 */
  58.       // function fn(n1,n2,n3){
  59.       //     n1 = n1 || 10;
  60.       //     n2 = n2 || 20;
  61.       //     n3 = n3 || 30;
  62.       //     console.log(n1,n2,n3);
  63.       // };
  65.       // fn(5,8);
  66.       // fn();
  68.       /* ES6:使用解构赋值语法默认值实现 */
  69.       function fn (n1 = 10, n2 = 20, n3 = 30) {
  70.         console.log(n1, n2, n3)
  71.       }
  73.       fn(5, 8)
  74.       fn()
  75.     </script>

4.小结：

  1.         1.1 取出对象的属性值 赋值给 变量
  2.             语法:let { name, age, sex } = 对象名
  3.             场景:如果函数参数是对象,就可以进行解构
  5.         1.2 取出变量的值  赋值给 对象的属性
  6.             let 对象名 = {name,age,sex}
  7.             场景:获取多个表单的数据,装入对象中
  9.         2.解构赋值的其他用法
  10.             2.1解构赋值的默认值
  11.             let {name,age = 18,sex} = obj  //if(obj.age==undefined){age =18}else{age = obj.age}
  12.             2.2自定义解构变量名
  13.             let {sex:gender} = obj 相当于 let sex = obj.gender
  15.          1.3 取出数组的元素赋值给变量
  16.              let [n1,n2,n3,n4] = arr
  17.          1.4 取出变量的值 赋值给数组的元素
  18.              let arr = [n1,n2,n3,n4]

开发中,很多函数的参数是对象类型

  1.         function fn({ uname, password }) {
  2.             //函数参数进行解构赋值
  3.             console.log(uname, password);
  4.         }
  5.         fn({ uname: 'admin', password: '123456' })

1.3 箭头函数

1.箭头函数语法:

就是function简写 匿名函数才能转换为箭头函数
把function单词 替换成 箭头=>
把形参()移到箭头的左边

2.箭头函数其他用法:

如果只有一个形参,则可以省略形参小括号
a=>{return a2}
如果函数体只有一行,则可以省略大括号 此时需要省略return
a => a2

3.箭头函数的this指向:

  • (1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this
  • (2)箭头函数中的this指向 ：访问上一个作用域的this
    • 说人话：函数在哪个作用域声明，this就是谁 (本质是通过作用域链访问上一个作用域中的this)
  1. </script>
  2.      //1.匿名函数 //函数表达式
  3.         let fn = function () {
  4.             console.log(11111);
  5.         }
  6.         fn()
  8.         //2.箭头函数
  9.         let fn1 = () => {
  10.             console.log(2222);
  11.         }
  12.         fn1()
  14.         //一个形参 省略小括号  一行函数体 省略大括号和return
  15.         let fn2 = a => a * 2
  16.         console.log(fn2(3));
  18.         //多个形参 
  19.         let fn3 = (d, w, c) => d + w + c
  20.         console.log(fn3(2, 3, 4))
  22.         //对象的解构 配合箭头函数
  23.         let { uname, pwd } = { uname: '张三', pwd: '123456' }
  24.         let fn4 = ({ uname, pwd }) => console.log({ uname, pwd });
  25.         fn4({ uname: '张三', pwd: '123456' })
  26.     </script>

1.4 展开运算符

展开运算符: …
作用:相当于遍历对象简写
作用场景:
1. 链接数组: arr1.push(…arr2)
2. 求数组最大值 :Math.max(…arr)

  1.         //1. 链接数组
  2.         let arr1 = [1, 3, 5, 7]
  3.         let arr2 = [2, 4, 6, 8, 'a']
  4.         arr1.push(...arr2)
  5.         console.log(arr1)//[1, 3, 5, 7, 2, 4, 6, 8, 'a']
  7.         //2.求数组最大值
  8.         let arr3 = [9, 3, 6, 8, 12]
  9.         let max = Math.max(...arr3)
  10.         console.log(max)

1.5数据类型set(集合)

  1. Set :集合。 ES6新增的数据类型，类似于ES5的数组
  2. Set与Array最大的区别 ： Set不支持重复元素
  3. Set经典应用场景 ： 数组去重
  1. // 应用:数组去重
  2.         // 一行代码去重: let newArr = Array.from(new Set(数组))
  3.         //一行代码去重 : let newArr = [...new Set(数组)]
  5.         let arr = [12, 12, 34, 34, 42, 42]
  6.         //1.声明Set
  7.         let set = new Set(arr)
  8.         console.log(set); //{ 12, 34, 42 }
  9.         // 2.把set转成真数组
  10.         let newArr = Array.from(set)
  11.         console.log(newArr);// [12, 34, 42]
  13.         /* 一行代码实现数组去重 */
  14.         let newarr = Array.from(new Set(arr))
  15.         console.log(newarr);
  16.    </script>

2.数组迭代方法

2.1数组map遍历 : (映射数组)

  1. map场景 ： 映射数组。 对数组每一个元素进行映射处理，得到一个全新数组
    映射关系： 每一个元素 0.8
    映射关系： 每一个元素     2
  2. map方法特点
    (1)回调执行次数 === 数组长度
    (2)本身返回值 : 隐射之后的新数组
    (3)回调函数内部return
    return 新数组元素值
    如果不写return， 新数组每一个元素都变成undefined 
  1.         let arr = [88,100,90,66,50]
  2.         //全场8折
  3.         let newArr = arr.map( (value,index)=>{
  4.             console.log(index,value)//下标 元素
  5.             return value*2
  6.         } )
  8.         console.log( newArr )

2.2数组filter遍历 : (筛选数组)

数组filter遍历 筛选数组找出数组中符合条件的元素 返回一个新数组
return true : 满足筛选条件，当前元素放入新数组中
return false : 不满足筛选条件，当前元素不放入新数组
参数是 : 回调函数(元素, 下标)=> { return 新元素 }

image.png
筛选已勾选的 求和
image.png

  1.  let arr = [20, 30, 40, 50, 60]
  2.     /*
  3.         let res = arr.filter(function (value, index) {
  4.             if (value % 3 == 0) {
  5.                 return true
  6.             } else {
  7.                 return false
  8.             }
  9.         })
  10.         console.log(res);//[30, 60]
  11.   */
  12.         //ES6 简化后
  13.         let res1 = arr.filter(value => value % 3 == 0)
  14.         console.log(res1);//[30, 60]

2.2 filfer()应用场景

  1.  <script>
  2.         // 筛选4000-5000之间的产品
  3.         let arr1 = [
  4.             {
  5.                 name: '苹果电脑',
  6.                 price: 3000
  7.             },
  8.             {
  9.                 name: '小米',
  10.                 price: 4200
  11.             },
  12.             {
  13.                 name: '平板',
  14.                 price: 4800
  15.             },
  16.             {
  17.                 name: '空调',
  18.                 price: 2800
  19.             },
  20.             {
  21.                 name: '电视机',
  22.                 price: 3080
  23.             }
  24.         ]
  26.         let newArr = arr1.filter(value => value.price >= 4000 && value.price <= 5000)
  27.         console.log(newArr);
  28.     </script>

2.3 数组forEach遍历 : (遍历数组)

1.forEach应用场景：用于遍历数组，相当于for循环另一种写法
2.注意点：
a. 回调函数执行次数 == 数组长度
数组中有多少个元素，回调函数就会执行几次
b. forEach函数没有返回值
c. 回调函数不需要return
 就算手动return，也不会结束循环

  1.         let arr = [10, 55, 60, 88, 99, 70]
  3.         arr.forEach((value,index)=>{
  4.             console.log(index,value)    
  5.         })

2.4 数组some遍历 : (判断是否存在满足条件的元素)

1.some应用场景：用于判断数组中是否存在满足条件的元素
2.注意点：
a. 回调函数执行次数 != 数组长度
some函数在遍历的时候可以中途结束
b. some函数返回一个布尔类型值
c. 回调函数返回布尔类型值用于结束遍历
return true; //遍历结束，且some函数返回值为true
(默认) return false; //遍历继续，且some函数返回值为false

  1.         //判断数组中是否存在小于0的元素
  2.         let arr = [10, 55, 60, 88, 99, 70]
  3.         let res = arr.some((value, index) => value < 0)
  4.         console.log(res)//false

2.5 数组every遍历(判断数组中是否所有元素都满足条件)

every应用场景：用于判断数组中是否所有元素都满足条件 (开关思想) （全选 反选）
every函数 返回一个布尔类型值
全部满足条件 返回true
有元素不满足条件 返回false
vue购物车案例 第2 - 5天
image.png
image.png
回调函数返回布尔类型值用于结束遍历
return true; //遍历继续，且every函数返回值为true
(默认)return false; //遍历结束，且every函数返回值为false

  1.         //需求：判断数组中没有负数
  2.         let arr = [23, 31, 60, -30, 90, 108, 260]
  4.         let res = arr.every(value => value > 0)
  6.         console.log(res)//false

2.6 数组findIndex方法 (获取符合条件的第一个元素(下标))

image.png

  • 数组findIndex方法
    作用: 获取符合条件的第一个元素位置(下标)
    语法 ： arr.findIndex((item, index) => { return true / false })
  • 返回值：
    符合则返回元素下标，
    不符合则返回 - 1
  • 应用场景 ：
    适用于数组中元素为对象类型，比传统for循环要高效 
  1.         let arr = [
  2.             { name: '张三', age: 20 },
  3.             { name: '李四', age: 30 },
  4.             { name: '王五', age: 25 },
  5.             { name: '赵六', age: 33 },
  6.             { name: '小七', age: 10 },
  7.         ]
  9.         let res = arr.findIndex(value => value.name == '小七')
  10.         console.log(res);//符合则返回元素下标， 不符合则返回 - 1

2.7数组reduce 方法

image.png

  • 作用 : 遍历数组元素，为每一个元素执行一次回调函数
  • 语法 ： arr.reduce( (sum,value)=>{ return sum + value } ,0)
  • 返回值： 最终sum值
  • 应用场景 ： 数组求和/平均值/最大值/最小值
  • 注意点：最好给一个初始值，避免空数组报错
  • image.png
  • image.png
    1.     //求和数组
    2.       let res = arr.reduce((sum, value, index) => sum + value, 0)//起始值加需要0 否则报错
    3.       console.log(res);

总结：推荐使用字面量方式声明数组，而不是 Array 构造函数

实例方法 forEach 用于遍历数组，替代 for 循环
image.png

实例方法 filter 过滤数组单元值，生成新数组
image.png
image.png

实例方法 map 迭代原数组，生成新数组

实例方法 concat 合并两个数组，生成新数组
实例方法 sort 对原数组单元值排序
实例方法 splice 删除或替换原数组单元
image.png
image.png
实例方法 indexOf 检索数组单元值 if(value.indexOf(‘垃圾’))判断存不存在 ( !=-1) 代表存在 -1就代表不存在
image.png

实例方法 reverse 反转数组
静态方法 from 伪数组转成数组

总结：推荐使用字面量方式声明字符串，而不是 String 构造函数
实例属性 length 用来获取字符串的度长
实例方法 split( ) 用来将 字符串 拆分 成数组
实例方法 join( ) 将 数组元素 拼接成 字符串

实例方法 toUpperCase( ) 用于将字母转换成大写
实例方法 toLowerCase( ) 用于将字母转换成小写
image.png
实例方法 slice( ) 用于字符串截取 可提取字符串的某个部分
image.png
实例方法 substr( ) 用于字符串截取

实例方法 indexOf( ) 检测是否包含某字符
实例方法 startsWith 检测是否以某字符开头
实例方法 endsWith 检测是否以某字符结尾
实例方法 replace 用于替换字符串，支持正则匹配
image.png

日期处理: Vue 第二天 和 nodeJS笔记里有
//1.原生的 new Date() 获取时间
let date = new Date();
console.log(newDate());//Sun Feb 13 2022 16:30:38 GMT+0800 (中国标准时间)
console.log(newDate().toLocaleDateString()); //2022/2/13
console.log(newDate().toLocaleTimeString()); //16:29:35
console.log(newDate().toLocaleString()); //2022/2/13 16:29:35

//2.使用moment.js 需要导入
//2.1 基本使用
let date1 = moment().format(‘YYYY-MM-DD’);//日期格式
console.log(date1);//2019-11-02
//2.2 如果moment传入了时间，就表示用传入的时间帮你生成对应的格式
let date2 = moment(‘2018/10/25 23:24:25’).format(‘YYYY年MM月DD日 HH时mm分ss秒’);
console.log(date2);//2018年10月25日 23时24分25秒
moment(接收的是data对象,不能是字符串).format(‘转成指定格式’)
image.png
image.png

image.png

image.png

作用域链:

当代码在一个环境中执行时，会创建变量对象的一个作用域链
由子级作用域返回父级作用域中寻找变量，就叫做作用域链