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核心驱动的重要组…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明：假设每台服务器已…...
基于ASP.NET+ SQL Server实现（Web）医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...