ES6语法
一、Let、const、var变量定义
1.let 声明的变量有严格局部作用域
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//var声明的变量往往会越域//let 声明的变量有严格局部作用域{var a=1;let b=2;}console.log(a);//1console.log(b);//Uncaught ReferenceError: b is not defined}</script>
</body>
</html>
可以查看控制台的输出：
2.let只能声明一次
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//var可以声明多次//let只能声明一次var m=1var m=2let n=3//let n=4console.log(m);//2console.log(n);//3}</script>
</body>
</html>
3.let 不存在变量提升
什么是变量提升
变量提升（Hoisting） 是指 JS在运行代码前，会将变量和函数的声明提升到当前作用域的顶部。这一特性源于 JS 的编译机制，在编译阶段就会为变量和函数分配内存。
具体为：
var 的提升：变量声明被提升到作用域顶部，并初始化为 undefined。
函数声明的提升：函数声明被完整提升到作用域顶部，可以在声明前调用。
let 和 const 的提升：声明会被提升，但不会初始化，在初始化之前的访问会触发临时死区（TDZ）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//var会变量提升//let不存在变量提升console.log(x);//undefinedvar x=10;console.log(y);//Uncaught ReferenceError: Cannot access 'y' before initializationlet y=20;}</script>
</body>
</html>
查看控制台的输出：
4.const声明之后不允许改变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){var b=2;b=4;console.log(b);//4let c=5;c=7;console.log(c);//7//const声明之后不允许改变const a=1;a=3;console.log(a);//Uncaught TypeError: Assignment to constant variable.}</script>
</body>
</html>
查看控制台：
二、结构表达式
1.数组解构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//数组解构let arr=[1,2,3];let a=arr[0];let b=arr[1];let c=arr[2];console.log(a,b,c);//1 2 3let[m,n,q]=arr;console.log(m,n,q);//1 2 3}</script>
</body>
</html>
查看控制台
2.对象解构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//对象解构const person={name:"zhangsan",age:21,language:['java','html','css']}const name=person.name;const age=person.age;const language=person.language;console.log(name,age,language);//zhangsan 21 ['java','html','css']const person1={name1:"lisi",age1:21,language1:['java','C','python']}const {name1:abc,age1,language1}=person1;console.log(abc,age1,language1)//lisi 21 ['java','C','python']console.log(name1,age1,language1)//Uncaught ReferenceError: name1 is not defined}</script>
</body>
</html>
查看控制台：
3.字符串扩展
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//字符串扩展let str="hello.vue";console.log(str.startsWith("hello"));//trueconsole.log(str.endsWith(".vue"));//trueconsole.log(str.includes("e"));//trueconsole.log(str.includes("hello"));//true}</script>
</body>
</html>
查看控制台：
4.字符串模板
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//字符串模板let ss = `<div><span>hello world<span></div>`;console.log(ss);}</script>
</body>
</html>
控制台：
5.字符串插入变量和表达式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){const person = {name: "jack",age: 21,language: ['java', 'js', 'css']}//对象解构const { name: abc, age, language } = person;// // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;console.log(info);}function fun() {return "这是一个函数"}</script>
</body>
</html>
控制台：
三、函数优化
1.直接给参数写上默认值，没传就会自动使用默认值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>// 现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值function test1(a ,b=1){return a+b;}// 调用函数console.log(test1(5, 3)); // 输出 8console.log(test1(5)); // 输出 6console.log(test1(a=10, b=5)); // 输出 15console.log(test1(b=5, a=10)); // 输出 15</script>
</body>
</html>
控制台：
2.可变参数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton">点击我</button><script>// 可变参数function test1(...values){console.log(values.length)}test1(1,2);//2test1(1,2,3,4);//4</script>
</body>
</html>
控制台：
3.箭头函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 箭头函数var print=function(obj){console.log(obj);//hello}print("hello");var print=obj => console.log(obj);print("hei");//heivar sum = function (a, b) {c = a + b;return a + c;}var sum2 = (a, b) => a + b;console.log(sum2(11, 12));//23var sum2 = (a, b) => a + b;console.log(sum2(11, 3));//14var sum3 = (a, b) => {c = a + b;return a + c;}console.log(sum3(10, 20));//40const person = {name: "jack",age: 21,language: ['java', 'js', 'css']}function hello(person) {console.log("hello," + person.name)}</script>
</body>
</html>
4.箭头函数+解构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>const person = {name: "jack",age: 21,language: ['java', 'js', 'css']}// 箭头函数+解构var hello2=({name})=>console.log("hello,"+name);//hello,jackhello2(person);</script>
</body>
</html>
四、对象优化
1.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>const person = {name: "jack",age: 21,language: ['java', 'js', 'css']}console.log(Object.keys(person));//['name', 'age', 'language']console.log(Object.values(person));//['jack', 21, Array(3)]console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]const target={a:1};const source1={b:2};const source2={c:3};//{a:1,b:2,c:3} 把对象合并到一起Object.assign(target,source1,source2);console.log(target);//{a: 1, b: 2, c: 3}console.log(source1);//{b: 2}</script>
</body>
</html>
2.声明对象简写
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//声明对象简写const age=23const name="张三"const person1={age: age, name: name}console.log(person1)//{age: 23, name: '张三'}const person2={age, name}console.log(person2)//{age: 23, name: '张三'}</script>
</body>
</html>
3.对象的函数属性简介
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//对象的函数属性简介let person1={name: "zhangsan",//以前eat: function (food){console.log(this.name+"在吃"+food);//zhangsan在吃香蕉},//箭头函数this不能使用，对象.属性eat2: food => console.log(person1.name+"吃"+food),//zhangsan吃苹果eat3(food){console.log(this.name+"在"+food);//zhangsan在橘子}}person1.eat("香蕉");person1.eat2("苹果");person1.eat3("橘子");</script>
</body>
</html>
4.拷贝对象（深拷贝）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//拷贝对象（深拷贝）let p1 = { name: "Amy", age: 15 }let someone = { ...p1 }console.log(someone)//{name: "Amy", age: 15}</script>
</body>
</html>
5.合并对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//合并对象let age1 = { age: 15 }let name1 = { name: "Amy" }let p2 = {name:"zhangsan"}p2 = { ...age1, ...name1 }console.log(p2)//{age: 15, name: 'Amy'}</script>
</body>
</html>
五、Map和Reduce
数组中新增了map和reduce方法。
1.map()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//数组中新增了map和reduce方法。///map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。let arr = ['1', '20', '-5', '3'];arr = arr.map((item)=>{return item*2});console.log(arr);//[2, 40, -10, 6]arr = arr.map(item=> item*2);//[4, 80, -20, 12]console.log(arr);</script>
</body>
</html>
2.reduce()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//数组中新增了map和reduce方法。/**1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））2、currentValue （数组中当前被处理的元素）3、index （当前元素在数组中的索引）4、array （调用 reduce 的数组）*/let arr = ['1', '20', '-5', '3'];let result = arr.reduce((a,b)=>{console.log("上一次处理后："+a);console.log("当前正在处理："+b);return a + b;},100);console.log(result);//100120-53</script>
</body>
</html>
六、promise
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><title>Document</title>
</head>
<body><script>//定义两个参数一个是ajax返回成功数据传递resolve, 一个是失败rejectlet p = new Promise((resolve, reject) => {//1、异步操作$.ajax({url: "mock/user.json",success: function (data) {console.log("查询用户成功:", data)resolve(data);},error: function (err) {reject(err);}});});p.then((obj) => {return new Promise((resolve, reject) => {$.ajax({url: `mock/user_corse_${obj.id}.json`,success: function (data) {console.log("查询用户课程成功:", data)resolve(data);},error: function (err) {reject(err)}});})}).then((data) => {console.log("上一步的结果", data)$.ajax({url: `mock/corse_score_${data.id}.json`,success: function (data) {console.log("查询课程得分成功:", data)},error: function (err) {}});});function get(url, data) {return new Promise((resolve, reject) => {$.ajax({url: url,data: data,success: function (data) {resolve(data);},error: function (err) {reject(err)}})});}get("mock/user.json").then((data) => {console.log("用户查询成功~~~:", data)return get(`mock/user_corse_${data.id}.json`);}).then((data) => {console.log("课程查询成功~~~:", data)return get(`mock/corse_score_${data.id}.json`);}).then((data)=>{console.log("课程成绩查询成功~~~:", data)}).catch((err)=>{console.log("出现异常",err)});</script>
</body>
</html>
七、模块化
hello.js
export default {sum(a, b) {return a + b;}
}
user.js
var name = "jack"
var age = 21
function add(a,b){return a + b;
}export {name,age,add}
main.js
import abc from "./hello.js"
import {name,add} from "./user.js"abc.sum(1,2);
console.log(name);
add(1,3);
index22.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><script type="module" src="js/main.js"></script><title>Document</title>
</head>
<body></body>
</html>
相关文章：
ES6语法
一、Let、const、var变量定义 1.let 声明的变量有严格局部作用域 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"&g…...
窥探QCC518x-308x系列与手机之间的蓝牙HCI记录与分析 - 耳机篇
上一篇是介绍如何窥探手机端Bluetooth的HCI log, 本次介绍是如何窥探Bluetooth的HCI log-耳机篇. 这次跟QCC518x/QCC308x测试的手机是Samsung S23 Ultra. QCC518x/QCC308x透过HCI界面取得Log教学. 步骤1: 开启QMDE -> 选择ADK r1102 QCC3083 Headset workspace.步骤2: 点…...
ubuntu k8s 1.31
ubuntu 系统 设置 更新源 apt-get upgradeapt upgradeapt update apt-get update释放root sudo passwd root密码su - 密码设置root可以登录 cd /etc/ssh/sshd_config.d && vi ssh.confPermitRootLogin yes PasswordAuthentication yes:wq 保存退出 systemctl resta…...
Prometheus+grafana实践：Doris数据库的监控
文章来源：乐维社区 Doris数据库背景 Doris（Apache Doris）是一个现代化的MPP（Massive Parallel Processing，大规模并行处理）数据库，主要用于在线分析处理（OLAP）场景。 D…...
【豆包MarsCode蛇年编程大作战】花样贪吃蛇
目录 引言 展示效果 prompt提示信息 第一次提示（实现基本功能） 初次实现效果 第二次提示（美化UI） 第一次美化后的效果 第二次美化后的效果 代码展示 实现在线体验链接 码上掘金使用教程 体验地址： 花样贪吃蛇…...
企业级流程架构设计思路-基于价值链的流程架构
获取更多企业流程资料 纸上得来终觉浅，绝知此事要躬行 一.企业流程分级规则定义 1.流程分类分级的总体原则 2.完整的流程体系需要体现出流程的分类分级 03.通用的流程分级方法 04.流程分级的标准 二.企业流程架构设计原则 1.流程架构设计原则 流程框架是流程体…...
AI编程工具使用技巧：在Visual Studio Code中高效利用阿里云通义灵码
AI编程工具使用技巧：在Visual Studio Code中高效利用阿里云通义灵码 前言一、通义灵码介绍1.1 通义灵码简介1.2 主要功能1.3 版本选择1.4 支持环境 二、Visual Studio Code介绍1.1 VS Code简介1.2 主要特点 三、安装VsCode3.1下载VsCode3.2.安装VsCode3.3 打开VsCod…...
钉钉群机器人设置——python版本
钉钉群机器人设置——python版本 应用场景钉钉界面操作程序开发效果展示 应用场景 由于工作需要，很多项目执行程序后出现报错信息无法第一时间收到，因此实时预警对于监控程序还是有必要。（仅个人观点） 参考文档及博客：…...
细说STM32F407单片机电源低功耗StandbyMode待机模式及应用示例
目录 一、待机模式基础知识 1、进入待机模式 2、待机模式的状态 3、退出待机模式 二、待机模式应用示例 1、示例功能和CubeMX项目设置 （1） 时钟 （2） DEBUG、LED1、KeyRight、USART6、CodeGenerator （3&#x…...
IOS 安全机制拦截 window.open
摘要 在ios环境，在某些情况下执行window.open不生效 一、window.open window.open(url, target, windowFeatures) 1. url：「可选参数」，表示你要加载的资源URL或路径，如果不传，则打开一个url地址为about:blank的空…...
jmeter中对接口进行循环请求后获取相应数据
1、工作中遇到一个场景就是对某个单一接口进行循环请求，并需要获取每次请求后返回的相应数据； 2、首先就在jmeter对接口相关组件进行配置，需要组件有：循环控制器、CSV数据文件设置、计数器、访问接口、HTTP信息头管理器、正则表达…...
【QT】-explicit关键字
explicit explicit 是一个 C 关键字，用于修饰构造函数。它的作用是防止构造函数进行隐式转换。 为什么需要 explicit？ 在没有 explicit 的情况下，构造函数可以用于隐式类型转换。这意味着，如果你有一个接受某种类型的参数的构造…...
【深度学习】 自动微分
自动微分 正如上节所说，求导是几乎所有深度学习优化算法的关键步骤。 虽然求导的计算很简单，只需要一些基本的微积分。 但对于复杂的模型，手工进行更新是一件很痛苦的事情（而且经常容易出错）。 深度学习框架通过自动…...
字节跳动自研HTTP开源框架Hertz简介附使用示例
字节跳动自研 HTTP 框架 Hertz Hertz 是字节跳动自研的高性能 HTTP 框架，专为高并发、低延迟的场景设计。它基于 Go 语言开发，结合了字节跳动在微服务架构中的实践经验，旨在提供更高效的 HTTP 服务开发体验。 1. 背景介绍 随着字节跳动业务…...
skynet 源码阅读 -- 核心概念服务 skynet_context
本文从 Skynet 源码层面深入解读 服务（Service） 的创建流程。从最基础的概念出发，逐步深入 skynet_context_new 函数、相关数据结构（skynet_context, skynet_module, message_queue 等），并通过流程图、结构…...
每日十题八股-2025年1月23日
1.快排为什么时间复杂度最差是O（n^2） 2.快排这么强，那冒泡排序还有必要吗？ 3.如果要对一个很大的数据集，进行排序，而没办法一次性在内存排序，这时候怎么办？ 4.面试官：你的…...
MongoDB部署模式
目录 单节点模式（Standalone） 副本集模式（Replica Set） 分片集群模式（Sharded Cluster） MongoDB有多种部署模式，可以根据业务需求选择适合的架构和部署方式。 单节点模式（Standa…...
opencv笔记2
图像灰度 彩色图像转化为灰度图像的过程是图像的灰度化处理。彩色图像中的每个像素的颜色由R，G，B三个分量决定，而每个分量中可取值0-255，这样一个像素点可以有256*256*256变化。而灰度图像是R，G，B三个分量…...
springboot使用ssl连接elasticsearch
使用es时ssl证书报错 unable to find valid certification path to requested target 1.依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId></dependency>2…...
Linux内核中的InfiniBand核心驱动：verbs.c分析
InfiniBand（IB）是一种高性能、低延迟的网络互连技术，广泛应用于高性能计算（HPC）、数据中心和云计算等领域。Linux内核中的InfiniBand子系统通过提供一组核心API（称为Verbs API）来支持InfiniBand设备的操作。drivers/infiniband/core/verbs.c是InfiniBand核心驱动的重要组…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
黑马Mybatis
Mybatis 表现层：页面展示 业务层：逻辑处理 持久层：持久数据化保存 在这里插入图片描述 Mybatis快速入门 
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的，根据Excel列的需求预估的工时直接打骨折，不要问我为什么，主要…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败 网络不同，需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
【Linux】Linux 系统默认的目录及作用说明
博主介绍：✌全网粉丝23W，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...