前端小白的学习之路(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…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
基于ASP.NET+ SQL Server实现（Web）医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路
进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。 以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...