复习回顾ES6基础篇(一小时学会es6)

基本语法

  • 多行注释
/*
这里的所有内容
都是注释。
*/
  • 单行注释
// 这是一条注释。
  • 变量定义
var x = ""  //定义范围变量
let y = ""  //定义局部变量
const z = "" //定义常量
  • 运算符

在这里插入图片描述

  • 变量类型
    在这里插入图片描述+ 流程语句
if (condition) {/* 条件为真时运行的代码 */
} else {/* 否则,运行其他的代码 */
}

在这里插入图片描述

switch (表达式) {case 选择1:运行这段代码break;case 选择2:否则,运行这段代码break;// 包含尽可能多的情况default:实际上,仅仅运行这段代码
}
// 三元运算
condition ? 运行这段代码 : 否则,运行这段代码
  • 循环语句
for (initializer; exit-condition; final-expression) {// code to run
}
while (exit-condition) {// code to runfinal-expression
}
do {// code to runfinal-expression
} while (exit-condition)
  • 函数与方法

单独定义的被称为函数,类的成员变量被称为方法。

// 定义
function draw() {ctx.clearRect(0, 0, WIDTH, HEIGHT);for (let i = 0; i < 100; i++) {ctx.beginPath();ctx.fillStyle = "rgb(255 0 0 / 50%)";ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);ctx.fill();}
}// 调用
draw()
// 匿名函数
(function () {alert("你好");
});
// 箭头函数
a = ()=>{console.log("hello");
}
a()
  • 对象

对象是一个包含相关数据和方法的集合

const person = {name: ["Bob", "Smith"],age: 32,bio: function () {console.log(`${this.name[0]} ${this.name[1]} 现在 ${this.age} 岁了。`);},introduceSelf: function () {console.log(`你好!我是 ${this.name[0]}`);},
};

对象的this关键字指向了当前代码运行时的对象

// 声明式创建对象实例
var per = Person{}// new关键字创建实例
const salva = new Person();
bio: function () {console.log(`${this.name[0]} ${this.name[1]} 现在 ${this.age} 岁了。`);
},

类中声明方法 name: function(){} 可以简写name(){}

在 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,类抽象了对象的公共部分,使对象具有通用性。

class Person {name;constructor(name) {this.name = name;}introduceSelf() {console.log(`Hi! I'm ${this.name}`);}
}

extends关键字实现继承。

class Professor extends Person {teaches;constructor(name, teaches) {super(name);this.teaches = teaches;}introduceSelf() {console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`,);}grade(paper) {const grade = Math.floor(Math.random() * (5 - 1) + 1);console.log(grade);}
}

在类中私有数据属性必须在类的声明中声明,而且其名称需以 # 开头。

class Student extends Person {#year;constructor(name, year) {super(name);this.#year = year;}introduceSelf() {console.log(`Hi! I'm ${this.name}, and I'm in year ${this.#year}.`);}canStudyArchery() {return this.#year > 1;}
}

与私有数据属性一样,你也可以声明私有方法。而且名称也是以#开头,只能在类自己的方法中调用

类与对象的序列化,在js中类序列化为json,也可以序列化为json字符串,用于传输。

拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象。

let person = {name: "Amy", age: 15};
let someone = { ...person };
someone;  //{name: "Amy", age: 15}

JS模块化

javascript是用于web交互的独立脚本,一般的网页由html,css,javascript共同构成。

www学院

mozilla web docs

例如,如下的文件就构成了一个静态网页

在这里插入图片描述
在这里插入图片描述
在html中通过<script>标签引入js脚本就可以实现交互。

随着前段基数的发展,网页做的越来越复杂,通过这种引入的方式十分棘手,有必要考虑一种可以将javascript程序拆分开的独立模块机制。于是诞生了ES6 CommonJS等规范。

ES6在语言标准的层面上,实现了模块功能,其模块功能主要由两个命令构成: exportimport。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

在这里插入图片描述

导出模块

// 分开导出
export const name = "square";export function draw(ctx, length, x, y, color) {ctx.fillStyle = color;ctx.fillRect(x, y, length, length);return {length: length,x: x,y: y,color: color,};
}
// 一次导出
export { name, draw, reportArea, reportPerimeter };

导入模块

在模块外面使用一些功能就需要导入该模块。

import { name, draw, reportArea, reportPerimeter } from '/js-examples/modules/basic-modules/modules/square.js';

模块文件的路径是相对于站点根目录的相对路径

在你的 import 和 export 语句的大括号中,可以使用 as 关键字跟一个新的名字,来改变你在顶级模块中将要使用的功能的标识名字。

// inside module.js
export { function1 as newFunctionName, function2 as anotherNewFunctionName };// inside main.js
import { newFunctionName, anotherNewFunctionName } from "/modules/module.js";

更多语法参考www学院

commonJS和ES6模块化的区别
CommonJS和ES6模块的区别

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822107.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7天八股速记之C++后端——Day 7

坚持7天&#xff0c;短期内快速完成C后端面试突击。每天10题&#xff0c;弥补后端八股知识缺漏&#xff0c;熟练掌握后端的高频考点&#xff0c;后端面试更有把握。 1. 如何避免拷贝 避免拷贝是为了提高程序的性能和效率&#xff0c;尤其在处理大量数据或频繁进行对象复制时尤…

【位运算 子集状态压缩】982按位与为零的三元组

算法可以发掘本质&#xff0c;如&#xff1a; 一&#xff0c;若干师傅和徒弟互有好感&#xff0c;有好感的师徒可以结对学习。师傅和徒弟都只能参加一个对子。如何让对子最多。 二&#xff0c;有无限多1X2和2X1的骨牌&#xff0c;某个棋盘若干格子坏了&#xff0c;如何在没有坏…

[Java 面试题] ArrayList篇

1. ArrayList 与 数组的区别 ArrayList 的底层是数组队列&#xff0c;相当于动态数组。与 Java 中的数组相比&#xff0c;它的容量能动态增长。在添加大量元素前&#xff0c;应用程序可以使用ensureCapacity操作来增加 ArrayList 实例的容量。这可以减少递增式再分配的数量。 …

电机控制专题(一)——最大转矩电流比MTPA笔记

文章目录 电机控制专题(一)——最大转矩电流比MTPA笔记理论推导部分 电机控制专题(一)——最大转矩电流比MTPA笔记 理论推导部分 记转矩角&#xff08;电流矢量与d轴夹角&#xff09;为 γ \gamma γ&#xff0c;则dq轴电流可以表示如下&#xff1a; i d I s c o s γ i_dI…

案例研究|众乐邦将MeterSphere持续测试平台融入DevOps流水线

众乐邦网络科技有限公司&#xff08;以下简称为“众乐邦”&#xff09;是一家企业服务公司。其旗下的众乐邦灵活用工数字化薪税管理平台&#xff08;以下简称为灵活用工管理平台&#xff09;&#xff0c;以财税服务视角切入灵活用工场景&#xff0c;连接企业、灵活就业者和监管…

独孤思维:拿我的收益图去收割,不要脸

01 做副业不要患得患失。 没有必要。 昨天有个学员跟我说&#xff0c;做的xx项目&#xff0c;最近流量降低了好多。 导致有一段时间没有收益了。 其实&#xff0c;这种现象非常常见。 即便是副业顶级玩家&#xff0c;也不可能保证每篇内容都能爆。 每天都有稳定的收益。…

力扣:141. 环形链表

力扣&#xff1a;141. 环形链表 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾…

一个文生视频MoneyPrinterTurbo项目解析

最近抖音剪映发布了图文生成视频功能,同时百家号也有这个功能,这个可以看做是一个开源的实现,一起看看它的原理吧~ 一句话提示词 大模型生成文案 百家号生成视频效果 MoneyPrinterTurbo生成视频效果 天空为什么是蓝色的? 天空之所以呈现蓝色,是因为大气中的分子和小粒子会…

35、链表-LRU缓存

思路&#xff1a; 首先要了解LRU缓存的原理&#xff0c;首先定下容量&#xff0c;每次get请求和put请求都会把当前元素放最前/后面&#xff0c;如果超过容量那么头部/尾部元素就被移除&#xff0c;所以最近最少使用的元素会被优先移除&#xff0c;保证热点数据持续存在。 不管放…

鸿蒙画布组件使用介绍

一、前言 DevEco Studio版本&#xff1a;4.0.0.600 前些天写了一篇 鸿蒙自定义控件实现罗盘数字时钟效果 的文章&#xff0c;有同学私信说能不能介绍鸿蒙中的画布组件&#xff0c;下面文章介绍下鸿蒙中的Canvas画布、CanvasRenderingContext2D绘制组件&#xff0c;实现绘制文…

股票市场预测模型:未来趋势的智能分析工具

&#x1f4c8; 股票市场预测模型&#xff1a;未来趋势的智能分析工具 &#x1f911; &#x1f3e6; 概述 在这个充满变数的股票市场中&#xff0c;投资者需要一个强大的工具来预测未来的价格走势。我们的机器学习模型旨在通过分析历史数据&#xff0c;为投资者提供科学的市场…

03.卸载MySQL

卸载MySQL 1.Windows卸载MySQL8 停止服务 用命令停止或者在服务中停止都可以 net stop mysql&#xff08;服务名字可以去服务里面看一下&#xff09;控制面板卸载MySQL 卸载MySQL8.0的程序可以和其他桌面应用程序一样直接在控制面板选择卸载程序&#xff0c;并在程序列表中…

转换为elementUI提示方法为uni-app的showToast提示

// 转换为elementUI提示方法为uni-app的showToast提示---------------------------------------- // 一般提示 Vue.prototype.$message function(title) {title && uni.showToast({icon: none,title}); }; // 成功提示 Vue.prototype.$message.success (title) > …

无效的标记: --release

maven编译项目时候出现&#xff1a;无效的标记: --release 项目背景 介绍一下项目背景&#xff1a; java17 SpringBoot&#xff1a;3.2.0 SpringCloud&#xff1a; 2023.0.0 之前一直用java8开发项目 问题原因 maven所使用的jdk版本和idea所使用的jdk版本不一致导致的。…

客诉技术架构:构建客户满意的数字化支持系统

随着数字化时代的到来&#xff0c;客户体验已经成为企业竞争的关键因素之一。而客诉技术架构作为支持客户服务和解决问题的关键系统&#xff0c;对于企业提升客户满意度和品牌声誉具有重要意义。本文将深入探讨客诉技术架构的重要性、关键要素以及如何构建一个有效的客户支持系…

微服务之网关路由

一、概述 1.1认识网关 什么是网关&#xff1f; 顾明思议&#xff0c;网关就是网络的关口。数据在网络间传输&#xff0c;从一个网络传输到另一网络时就需要经过网关来做数据的路由和转发以及数据安全的校验。 更通俗的来讲&#xff0c;网关就像是以前园区传达室的大爷。 外…

跨境物流系统解决方案:构建全球化供应链的关键步骤

随着全球化的发展&#xff0c;跨境物流已成为国际贸易中不可或缺的重要环节。然而&#xff0c;由于各国之间的政治、法律、文化和语言差异&#xff0c;跨境物流常常面临诸多挑战&#xff0c;如货物清关、运输安全、物流跟踪等问题。因此&#xff0c;构建一个高效、可靠的跨境物…

Docker-Compose一键安装脚本

Docker-Compose一键安装脚本 Docker 安装&#xff1a; wget -qO- get.docker.com | bash systemctl start docker systemctl enable dockerDocker Compose 是 Docker 编排服务的一部分&#xff0c;Compose 可以让用户在集群中部署分布式应用。 Docker Compose 是一个属于 “应…

3.2 iHRM人力资源 - 组织架构 - 编辑及删除

iHRM人力资源 - 组织架构 文章目录 iHRM人力资源 - 组织架构一、编辑功能1.1 表单弹层并数据回显1.2 编辑校验1.3 编辑 二、删除功能 一、编辑功能 编辑功能和新增功能用的组件其实是一个&#xff0c;结构几乎是一样的&#xff0c;其实是复用了组件&#xff0c;我们也省去了很…

Hive-Sql复杂面试题

参考链接&#xff1a;hive sql面试题及答案 - 知乎 1、编写sql实现每个用户截止到每月为止的最大单月访问次数和累计到该月的总访问次数 数据&#xff1a; userid,month,visits A,2015-01,5 A,2015-01,15 B,2015-01,5 A,2015-01,8 B,2015-01,25 A,2015-01,5 A,2015-02,4 A,20…