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核心驱动的重要组…...
微信小程序之bind和catch
这两个呢，都是绑定事件用的，具体使用有些小区别。 官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？
在大数据处理领域，Hive 作为 Hadoop 生态中重要的数据仓库工具，其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式，很多开发者常常陷入选择困境。本文将从底…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
【Go语言基础【12】】指针：声明、取地址、解引用
文章目录 零、概述：指针 vs. 引用（类比其他语言）一、指针基础概念二、指针声明与初始化三、指针操作符1. &：取地址（拿到内存地址）2. *：解引用（拿到值） 四、空指针&am…...