陈悦玲20200922

解构

  1. 什么是解构(destruct)?
    将一个大的对象或数组中集中存储的成员中的个别成员,取出来单独使用
  2. 为什么要使用解构?
    将来从服务器端返回的对象或数组可能很复杂
  3. 什么时候使用解构?
    凡是获得结构嵌套非常复杂的对象,都要先解构成多个小的成员,再分别单独使用

  • 数组解构:
    同时声明多个变量,下标对下标,去数组中找到和当前变量所在下标一致的元素值,保存到对应位置的变量中,从此变量1和变量2就可代表数组中的单个元素,单独使用
var [cg,zx,qg]=[[1,2,3],[4,5,6],[7,8,9]]
//    0  1  2
console.log(cg)//[1,2,3]
123
//不声明第三个变量,交换两个变量的值
    var change = [1,2];
    var [a1,b1]=change;//[a,b]
    change = [2,1];
    var [a1,b1]=change;
    console.log(a1)//2
123456
  • 对象解构
var {name:name,sex:sex}={
      name="cg",
      sex="女"
    }
1234
  1. 什么是对象解构?
    仅提取出复杂对象中的个别成员属性或方法,保存在变量中,单独使用
  2. 简写简写形式:如果属性名和变量名相同,只写一个即可
var {sname:sname, signin:signin}=lilei
var {sname, signin}=lilei
12
 var obj={
      name:"陈小玲玲",
      sex:"女",
      say1:function(){
        console.log(`我是${name}`)
      },
      say2:function(){
        console.log(`我是个${sex}的`)
      }
    }
    var {sex:sex,say1:say1,name:name}=obj//对象解构顺序无限制
    console.log(sex)
    say1()//我是陈小玲玲
12345678910111213
  • 参数解构
 function xiaomeng({
      name:name,
      age:age//当属性名和形参名一致时才可以简写:name,age,简写只能出现在函数定义中,函数调用时必须使用函数参数解构 的完整形式
    }){
      console.log(name,age)
    }
    //调用
    xiaomeng({
      name:"叶梦",
      age:18,
    })
1234567891011
//点餐系统
    function order({zhushi="小龙虾鸡肉卷",xiaochi="香辣鸡翅",yinliao="可乐"}){
      console.log(`
        您点的套餐为:
        主食:${zhushi}
        小吃:${xiaochi}
        饮料:${yinliao}
      `)
    }
    //默认情况下,一个都不选择,直接选择套餐
    order({})
    //想要换掉饮料
    order({
      yinliao:"奶茶"
    })
    //想要换掉小吃和饮料
    order({
      xiaochi:"鸡米花",
      yinliao:"奶茶"
    })
    order({
      zhushi:"米饭",
      xiaochi:"鸡腿",
      yinliao:"雪碧"
    })
12345678910111213141516171819202122232425

其实就是对象解构在函数传参时的应用而已

class封装

  • 使用
// 1. 用class{}包裹构造函数和原型对象方法
class Student{
    // 2. 构造函数名提升为整个类型class名,所有构造函数统一更名为constructor
    constructor(sname,sage){
           this.sname=sname;
           this.sage=sage;
    }
    // 3. 所有原型对象方法可省略一切前缀和=function。定义在class中的普通函数,默认就是保存在原型对象中的
    intr(){
           console.log(`我是 ${this.sname}, 我今年 ${this.sage} 岁`)
   }
}
var stu=new Student("lili",22)
12345678910111213
//class封装
    class Student{
      //构造函数的名以class进行提升
      //所有构造函数中的变量,统一保存在constructor中
      constructor(name,sex){
        this.name=name,
        this.sex=sex
      }
      //所有原型对象中的属性和方法都省略 xxx.prorotype.xxx=function
      init(){
        console.log(`${this.name}是个大镁铝,今年${this.sex}岁`)
      }
    }
    var stu = new Student("陈小玲玲",19)
    stu.init()
123456789101112131415

注意:在clas中强烈不推荐共有属性
但是我们还是写一下

//class封装
    class Student{
      constructor(name,age){
        this.name=name;
        this.age=age;
        if(Student.prototype.sex==undefined){
          Student.prototype.sex="女"//所有构造函数里的属性,将来一律都会成为每个子对象的自有属性
        }//在构造函数中,向原型对象中添加共有属性。强调一点,要先判断原型对象中如果没有这个共有属性,才强行添加。如果已经有这个共有属性了,则不要再重复添加
        Student.prototype.ClassName="大四2班"//在原型上添加,但是,我们每次执行的时候都会重复执行
      }
    }
    console.log(stu.ClassName)
    var stu1 = new Student("cxll",20)
    stu1.ClassName="高一6班"
    console.log(stu1.age)//20
    console.log(stu1.ClassName)//高一6班
12345678910111213141516
  • 访问器属性(用来保护子对象)
"use strict";
class Emp{
      constructor(eid,ename,eage){
            this.eid=eid;
            this.ename=ename;
            this.eage=eage;
            // 要保护的是将来要创建的子对象
            Object.defineProperties(this,{
                    eid:{ writable:false },
                    // 1. 定义一个隐姓埋名的半隐藏的数据属性
                    _eage:{
                          value:eage,
                          writable:true,
                          enumerable:false
                    }
            })
            // 密封将来要出生的子对象
            Object.seal(this);
     }
     // 向该类型的原型对象中添加一个访问器属性eage,包含两个保镖函数get和set
     get eage(){
          return this._eage;
     }
     set eage(value){
          if(value>=18&&value<=60){
               this._eage=value
          }else{
               throw Error("年龄必须介于18~60之间")
          }
     }
}
var lili=new Emp(1001, "lili", 25);
// 试图修改eid属性
// lili.eid=0;
// 试图删除ename属性
// delete lili.ename
// 试图修改eage为-2
// lili.eage=-2;
console.log(lili);
var xinxin=new Emp(1002,"xinxin",26);
// 试图修改eid属性
// xinxin.eid=0;
// 试图删除ename属性
// delete xinxin.ename
// 试图修改eage为-2
// xinxin.eage=-2;
console.log(xinxin);
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

清楚案例:

class Student{
      constructor(name){
        this.name=name;
        this.age=20;
        //添加年龄
        Object.defineProperties(this,{
          _age:{
            value:this.age,
            writeable:true,
            configurable:false
          }
        })
        if(Student.prototype.sex==undefined){
          Student.prototype.sex="女"
        }
      }
      //访问
      get age(){
        return this._age;
      }
      //设置
      set age(value){
        if(value>=18&&value<=80){
          return this._age = value
        }else{
          throw Error("超出范围")
        }
      }
      init(){
        console.log(`${this.name}是个大镁铝,今年${this.age}岁`)
      }
    }
    var stu1 = new Student("cxll")
    console.log(stu1.age)
12345678910111213141516171819202122232425262728293031323334
  • class继承
//1.我们得有一个父对象,父对象包汉子对象想要的东西(相同的属性和结构)
    class Father{
      constructor(money,house){
        this.money=money;
        this.house=house
      }
      say(){
        console.log(`我是你爸爸,我真伟大`)
      }
    }
    //2.继承
    class Child extends Father{
      
    }
    var child1 = new Child(1000,"you");
    console.log(child1.money)
12345678910111213141516

飞机大战

super:通过super把X,Y的值传递给父对象,而super本身相当于调用父对象的构造函数
extends附赠了一个关键词super,super指向父类型的构造函数。调用super,就等效于调用父类型的构造函数了

//飞机大战数据结构

    //敌军或奖励的位置
    class Diren{
      constructor(x,y){
        this.x = x;
        this.y = y;
      }
      fly(){
        console.log(`敌军位于(${this.x},${this.y})的位置`)
      }
    }
    //击落敌军得分
    class Score extends Diren{
      constructor(x,y,score){
        super(x,y)
        //通过super把X,Y的值传递给父对象,而super本身相当于调用父对象的构造函数
        //extends附赠了一个关键词super,super指向父类型的构造函数。调用super,就等效于调用父类型的构造函数了
        this.score = score;
      }
      show(){
        console.log(`敌军在(${this.x},${this.y})位置被击落,获得${this.score}分`)
      }
    }
    //奖励
    class Award extends Diren{
      constructor(x,y,award){
        super(x,y)//指向
        this.award=award;
      }
      show(){
        console.log(`在(${this.x},${this.y})的位置获得${this.award}的奖励`)
      }
    }
    // var dijun1 = new Diren(100,100)
    // dijun1.fly()
    //开始进行击落
    var jiluo = new Score(100,200,10)
    console.log(jiluo.show())
    //奖励得分
    var jiangli=new Award(200,200,"激光炮")
    jiangli.show()
    jiangli.fly()

标签

评论

this is is footer