当前位置：首页 > news >正文

前端小白的学习之路(ES6 一)

news 2025/11/19 0:11:05

提示：关键字声明：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) 可以产生块级作用…...

编程日记 2024/3/21 5:58:21

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、编译 //进入解压…...

编程日记 2024/3/21 5:57:20

Android 优化 - 数据结构

一、概念数据结构：数据存储在内存中的顺序和位置关系，选择合适的数据结构能提高内存的利用率。线性结构链表结构树形结构二、线性结构结构优点缺点数组数据呈线性排列，初始化时就要指定长度且无法更改，会开辟一块连续的内…...

编程日记 2024/3/21 5:55:18

Linux环境开发工具之vim

前言上一期我们已经介绍了软件包管理器yum， 已经可以在linux上查找、安装、卸载软件了，本期我们来介绍一下文本编辑器vim。本期内容介绍什么是vim vim的常见的模式以及切换 vim命令模式常见的操作 vim底行模式常见的操作解决普通用户无法执行sudo问…...

编程日记 2024/3/21 5:54:17

「Linux系列」Shell介绍及起步

文章目录一、Shell简介二、Shell脚本三、Shell解释器四、相关链接一、Shell简介 Shell本身是一个用C语言编写的程序，它既是一种命令语言，又是一种程序设计语言。作为命令语言，它交互式地解释和执行用户输入的命令；作为程序设计…...

编程日记 2024/3/21 5:53:16

用pdf2docx将PDF转换成word文档

pdf2docx是一个Python模块，可以将PDF文件转换为docx格式的Word文档。 pdf2docx模块基于Python的pdfminer和python-docx库开发，可以在Windows、Linux和Mac系统上运行。它可以从PDF文件中提取文本和图片，并将其转换成可编辑的Word文档&#xf…...

编程日记 2024/3/21 5:52:14

STM32U5 ADC 自校准不成功的问题分析

1、引言很多 STM32 系列中的 ADC 都带有自校准的功能。它提供了一个自动校准的过程，用于驱动包括 ADC 上电/掉电序列在内的所有校准动作。在这个过程中，ADC 计算出一个校准因子，并在内部应用到此 ADC 模块，直到下一次 ADC 掉电。…...

编程日记 2024/3/21 5:51:14

使用光标精灵更换电脑鼠标光标样式，一键安装使用

想要让自己在使用电脑时更具个性化，让工作和娱乐更加愉快，改变你的电脑指针光标皮肤可能是一个简单而有效的方法。很多人或许并不清楚如何轻松地调整电脑光标样式，下面我就来分享一种简单的方法。电脑光标在系统里通常只有几种默认图案&…...

编程日记 2024/3/21 5:50:12

微服务day04(上)-- RabbitMQ学习与入门

1.初识MQ 1.1.同步和异步通讯微服务间通讯有同步和异步两种方式： 同步通讯：就像打电话，需要实时响应。异步通讯：就像发邮件，不需要马上回复。两种方式各有优劣，打电话可以立即得到响应，但…...

编程日记 2024/3/21 5:49:11

Halcon 3D 平面拟合（区域采样、Z值过滤、平面拟合、平面移动）

Halcon 3D 平面拟合（区域采样、Z值过滤、平面拟合、平面移动）链接：https://pan.baidu.com/s/1UfFyZ6y-EFq9jy0T_DTJGA 提取码：ewdi * 1.读取图片 ****************...

编程日记 2024/3/21 5:48:10

npm 插件中版本号为星号是什么意思

npm 插件中版本号为星号是什么意思 "dependencies": {"hstool/side-adaptor": "*","hsui/core": "*","h_ui": "*" }, "devDependencies": {"plugin-jsx": "*","…...

编程日记 2024/3/21 5:47:09

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…...

编程日记 2024/3/21 5:46:08

监控系统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…...

编程日记 2024/3/21 5:44:05

IoT 物联网场景中如何应对安全风险？——青创智通

工业物联网解决方案-工业IOT-青创智通随着物联网（IoT）技术的快速发展，越来越多的设备、系统和应用被连接到互联网上，从而构建了一个庞大的物联网生态系统。然而，这种连接性也带来了前所未有的安全风险。在物联网场景…...

编程日记 2024/3/21 5:43:04

滴滴基于 Clickhouse 构建新一代日志存储系统

滴滴基于 Clickhouse 构建新一代日志存储系统 ClickHouse 是2016年开源的用于实时数据分析的一款高性能列式分布式数据库，支持向量化计算引擎、多核并行计算、高压缩比等功能，在分析型数据库中单表查询速度是最快的。2020年开始在滴滴内部大规模地推广和应用，服务网约车和日…...

编程日记 2024/3/21 5:41:01

虚拟主机去除index.php目录地址

复制代码到NGINX设置虚拟主机去除index.php目录地址-复制代码-NGINX设置 location / { if (!-e $request_filename) { rewrite ^(.*)$ /index.php?s/$1 last; break; } } location ~ /\.ht { deny all; }...

编程日记 2024/3/21 5:38:59

JD商品详情原数据 API 返回值说明

一、应用场景商品详情原数据API的应用场景广泛而多样。具体来说，它可以被用于以下方面： 1、电商平台数据分析：电商平台可以通过商品详情原数据API提取商品销售数据、质量评分、评论和反馈等信息，从而帮助用户更好地理解市场和竞…...

编程日记 2024/3/21 5:37:57

python日常刷题（一）

前言：本文记录2024年3月11日至2024年3月19日牛客网所做的基础题目（错题本）： 🎬个人简介：努力学习ing 📋本专栏：python日常刷题 🎀CSDN主页：愚润求学文章目录…...

编程日记 2024/3/21 5:36:55

Python 利用pandas和mysql-connector获取Excel数据写入到MySQL数据库

如何将Excel数据插入到MySQL数据库中在实际应用中，我们可能需要将Excel表格中的数据导入到MySQL数据库中，以便于进行进一步的数据分析和处理。本文将介绍如何使用Python将Excel表格中的数据插入到MySQL数据库中。导入必要的库首先，我们…...

编程日记 2024/3/21 5:35:53

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…...

编程日记 2024/3/21 5:34:51

idea大量爆红问题解决

问题描述在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决就是如上所展示的问题，但是程序依然可以启动。问题解决…...

编程新知 2025/11/18 15:18:36

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/11/16 22:26:48

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting）冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/10/29 18:00:42

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南：计算机基础与源码原理深度解析第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...

编程新知 2025/10/7 19:05:44

GitHub 趋势日报 (2025年06月06日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04