前端技术栈es6+promise

let入门使用、

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>let 基本使用</title><script type="text/javascript">let name = "hspedu教育";//老韩解读//1. console.log("name=", name); //使用, 可以输出对象的完整信息// 使用+, 字符串的拼接, 如果name是一个对象, 会输出object, 而不会输出对象的完整信息//2. console.log("name="+ name);console.log("name=", name);</script>
</head>
<body></body>
</html>

const常量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>const常量/只读变量的使用</title><script type="text/javascript">//const 基本使用 => 想一想java基础[语言语法很多是相通]/**老韩解读1. 常量在定义时，需要赋值2. 常量赋值后不能修改*///常量const PI = 3.14;//invalid assignment to const 'PI'//PI = 3.1415926;console.log("PI=", PI)</script>
</head>
<body></body>
</html>

声明对象·

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>声明对象的简写方式</title><script type="text/javascript">const age = 800;const name = "牛魔王";// 传统 声明/定义对象let monster = {name: name, age: age};// ES6 声明/定义对象//老师解读//1. {name, age} : 表示对象的属性名是name和age//2. 属性name的值是从变量/常量 name来的let monster02 = {name, age};console.log("monster02=>", monster02);</script>
</head>
<body></body>
</html>

模板字符串的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板字符串的使用</title><script type="text/javascript">//1、字符串，换行会原生输出let str1 = `for(int i = 0;i < 10;i++){System.out.println("i="+i);}`;console.log("str1=", str1);//2. 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。let name = "hspedu教育";//老师解读//(1) 当解析 ${name}, 就找最近的name遍历, 进行替换//(2) 然后可以得到最后解析的字符串let str2 = `教育名称=${name}`;let str3 = `1+2=${1 + 2}`;let n1 = 80;let n2 = 20;let str4 = `${n1}+${n2}=${n1 + n2}`;console.log("str2=", str2);console.log("str3=", str3);console.log("str4=", str4);//3. 字符串中调用函数function sayHi(name) {return "hi " + name;}let name2 = "tom";let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`;let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`;console.log("str5=", str5);console.log("str6=", str6);</script>
</head>
<body></body>
</html>

在这里插入图片描述

对象方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象方法的简写形式</title><script type="text/javascript">// 传统-对象方法定义let monster = {name: "红孩儿",age: 100,sayHi: function () {console.log("信息: name=", this.name, " age=", this.age);}}monster.f10 = function () {console.log("哈哈");};monster.sayHi();monster.f10();// ES6-对象方法定义let monster2 = {name: "红孩儿~",age: 900,sayHi() {console.log("信息: name=", this.name, " age=", this.age);},f1() {console.log("f1()");}}monster2.sayHi();monster2.f1();</script>
</head>
<body></body>
</html>

对象运算符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象运算符的扩展</title><script type="text/javascript">let cat = {name: "小花猫", age: 2};// let cat2 = cat;// cat2.name = "大花猫";// console.log("cat=>", cat);// console.log("cat2=>", cat2);//// 拷贝对象(深拷贝)let cat2 = {...cat};cat2.name = "中花猫";console.log("cat=>", cat);//小花猫console.log("cat2=>", cat2);//中花猫// 合并对象[深拷贝]let monster = {name: "白骨精", age: 100};let car = {brand: "奔驰", price: 800000};let monster_car = {...monster, ...car}monster_car.name = "狐狸精";console.log("monster=>", monster);console.log("monster_car=>", monster_car);</script>
</head>
<body></body>
</html>

对象解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象解构</title><script type="text/javascript">//对象解构/*** let monster = {name: '牛魔王', age: 800}* 细节说明* 1. 对象解构时，let{name, age} 中的 name 和 age 名称需要和对象属性名保持一致* 2. 也可解构对象部分属性，比如 let{age} 这样就只取出age 属性* 3. 还有其它的形式,比如方法上使用对象解构*///monster是一个对象let monster = {name: '牛魔王', age: 800};//传统方式取出属性-解构 对象名.属性名console.log(monster.name, " ", monster.age);//ES6对象解构//老韩解读//1. 把monster对象的属性, 赋值给{name,age}//2. {name,age} 的取名name 和 age 要和monster对象的属性名保持一致//3. 使用{} 包括, 不要使用[]//4. {name,age} 顺序是无所谓let {name, age} = monster;console.log("========================");console.log("name=", name, " age=", age);//下面这个写法也可以//let {name, age} = {name: '牛魔王', age: 800};//还有其它的形式,比如方法上使用对象解构//如果这样使用，仍然要保证名称和对象的属性名一致function f1({name, age}) {console.log("f1-name=", name, " ", "f1-age=", age)}f1(monster);</script>
</head>
<body></body>
</html>

let细节

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>let 使用注意事项和细节</title><script type="text/javascript">// let 细节1// (1) let 声明的变量, 在代码块中，则作用域在代码块中// (2) var声明的变量, 在代码块中，作用域没有限制{var name = "韩顺平教育";let job = "java工程师";console.log("name=", name);console.log("job=", job);}console.log("name=", name);//console.log("job=", job);//job is not defined// let 细节2// 1. var 可以声明多次// 2. let 只能声明一次var num1 = 100;var num1 = 200;console.log(num1);let num2 = 600;//Syntax => 语法//let num2 = 900;//Uncaught SyntaxError: redeclaration of let num2console.log(num2);// let 细节3// 1. let 不存在变量提升// 2. var 存在变量提升console.log("x=", x);//undefinedvar x = "tom";//can't access lexical declaration 'z'console.log("z=", z);let  z = "mary";</script>
</head>
<body></body>
</html>

数组赋值解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组解构赋值</title><script type="text/javascript">let arr = [1, 2, 3];//如果要看某个变量的类型console.log("arr=>", arr);//数组解构[取出元素]//1.传统let x = arr[0], y = arr[1], z = arr[2];console.log(x, y, z);//2. ES6风格let [a, b, c] = arr;console.log("==================================");console.log(a, b, c);let [num1, num2, num3] = [100, 200, 300];console.log(num1, num2, num3);</script>
</head>
<body></body>
</html>

箭头函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭头函数的使用</title><script type="text/javascript">// 传统定义函数var f1 = function (n) {return n * 2}console.log("传统= " + f1(2))// ES6 , 箭头函数使用let f2 = (n) => {return n * 2;}console.log("f2() 结果= ", f2(100));//200//上面的es6 函数写法，还可以简化let f3 = n => n * 3;console.log("f3() 结果=", f3(100));//300//函数也可以传给一个变量=> 看看java基础匿名内部类function hi(f4) {console.log(f4(900));}hi((n) => {return n + 100});hi((n) => {return n - 100});</script>
</head>
<body></body>
</html>

在这里插入图片描述

箭头函数2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭头函数使用案例2</title><script type="text/javascript">// 传统var f1 = function (n, m) {var res = 0for (var i = n; i <= m; i++) {res += i}return res}console.log("传统= " + f1(1, 10))// ES6 , 箭头函数使用let f2 = (n, m) => {var res = 0for (var i = n; i <= m; i++) {res += i}return res};console.log(f2(1, 10));</script>
</head>
<body></body>
</html>

箭头函数与对象解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭头函数+对象解构</title><script type="text/javascript">const monster = {name: "红孩儿",age: 1000,skill: ['红缨枪', '三位真火']}//要求：在方法形参取出monster对象的skill属性//传统方式function f1(monster) {console.log("skill=", monster.skill);}f1(monster);//箭头函数let f2 = ({skill}) => {console.log("skill=", skill);}//老韩解读//1. f2 传入对象 monster//2. f2形参是 {skill} , 所以es6的对象解构特性, 会把monster对象的 skill属性赋给//   skill//3. 对象解构的前提就是 {skill}的skill 和 monster的 skill属性是一致f2(monster);//箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致.let f3 = ({age, name, skill}) => {console.log("skill=", skill, " age=", age, " name=", name);}f3(monster);</script>
</head>
<body></body>
</html>

在这里插入图片描述

作业1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">// 给你一个对象let cat = {name: 'jack', age: 10}; 要求使用模板字符串显示cat的信息let cat = {name: 'jack', age: 10};let str = `cat的信息为 name=${cat.name} age=${cat.age}`;console.log(str);</script>
</head>
<body></body>
</html>

作业2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//看下面的代码, 请问输出什么， 并分析原因let dog = {name: "大黄", age: 3};//老师分析//1. 使用对象解构//2. namex  undefined//3. age 3let {namex, age} = dog;console.log("namex=", namex, " age=", age);</script>
</head>
<body></body>
</html>

作业3

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//根据给出的数据, 用ES6的方式, 构建对象person, 并提供方法(用最简洁的方式), 可以输出信息const name = "周星驰";const job = "演员";let person = {name,job,show() {console.log("person信息 name=", this.name, " job=", this.job);}}person.show();</script>
</head>
<body></body>
</html>

作业4

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//根据给出的数据, 用ES6的方式, 编写方法, 使用对象解构的方式, 得到 oper 和 arr, 并根据oper的值 , oper可以是+、-、*、/  来计算结果var cal = {oper: "/",arr: [1, 2, 3, 5]}function f1({oper, arr}) {let res = 0;//初始化的值，要分析考虑//这里小伙伴们可以考虑arr的传入，并且做分析//判断arr 是不是null, 并且arr.length <=1 , 就直接返回arr[0]if ("+" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res += arr[i];}} else if ("-" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res -= arr[i];}} else if ("*" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res *= arr[i];}} else if ("/" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res /= arr[i];}} else {console.log("oper输入不正确..")}return res;}console.log("f1运算的结果=", f1(cal))</script>
</head>
<body></body>
</html>

作业5

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//调用f8 函数, arr是数组, fun传入箭头函数, 可以计算 arr的和, 并写出调用方法function f8(arr, fun) {console.log(fun(arr));//调用模板}f8([1, 2, 3, 4, 5], (arr) => {let res = 0;for (let i = 0; i < arr.length; i++) {res += arr[i];}return res;})</script>
</head>
<body></body>
</html>

在这里插入图片描述

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

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

相关文章

苹果Mac像Windows一样使用

苹果Mac像Windows一样使用

一、将磁盘访问设置的像Windows一样&#xff1a; 1.1、点击任务栏第一个按钮打开“访达”&#xff0c;点击菜单栏上的访达-偏好设置&#xff1a; 1.2、勾选“硬盘”&#xff0c;这样macOS的桌面上就会显示一个本地磁盘&#xff0c;之后重命名为磁盘根&#xff0c;相当于window…
阅读更多...
SPF9139全力适配ios16与鸿蒙3.0，超实用数据提取、分析、恢复能力UP！

SPF9139全力适配ios16与鸿蒙3.0，超实用数据提取、分析、恢复能力UP！

​ 如今&#xff0c;群聊已成为人们必不可少的沟通窗口 家人群&#xff0c;好友群&#xff0c;班级群 粉丝群&#xff0c;交友群&#xff0c;工作群 …… 各类群聊铺天盖地般涌来的同时 也有一些群聊沦为了 赌博、传播淫秽视频、发表不当言论 等违法犯罪行为滋生之地 与…
阅读更多...
mac 可以进行单片机（stm32）的开发吗？

mac 可以进行单片机（stm32）的开发吗？

当涉及到在Mac上进行单片机开发时&#xff0c;是完全可行的。以下是为什么Mac适合单片机开发的解释&#xff1a;开发工具&#xff1a;针对STM32单片机&#xff0c;你可以使用多种开发工具。一个常用的选择是Segger Embedded Studio&#xff0c;它是一个功能强大的集成开发环境&…
阅读更多...
ClickHouse（十八）：Clickhouse Integration系列表引擎

ClickHouse（十八）：Clickhouse Integration系列表引擎

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术&#xff0c;IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &…
阅读更多...
IDEA常用设置与maven项目部署

IDEA常用设置与maven项目部署

目录 前言 一、Idea是什么 二、Idea的优点 三、Idea的常用设置 主题设置 设置鼠标悬浮提示 忽略大小写提示 自动导包 取消单行显示Tabs 设置字体 配置类文档注释信息模版 设置文件编码 设置自动编译 水平或者垂直显示代码 快捷方式改成eclipse 设置默认浏览器…
阅读更多...
Java并发编程（六）线程池[Executor体系]

Java并发编程（六）线程池[Executor体系]

概述 在处理大量任务时,重复利用线程可以提高程序执行效率,因此线程池应运而生。 它是一种重用线程的机制,可以有效降低内存资源消耗提高响应速度。当任务到达时&#xff0c;任务可以不需要的等到线程创建就能立即执行线程池可以帮助我们更好地管理线程的生命周期和资源使用,…
阅读更多...
Jmeter - 函数助手

Jmeter - 函数助手

目录 __StringFromFile __CSVRead __counter __RandomString __StringFromFile StringFromFile函数用于获取文本文件的值&#xff0c;一次读取一行 1、输入文件的全路径&#xff1a;填入文件路径 2、存储结果的变量名&#xff08;可选&#xff09; 3、Start file sequence …
阅读更多...
Tomcat+Http+Servlet

Tomcat+Http+Servlet

文章目录 1.HTTP1.1 请求和响应HTTP请求&#xff1a;请求行请求头请求体HTTP响应&#xff1a;响应行&#xff08;状态行&#xff09;响应头响应体 2. Apache Tomcat2.1 基本使用2.2 IDEA中创建 Maven Web项目2.3 IDEA中使用Tomcat 3. Servlet3.1 Servlet快速入门3.2 Servlet执行…
阅读更多...
游戏中的UI适配

游戏中的UI适配

引用参考&#xff1a;感谢GPT UI适配原理以及常用方案 游戏UI适配是确保游戏界面在不同设备上以不同的分辨率、屏幕比例和方向下正常显示的关键任务。下面是一些常见的游戏UI适配方案&#xff1a; 1.分辨率无关像素&#xff08;Resolution-Independent Pixels&#xff09;&a…
阅读更多...
【广州华锐视点】VR警务教育实训系统模拟真实场景进行实践训练

【广州华锐视点】VR警务教育实训系统模拟真实场景进行实践训练

随着科技的发展&#xff0c;虚拟现实技术在教育领域得到了广泛的应用。VR警务教育实训系统就是其中的一种应用&#xff0c;该系统由广州华锐互动开发&#xff0c;可以模拟真实的警务场景&#xff0c;让学生通过虚拟现实技术进行实践训练&#xff0c;提高学生的实践能力和技能水…
阅读更多...
Linux：shell脚本循环语句

Linux：shell脚本循环语句

目录 一、循环含义 二、echo命令 三、for 3.1.将1到100累加求和 3.2批量添加用户 3.3 根据IP地址检查主机状态 四、 while 和 until 4.1 猜价格 4.2 1-100求和 一、循环含义 循环含义 将某代码段重复运行多次&#xff0c;通常有进入循环的条件和退出循环的条件 重复…
阅读更多...
视频汇聚平台EasyCVR视频监控播放平台WebRTC流地址无法播放的问题解决方案

视频汇聚平台EasyCVR视频监控播放平台WebRTC流地址无法播放的问题解决方案

开源EasyDarwin视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多…
阅读更多...
Ubuntu18.04.4裸机配置

Ubuntu18.04.4裸机配置

下载虚拟机Ubuntu18.04.4 链接&#xff1a;https://pan.baidu.com/s/1jyucyUSXa9-Fw9ctuU87hA 提取码&#xff1a;o42a –来自百度网盘超级会员V5的分享 VMware选择镜像安装 设置你的用户名&#xff0c;就像windows上登录用户一样简单 下一步……下一步……如此简单 下载…
阅读更多...
Floyd(多源汇最短路)

Floyd(多源汇最短路)

Floyd求最短路 给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;边权可能为负数。 再给定 k 个询问&#xff0c;每个询问包含两个整数 x 和 y&#xff0c;表示查询从点 x 到点 y 的最短距离&#xff0c;如果路径不存在&#xff0c;则输出 impo…
阅读更多...
Fortinet数据中心防火墙及服务ROI超300%！Forrester TEI研究发布

Fortinet数据中心防火墙及服务ROI超300%！Forrester TEI研究发布

近日&#xff0c;专注网络与安全融合的全球网络安全领导者 Fortinet&#xff08;NASDAQ&#xff1a;FTNT&#xff09;联合全球知名分析机构Forrester发布总体经济影响独立分析报告&#xff0c;详细阐述了在企业数据中心部署 FortiGate 下一代防火墙&#xff08;NGFW&#xff09…
阅读更多...
缓存淘汰算法(LFU LRU FIFO)及进程的状态和转换

缓存淘汰算法(LFU LRU FIFO)及进程的状态和转换

目录 一、缓存淘汰算法 1.LFU&#xff08;Least Frequently Used&#xff09;最近最不常用算法 2.LRU&#xff08;Least Recently User&#xff09;最近最少使用算法 3.FIFO&#xff08;First in first out&#xff09;先进先出算法 二、进程的状态和转换 1.最基本的三种状…
阅读更多...
OpenCV图像处理——模版匹配和霍夫变换

OpenCV图像处理——模版匹配和霍夫变换

目录 模版匹配原理实现 霍夫变换霍夫线检测 模版匹配 原理 实现 rescv.matchTemplate(img,template,method)import numpy as np import cv2 as cv import matplotlib.pyplot as pltimgcv.imread(./汪学长的随堂资料/6/模板匹配/lena.jpg) templatecv.imread(./汪学长的随堂资…
阅读更多...
使用chatGPT-4 畅聊量子物理学（三）

使用chatGPT-4 畅聊量子物理学（三）

集合了人类智慧的照片&#xff0c;来自 1927 年举行的第五届索尔维国际会议。 Omer 什么是“物理系统在被测量之前不具有确定的属性。量子力学只能预测给定测量的可能结果的概率分布" ChatGPT 这句话描述了量子力学中的一种基本原则&#xff0c;即“物理系统在被测量之前…
阅读更多...
世微AP2813 平均电流双路降压恒流驱动器 LED储能电源驱动指示灯IC 可恒流可爆闪 可双路恒流

世微AP2813 平均电流双路降压恒流驱动器 LED储能电源驱动指示灯IC 可恒流可爆闪 可双路恒流

产品描述 AP2813 是一款双路降压恒流驱动器,高效率、外围简单、内置功率管&#xff0c;适用于 5-80V 输入的高精度降压 LED 恒流驱动芯片。内置功率管输出最大功率可达12W&#xff0c;最大电流 1.2A。AP2813 一路直亮&#xff0c;另外一路通过 MODE1 切换全亮&#xff0c;爆闪…
阅读更多...
利用OpenCV光流算法实现视频特征点跟踪

利用OpenCV光流算法实现视频特征点跟踪

光流简介 光流&#xff08;optical flow&#xff09;是运动物体在观察成像平面上的像素运动的瞬时速度。光流法是利用图像序列中像素在时间域上的变化以及相邻帧之间的相关性来找到上一帧跟当前帧之间存在的对应关系&#xff0c;从而计算出相邻帧之间物体的运动信息的一种方法。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023