前端小白的学习之路(ES6 一)
提示：关键字声明：let与const,长度单位：em与rem,vw与wh，解构赋值，箭头函数(简介)
目录
一、ES6介绍
二、let&const
1.let
1) 用 let 关键字声明的变量不能提前引用
2) 不允许重复声明变量
3) 可以产生块级作用域 { }
总结
2.const
三、 长度单位
1.em与rem
1).em
2).rem
2.vw与vh
四、 解构赋值
五、箭头函数
1.基本语法
2.语法
一、ES6介绍
ES6（ECMAScript 2015）是JavaScript的第六个版本，引入了许多新的语言特性和功能，使得JavaScript更加现代化、强大和易用。
二、let&const
1.let
1) 用 let 关键字声明的变量不能提前引用
// 声明变量
console.log(index);// 报错
let index = 100;
console.log(index);2) 不允许重复声明变量
// 声明变量
let index = 100;
let index = 99;// 报错3) 可以产生块级作用域 { }
{// 块级作用域的变量是局部的，是私有的。let x = 10;console.log(x);// 10
}
console.log(x);// 报错
{let x = 50;console.log(x);// 50
}// var 全局作用域
for (var i = 0; i < 3; i++) {buttons[i].onclick = function () {console.log("i:", i);// i:3}
}// let 块级作用域
for (let i = 0; i < 3; i++) {buttons[i].onclick = function () {console.log("i:", i);// i:1，2，3}
}总结
var 和 let 的区别:
var会出现变量声明提升, let不能变量声明提升
var可以重复声明, let 不允许重复声明
var没有块级作用域, let 有块级作用域
2.const
1.声明常量
// 变量： 值是可以改变的let a = 100;a = 99;a = 98;// 常量：值是固定的 （基本类型的数据, 如果数据为引用类型，那么可以间接的修改）// const b = 1;// b = 2;// 报错const arr = ['red','green','blue'];// arr = ["红色","绿色","蓝色"];// 通过索引值间接的修改arr[0] = "红色";arr[1] = "绿色";arr[2] = "蓝色";console.log(arr);2.和 let 一样，const 也具有块级作用域。
3. 在使用 const 声明变量时，必须同时进行赋值。
三、 长度单位
1.em与rem
1).em
如果应用于文本，1em 等于当前元素的字体大小。如果应用于非文本元素，1em 等于其父元素的字体大小
<!-- <div class="box-1">px单位（固定的）</div> --><style>body {font-size: 20px;}.parent {font-size: 40px;}/* 1em = ?px； 由父元素的字体属性决定。 此处是1em = 40px */.box-2 {width: 10em;height: 10em;background-color: green;}</style><div class="parent"><!-- <div class="box-2"><span style="font-size: 16px;">em单位(可变的，由父元素字体大小变化)</span></div> --></div>2).rem
rem 相对于文档的根元素（<html>）的字体大小。默认情况下，根元素的字体大小是浏览器的默认字体大小，通常为 16px。rem 没有继承性，子元素的字体大小不受父元素的影响，这样可以更好地控制样式。
<style>/* html: 根元素 */html {font-size: 30px;}.big {font-size: 100px;}/* 1rem = ?px 由根元素的字体属性决定。默认1rem = 16px */.box-3 {width: 10rem;height: 10rem;background-color: blue;font-size: 16px;}</style><div class="big"><div class="box-3">rem单位(可变的，由根元素字体大小变化)</div></div>设置rem的值
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>基本模板</title><style>html {font-size: 20px;}.box {/* 1rem = 20px */width: 5rem;height: 5rem;background-color: red;}</style>
</head><body><div class="box"></div><script>; (function () {// 初始化html标签的字体const init = function () {// 根元素const html = document.documentElement;// 视口宽度const width = document.documentElement.offsetWidth || window.innerWidth;// 设计稿的宽度const w = 320;// 默认字体20pxconst value = 20;// html标签字体大小结果let fontSize = width / w * value;// 设置html标签字体html.style['fontSize'] = fontSize + "px";}// 初始化html字体init();// 监听页面尺寸变化window.addEventListener('resize', init);})()</script>
</body></html>
2.vw与vh
<style>/* 1vw = 百分之?的屏幕的宽度 *//* 1vh = 百分之?的屏幕的高度 *//* 假设在320的视口尺寸下，设置盒子宽度100px 高度100px1vw = 320 * (1 / 100) 100 / 320 * 100 = 31.25vw*/.box-4 {width: 31.25vw;height: 31.25vw;background-color: deeppink;}</style><div class="box-4">vw (视口宽度)</div>
四、 解构赋值
解构赋值（Destructuring Assignment）是一种在 JavaScript 中从数组或对象中提取数据并将其赋值给变量的方式。解构赋值使得从数组或对象中提取数据变得更加简洁和直观。
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>基本模板</title><style></style>
</head><body><script>// 1) 赋值 // 定义a,b,c三个变量// let a = "red";// let b = "green";// let c = "blue";// 2) 数组解构赋值let arr = ["red", "green", "blue"];// 左右两个结构相同才能进行赋值let [a, , c] = arr;console.log(a, c);// red blue// 3) 对象解构赋值let obj = { x: 100, y: 500, r: 400 };// 同样需要注意左右两侧的数据结构，使用的是对象中的keylet { x, y, r, w } = obj;console.log(x, y, r, w);// 遇到结构较复杂如何解剖赋值let { result: [{ num: aa }, { num: bb }, { num: cc }] } = { result: [{ num: 100 }, { num: 200 }, { num: 300 }] }console.log(aa);// 100console.log(bb);// 200console.log(cc);// 300let { data:[i,j,k] } = { data: [111, 222, 333] };console.log(i,j,k);// 111 222 333// 数组： [0,1,2,3,4,....]// 对象: {key: value}// let [] = [];// let {} = {};// 使用解构赋值这种方式记录数据的时候，需要注意左右两侧数据结构要相同，否则无法赋值。</script>
</body></html>五、箭头函数
1.基本语法
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>基本模板</title><style></style>
</head>
<body><script>// 普通函数const sayHello = function(){console.log("这就是一个普通函数!!!")}sayHello();// 箭头函数// 使用箭头 => 声明的代码块const speakHello = () => {console.log("这就是一个箭头函数~~~")}speakHello();</script>
</body>
</html>2.语法
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>基本模板</title><link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
</head><body><button class="btn btn-success m-3">点击按钮</button><script>// 1. 代码块// 1.1 *********// const add = () => {// console.log('test')// }// add();// 1.2 *********// 有参数而且是一个参数的情况// const add = x => {// console.log(x)// }// add(1000);// 1.3 *********// const add = (x,y) => {// console.log(x,y)// }// add(1000,9999);// 1.4 *********// 返回值// const add = (x,y) => {// return x + y// }// let r = add(1000,9999);// console.log(r);// 10999// 1.5 *********// 意思是返回x+y的结果// const add = (x,y) => x + y; // let r2 = add(1,2);// console.log(r2);// 3// 1.6 *********// 接收单一参数的函数// 柯里化函数// const add = function(x) {// return function(y){// return function(z){// return x + y + z;// }// }// }// let r3 = add(1)(2)(3);// console.log(r3);// 6// 1.7*********// 箭头函数// const add = x => y => z => x + y + z;const add = x => y => z => x + y + z;// let r4 = add(1)(2)(3);// console.log(r4);// 6// 可以让书写函数代码的风格要更加简约！！// 2. 事件函数const butt = document.querySelector(".btn-success");// 注意this的使用// butt.onclick = function(){// console.log(this);// 事件调用者，就是按钮标签// }// console.log(this);// window// butt.onclick = () => {// console.log(this);// window// }// 3. 回调函数// setTimeout(function(){},100)// setTimeout(()=>{// document.body.className="bg-danger";// },100)// let arr = [111,222,333];// // arr.forEach(function(item,index){})// arr.forEach((item,index)=>{// console.log(item,index);// })// arguments会报错// const foo = (a,b) => {// console.log(arguments);// }// foo(1,2)// arguments不会报错// const foo = function(a,b) {// console.log(arguments);// }// foo(1,2)// 构造函数const Person = function (name) {this.name = name;}const p1 = new Person("小明");console.log(p1);// Person {name: '小明'}// Uncaught TypeError: Animal is not a constructor// 报错// const Animal = (name)=> {// this.name = name;// }// new Animal("小狮子")// 注意：// 1. 箭头函数作用域没有this的概念// 2. 箭头函数作用域没有arguments对象// 3. 箭头函数不能作为构造函数使用，也不能作为原型对象的函数</script>
</body></html>
相关文章：
)
前端小白的学习之路(ES6 一)
提示：关键字声明：let与const,长度单位：em与rem,vw与wh，解构赋值，箭头函数(简介) 目录 一、ES6介绍 二、let&const 1.let 1) 用 let 关键字声明的变量不能提前引用 2) 不允许重复声明变量 3) 可以产生块级作用…...
Linux CentOS 7.6安装Redis 6.2.6 详细保姆级教程
1、安装依赖 //检查是否有依赖 gcc -v //没有则安装 yum install -y gcc2、下载redis安装包 //进入home目录 cd /home //通过wget下载redis安装包 wget https://download.redis.io/releases/redis-6.2.6.tar.gz //解压安装包 tar -zxvf redis-6.2.6.tar.gz3、编译 //进入解压…...
Android 优化 - 数据结构
一、概念 数据结构：数据存储在内存中的顺序和位置关系，选择合适的数据结构能提高内存的利用率。 线性结构链表结构树形结构 二、线性结构 结构优点缺点数组数据呈线性排列，初始化时就要指定长度且无法更改，会开辟一块连续的内…...
Linux环境开发工具之vim
前言 上一期我们已经介绍了软件包管理器yum， 已经可以在linux上查找、安装、卸载软件了，本期我们来介绍一下文本编辑器vim。 本期内容介绍 什么是vim vim的常见的模式以及切换 vim命令模式常见的操作 vim底行模式常见的操作 解决普通用户无法执行sudo问…...
「Linux系列」Shell介绍及起步
文章目录 一、Shell简介二、Shell脚本三、Shell解释器四、相关链接 一、Shell简介 Shell本身是一个用C语言编写的程序，它既是一种命令语言，又是一种程序设计语言。作为命令语言，它交互式地解释和执行用户输入的命令；作为程序设计…...
用pdf2docx将PDF转换成word文档
pdf2docx是一个Python模块，可以将PDF文件转换为docx格式的Word文档。 pdf2docx模块基于Python的pdfminer和python-docx库开发，可以在Windows、Linux和Mac系统上运行。它可以从PDF文件中提取文本和图片，并将其转换成可编辑的Word文档…...
STM32U5 ADC 自校准不成功的问题分析
1、引言 很多 STM32 系列中的 ADC 都带有自校准的功能。它提供了一个自动校准的过程，用于驱动包括 ADC 上电/掉电序列在内的所有校准动作。在这个过程中，ADC 计算出一个校准因子，并在内部应用到此 ADC 模块，直到下一次 ADC 掉电。…...
使用光标精灵更换电脑鼠标光标样式，一键安装使用
想要让自己在使用电脑时更具个性化，让工作和娱乐更加愉快，改变你的电脑指针光标皮肤可能是一个简单而有效的方法。很多人或许并不清楚如何轻松地调整电脑光标样式，下面我就来分享一种简单的方法。 电脑光标在系统里通常只有几种默认图案&…...
微服务day04(上)-- RabbitMQ学习与入门
1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式： 同步通讯：就像打电话，需要实时响应。 异步通讯：就像发邮件，不需要马上回复。 两种方式各有优劣，打电话可以立即得到响应，但…...
Halcon 3D 平面拟合（区域采样、Z值过滤、平面拟合、平面移动）
Halcon 3D 平面拟合（区域采样、Z值过滤、平面拟合、平面移动） 链接：https://pan.baidu.com/s/1UfFyZ6y-EFq9jy0T_DTJGA 提取码：ewdi * 1.读取图片 ****************...
npm 插件 中 版本号为 星号 是什么意思
npm 插件 中 版本号为 星号 是什么意思 "dependencies": {"hstool/side-adaptor": "*","hsui/core": "*","h_ui": "*" }, "devDependencies": {"plugin-jsx": "*","…...
)
Codeforces\ Round\ 930(C.Bitwise Operation Wizard)
C o d e f o r c e s R o u n d 930 ( C . B i t w i s e O p e r a t i o n W i z a r d ) \Huge{Codeforces\ Round\ 930(C.Bitwise Operation Wizard)} Codeforces Round 930(C.BitwiseOperationWizard) 文章目录 题意思路注意 标程 题目链接：[B.Bitwise Operati…...
监控系统prometheus+grafana+发送告警信息
1、基础环境准备两台或更多的主机 2、关闭selinux vi /etc/selinux/config，修改SELINUX的值为disabled 3、关闭防火墙 systemctl disable firewalld systemctl stop firewalld 4、prometheus官网下载 https://prometheus.io/download/ 5、grafana官网下载 https…...
IoT 物联网场景中如何应对安全风险？——青创智通
工业物联网解决方案-工业IOT-青创智通 随着物联网（IoT）技术的快速发展，越来越多的设备、系统和应用被连接到互联网上，从而构建了一个庞大的物联网生态系统。然而，这种连接性也带来了前所未有的安全风险。在物联网场景…...
滴滴基于 Clickhouse 构建新一代日志存储系统
滴滴基于 Clickhouse 构建新一代日志存储系统 ClickHouse 是2016年开源的用于实时数据分析的一款高性能列式分布式数据库，支持向量化计算引擎、多核并行计算、高压缩比等功能，在分析型数据库中单表查询速度是最快的。2020年开始在滴滴内部大规模地推广和应用，服务网约车和日…...
虚拟主机去除index.php目录地址
复制代码到NGINX设置 虚拟主机去除index.php目录地址-复制代码-NGINX设置 location / { if (!-e $request_filename) { rewrite ^(.*)$ /index.php?s/$1 last; break; } } location ~ /\.ht { deny all; }...
JD商品详情原数据 API 返回值说明
一、应用场景 商品详情原数据API的应用场景广泛而多样。具体来说，它可以被用于以下方面： 1、电商平台数据分析：电商平台可以通过商品详情原数据API提取商品销售数据、质量评分、评论和反馈等信息，从而帮助用户更好地理解市场和竞…...
python日常刷题（一）
前言：本文记录2024年3月11日至2024年3月19日牛客网所做的基础题目（错题本）： 🎬个人简介：努力学习ing 📋本专栏：python日常刷题 🎀CSDN主页：愚润求学 文章目录…...
Python 利用pandas和mysql-connector获取Excel数据写入到MySQL数据库
如何将Excel数据插入到MySQL数据库中 在实际应用中，我们可能需要将Excel表格中的数据导入到MySQL数据库中，以便于进行进一步的数据分析和处理。本文将介绍如何使用Python将Excel表格中的数据插入到MySQL数据库中。 导入必要的库 首先，我们…...
Stable Diffusion训练图片时，简陋的数据处理
0 图片从命名 如果有强迫症，看到似乎乱码的命名会不舒服，那么就批量从命名 import osdef rename_files_in_directory(directory, key_word, new_suffix):i 1for filename in os.listdir(directory):new_file key_word str(i).zfill(3) new_suffixsou…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
Python爬虫实战：研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...
django filter 统计数量 按属性去重
在Django中，如果你想要根据某个属性对查询集进行去重并统计数量，你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求： 方法1：使用annotate()和Count 假设你有一个模型Item，并且你想…...
Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器
第一章 引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来，实在找不到，希望有大佬教一下我。 还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下，卢森堡罗伯特舒曼医院（the Robert Schuman Hospitals, HRS）凭借在无菌制剂生产流程中引入增强现实技术（AR）创新项目，荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...