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

ES6 | （一）ES6 新特性（上） | 尚硅谷Web前端ES6教程

news 文章来源：https://blog.csdn.net/m0_63398413/article/details/136229211 2025/4/17 12:20:36

文章目录

📚ES6新特性
📚let关键字
📚const关键字
📚变量的解构赋值
📚模板字符串
📚简化对象写法
📚箭头函数
📚函数参数默认值设定
📚rest参数
📚spread扩展运算符
📚Symbol
- 🐇Symbol基本介绍与使用
- 🐇对象添加Symbol类型的属性
- 🐇Symbol内置值

学习链接：尚硅谷Web前端ES6教程

在这里插入图片描述

📚ES6新特性

📚let关键字

let关键字用来声明变量，使用let声明的变量有几个特点：
- 变量不允许重复声明。
- 块级作用域。
- 不存在变量提升
- 不影响作用域链
应用场景：以后声明变量使用let 就对了。

📚const关键字

const关键字用来声明常量，const声明有以下特点：
- 声明必须赋初始值。
- 标识符一般为大写。
- 不允许重复声明。
- 值不允许修改。
- 块级作用域。
注意：对象属性修改和数组元素变化不会触发const 错误
应用场景：声明对象类型使用const，非对象类型声明选择let。

📚变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

应用场景：频繁使用对象方法、数组元素，就可以使用解构赋值形式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量的解构赋值</title>
</head>
<body><script>// 1. 数组的结构const F4 = ['小沈阳','刘能','赵四','宋小宝'];let [xiao, liu, zhao, song] = F4;console.log(xiao);console.log(liu);console.log(zhao);console.log(song);// 2. 对象的解构const zhaobenshan = {name: '赵本山',age: '不详',xiaopin: function(){console.log("我可以演小品");}};let {name, age, xiaopin} = zhaobenshan;console.log(name);console.log(age);console.log(xiaopin);xiaopin();</script>
</body></html>

📚模板字符串

模板字符串（template string）是增强版的字符串，用反引号`标识，特点：
- 字符串中可以出现换行符
- 可以使用 ${xxx} 形式输出变量

应用场景：当遇到字符串与变量拼接的情况使用模板字符串。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板字符串</title>
</head>
<body><script>//1. 声明let str = `我也是一个字符串哦!`;console.log(str, typeof str);//2. 内容中可以直接出现换行符let str1 = `<ul><li>沈腾</li><li>马丽</li><li>魏翔</li><li>艾伦</li></ul>`;console.log(str1, typeof str1)//3. 变量拼接let lovest = '沈腾';let out = `${lovest}是我心目中最搞笑的演员!!`;console.log(out);</script>
</body>
</html>

📚简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

应用场景：对象简写形式简化了代码，所以以后用简写就对了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简化对象写法</title>
</head>
<body><script>let name = '尚硅谷';let change = function(){console.log('我们可以改变你!!');}const school = {name,change,improve(){console.log("我们可以提高你的技能");}}console.log(school);</script>
</body>
</html>

在这里插入图片描述

📚箭头函数

ES6 允许使用「箭头」=>定义函数。

function写法：

function fn(param1, param2, …, paramN) { // 函数体return expression; 
}

=>写法：

let fn = (param1, param2, …, paramN) => {// 函数体return expression;
}

箭头函数的注意点:
- 如果形参只有一个，则小括号可以省略。
- 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果。
- 箭头函数this始终指向声明时所在作用域下this的值。
- 箭头函数不能作为构造函数实例化。
- 不能使用 arguments。

注意：箭头函数不会更改this指向，用来指定回调函数会非常合适。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>箭头函数</title>
</head><body><script>//声明一个函数let fn = (a,b) => {return a + b;}//调用函数let result = fn(1, 2);console.log(result);//1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值function getName(){console.log(this.name);}let getName2 = () => {console.log(this.name);}//设置 window 对象的 name 属性window.name = '尚硅谷';const school = {name: "ATGUIGU"}//直接调用getName();getName2();//call 方法调用getName.call(school);getName2.call(school);//箭头函数的简写//1) 省略小括号, 当形参有且只有一个的时候//2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略// 而且语句的执行结果就是函数的返回值let pow = n => n * n;       console.log(pow(8));//2. 不能作为构造实例化对象let Person = (name, age) => {this.name = name;this.age = age;}let me = new Person('xiao',30);console.log(me);//3. 不能使用 arguments 变量let fn1 = () => {console.log(arguments);}fn1(1,2,3);</script>
</body>
</html>

📚函数参数默认值设定

ES6 允许给函数参数设置默认值，当调用函数时不给实参，则使用参数默认值。
具有默认值的形参，一般要靠后。

可与解构赋值结合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数参数默认值</title>
</head>
<body><script>//1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)function add(a,b,c=10) {return a + b + c;}let result = add(1,2);console.log(result);//2. 与解构赋值结合function connect({host="127.0.0.1", username,password, port}){console.log(host)console.log(username)console.log(password)console.log(port)}connect({host: 'atguigu.com',username: 'root',password: 'root',port: 3306})</script>
</body>
</html>

📚rest参数

ES6 引入rest参数，用于获取函数的实参，用来代替 arguments，作用与 arguments 类似。将接收的参数序列转换为一个数组对象。
用在函数形参中，语法格式：fn(a, b, ...args)，写在参数列表最后面。

注意：rest参数非常适合不定个数参数函数的场景。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rest参数</title>
</head>
<body><script>// ES5 获取实参的方式function date(){console.log(arguments);}date('热辣滚烫','飞驰人生2','第二十条');// rest 参数function date(...args){console.log(args);}date('飞驰人生2','热辣滚烫','第二十条');// rest 参数必须要放到参数最后function fn(a,b,...args){console.log(a);console.log(b);console.log(args);}fn(1,2,3,4,5,6);</script>
</body>
</html>

📚spread扩展运算符

扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。可用在调用函数时，传递的实参，将一个数组转换为参数序列。

扩展运算符也可以将对象解包。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>扩展运算符</title>
</head>
<body><script>// 展开数组function fn(a, b, c) {console.log(arguments);console.log(a + b + c);}let arr = ['red', 'green', 'blue']; fn(...arr)// 数组合并let A = [1, 2, 3];let B = [4, 5, 6];let C = [...A, ...B];console.log(C);// 对象合并let obj1 = {a: 123};let obj2 = {b: 456};let obj3 = {c: 789};let obj = { ...obj1, ...obj2, ...obj3 };console.log(obj);</script>
</body>
</html>

在这里插入图片描述

📚Symbol

🐇Symbol基本介绍与使用

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
JavaScript 的七种基本数据类型：
- 值类型（基本类型）：string、number、boolean、undefined、null、symbol
- 引用数据类型：object（包括了array、function）
Symbol的特点：
- Symbol的值是唯一的，用来解决命名冲突的问题。
- Symbol值不能与其他数据进行运算。
- Symbol定义的对象属性不能使用for...in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。

注: 遇到唯一性的场景时要想到Symbol。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>symbol</title>
</head>
<body><script>//创建Symbollet s = Symbol();console.log(s, typeof s);// 添加具有标识的Symbollet s2 = Symbol('尚硅谷');let s3 = Symbol('尚硅谷');console.log(s2 === s3);//Symbol.for 创建,名字相同的 Symbol 具有相同的实体。let s4 = Symbol.for('尚硅谷');let s5 = Symbol.for('尚硅谷');console.log(s4 === s5)// 输出Symbol变量的描述，使用descriptionlet s6 = Symbol('测试');console.log(s6.description);//不能与其他数据进行运算let result = s + 100;let result1 = s > 100;let result2 = s + s;</script>
</body>
</html>

🐇对象添加Symbol类型的属性

案例：安全地向对象中添加属性和方法。

分析：如果直接向对象中添加属性或方法，则原来对象中可能已经存在了同名属性或方法，会覆盖掉原来的。所以使用 Symbol 生成唯一的属性或方法名，可以更加安全地添加。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Symbol 创建对象属性</title>
</head>
<body><script>// 这是一个 game 对象，假设我们不知道里面有什么属性和方法const game = {uname: '俄罗斯方块',up: function () { },down: function () { }}// 通过 Symbol 生成唯一的属性名，然后给 game 添加方法let [up, down] = [Symbol('up'), Symbol('down')];game[up] = function () {console.log('up');}game[down] = function () {console.log('down');}// 调用刚刚创建的方法game[up]();game[down]();</script>
</body>
</html>

在这里插入图片描述

🐇Symbol内置值

除了定义自己使用的 Symbol 值以外，ES6 还提供了11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Symbol内置属性</title>
</head>
<body><script>class Person{static [Symbol.hasInstance](param){console.log(param);console.log("我被用来检测类型了");return false;}}let o = {};console.log(o instanceof Person);// 数组使用 concat 方法时，是否可以展开const arr = [1,2,3];const arr2 = [4,5,6];arr2[Symbol.isConcatSpreadable] = false;console.log(arr.concat(arr2));</script>
</body>
</html>

在这里插入图片描述

ES6 | （一）ES6 新特性（上） | 尚硅谷Web前端ES6教程

文章目录 📚ES6新特性📚let关键字📚const关键字📚变量的解构赋值📚模板字符串📚简化对象写法📚箭头函数📚函数参数默认值设定📚rest参数📚spread扩展运算符&a…...

编程日记 2024/2/24 4:24:52

生产环境下，应用模式部署flink任务，通过hdfs提交

前言通过通过yarn.provided.lib.dirs配置选项指定位置，将flink的依赖上传到hdfs文件管理系统 1. 实践 （1）生产集群为cdh集群，从cm上下载配置文件，设置环境 export HADOOP_CONF_DIR/home/conf/auth export HADOOP_CL…...

编程日记 2024/2/24 4:18:46

【lesson59】线程池问题解答和读者写者问题

文章目录线程池问题解答什么是单例模式什么是设计模式单例模式的特点饿汉和懒汉模式的理解STL中的容器是否是线程安全的?智能指针是否是线程安全的？其他常见的各种锁读者写者问题线程池问题解答什么是单例模式单例模式是一种 “经典的, 常用的, 常考的” 设…...

编程日记 2024/2/24 4:16:43

【LeetCode每日一题】单调栈316去除重复字母

题目：去除重复字母给你一个字符串 s ，请你去除字符串中重复的字母，使得每个字母只出现一次。需保证返回结果的字典序最小（要求不能打乱其他字符的相对位置）。示例 1： 输入：s “bcabc” 输…...

编程日记 2024/2/24 4:15:42

【Git】Gitbash使用ssh 上传本地项目到github

SSH Git上传项目到GitHub（图文）_git ssh上传github-CSDN博客前提 ssh-keygen -t rsa -C “自己的github电子邮箱” 生成密钥，公钥保存到自己的github的ssh里 1.先创建一个仓库，复制ssh地址 git init git add . git commit -m …...

编程日记 2024/2/24 4:14:41

activeMq将mqtt发布订阅转成消息队列

1、activemq.xml置文件新增如下内容 2、mqttx测试发送： 主题（配置的模糊匹配，为了并发）：VirtualTopic/device/sendData/12312 3、mqtt接收的结果 4、程序处理 package comimport cn.hutool.core.date.DateUtil; imp…...

编程日记 2024/2/24 4:08:35

Go语言教程

一、引言 Go（又称Golang）是由Google开发的一种静态类型、编译型的开源编程语言。它旨在提供简单、快速和可靠的软件开发体验。Go语言结合了动态语言的开发效率和静态语言的安全性能，特别适用于网络编程、系统编程和并发编程。本教程将介绍Go…...

编程日记 2024/2/24 4:07:33

分布式锁的应用场景及实现

文章目录分布式锁的应用场景及实现1. 应用场景2. 分布式锁原理3. 分布式锁的实现3.1 基于数据库分布式锁的应用场景及实现 1. 应用场景电商网站在进行秒杀、特价等大促活动时，面临访问量激增和高并发的挑战。由于活动商品通常是有限库存的，为了避免…...

编程日记 2024/2/24 4:04:31

嵌入式Linux中apt、apt-get命令用法汇总

在Linux环境开发过程中接触ubuntu虚拟机时，在安装软件或者更新软件时apt和apt-get命令使用相对较频繁，下面对这两个命令的用法进行汇总。 apt（Advanced Package Tool）和 apt-get 是用于在基于 Debian 的 Linux 发行版中进行软件包…...

编程日记 2024/2/24 4:03:30

Unity之ShaderGraph如何实现水面波浪

前言这几天通过一个水的波浪数学公式，实现了一个波浪效果，感觉成就感满满，下面给大家分享一下首先先给大家看一下公式；把公式转为ShaderGraph 第一行公式：waveType = z*-1*Mathf.Cos(wave.WaveAngle/360*2*Mathf.PI)+x*Mathf.Sin(WaveAngle/360*-2*Mathf.PI) 转换…...

编程日记 2024/2/24 4:01:28

无线局域网（WLAN）简单概述

无线局域网无线局域网概述无限局域网（Wireless Local Area Network，WLAN）是一种短距离无线通信组网技术，它是以无线信道为传输媒质构成的计算机网络，通过无线电传播技术来实现在空间传输数据。 WLAN是传输范围在1…...

编程日记 2024/2/24 4:00:27

学习数仓工具 dbt

DBT 是一个有趣的工具，它通过一种结构化的方式定义了数仓中各种表、视图的构建和填充方式。 dbt 面相的对象是数据开发团队，提供了如下几个最有价值的能力： 支持多种数据库通过 select 来定义数据，无需编写 DML构建数据时&#…...

编程日记 2024/2/24 3:59:25

高录用快见刊【最快会后两个月左右见刊】第三届社会科学与人文艺术国际学术会议 (SSHA 2024)

第三届社会科学与人文艺术国际学术会议 (SSHA 2024) 2024 3rd International Conference on Social Sciences and Humanities and Arts *文章投稿均可免费参会 *高录用快见刊【最快会后两个月左右见刊】重要信息会议官网：icssha.com 大会时间：202…...

编程日记 2024/2/24 3:58:24

C语言-指针初学速成

1.指针是什么 C语言指针是一种特殊的变量，用于存储内存地址。它可以指向其他变量或者其他数据结构，通过指针可以直接访问或修改存储在指定地址的值。指针可以帮助我们在程序中动态地分配和释放内存，以及进行复杂的数据操作。在C语言中&#…...

编程日记 2024/2/24 3:57:23

MQL语言实现单元测试

文章目录一、单元测试是什么二、单元测试的过程三、为什么需要单元测试四、MQL测试代码实现一、单元测试是什么单元测试是对软件中最小可测单元（如类或函数）进行独立验证和检查的过程。它是由开发工程师完成的，旨在确保每个单元的功能和逻…...

编程日记 2024/2/24 3:55:22

Redis信创平替之TongRDS(东方通),麒麟系统安装步骤

我的系统: 银河麒麟桌面系统V10(SP1)兆芯版 1.先进入东方通申请使用 2.客服会发送一个TongRDS包与center.lic给你(我这里只拿到.tar.gz文件,没有网上的什么安装版) 3.上传全部文件到目录中 4.服务节点安装,并启动 tar -zxvf TongRDS-2.2.1.2_P3.Node.tar.gz cd pmemdb/bin/…...

编程日记 2024/2/24 3:52:19

nginx服务

“欢唱吧，呼唤它，回来啊~” Web服务器简介 Web服务器，一般是指“网站服务器”，其本质就是驻留于互联网中，某一台机器(计算机)上的进程(程序)。Web服务器通常就是为用户提供信息浏览服务，更可以放置数据文件…...

编程日记 2024/2/24 3:50:17

多数pythoneer只知有列表list却不知道python也有array数组

数组和列表 Python中数组和列表是不同的，我敢断言大多数的pythoneer只知道有列表list，却不知道python也有array数组。列表是一个包含不同数据类型的元素集合，而数组是一个只能含相同数据类型的元素集合。 Python的array库是一个提供数组操作…...

编程日记 2024/2/24 3:48:16

【Rust】——控制流（if-else,循环）

🎃个人专栏： 🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客 🐳Java基础：Java基础_IT闫的博客-CSDN博客 🐋c语言：c语言_IT闫的博客-CSDN博客 🐟MySQL&#xff1a…...

编程日记 2024/2/24 3:46:14

通过platform总线驱动框架编写LED灯的驱动，编写应用程序测试

mydev.c #include <linux/init.h> #include <linux/module.h> #include <linux/of_gpio.h> #include <linux/gpio.h> #include <linux/platform_device.h> #include <linux/mod_devicetable.h>// 创建功能码 #define LED_ON _IO(l, 1) #d…...

编程日记 2024/2/24 3:43:12

费舍尔FISHER金属探测器探测仪维修F70

美国FISHER LABS费舍尔地下金属探测器，金属探测仪等维修（考古探金银铜探宝等仪器）。费舍尔F70视听目标ID金属探测器，Fisher 金属探测器公司成立于1931年，在实验条件很艰苦的情况下，研发出了地下金属探测器…...

编程日记 2024/2/24 3:42:11

Airtest-Selenium实操小课③：下载可爱猫猫图片

1. 前言那么这周我们看看如何实现使用Airtest-Selenium实现自动搜索下载可爱的猫猫图片吧~ 2. 需求分析和准备整体的需求大致可以分为以下步骤： 打开chrome浏览器打开百度网页搜索“可爱猫猫图片” 定位图片元素创建存储图片的文件夹下载可爱猫猫图片…...

编程日记 2024/2/24 3:39:07

Druid无法登录监控页面

问题表现：在配置和依赖都正确的情况下，无法通过配置的用户名密码登录Druid的监控页面检查配置发现配置的用户名和密码和请求中参数是一致的🤔 Debug发现 ResourceServlet 是Druid的登录实现， 且调试发现usernameParam是null&am…...

编程日记 2024/2/24 3:38:06

【Linux系统化学习】深入理解匿名管道(pipe)和命名管道(fifo)

目录进程间通信进程间通信目的进程间通信的方式管道 System V IPC（本地通信） POSIX IPC（网络通信） 管道什么是管道匿名管道匿名管道的创建匿名管道的使用匿名管道的四种情况匿名管道的五种特性命名管道 …...

编程日记 2024/2/24 3:34:02

信息学奥赛一本通1209：分数求和

1209：分数求和时间限制: 1000 ms 内存限制: 65536 KB 提交数: 19111 通过数: 10647 【题目描述】输入n个分数并对他们求和，并用最简形式表示。所谓最简形式是指：分子分母的最大公约数为11；若最终结果的分母为11&am…...

编程日记 2024/2/24 3:33:01

LabVIEW储氢材料循环寿命测试系统

LabVIEW储氢材料循环寿命测试系统随着氢能技术的发展，固态储氢技术因其高密度和安全性成为研究热点。储氢材料的循环寿命是衡量其工程应用的关键。然而，传统的循环寿命测试设备存在成本高、测试效率低、数据处理复杂等问题。设计了一种基于LabVIEW软件…...

编程日记 2024/2/24 3:30:59

Unity3D 框架如何搭建基于纯Lua的U框架与开发模式详解

前言 Unity3D 是一款非常流行的游戏开发引擎，它支持C#、JavaScript和Boo等多种脚本语言。而Lua语言作为一种轻量级的脚本语言，也在游戏开发中得到了广泛应用。本文将介绍如何在Unity3D框架中搭建基于纯Lua的U框架，并详细讲解其开发模式。对…...

编程日记 2024/2/24 3:23:53

Linux常见指令(2)

目录 1、tar指令 ！ 2、bc指令 3、uname 4、重要热键 5、关机 1、tar指令 ！ 功能：压缩/解压缩文件或目录,类似zip 我们先来看一下我们的文件即目录，接下来我们输入指令： tar -czf test.tgz test 压缩 -c &#xf…...

编程日记 2024/2/24 3:22:52

【C++】封装

1.封装的意义封装是C面向对象三大特性之一实例化（通过一个类创建一个对象的过程） 类中的属性和行为我们统一称为成员属性成员属性成员变量行为成员函数成员方法封装的意义： 1.将属性和行为作为一个整体，表现生活中的事…...

编程日记 2024/2/24 3:21:52

Maxwell安装部署

1 Maxwell输出格式 database：变更数据所属的数据库table：变更数据所属的表type：数据变更类型ts：数据变更发生的时间xid：事务idcommit：事务提交标志，可用于重新组装事务data：对于inse…...

编程日记 2024/2/24 3:18:50

文章目录

📚ES6新特性

📚let关键字

📚const关键字

📚变量的解构赋值

📚模板字符串

📚简化对象写法

📚箭头函数

📚函数参数默认值设定

📚rest参数

📚spread扩展运算符

📚Symbol

🐇Symbol基本介绍与使用

🐇对象添加Symbol类型的属性

🐇Symbol内置值

相关文章：