前端技术栈es6+promise

news/2025/2/4 5:48:20/

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.ppmy.cn/news/1035185.html

相关文章

21.0 CSS 介绍

21.0 CSS 介绍

1. CSS层叠样式表 1.1 CSS简介 CSS(层叠样式表): 是一种用于描述网页上元素外观和布局的样式标记语言. 它可以与HTML结合使用, 通过为HTML元素添加样式来改变其外观. CSS使用选择器来选择需要应用样式的元素, 并使用属性-值对来定义这些样式.1.2 CSS版本 CSS有多个版本, 每个…
阅读更多...
泛微 E-Office文件上传漏洞复现

泛微 E-Office文件上传漏洞复现

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 文章作者拥有对此文章的修改和解释权。如欲转载或传播此文章&#xff0c…
阅读更多...
用Python做一个滑雪小游戏

用Python做一个滑雪小游戏

游戏是让人娱乐和放松的好方式&#xff0c;而编写和玩自己的游戏则是一种特别有趣的体验。在本文中&#xff0c;我们将使用Python和pygame库来创建一个简单的滑雪小游戏。通过这个小游戏项目&#xff0c;我们将学习如何使用Python编程语言来制作自己的游戏&#xff0c;并且享受…
阅读更多...
kubernetes企业级高可用部署

kubernetes企业级高可用部署

目录 1、Kubernetes高可用项目介绍 2、项目架构设计 2.1、项目主机信息 2.2、项目架构图 1、Kubernetes高可用项目介绍 2、项目架构设计 2.1、项目主机信息 2.2、项目架构图 2.3、项目实施思路 3、项目实施过程 3.1、系统初始化 3.2、配置部署keepalived服务 3.3、…
阅读更多...
JavaScript 中 toFixed 如何满足四舍五入

JavaScript 中 toFixed 如何满足四舍五入

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。但是使用的是银行家舍入规则&#xff0c;其实质是一种四舍六入五取偶&#xff08;又称四舍六入五留双&#xff09;法。即&#xff1a;四舍六入五考虑&#xff0c;五后非零就进一&#xff0c;五后为零看奇偶&#xff0…
阅读更多...
prometheusalert区分告警到不同钉钉群

prometheusalert区分告警到不同钉钉群

方法一 修改告警规则 - alert: cpu使用率大于88%expr: instance:node_cpu_utilization:ratio * 100 > 88for: 5mlabels:severity: criticallevel: 3kind: CpuUsageannotations:summary: "cpu使用率大于85%"description: "主机 {{ $labels.hostname }} 的cp…
阅读更多...
二叉树的带权路径长度

二叉树的带权路径长度

二叉树的带权路径长度(WPL)是二叉树中所有叶结点的带权路径长度之和&#xff0c;也就是每个叶结点的深度与权值之积的总和。 给定一棵二叉树 T &#xff0c;请你计算并输出它的 WPL。 注意&#xff0c;根节点的深度为 0 。 样例 输入&#xff1a;二叉树[8, 12, 2, null, …
阅读更多...
LVS-DR集群（一台LVS，一台CIP，两台web，一台NFS）的构建

LVS-DR集群（一台LVS，一台CIP，两台web，一台NFS）的构建

一.构建环境 1.五台关闭防火墙&#xff0c;关闭selinux&#xff0c;拥有固定IP&#xff0c;部署有http服务的虚拟机&#xff0c;LVS设备下载ipvsadm工具&#xff0c;NFS 设备需要下载rpcbind和nfs-utils 2.实现功能 3.ipvsadm命令部分参数介绍 二.配置和测试 1.LVS设备 &…
阅读更多...
最新文章

Copyright @ 2022~2023