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

文章目录

  • 📚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>

    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/262509.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

目标检测卷王YOLO卷出新高度：YOLOv9问世

目标检测卷王YOLO卷出新高度：YOLOv9问世

论文摘要：如今的深度学习方法重点关注如何设计最合适的目标函数，使得模型的预测结果能够最接近真实情况。 同时，必须设计一个适当的架构，可以帮助获取足够的信息进行预测。 现有方法忽略了一个事实，即当输入数据经过逐层特征提取和空间变换时，大量信息将会丢失。 本文将深…
阅读更多...
腾讯云宝塔Linux安装Mysql5.7

腾讯云宝塔Linux安装Mysql5.7

一、下载官方mysql包 wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm二、安装mysql包 rpm -ivh mysql-community-release-el7-5.noarch.rpm三、安装mysql yum install mysql-community-server -y四、启动数据库 systemctl start mysqld.service…
阅读更多...
力扣算法Algorithm竞赛模板库（codeforces-go）：含了算法竞赛中常用的数据结构和算法实现，助力开发者更高效地解决问题

力扣算法Algorithm竞赛模板库（codeforces-go）：含了算法竞赛中常用的数据结构和算法实现，助力开发者更高效地解决问题

1.算法Algorithm竞赛模板库&#xff08;codeforces-go&#xff09; 算法竞赛模板库&#xff0c;为算法竞赛爱好者提供了一系列精心设计的算法模板。这个库包含了算法竞赛中常用的数据结构和算法实现&#xff0c;助力开发者更高效地解决问题 一个算法模板应当涵盖以下几点&…
阅读更多...
Commonjs 和 Es Module详解

Commonjs 和 Es Module详解

一 前言 今天我们来深度分析一下 Commonjs 和 Es Module&#xff0c;希望通过本文的学习&#xff0c;能够让大家彻底明白 Commonjs 和 Es Module 原理&#xff0c;能够一次性搞定面试中遇到的大部分有关 Commonjs 和 Es Module 的问题。 带上疑问开始今天的分析&#xff1a; …
阅读更多...
【Python笔记-设计模式】组合模式

【Python笔记-设计模式】组合模式

一、说明 组合模式是一种结构型设计模式&#xff0c; 你可以使用它将对象组合成树状结构&#xff0c; 并且能像使用独立对象一样使用它们。 (一) 解决问题 处理树形结构&#xff1a;可以很好地处理树形结构的数据&#xff0c;使得用户可以统一对待单个对象和对象组合。统一接…
阅读更多...
python coding with ChatGPT 打卡第21天| 二叉树：最近公共祖先

python coding with ChatGPT 打卡第21天| 二叉树：最近公共祖先

相关推荐 python coding with ChatGPT 打卡第12天| 二叉树&#xff1a;理论基础 python coding with ChatGPT 打卡第13天| 二叉树的深度优先遍历 python coding with ChatGPT 打卡第14天| 二叉树的广度优先遍历 python coding with ChatGPT 打卡第15天| 二叉树&#xff1a;翻转…
阅读更多...
鸿蒙自定义侧滑菜单布局（DrawerLayout）

鸿蒙自定义侧滑菜单布局（DrawerLayout）

前言 为了实现安卓中的侧滑菜单布局效果&#xff0c;通过查找鸿蒙的布局控件&#xff0c;发现SideBarContainer控件有点像&#xff0c;但是使用中发现并不是很符合我们的UI交互效果&#xff0c;因此我在鸿蒙中通过自定义布局的方式实现&#xff0c;本文主要介绍该自定义控件如…
阅读更多...
Git合并固定分支的某一部分至当前分支

Git合并固定分支的某一部分至当前分支

在 Git 中&#xff0c;通常使用 git merge 命令来将一个分支的更改合并到另一个分支。如果你只想合并某个分支的一部分代码&#xff0c;可以使用以下两种方法&#xff1a; 1.批量文件合并 1.1.创建并切换到一个新的临时分支 首先&#xff0c;从要合并的源分支&#xff08;即要…
阅读更多...
缓存篇—缓存击穿

缓存篇—缓存击穿

在很多场景下&#xff0c;我们的业务通常会有几个数据会被频繁地访问&#xff0c;比如秒杀活动&#xff0c;这类被频地访问的数据被称为热点数据。 如果缓存中的某个热点数据过期了&#xff0c;此时大量的请求访问了该热点数据&#xff0c;就无法从缓存中读取&#xff0c;直接…
阅读更多...
DT DAY3 信号和槽

DT DAY3 信号和槽

作业&#xff1a; 1> 思维导图 2> 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 btn3 new QPushButton("按钮3",this);btn3->resize(ui->btn2->width(),ui->b…
阅读更多...
[linux]进程间通信（IPC）———共享内存（shm）（什么是共享内存，共享内存的原理图，共享内存的接口，使用演示）

[linux]进程间通信（IPC）———共享内存（shm）（什么是共享内存，共享内存的原理图，共享内存的接口，使用演示）

一、什么是共享内存 共享内存区是最快的&#xff08;进程间通信&#xff09;IPC形式。一旦这样的内存映射到共享它的进程的地址空间&#xff0c;这些进程间数据传递不再涉及到内核&#xff0c;换句话说是进程不再通过执行进入内核的系统调用来传递彼此的数据。注意&#xff1a;…
阅读更多...
【QT QML】软件打包，生成安装包

【QT QML】软件打包，生成安装包

一、版本 Desktop 5.15.2 MinGW 64-bit二、打包 1. 编译Release版本 2. 在工程目录下找到Realse文件夹 3. 拷贝文件 ***-Desktop_Qt_5_15_2_MinGW_64_bit-Release - release - xxx.exe到一个新文件夹中 4. 开启相应打包工具&#xff08;根据自己的编译器和版本选择&#xff0…
阅读更多...
w29pikachu-ssrf实例

w29pikachu-ssrf实例

SSRF简介 SSRF是服务器端请求伪造 危害&#xff1a; 1.可以对服务器所在内网、本地进行端口扫描&#xff0c;获取一些服务的信息等 2.目标网站本地敏感数据的读取 3.内外网主机应用程序漏洞的利用 4.内外网web站点漏洞的利用 ssrf常用的相关协议&#xff1a; gopher://: 发…
阅读更多...
QT基本组件

QT基本组件

四、基本组件 Designer 设计师&#xff08;重点&#xff09; Qt包含了一个Designer程序&#xff0c;用于通过可视化界面设计开发界面&#xff0c;保存文件格式为.ui&#xff08;界面文件&#xff09;。界面文件内部使用xml语法的标签式语言。 在Qt Creator中创建文件时&#xf…
阅读更多...
3.测试教程 - 基础篇

3.测试教程 - 基础篇

文章目录 软件测试的生命周期软件测试&软件开发生命周期如何描述一个bug如何定义bug的级别bug的生命周期如何开始第一次测试测试的执行和BUG管理产生争执怎么办&#xff08;处理人际关系&#xff09; 大家好&#xff0c;我是晓星航。今天为大家带来的是 测试基础 相关的讲解…
阅读更多...
pclpy 可视化点云（多窗口可视化、单窗口多点云可视化）

pclpy 可视化点云（多窗口可视化、单窗口多点云可视化）

pclpy 可视化点云&#xff08;多窗口可视化、单窗口多点云可视化&#xff09; 一、算法原理二、代码三、结果1.多窗口可视化结果2.单窗口多点云可视化 四、相关数据五、问题与解决方案1.问题2.解决 一、算法原理 原理看一下代码写的很仔细的。。目前在同一个窗口最多建立2个窗…
阅读更多...
亿道丨三防平板丨加固平板丨三防加固平板丨改善资产管理

亿道丨三防平板丨加固平板丨三防加固平板丨改善资产管理

库存资产管理中最重要的部分之一是准确性&#xff1b;过时的库存管理技术会增加运输过程中人为错误、物品丢失或纸张损坏的风险。如今随着三防平板电脑的广泛使用&#xff0c;库存管理也迎来了好帮手&#xff0c;通过使用三防平板电脑能够确保库存管理、数据存储和记录保存的准…
阅读更多...
《幻兽帕鲁》值得入手吗？MACOS 游戏 幻兽帕鲁MAC可以玩吗？

《幻兽帕鲁》值得入手吗？MACOS 游戏 幻兽帕鲁MAC可以玩吗？

最近&#xff0c;一款名为《幻兽帕鲁》的游戏备受玩家瞩目。在追寻开放且多样化游戏体验的今天&#xff0c;《幻兽帕鲁》以其独特的玩法和世界观吸引了大批游戏爱好者。尽管游戏表面上看起来像是方舟的萌系版本&#xff0c;但其独特的特色却令人耳目一新。 首先&#xff0c;让我…
阅读更多...
OceanBase数据迁移-从MySQL导入数据到OceanBase

OceanBase数据迁移-从MySQL导入数据到OceanBase

把MySQL中的数据导入到OceanBase&#xff0c;分几个步骤&#xff1a; 1.准备一份MySQL测试数据集2.使用mydumper工具导出MySQL数据3.使用myloader工具导入到OceanBase4.验证测试数据集在OceanBase下的执行情况 1.准备一份MySQL测试数据集 1.1.从github下载mysql测试数据集&a…
阅读更多...
React 模态框的设计（二）

React 模态框的设计（二）

自定义组件是每个前端开发者必备的技能。我们在使用现有框架时难免有一些超乎框架以处的特别的需求&#xff0c;比如关于弹窗&#xff0c;每个应用都会用到&#xff0c;但是有时我们使用的框架中提供的弹窗功能也是功能有限&#xff0c;无法满足我们的应用需求&#xff0c;今天…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023