当前位置： 首页 > news >正文

前端技术栈es6+promise

news 2025/6/27 3:44:28

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>

在这里插入图片描述

promise使用快速入门

//定义对象,变量，常量, 函数
const sum = function (a, b) {return parseInt(a) + parseInt(b);
}const sub = function (a, b) {return parseInt(a) - parseInt(b);
}let name = "韩顺平教育";const PI = 3.14;const monster = {name: "牛魔王",age: 500,hi() {console.log("hi 你好 牛魔王");}
}//导出
/*
老韩解读
1. module.exports 导出模块
2. 把你需要导出的数据, 写入到 {}中即可
3. 可以全部导出，也可以部分导出
4. 理解：相当于把我们导出的数据，当做一个对象
5. 如果属性名和函数/变量/对象..名字相同，可以简写
6. 有些前端， 简写 module.exports={} 成 exports={}*/
exports = {sum,sub,name,PI
}
// module.exports = {
//     sum,
//     sub,
//     name,
//     PI
// }
// module.exports = {
//     sum: sum,
//     sub: sub,
//     myname: name,
//     PI: PI
// }

//导入
//老韩解读
//1. 在es5中, 我们通过 require 就包 对应.js中的
//数据/对象，引入
//2. 我们使用的时候，通过m.属性 就可以使用
//3. 如果我们导入时，不需要所有的，可以导入部分数据
const m = require("./function.js");const {sub} = require("./function.js");//使用
//老韩说明: 只要这里idea可以识别变量/函数/对象, 说明OK
console.log(m.sub("100","200"));
console.log(m.sum(10,90));
console.log(m.name)
console.log(m.PI);
console.log(sub(19,8));

数据导出的几种方式

//定义对象,变量，常量, 函数
const sum = function (a, b) {return parseInt(a) + parseInt(b);
}const sub = function (a, b) {return parseInt(a) - parseInt(b);
}let name = "韩顺平教育";const PI = 3.14;const monster = {name: "牛魔王",age: 500,hi() {console.log("hi 你好 牛魔王");}
}//es6的导出模块/数据
/*** 老师解读* 1. export 就是导出模块/数据* 2. 可以全部导出，也可以部分导出*/
export {sum,sub,name,monster
}

//定义对象,变量，常量, 函数//定义sum函数时，就直接导出
//老韩说明：如果在定义时，导出的数据， 在导入时，要保持名字一致
export const sum = function (a, b) {return parseInt(a) + parseInt(b);
}const sub = function (a, b) {return parseInt(a) - parseInt(b);
}let name = "韩顺平教育";const PI = 3.14;const monster = {name: "牛魔王",age: 500,hi() {console.log("hi 你好 牛魔王");}
}
//定义对象,变量，常量, 函数//演示默认导出
//如果是默认导出， 导入的时候，使用的语法
//可以这里理解, 类似把 {} 当做一个对象导出export default {sum(a,b) {return parseInt(a) + parseInt(b);},sub(a,b) {return parseInt(a) - parseInt(b);}
}

接收导出的方式

//导入
/*** 老韩解读* 1. 我可以{} 来接收导出的数据* 2. 可以全部接收，也可以选择的接收* 3. 细节： 这时要求导入的名称和导出的名称一致*/
import {sub,sum,name} from "./common";
import {monster} from "./common";//使用
console.log(sumx(10, 90));
console.log(name);
console.log(monster.hi())

//可以导入模块/数据
import {sum}  from "./common2";
//没有导出的数据, 是不可以导入
//import {sub}  from "./common2";console.log(sum(10,30));

//导入默认导出模块/数据
//好处是 m 名称是可以自己指定的.
//以为m 名字, 程序员可以自己指定，因此我们就可以解决名称冲突问题
import m from "./common3";//使用 m.xx
console.log(m.sub(80,90));

作业

import m from "./b";
//a.js中的dog
const dog = {hi() {}
}//使用dog
console.log(dog.hi())
console.log(m.dog.say());
//b.js中定义了对象
//默认导出
export default {dog: {say() {}}
}

作业1

// 1. 请编写一个文件hspcommon.js , 该文件有对象cat (属性, name, age, cry()) dog(属性: name, age, hi())
// 1) 使用批量导出
// 2) 创建时, 直接导出
// 3) 默认方式导出//定义对象时，直接导出
export let cat = {name: "小花猫",age: 100,cry() {console.log("小花猫喵喵叫...");}
}// let cat = {
//     name: "小花猫",
//     age: 100,
//     cry() {
//         console.log("小花猫喵喵叫...");
//     }
// }let dog = {name: "小花狗",age: 2,hi() {console.log("小花狗说 hi...");}
}//使用批量导出
// export {cat, dog}
// 1. 请编写一个文件hspcommon.js , 该文件有对象cat (属性, name, age, cry()) dog(属性: name, age, hi())
// 1) 使用批量导出
// 2) 创建时, 直接导出
// 3) 默认方式导出//默认导出
//这里注意 写法有一些变化, 当我们的两个对象，当做{} 的属性即可export default {cat: {name: "小花猫",age: 100,cry() {console.log("小花猫喵喵叫...");}},dog: {name: "小花狗",age: 2,hi() {console.log("小花狗说 hi...");}}}
// import {cat,dog} from "./hspcommon";
// import {cat} from "./hspcommon";// console.log(cat.cry());
// console.log(cat.age);
// console.log(cat.name);//导入 hspcommon2.js的默认导出的模块
import h from "./hspcommon2";console.log(h.cat.cry());
console.log(h.dog.age);
http://www.lryc.cn/news/131617.html

相关文章：

  • windows vscode使用opencv
  • json文件读取数据报错 AttributeError: ‘str‘ object has no attribute ‘items‘
  • 1、Spring_IOC
  • Socks5、IP代理在爬虫开发与HTTP通信中的应用
  • 重新认识小米
  • react之react-redux的介绍、基本使用、获取状态、分发动作、数据流、reducer的分离与合并等
  • 滑块验证码-接口返回base64数据
  • 智能文件改名，一键与上上级目录名称同步，让文件整理更加便捷
  • RK3399平台开发系列讲解（内核调试篇）Valgrind使用案例
  • 07_缓存预热缓存雪崩缓存击穿缓存穿透
  • 常见前端基础面试题（HTML,CSS,JS）（三）
  • CSS（JavaEE初阶系列14）
  • 学习笔记230810--get请求的两种传参方式
  • 游戏找不到msvcr100.dll解决方法，常见的三种解决方法
  • 机器学习知识点总结：什么是GBDT(梯度提升树)
  • SpringBoot + Vue 微人事权限组管理模块 (十四)
  • Liunx系统编程：进程信号的概念及产生方式
  • 宝塔端口监听不到端口
  • 机器学习入门的概念
  • 插入排序优化——超越归并排序的超级算法
  • 面试之快速学习STL-容器适配器
  • 性能比较 - Spring Boot 应用程序中的线程池与虚拟线程 (Project Loom)
  • rust学习-打印结构体中的vec
  • FPGA: RS译码仿真过程
  • PostgreSQL 查询数据表、视图信息
  • 手撕vector容器
  • PyMuPDF`库实现PDF旋转功能
  • 微人事 登录问题完善
  • 【业务功能篇64】安装docker容器，在docker上安装mysql
  • MyBatis的基本概念和核心组件