前端小白的学习之路(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…...
用FLUENT验证ICEM网格质量：一个二维混合器流动传热仿真的完整案例复盘
从残差曲线到温度云图：FLUENT如何验证ICEM网格的工程适用性 在计算流体力学（CFD）项目中，网格质量往往决定着整个仿真过程的成败。许多工程师花费大量时间在ICEM中精心划分网格后，却对如何验证这些网格是否真正"合…...
Dev-C++双人小游戏避坑指南：地图设计、碰撞检测与蹦床逻辑详解
Dev-C双人小游戏避坑指南：地图设计、碰撞检测与蹦床逻辑详解 在控制台环境下开发双人跑酷游戏，看似简单却暗藏玄机。许多开发者第一次尝试时，往往会被地图管理、角色交互和特殊效果实现这三个环节卡住。本文将分享我在Dev-C环境下开发这类游戏…...
Mermaid Live Editor：实时可视化图表编辑的终极解决方案
Mermaid Live Editor：实时可视化图表编辑的终极解决方案 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-edit…...
Milliohm毫欧电子高精度合金电阻与电流采样解决方案
毫欧电子（Milliohm） 是一家专注于高精度合金电阻与电流采样解决方案的国家级高新技术企业，深耕电子元器件领域多年，主打低温漂、高精密、车规级的电阻与分流器产品，广泛应用于新能源、工业控制、智能电表、汽车电子等高可靠性场景。 🔧 核心产品线一览 车规级分…...
软件测试核心概念实战解析：从理论到习题的深度贯通
1. 软件测试基础理论的核心要点 软件测试作为软件开发过程中不可或缺的一环，其理论基础直接影响着测试工作的质量和效率。在软件测试领域，有几个核心概念是每个测试人员都必须掌握的。 首先，我们需要理解软件生命周期这个概念。简单来说&…...
HFSS实战：手把手教你仿真一个2.1GHz圆极化微带天线阵列（从单贴片到2x2阵）
HFSS实战：从单贴片到2x2阵列的圆极化微带天线仿真全流程 在射频工程领域，微带天线因其结构紧凑、成本低廉和易于集成的特点，成为无线通信系统的热门选择。特别是圆极化微带天线，能够有效减少极化失配带来的信号损失，在…...
【关系抽取实战】从算法原理到工业级应用：构建知识图谱的核心引擎
1. 关系抽取：知识图谱的"灵魂捕手" 想象一下，你正在整理一个杂乱无章的图书馆。书架上堆满了各种书籍，但没有任何分类标签。这时候，你需要找出《红楼梦》和曹雪芹之间的关系，或者发现牛顿与万有引力定律的关…...
从花瓶到咖啡杯：SolidWorks抽壳命令的两种高级用法，CaTICs 3D01-01与3D05_L02-B对比教学
从花瓶到咖啡杯：SolidWorks抽壳命令的两种高级用法实战解析 在工业设计领域，抽壳命令看似简单，却能直接影响建模效率与成品质量。今天我们就以CaTICs竞赛中的两个经典案例——轴对称花瓶（3D01-01）与带手柄斜口杯&#…...
贝叶斯统计革命：Statistical Rethinking 2023如何改变你的数据分析思维
贝叶斯统计革命：Statistical Rethinking 2023如何改变你的数据分析思维 【免费下载链接】stat_rethinking_2023 Statistical Rethinking Course for Jan-Mar 2023 项目地址: https://gitcode.com/gh_mirrors/st/stat_rethinking_2023 Statistical Rethinking…...
软件冲刺回顾管理化的过程改进反思
软件冲刺回顾管理化的过程改进反思 在敏捷开发中，冲刺回顾（Sprint Retrospective）是团队持续改进的核心实践之一。随着项目规模扩大或团队协作复杂度提升，传统的回顾会议可能流于形式，难以真正推动过程改进。如何将回…...