Js进阶第二天

回顾JS进阶第一天

  1. 作用域：全局、局部（函数内部）、块级(let遇到{ })；

    • 变量： 分别在上面三个作用域下面声明变量；

      • 全局：符合逻辑任何地方（函数内部、{}）都可以；
      • 局部：局部声明let 或者 形参; 在当前作用域函数范围使用；
      • 块级：局部变量let 在当前作用域函数范围使用；

  2. const ：声明常量；

    • let var：

      1. 是否形成块级作用域；

        • let 可以形成！比如：循环每次，产生块级作用域，{包含一个变量，随着这个块级作用域一直保留在内存中！}
        • var 不能形成！比如：循环每一次，循环体内部添加事件监听，不会形成块级作用域！（不会把每一次的变量的值留下来，最终只有一个全局变量 var i ===>数组的长度）
        • 补充：全局变量值，一直留在内存！

      2. 是否变量提升：

        1. let:不可以；
        2. var:可以提升；
  3. 预解析
  4. 面试会问

  5. 代码执行进入新的作用域：

    1. 找var声明变量 和 function **fn**(){}
    2. 提升到当前作用域 最顶端

  6. 闭包

    • 由问题出现：获取很多按钮dom、循环（var）添加事件，触发按钮，执行函数打印 i——>dom伪数组长度;
    • 使用闭包后结果：配合语法强制性留下来变量在内存！

    • 形式：

      1. 函数A套着函数B
      2. 函数B内部要使用函数A一个局部变量（let 或 形参）

  7. ES6函数语法：

    1. 内置形参： arguments 得到不确定个数的实参；伪数组！
    2. 剩余参数：…变量 （位置：形参） 得到不确定个数实参 数组；
    3. 展开语法: …变量 （位置：非形参）把数组展开 形成逗号分隔;
    4. 形参的默认值：function(*a*=10){ }

    5. 箭头函数：()=>{}

      • 如果只有一个形参,`省略();`
      • 只有一句代码：省略{}；
      • 返回一句代码，return可以省略；

目录

  1. 解构赋值
  2. 面向对象
  3. 成员
  4. 内置对象

解构赋值

数组解构赋值

目标： 知道什么是解构赋值及特点

  • 解构: ES6允许按照一定模式， 从数组和对象中提取值， 对变量进行赋值， 这被称为解构
  • 数组解构: 将数组中的值一一对应的方式取出赋值给变量
  • 数组解构本质: 将数组中的值获取到赋值给变量
  • 数组解构语法:let [变量1, 变量2, 变量3] = 数组

  • 数组解构特点:

    1. 数组解构是将数组中的值一一对应取出分别赋值给变量
    2. 如果被赋值的变量个数大于数组中的值,则多余的变量值为undefined
    3. 在数组解构中可以为变量设置默认值
  1.  //ES6:为什么学习 解构，根据简单快捷方式获取需要数据！
  2.         //解构：剖析、结构！
  3.         //1.基本使用
  4.         let arr = [10, 20, 30]
  5.         let [a, b, c] = arr
  6.         console.log(a, b, c);   //10 20 30
  7. //3.需求，只想要数组中某个成员    (就用逗号隔开，不能省略)
  8.         let arr = [
  9.             [15, 16, 17],
  10.             [78, 89, 90, 90, 100],
  11.         ];
  12.         let [, [, , , a]] = arr
  13.         console.log(a);  //90
  14. //小结：模仿结构，需要获取这个位置上值放入一个变量

对象解构赋值

目标： 知道什么对象解构赋值及特点

  • 对象解构: 将对象中的属性或方法取出赋值给变量
  • 语法1: let {属性名:变量名1, 属性名:变量名2 ...} = 对象
  • 语法2: let {属性名,属性名} = 对象

  • 对象解构总结 :

    1. 对象解构中,属性名和对象中的属性必须保持一致,否则值为undefined
    2. 对象解构中,如果属性名和变量名一样,则可以省略变量名,但属性名必须与对象中的属性一样
  1. // 1.简单，如果即将设置变量名，故意和属性名一样，缩写为一个单词
  2.         let obj = {
  3.             uname: "zs"
  4.         }
  5.         let {
  6.             uname
  7.         } = obj
  8. console.log(uname);  //zs
  9. // 2.获取age属性，设置默认值
  10. let obj = {uname: "zs"}
  11. let {uname = "128同学",age = 20  //设置默认值} = obj
  12. console.log(uname, age);
  13. -------------------------------------------------------
  14.    let obj = {
  15.             uname: "小王",
  16.             child: {
  17.                 uname: "儿子"
  18.             }
  19.         }
  20.         let {
  21.             child: {
  22.                 uname
  23.             }
  24.         } = obj
  25. console.log(uname);
  26. //小结：模仿结构偶，对象键值对不份先后，对应属性名一致！

存储

简单数据

  1. let a = [10, 20, 30]
  2.         let b = a;
  3.         b[0] = 20
  4. console.log(a[0]); //20
  5. // 学习：简单数据在内存上储存；
  6. //      简单数据：NUmber  string Boolean undefined

复杂数据

  1. //结论：
  2.     //  let  变量 = 值
  3.     //       简单数据类型，值真的给了变量格子！
  4.     //      复杂数据类型，给变量给放的是一个地址（堆里面）

面向对象

面向对象之对象

目标： 知道什么是面向对象及对象的基本组成

  • 什么是对象: 在程序中对一个具体事物的描述,该事物就称为对象
  • 什么是面向对象: 面向对象属于一种编程思想,在解决问题的时候都先要找对象,通过操作对象的方式实现最后的结果

  • 对象的基本组成：

    1. 属性
    2. 方法

创建对象

目标： 能够掌握2种创建对象的方式

  • 创建对象方式一: 通过内置构造函数创建对象

  • 语法：

    • ```javascript //Math内置对象； let time = new Date(); //得到事件对象 //业务：面对对象思考；把一个 业务功能 ，集中在一起！

    //需要：学会使用创建自己构造函数 // 构造函数，使用语法：new Date() // 自己构造函数，得到自己设计对象（有用我们设计属性和方法） let 自定义对象名 = new Object(); 自定义对象.属性 = 值; 自定义对象.方法 = function() {} ```

  • 创建对象方式二: 通过自定义构造函数创建对象

    • 语法：

    • ```javascript //步骤： // 1.定义一个构造函数，一般情况下，需要Fn 首字母为大写 function Fn() {

      1.    this.info = "hao"
      2.    this.age = 18;
      3.    this.name = "wh"

      } // 2.使用特点：【加上new相当于让函数Fn内部创建，且进行返回，问题:前面到底让函数发生了什么?】 // let a = Fn(); 【this:谁调用就是谁！】 let a = new Fn() //实例化对象，本次调用后内部的this == 本次生成的对象。 console.log(a); //结果：Fn {info: “hao”, age: 18, name: “wh”} //小结： // 1.函数，普通的函数 // 2.调用方式，现在 new Fn()

function 函数名(参数1, 参数2) { this.属性 = 参数1; this.属性 = 参数2; this.方法 = function(){} }

  4. <a name="fbf7b83f"></a>
  5. #### 案例：对象2-练习
  7. 效果图 ：
  9. ```html
  10.  <div class="box">
  11.             <div class="stu_name public">
  12.                 <span>学生姓名:</span>
  13.                 <input type="text">
  14.             </div>
  15.             <div class="stu_score public">
  16.                 <span>考试成绩:</span>
  17.                 <input type="text">
  18.             </div>
  19.             <div class="msg public">
  20.                 <span>评语:</span>
  21.                 <textarea maxlength="20"></textarea>
  22.             </div>
  23.             <input type="button" value="添加" class="btn">
  24.         </div>
  25.  <script>
  26.             // 需求： 点击按钮，数组中收集一个对象。
  27.             //        内容：name:"zs"  score:99  info:"xxxxx";
  28.             //        并打印数组btn
  29.             // 步骤：
  30.             //    1.获取dom
  31.             let btn = document.querySelector(".btn");
  32.             let n = document.querySelector(".stu_name input");
  33.             let s = document.querySelector(".stu_score input");
  34.             let t = document.querySelector("textarea");
  35.             //2.添加事件监听
  36.             function Person(name, score, info) {
  37.                 this.name = name;
  38.                 this.score = score;
  39.                 this.info = info
  40.             }
  41.             let arr = [];
  42.             btn.addEventListener("click", () => {
  43.                 //1.准备对象
  44.                 let obj = new Person(n.value, s.value, t.value);
  45.                 //2.收集到
  46.                 arr.unshift(obj);
  47.                 console.log(arr);
  48.                 //3.优化
  49.                 n.value = s.value = t.value = "";
  50.             })
  51. </script>

实例成员

目标： 知道什么实例成员及实例成员访问方式

  • 成员: 构造函数中的属性或方法都称为成员
  • 实例成员: 在构造函数内部,通过this关键字设置的属性或方法,称为实例成员
  • 实例:通过构造函数创建的对象称为实例
  • 实例成员访问方式: 必须通过实例对象访问
  1. function Person(uname) {
  2. this.uname = uname;
  3. this.eat = function() {}
  4. }
  5. let zs = new Perseon('张三');
  6. zs.uname;
  7. zs.eat();

静态成员

目标： 能够知道什么静态成员及静态成员访问方式

  • 静态成员: 通过构造函数设置的属性或方法称为静态成员
  • 静态成员访问方式: 静态成员只能通过构造函数名点的方式访问
  1. function Person(uname) {
  2. this.uname = uname;
  3. }
  4. Person.age = 123;
  5. Person.eat = function(){}

内置对象

内置对象

目标： 知道什么是内置对象及用法

  1. 数组内置对象: Array()

  2. Array中的实例方法
    reverse() 翻转数组
    indexOf() 检索数组中的值

  • lastIndexOf() 检索数组中的值
  • splice()删除或其他数组中的值
  • concat()合并两个数组的值
    join() 将数组中的值拼接为字符串
    forEach(function(item, index){}) 遍历数组
    filter(function(item, index){}) 过滤筛选数组,返回一个新数组 reture
  • map(function(item, index){})迭代原数组,生成新数组 ```javascript //数组上一个方法： let arr = [10, 20, 30] //所有arr // arr.indexOf() 判断某个元素是否在数组中 let res = arr.indexOf(20) console.log(res); //-1找不到该元素 下表：有该元素

// arr.join(把数组转换为特定格式字符串 // 参数: 字符串, 分隔字符; // 返回: 特定格式字符串 let res = arr.join(“-“); console.log(res); //10-20-30

// arr.forEach遍历数组, // 参数: 函数（item, index) arr.forEach(function (item, index) { console.log(item, index); }) //10 0 20 1 30 2

// arr.filter把满足某个条件的成员单独选出来，单独放入新的数组中, // 参数: 函数（item, index) 函数体内部: return要满足的条件 let res = arr.filter(function (item, index) { return item >= 30; }); // [30]

  4. ###Array内置对象
  6. > 目标： 知道Array内置对象中的静态方法
  9. 1. Array内置对象中的静态方法
  10. 2. Array.from(对象) 将伪数组转换为数组
  12. <a name="4603a932"></a>
  13. ### RegExp正则内置对象
  15. > 目标： 知道正则对象如何创建及使用
  18. 1. 通过内置构造函数创建正则对象
  19. 2. 语法: `let reg = new RegExp('正则')`
  20. 3. 注意事项:
  22.    1. 通过构造函数RegExp创建的正则表达式,如果使用元字符,则必须前面添加转义字符
  23.    2. `let test1 = new RegExp('\d');`
  24.    3. `let test1 = new RegExp('\d');`
  26. <a name="d64eab43"></a>
  27. ### 包装类型
  29. > 目标： 知道什么是包装类型
  32. 1. 
  33. String构造函数
  34. <br />    `- 属性 : length属性`<br />
  35.     - 方法: split()分割字符串 toUpperCase()转大写 toLowerCase()转小写<br />
  36.     - slice(start,end)截取字符串 substr(start, length)<br />
  37.     - 方法: startsWith() 检测是否以某个字母开始 endsWith()检测是否以某个字母结束<br />
  38.     - 方法: replace('被替换的字符', '替换后的字符')替换 indexOf()<br />
  39.     - 方法: padStart(位数, '值'), 是否够几位数,如果不够在前面添加对应的内容<br />
  40.     - 方法: padEnd('位数', '值'),是否够几位数,如果不够在后面添加对应的内容
  42. 2. 
  43. Number构造函数
  45.    - - 方法: `toFixed()保留几位小数`
  46. 3. 
  47. Boolean构造函数
  49. 4. 
  50. 包装类型: 一个简单类型可以通过js内部的构造函数包装成一个对象
  53. <a name="92fb6354"></a>
  54. #### 案例-数组练习
  57. ```html
  58.  <div class="box">
  59.     <div class="title">
  60.       <div class="price">
  61.         按照价格查询:
  62.         <input type="text" class="min"> - <input type="text" class="max">
  63.         <input type="button" value="查询" class="pBtn">
  64.       </div>
  65.     </div>
  66.     <div class="content">
  67.       <table>
  68.         <thead>
  69.           <tr>
  70.             <th>id</th>
  71.             <th>产品名称</th>
  72.             <th>价格</th>
  73.           </tr>
  74.         </thead>
  75.         <tbody></tbody>
  76.       </table>
  77.     </div>
  78.   </div>
  80.   <script>
  81.     //数据
  82.     let arr = [{
  83.       id: 1,
  84.       pname: '小米手机',
  85.       price: 1299
  86.     }, {
  87.       id: 2,
  88.       pname: '华为手机',
  89.       price: 4299
  90.     }, {
  91.       id: 3,
  92.       pname: '华为平板',
  93.       price: 12999
  94.     }, {
  95.       id: 4,
  96.       pname: '苹果手机',
  97.       price: 5299
  98.     }, {
  99.       id: 6,
  100.       pname: '锤子手机',
  101.       price: 998
  102.     }, {
  103.       id: 7,
  104.       pname: '一加手机',
  105.       price: 4399
  106.     }, {
  107.       id: 8,
  108.       pname: '诺基亚手机',
  109.       price: 456
  110.     }]
  112.     // 功能1：把数组展示到页面中；
  113.     // 步骤:
  114.     //   1.获取
  115.     let tbody = document.querySelector("tbody");
  116.     //   2.循环遍历；
  117.     arr.forEach(ele => {
  118.       //    2.1  ele
  120.       //    2.2  创建dom
  121.       let tr = document.createElement("tr");
  123.       //    2.3 设置内部结构
  124.       tr.innerHTML = `<td>${ele.id}</td>
  125.                       <td>${ele.pname}</td>
  126.                       <td>${ele.price}</td>`;
  128.       //    2.4  添加到tbody里
  129.       tbody.appendChild(tr);
  130.     });
  133.     // 功能2：查询
  134.     //   1.获取
  135.     let pBtn = document.querySelector(".pBtn");
  136.     let min = document.querySelector(".min");
  137.     let max = document.querySelector(".max");
  138.     //   2.添加事件监听
  139.     pBtn.addEventListener("click", function () {
  140.       //   2.1 获取输入值
  141.       let minV = min.value;
  142.       let maxV = max.value;
  144.       //   2.2 筛选了：
  145.       let newArr = arr.filter((ele) => {
  146.         return ele.price >= minV && ele.price <= maxV;
  147.       });
  149.       //   2.3 循环遍历
  150.       tbody.innerHTML = "";
  151.       newArr.forEach(ele => {
  152.         let tr = document.createElement("tr");
  153.         tr.innerHTML = `<td>${ele.id}</td>
  154.                       <td>${ele.pname}</td>
  155.                       <td>${ele.price}</td>`;
  156.         tbody.appendChild(tr);
  157.       });
  159.     });
  160.   </script>