1.没有写 constructor 会隐士执行constructor函数;

construcor(形参参数接收){} new 类名（实参传入）

默认 return this ；this 代表着class类

2.实例会继承原型上的方法和属性，获取返回的类对象

 <script>class Person {constructor(name,food){ // 接收参数// 设置属性特征this.name = name;this.food = food;// return this 默认 }// 原型add(){console.log(this.name + "喝" + this.food);}}// 实例let result = new Person("大哥","奶茶")  // 大哥</script>

1.class类

class 表达式 let 变量名 = class {}

class内部怎么调用其他原型函数 this.函数名()

 let Person = class  {constructor(name,food){this.name = name;this.food = food;}add(){// class内部怎么调用其他原型函数 this.函数名()console.log(this.name + "喝" + this.food);}add1(){this.food = "珍珠" + this.food}}// 实例let result = new Person("大哥","奶茶")  // 大哥let result1 = new Person("夏栀","咖啡")  // 夏栀

2.其他class（杂项）

私有方法

只能在class类的内部使用 this.#add1()

#方法(){}

#属性 #sss = 100

静态方法

构造函数和 class类是一样的

new Person() 构造函数通过new 调用函数就是构造函数

static add2(){ 将函数放置类上面

console.log("123");

<script>let Person = class  {constructor(name,food){this.name = name;this.food = food;}add(){console.log(this.name + "喝" + this.food);}#add1(){console.log(1); // this.food = "珍珠" + this.food}#sss = 100// 静态方法  放在了类上面static add2(){console.log("123");}}// 实例let result = new Person("大哥","奶茶")  // 大哥

3.解构赋值

解构赋值

一定的模式，模式匹配；复制操作，接收数据操作都可以使用机构赋值

数组解构

[变量]=[数据]

变量名和数据是一一对应的;变量都是一个新的变量

对象的解构{}={}

变量名需要与对象的属性名一样；变量都是一个新的变量

对象真正的匹配

属性名赋值给对应属性名

等号左边的属性名再次赋值给数组变量名

位置随意只要属性名正确

let{name:a,age:b,sex:c}={name:"夏栀",age:18,sex:"女"}

ES6简化

let{name,age,sex}={name:"夏栀",age:18,sex:"女"}

属性名和数值名一样可以只写一个

字符串解构和数组一样

let [a,b]="我"

console.log(a,b);

  <script>// let{age,sex,name1}={name1:"夏栀",age:18,sex;"女"}// console.log(age,sex,name1);// let [a,b]="我"// console.log(a,b);let obj ={name:"夏栀",food:"奶茶",}function add({name,food}){console.log(name,food);}</script>

4.默认值

函数默认值==解构默认值

解构默认值

当你的变量名值为undefined是，默认值就会生效

变量名=赋值

设置默认值

当你的变量名值为undefinded时默认值就会生效

 <script>//解构默认值let{qwe=100}={name1:"夏栀",age:18,sex:"女",qwe:"默认值"}console.log(qwe);let[a,c,e="我要优质"]=[1,2,6]console.log(a,c,e);//函数默认值function add(a,c=33){console.log(a,c);}add(1,22)</script>

5.字符串模板

es6的字符串模板``

被``包裹的内容都是字符串

${变量名}

${计算}

${函数执行}

${判断}

<script>let name ="小冯是"let num=1;let str=`${true ?`qwe`:add()}我大哥排名第${num+10}位`;function add(){return name;}</script>

js中的class解构相关推荐

es6中数组的解构_ES6中的数组解构简介
es6中数组的解构 by Kevwe Ochuko 通过Kevwe Ochuko Destructuring in JavaScript is a simplified method of extra ...
Node.js中Async详解
Node.js中Async详解:流程控制安装 npm install async --save 地址 https://github.com/caolan/async Async的内容主要分为三部分 ...
react项目中的参数解构_一天入门React学习心得
一天入门React学习心得阅读前必读本文写的仓促,算是一个学习笔记吧,算是一个入门级的学习文章.如果你刚刚入门,那么可能一些入门的视频可能更加适合你.但如果具备一些知识,比如Vue,那么视频就不适 ...
react项目中的参数解构_重构复杂的React组件：编写高效且可读组件的5个最佳实践...
随着 React.js 的不断进化,现在的它已经成为 Web 组件中最受欢迎的视图库之一.但是你手中的它,是否真的能够正常工作呢?本文将主要描述 5 个关于React 组件的最佳实践,希望对正在关注 ...
JS 语法糖 0 —— 解构
文章目录 1.数组解构 1.1 简介 1.2 完全解构 1.3 不完全解构 1.4 数组解构的条件 1.5 默认值 2.对象解构 2.1 简介 2.2 解构对象方法 2.3 默认值 2.4 注意点 3 ...
ES6中变量的解构赋值
1.数组的解构赋值基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 输出: 上面代码表示,可以从数组中提取值,按照对应位置,对变 ...
es6中的变量解构对象数组函数
文章目录一.变量/常量声明二.解构 2.1.数组解构 2.2对象解构 3.3.字符串解构 4.数值解构 5.布尔值解构三.对象 3.1.对象简写 3.2API拓展四.扩展运算符五.数组 5. ...
ES6中的对象解构赋值
解构赋值: 解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值的定义,注意这里的定义,可以看出解构主要用在数组和对象上). 说白 ...
js中 json详解
var aa ={name:"zoumm",age:23};var bb = JSON.stringify(aa);console.log(bb); //打印出{"nam ...

js中的class解构