陈悦玲20200922
解构
- 什么是解构（destruct）？
将一个大的对象或数组中集中存储的成员中的个别成员，取出来单独使用 - 为什么要使用解构？
将来从服务器端返回的对象或数组可能很复杂 -
什么时候使用解构？
凡是获得结构嵌套非常复杂的对象，都要先解构成多个小的成员，再分别单独使用
- 数组解构：
同时声明多个变量，下标对下标，去数组中找到和当前变量所在下标一致的元素值，保存到对应位置的变量中，从此变量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
- 什么是对象解构？
仅提取出复杂对象中的个别成员属性或方法，保存在变量中，单独使用 - 简写
简写形式：如果属性名和变量名相同，只写一个即可
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()
近期评论