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.mzph.cn/news/695782.shtml

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

相关文章

干货分享 | TSMaster 序列发送模块在汽车开发测试中的应用

众所周知&#xff0c;序列发送模块可以不需要脚本代码实现测试中特定控制报文序列的发送&#xff0c;该模块多用于循环顺序控制的测试案例中。序列发送模块的常用场景&#xff0c;主要是针对一些新开发的产品需要通过该模块来验证产品功能等等。本文重点和大家分享一下关于TSMa…

力扣102 二叉树的层序遍历 Java版本

文章目录 题目描述思路代码 题目描述 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[…

辉辉数码:目前电视盒子哪个最好?目前性能最好的电视盒子

大家好&#xff0c;我是辉辉&#xff0c;上期测评发布后我收到了很多粉丝的反馈希望我这期能分享电视盒子推荐&#xff0c;看看目前电视盒子哪个最好。我购入了市面上最热门的十几款电视盒子对比配置、系统后整理了五款目前性能最好的电视盒子推荐给大家。 品牌型号&#xff1…

计算机网络-局域网和城域网(二)

1.局域网互联设备&#xff1a; 2层网桥&#xff08;生成树、源路由&#xff09;、3层交换机、路由器。网桥要求3层以上协议相同&#xff0c;1、2层协议不同可互联。 2.生成树网桥&#xff1a; 又叫透明网桥&#xff0c;IEEE802.1d&#xff0c;生成树算法。基本思想是在网桥之…

Spring Security学习(六)——配置多个Provider(存在两种认证规则)

前言 《Spring Security学习&#xff08;五&#xff09;——账号密码的存取》一文已经能满足一般应用的情况。但实际商业应用也会存在如下的情况&#xff1a;用户提交的账号密码&#xff0c;能在本地的保存的账号密码匹配上&#xff0c;或者能在远端服务认证中匹配上&#xff…

提示找不到msvcr110.dll怎么解决?这5个方法简单有效搞定

在计算机系统运行过程中&#xff0c;如果发现无法找到msvcr110.dll这个特定的动态链接库文件&#xff0c;通常会引发一系列问题和困扰。首先&#xff0c;这可能导致某些应用程序无法正常启动或运行&#xff0c;因为msvcr110.dll是许多基于Microsoft Visual C编译的应用程序所必…

如何使用Docker本地部署Jupyter+Notebook容器并结合内网穿透实现远程访问

文章目录 1. 选择与拉取镜像2. 创建容器3. 访问Jupyter工作台4. 远程访问Jupyter工作台4.1 内网穿透工具安装4.2 创建远程连接公网地址4.3 使用固定二级子域名地址远程访问 本文主要介绍如何在Ubuntu系统中使用Docker本地部署Jupyter Notebook&#xff0c;并结合cpolar内网穿透…

新版Java面试专题视频教程——多线程篇①

新版Java面试专题视频教程——多线程篇① Java多线程相关面试题 0. 问题汇总0.1 线程的基础知识0.2 线程中并发安全 1.线程的基础知识1.1 线程和进程的区别&#xff1f;1.2 并行和并发有什么区别&#xff1f;1.3 创建线程的四种方式1.4 runnabl…

ES6 | (二)ES6 新特性(下) | 尚硅谷Web前端ES6教程

文章目录 &#x1f4da;迭代器&#x1f407;定义&#x1f407;工作原理&#x1f407;自定义遍历数据 &#x1f4da;生成器函数&#x1f407;声明和调用&#x1f407;生成器函数的参数传递&#x1f407;生成器函数案例 &#x1f4da;Promise&#x1f4da;Set&#x1f407;Set的定…

fastApi笔记05-路径参数和数值校验

使用Path可以对路径参数声明与Query相同类型的校验和元数据 from typing import Annotatedfrom fastapi import FastAPI, Path, Queryapp FastAPI()app.get("/items/{item_id}") async def read_items(item_id: Annotated[int, Path(title"The ID of the item …

微服务篇之限流

一、为什么要限流 1. 并发的确大&#xff08;突发流量&#xff09;。 2. 防止用户恶意刷接口。 二、限流的实现方式 1. Tomcat限流 可以设置最大连接数&#xff0c;但是每一个微服务都有一个tomcat&#xff0c;实现起来非常麻烦。 2. Nginx限流 &#xff08;1&#xff09;控…

假如C++进入Linux内核,那么需要做哪些改造?

假如C进入Linux内核&#xff0c;那么需要做哪些改造&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「c的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xf…

ChatGPT安卓版正式发布,附安装包,但有款手机无法使用

ChatGPT安卓版如约而至&#xff0c;OpenAI正式宣布该应用已在谷歌应用商店上架&#xff0c;用户可以免费下载&#xff0c;对话不限次数。 但是安卓版ChatGPT目前仅在美国、印度、孟加拉国和巴西提供下载&#xff0c;下周将会推广至更多国家。 网页端下载链接&#xff1a; http…

五、矩阵的运算

1、矩阵的加减: 前提:两个矩阵必须是同形矩阵。 矩阵加减具有交换律,矩阵矩阵相乘没有交换律。 计算结果:元素级运算。 2、矩阵的数乘: 计算结果:元素级运算。这里要区别与行列式的数乘。 3、矩阵与向量的乘法: 前提:矩阵的列数等于向量的行数。 计算方式:左列…

【Linux基础】vim、常用指令、组管理和组权限

Linux基础 1、目录结构2、vi和vim3、常用指令运行级别找回密码帮助指令时间日期指令搜索查找文件目录操作磁盘管理指令压缩和解压缩 4、组管理和组权限用户操作指令权限 1、目录结构 Linux的文件系统是采用级层式的树状目录结构&#xff0c;在此结构中的最上层是根目录“/”&a…

C++之Easyx——图形库的基本功能(2):来点色彩

一、setbkcolor 函数定义 void EGEAPI setbkcolor(color_t color, PIMAGE pimg NULL); // 设置当前绘图背景色&#xff08;设置并做背景色像素替换&#xff09; 使用说明 void EGEAPI setbkcolor(颜色RGB, PIMAGE pimg NULL); // 设置当前绘图背景色&#xff08;…

备战蓝桥杯---动态规划(应用3之空间优化)

话不多说&#xff0c;直接看题&#xff1a; 我们不妨把问题抽象一下&#xff1a; 首先&#xff0c;我们由裴蜀定理知道如果两个数互质&#xff0c;那么axbyc一定有整数解&#xff08;只要c为1的倍数也就是整数&#xff09;&#xff0c;因此问题就转换为求选一些数使他们gcd1&a…

适用于 Linux、Windows 和 macOS 的免费 ONLYOFFICE 桌面应用程序

前言&#xff1a; 最近也是发现了一款特别好用的免费ONLYOFFICE 桌面应用程序忍不住分享给大家&#xff0c;这款编辑器能够打开、阅读和编辑多种文件类型&#xff0c;包括.docx文档、.pptx幻灯片和.xlsx表格等开放XML格式的Office文档。此外&#xff0c;ONLYOFFICE桌面编辑器还…

收入统计-嵌入式高级软件音频工程师

加我微信hezkz17&#xff0c;可申请进入数字音频系统研究开发交流答疑群&#xff0c;加群附加赠送 蓝牙耳机音频&#xff0c;DSP音频开发资料 1 固定工资收入 2 科技创业收入 3 总收入36K

为什么在MOS管开关电路设计中使用三极管容易烧坏?

MOS管作为一种常用的开关元件&#xff0c;具有低导通电阻、高开关速度和低功耗等优点&#xff0c;因此在许多电子设备中广泛应用。然而&#xff0c;在一些特殊情况下&#xff0c;我们需要在MOS管控制电路中加入三极管来实现一些特殊功能。然而&#xff0c;不同于MOS管&#xff…