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核心驱动的重要组…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案
JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停 1. 安全点（Safepoint）阻塞 现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...