js高级进阶-面向对象-解构赋值- 内置对象

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. 在数组解构中可以为变量设置默认值

 //ES6:为什么学习 解构，根据简单快捷方式获取需要数据！
        //解构：剖析、结构！
        //1.基本使用
        let arr = [10, 20, 30]
        let [a, b, c] = arr
        console.log(a, b, c);   //10 20 30
//3.需求，只想要数组中某个成员    (就用逗号隔开，不能省略)
        let arr = [
            [15, 16, 17],
            [78, 89, 90, 90, 100],
        ];
        let [, [, , , a]] = arr
        console.log(a);  //90
//小结：模仿结构，需要获取这个位置上值放入一个变量

对象解构赋值

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

• 对象解构: 将对象中的属性或方法取出赋值给变量
• 语法1: let {属性名:变量名1, 属性名:变量名2 ...} = 对象
• 语法2: let {属性名,属性名} = 对象
• 对象解构总结 :
  1. 对象解构中,属性名和对象中的属性必须保持一致,否则值为undefined
  2. 对象解构中,如果属性名和变量名一样,则可以省略变量名,但属性名必须与对象中的属性一样

// 1.简单，如果即将设置变量名，故意和属性名一样，缩写为一个单词
        let obj = {
            uname: "zs"
        }
        let {
            uname
        } = obj
console.log(uname);  //zs
// 2.获取age属性，设置默认值
let obj = {uname: "zs"}
let {uname = "128同学",age = 20  //设置默认值} = obj
console.log(uname, age);
-------------------------------------------------------
   let obj = {
            uname: "小王",
            child: {
                uname: "儿子"
            }
        }
        let {
            child: {
                uname
            }
        } = obj
console.log(uname);
//小结：模仿结构偶，对象键值对不份先后，对应属性名一致！

存储

简单数据

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

复杂数据

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

面向对象

面向对象之对象

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

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

创建对象

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

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

• 语法：

  • //Math内置对象；
    let time = new Date();  //得到事件对象
    //业务：面对对象思考；把一个 业务功能 ，集中在一起！
    
     //需要：学会使用创建自己构造函数
     //     构造函数，使用语法：new Date()
     //    自己构造函数，得到自己设计对象（有用我们设计属性和方法）
    let 自定义对象名 = new Object();
    自定义对象.属性 = 值;
    自定义对象.方法 = function() {}
    

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

  • 语法：

  • //步骤：
    //    1.定义一个构造函数，一般情况下，需要Fn  首字母为大写
            function Fn() {
                this.info = "hao"
                this.age = 18;
                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(){}
    }
    

案例：对象2-练习

效果图 ：

 <div class="box">
            <div class="stu_name public">
                <span>学生姓名:</span>
                <input type="text">
            </div>
            <div class="stu_score public">
                <span>考试成绩:</span>
                <input type="text">
            </div>
            <div class="msg public">
                <span>评语:</span>
                <textarea maxlength="20"></textarea>
            </div>
            <input type="button" value="添加" class="btn">
        </div>
 <script>
            // 需求： 点击按钮，数组中收集一个对象。
            //        内容：name:"zs"  score:99  info:"xxxxx";
            //        并打印数组btn
            // 步骤：
            //    1.获取dom
            let btn = document.querySelector(".btn");
            let n = document.querySelector(".stu_name input");
            let s = document.querySelector(".stu_score input");
            let t = document.querySelector("textarea");
            //2.添加事件监听
            function Person(name, score, info) {
                this.name = name;
                this.score = score;
                this.info = info
            }
            let arr = [];
            btn.addEventListener("click", () => {
                //1.准备对象
                let obj = new Person(n.value, s.value, t.value);
                //2.收集到
                arr.unshift(obj);
                console.log(arr);
                //3.优化
                n.value = s.value = t.value = "";
            })
</script>

###实例成员

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

• 成员: 构造函数中的属性或方法都称为成员
• 实例成员: 在构造函数内部,通过this关键字设置的属性或方法,称为实例成员
• 实例:通过构造函数创建的对象称为实例
• 实例成员访问方式: 必须通过实例对象访问

function Person(uname) {
this.uname = uname;
this.eat = function() {}
}
let zs = new Perseon('张三');
zs.uname;
zs.eat();

静态成员

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

• 静态成员: 通过构造函数设置的属性或方法称为静态成员
• 静态成员访问方式: 静态成员只能通过构造函数名点的方式访问

function Person(uname) {
this.uname = uname;
}
Person.age = 123;
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){})迭代原数组,生成新数组

    //数组上一个方法：
   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] 
   

###Array内置对象

目标： 知道Array内置对象中的静态方法

1. Array内置对象中的静态方法
2. Array.from(对象) 将伪数组转换为数组

RegExp正则内置对象

目标： 知道正则对象如何创建及使用

1. 通过内置构造函数创建正则对象
2. 语法: let reg = new RegExp('正则')
3. 注意事项:
   1. 通过构造函数RegExp创建的正则表达式,如果使用元字符,则必须前面添加转义字符
   2. let test1 = new RegExp('\d');
   3. let test1 = new RegExp('\d');

包装类型

目标： 知道什么是包装类型

1. String构造函数

   ​ - 属性 : length属性
   ​ - 方法: split()分割字符串 toUpperCase()转大写 toLowerCase()转小写
   ​ - slice(start,end)截取字符串 substr(start, length)
   ​ - 方法: startsWith() 检测是否以某个字母开始 endsWith()检测是否以某个字母结束
   ​ - 方法: replace(‘被替换的字符’, ‘替换后的字符’)替换 indexOf()
   ​ - 方法: padStart(位数, ‘值’), 是否够几位数,如果不够在前面添加对应的内容
   ​ - 方法: padEnd(‘位数’, ‘值’),是否够几位数,如果不够在后面添加对应的内容

2. Number构造函数

   • - 方法: toFixed()保留几位小数

3. Boolean构造函数

4. 包装类型: 一个简单类型可以通过js内部的构造函数包装成一个对象

案例-数组练习

 <div class="box">
    <div class="title">
      <div class="price">
        按照价格查询:
        <input type="text" class="min"> - <input type="text" class="max">
        <input type="button" value="查询" class="pBtn">
      </div>
    </div>
    <div class="content">
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>产品名称</th>
            <th>价格</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

  <script>
    //数据
    let arr = [{
      id: 1,
      pname: '小米手机',
      price: 1299
    }, {
      id: 2,
      pname: '华为手机',
      price: 4299
    }, {
      id: 3,
      pname: '华为平板',
      price: 12999
    }, {
      id: 4,
      pname: '苹果手机',
      price: 5299
    }, {
      id: 6,
      pname: '锤子手机',
      price: 998
    }, {
      id: 7,
      pname: '一加手机',
      price: 4399
    }, {
      id: 8,
      pname: '诺基亚手机',
      price: 456
    }]

    // 功能1：把数组展示到页面中；
    // 步骤:
    //   1.获取
    let tbody = document.querySelector("tbody");
    //   2.循环遍历；
    arr.forEach(ele => {
      //    2.1  ele

      //    2.2  创建dom
      let tr = document.createElement("tr");

      //    2.3 设置内部结构
      tr.innerHTML = `<td>${ele.id}</td>
                      <td>${ele.pname}</td>
                      <td>${ele.price}</td>`;

      //    2.4  添加到tbody里
      tbody.appendChild(tr);
    });


    // 功能2：查询
    //   1.获取
    let pBtn = document.querySelector(".pBtn");
    let min = document.querySelector(".min");
    let max = document.querySelector(".max");
    //   2.添加事件监听
    pBtn.addEventListener("click", function () {
      //   2.1 获取输入值
      let minV = min.value;
      let maxV = max.value;

      //   2.2 筛选了：
      let newArr = arr.filter((ele) => {
        return ele.price >= minV && ele.price <= maxV;
      });

      //   2.3 循环遍历
      tbody.innerHTML = "";
      newArr.forEach(ele => {
        let tr = document.createElement("tr");
        tr.innerHTML = `<td>${ele.id}</td>
                      <td>${ele.pname}</td>
                      <td>${ele.price}</td>`;
        tbody.appendChild(tr);
      });

    });
  </script>