es6新特性——前端技术栈

ES6 基本介绍

ES6 是什么?

  1. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准， 2015 年 6 月发布。
  2. ES6 设计目标：达到 JavaScript 语言可以用来编写复杂的大型程序，成为企业级开发语言
  3. ECMAScript 和 JavaScript 的关系：ECMAScript 是 JavaScript 的规范/规则，JavaScript 是ECMAScript 的一种实现

let 声明变量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>let 的基本使用</title><script type="text/javascript">let name = "Tom 哇嘎";console.log("name=", name); //使用+, 字符串的拼接, 如果 name 是一个对象, 会输出 object, 而不会输出对象的完整信息</script>
</head>
<body>
</body>
</html>

注意事项和使用细节

  1. let 声明的变量有严格局部作用域
  2. let 只能声明一次, var 可以声明多次
  3. let 不存在变量提升, var 存在变量提升

const 声明常量/只读变量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>const 的基本使用</title><script type="text/javascript">/**老韩解读1. 常量在定义时，需要赋值2. 常量赋值后不能修改*/const PI = 3.14;console.log("PI=", PI)</script>
</head>
<body>
</body>
</html>

注意事项和使用细节

  1. 常量在定义时，需要赋值
  2. 常量赋值后不能修改

解构赋值

基本介绍

  1. 解构赋值是对赋值运算符的扩展
  2. 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
  3. 主要有两种形式： 数组解构和对象解构

数组解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组解构学习 </title><script type="text/javascript">let arr = [1, 2, 3];//数组解构[取出元素]//1.传统let x = arr[0], y = arr[1], z = arr[2];console.log(x, y, z);//2. ES6 风格let [a, b, c] = arr;console.log("==================================");console.log(a, b, c);</script>
</head>
<body></body>
</html>

对象解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象解构</title><script type="text/javascript">let monster = {name: '牛魔王', age: 800};//传统方式取出属性-解构 对象名.属性名console.log(monster.name, " ", monster.age);//ES6 对象解构/** 细节解读* {name,age} 的取名 name 和 age 要和 monster 对象的属性名保持一致* 使用{} 包括, 不要使用[]* . {name,age} 顺序是无所谓* */let {name, age} = monster;console.log("========================");console.log("name=", name, " age=", age);//还有其它的形式,比如方法上使用对象解构//如果这样使用，仍然要保证名称和对象的属性名一致function f1({name, age}) {console.log("f1-name=", name, " ", "f1-age=", age)}f1(monster);</script>
</head>
<body></body>
</html>

模板字符串

基本介绍

  1. 模板字符串使用反引号 ` 将字符串包裹
  2. 可作为普通字符串
  3. 可用来定义多行字符串，即可以将换行字符串原生输出
  4. 字符串插入变量和表达式, 使用 ${}
  5. 字符串中调用函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板字符串的演示</title><script type="text/javascript">let name = "hspedu 教育";//(1) 当解析 ${name}, 就找最近的 name 遍历, 进行替换//(2) 然后可以得到最后解析的字符串let str2 = `教育名称=${name}`;let str3 = `1+2=${1 + 2}`;// 字符串中调用函数function sayHi(name) {return "hi " + name;}let name2 = "tom";let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`;let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`;</script>
</head>
<body></body>
</html>

对象相关新特性

声明对象简写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>声明对象的简写方式</title><script type="text/javascript">const age = 800;const name = "牛魔王";// 传统 声明/定义对象let monster = {name: name, age: age};// ES6 声明/定义对象//老师解读//1. {name, age} : 表示对象的属性名是 name 和 age//2. 属性 name 的值是从变量/常量 name 来的let monster02 = {name, age};console.log("monster02=>", monster02);</script>
</head>
<body></body>
</html>

对象方法简写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象方法的简写形式</title><script type="text/javascript">// 传统-对象方法定义let monster = {name: "红孩儿", age: 100,sayHi: function () {console.log("信息: name=", this.name, " age=", this.age);}}monster.f10 = function () {console.log("哈哈");};monster.sayHi();monster.f10();// ES6-对象方法定义let monster2 = {name: "红孩儿~", age: 900,sayHi() {console.log("信息: name=", this.name, " age=", this.age);},f1() {console.log("f1()");}}monster2.sayHi();monster2.f1();</script>
</head>
<body></body>
</html>

对象拓展运算符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象拓展运算符</title><script type="text/javascript">let cat = {name: "小花猫", age: 2};// let cat2 = cat;// cat2.name = "大花猫";// console.log("cat=>", cat);// console.log("cat2=>", cat2);//// 拷贝对象(深拷贝)let cat2 = {...cat};cat2.name = "中花猫";console.log("cat=>", cat);//小花猫console.log("cat2=>", cat2);//中花猫// 合并对象[深拷贝]let monster = {name: "白骨精", age: 100};let car = {brand: "奔驰", price: 800000};let monster_car = {...monster, ...car}monster_car.name = "狐狸精";console.log("monster=>", monster);console.log("monster_car=>", monster_car);</script>
</head>
<body></body>
</html>

箭头函数

基本介绍

  1. 箭头函数提供更加简洁的函数书写方式。
  2. 基本语法是：(参数列表) => { 函数体 }
  3. 箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()
  4. 箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块
  5. 函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回
  6. 箭头函数多用于匿名函数的定义

箭头函数使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭头函数的使用</title><script type="text/javascript">// 传统定义函数var f1 = function (n) {return n * 2}console.log("传统= " + f1(2)) //传统= 4// ES6 , 箭头函数使用let f2 = (n) => {return n * 2;}console.log("f2() 结果= ", f2(100));//200//上面的 es6 函数写法，还可以简化let f3 = n => n * 3;console.log("f3() 结果=", f3(100));//300//函数也可以传给一个变量=> 看看 java 基础匿名内部类function hi(f4) {console.log(f4(900));}hi((n) => {     //1000return n + 100});hi((n) => {return n - 100  //800});</script>
</head>
<body></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭头函数的使用2</title><script type="text/javascript">// 传统var f1 = function (n, m) {var res = 0for (var i = n; i <= m; i++) {res += i}return res}console.log("传统= " + f1(1, 10))// ES6 , 箭头函数使用let f2 = (n, m) => {var res = 0for (var i = n; i <= m; i++) {res += i}return res};console.log(f2(1, 10));</script>}
</head>
<body></body>
</html>

箭头函数+对象解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭头函数+对象解构</title><script type="text/javascript">const monster = {name: "红孩儿", age: 1000, skill: ['红缨枪', '三位真火']}//要求：在方法形参取出 monster 对象的 skill 属性//传统方式function f1(monster) {console.log("skill=", monster.skill);}f1(monster);//箭头函数let f2 = ({skill}) => {console.log("skill=", skill);}//老韩解读//1. f2 传入对象 monster//2. f2 形参是 {skill} , 所以 es6 的对象解构特性, 会把 monster 对象的 skill 属性赋给skill//3. 对象解构的前提就是 {skill}的 skill 和 monster 的 skill 属性是一致f2(monster);//箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致.let f3 = ({age, name, skill}) => {console.log("skill=", skill, " age=", age, " name=", name);}f3(monster);</script>
</head>
<body></body>
</html>

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

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

相关文章

使用内网穿透轻松实现在外远程访问本地威联通QNAP NAS

使用内网穿透轻松实现在外远程访问本地威联通QNAP NAS

文章目录 前言1. 威联通安装cpolar内网穿透2. 内网穿透2.1 创建隧道2.2 测试公网远程访问 3. 配置固定二级子域名3.1 保留二级子域名3.2 配置二级子域名 4. 使用固定二级子域名远程访问 前言 购入威联通NAS后&#xff0c;很多用户对于如何在外在公网环境下的远程访问威联通NAS…
阅读更多...
vue3事件总线mitt使用方式

vue3事件总线mitt使用方式

我的使用场景 在项目中遇到一个这样的问题。页面使用了keepalive缓存&#xff0c; 员工排班和班次之间的数据有关联&#xff0c;当我删除一个班次后&#xff0c;给员工排的班&#xff0c;属于那个被删的班次的情况&#xff0c;已经生效的不会受影响&#xff0c;但是未生效的排…
阅读更多...
学习使用echats实现双刻度echarts双Y轴，左右Y轴数据的方法

学习使用echats实现双刻度echarts双Y轴，左右Y轴数据的方法

学习使用echats实现双刻度echarts双Y轴&#xff0c;左右Y轴数据的方法 代码效果图 代码 <!--此示例下载自 https://echarts.apache.org/examples/zh/editor.html?cline-stack&langjs --> <!DOCTYPE html> <html lang"en" style"height: 10…
阅读更多...
Visual Studio 任务列表

Visual Studio 任务列表

任务列表 帮助我们快速找到注释位置&#xff08;用在需要反复查找修改的地方&#xff09; 使用//todo&#xff1a;注释的内容就会显示在任务列表中。 任务列表如何打开&#xff1f; 视图—任务列表 &#xff08;CTRlwt&#xff09; 创建自定义令牌&#xff1a; 在 “工具”…
阅读更多...
学习路径概览

学习路径概览

根据codewave 低代码官方的资料&#xff0c;我们以一个简单的初级采购管理系统为例&#xff0c;带大家进行学习。学习的案例框架如下&#xff1a; https://ik4mh7u2np.feishu.cn/docx/NjyEd9qD5oElkoxJhapc3fV4nPe?fromfrom_copylink​​​​​​​ 主要分为以下四个学习模块
阅读更多...
L1-075：强迫症

L1-075：强迫症

题目描述 小强在统计一个小区里居民的出生年月&#xff0c;但是发现大家填写的生日格式不统一&#xff0c;例如有的人写 199808&#xff0c;有的人只写 9808。有强迫症的小强请你写个程序&#xff0c;把所有人的出生年月都整理成 年年年年-月月 格式。对于那些只写了年份后两位…
阅读更多...
Taro +vue3 中跳转页面 如何带一个数组或者对象进入下一个页面 解码或者编码

Taro +vue3 中跳转页面 如何带一个数组或者对象进入下一个页面 解码或者编码

1. 需求 在我开发H5 的过程中 发现 有些接口 后端的接口提供不了 或者其他的原因 发现一些详情的页面 我没有接口 数据获取不到 需要用到的是 那种列表数据 所以只能用跳转的方式 实现这个功能. 2. Taro.nagivate() 跳转: Taro.navigateTo({url: /pages/order-detail/index…
阅读更多...
Centos7部署Keepalived+lvs服务

Centos7部署Keepalived+lvs服务

IP规划&#xff1a; 服务器IP地址主服务器20.0.0.22/24从服务器20.0.0.24/24Web-120.0.0.26/24Web-220.0.0.27/24 一、主服务器安装部署keepalivedlvs服务 1、调整/proc响应参数 关闭Linux内核的重定向参数&#xff0c;因为LVS负载服务器和两个页面服务器需要共用一个VIP地…
阅读更多...
『番外篇八』SwiftUI 脑洞大开实现“另类”视图跟随方法

『番外篇八』SwiftUI 脑洞大开实现“另类”视图跟随方法

概览 在 SwiftUI 的开发中，我们时常需要用指尖丝滑般地操作指定视图：比如，我们需要在拖动视图后让它自动归位，或者拖动一个视图时让另一个视图跟随它移动。 我们随后将会详细讨论上述两个 SwiftUI 中与视图移动相关场景的实现。 在本篇博文中，您将学到如下内容： 概览1.…
阅读更多...
python期刊稿件在线投稿系统q2ud0

python期刊稿件在线投稿系统q2ud0

本系统的用户可分为管理员、投稿者、审稿人和编辑四个用户角色组成。管理员可以管理系统内所有功能&#xff0c;主要有个人中心、投稿者管理、审稿人管理、编辑管理、个人稿件管理、审核稿件管理、稿件信息管理、类型管理等功能&#xff1b;编辑登录系统主要有个人中心、审核稿…
阅读更多...
四种常见智能指针的介绍

四种常见智能指针的介绍

一、介绍 当类中有指针成员时&#xff0c;一般有两种方式来管理指针成员&#xff1a;一是采用值型的方式管理&#xff0c;每个类对象都保留一份指针指向的对象的拷贝&#xff1b;另一种更优雅的方式是使用智能指针(smart pointer)&#xff0c;从而实现指针指向的对象的共享。 …
阅读更多...
统信系统常见问题解决方法

统信系统常见问题解决方法

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 背景说明 本文所说的问题&#xff0c;是基于浪潮统信UOS的环境存在的问题。 一、WPS新建文档默认保存格式不对 解决办法&#xff1a; 1.编辑/opt/apps/cn.wps.wps-office-pro/files/kingsoft/wps-office/…
阅读更多...
Element-Ui树形数据懒加载，删除到最后一个空数组不刷新问题

Element-Ui树形数据懒加载，删除到最后一个空数组不刷新问题

使用elemenui树形删除数据的时候刷新页面&#xff0c;我在网上找了好多方法&#xff0c;要么没用&#xff0c;要么都是部分代码&#xff0c;自己又看不懂&#xff0c;不得不硬着头皮看源码&#xff0c;发现了有个方法可以刷新。 使用elemenui树形删除数据的时候刷新页面。源码里…
阅读更多...
UML类图学习

UML类图学习

UML类图学习 UML类图是描述类之间的关系概念1.类(Class)&#xff1a;使用三层矩形框表示2.接口(interface)&#xff1a;使用两层矩形框表示&#xff0c;与类图主要区别在于顶端有<<interface>>显示3、继承类&#xff08;extends&#xff09;&#xff1a;用空心三角…
阅读更多...
蓝桥杯C/C++程序设计——单词分析

蓝桥杯C/C++程序设计——单词分析

题目描述 小蓝正在学习一门神奇的语言&#xff0c;这门语言中的单词都是由小写英文字母组 成&#xff0c;有些单词很长&#xff0c;远远超过正常英文单词的长度。小蓝学了很长时间也记不住一些单词&#xff0c;他准备不再完全记忆这些单词&#xff0c;而是根据单词中哪个字母出…
阅读更多...
Pytest 项目结合Jenkins

Pytest 项目结合Jenkins

一、window安装centos7虚拟机 参考网上其他教程 二、Linux安装Jenkins 进入jenkins.io网址&#xff0c;点击download&#xff0c;选择CentOS版本 1、Linux中安装java环境和git Jenkins的运行需要java环境&#xff1b;安装git是为代码上传给仓库做准备&#xff1b; yum - y…
阅读更多...
C语言-环境搭建

C语言-环境搭建

文章目录 内容Notepad的安装gcc编译工具的配置 编写软件的安装&#xff1a;软件传送门&#xff1a;Notepad软件选择一个合适的路径&#xff0c;一键傻瓜式安装即可 编译工具gcc在windows环境下的配置&#xff1a;解压gcc编辑工具包解压出来的mingw64文件放到一个合适的磁盘路径…
阅读更多...
15. 附录

15. 附录

15. 附录 15.1. 交互模式 15.1.1. 错误处理 有错误发生时&#xff0c;解释器会打印一个错误信息和栈跟踪器。在交互模式下&#xff0c;它返回主提示符&#xff0c;如果从文件输入执行&#xff0c;它在打印栈跟踪器后以非零状态退出。(异常可以由 try 语句中的 except 子句来…
阅读更多...
华为HCIE-Datacom课程介绍

华为HCIE-Datacom课程介绍

厦门微思网络HCIE-Datacom课程介绍 一、认证简介 HCIE-Datacom&#xff08;Huawei Certified ICT Expert-Datacom&#xff09;认证是华为认证体系中的顶级认证&#xff0c;HCIE-Datacom认证定位具备坚实的企业网络跨场景融合解决方案理论知识&#xff0c;能够使用华为数通产品…
阅读更多...
副业类小报童热门专栏TOP15

副业类小报童热门专栏TOP15

今天介绍15个副业小报童&#xff0c;可以说是当前小报童平台&#xff0c;副业类专栏的天花板内容了 这些专栏&#xff0c;都有免费内容可以查看&#xff0c;而且还是3天无理由退款的&#xff0c;完全可以尝试着订阅一波 关键单价都非常亲民&#xff0c;怎么都不亏&#xff01…
阅读更多...
最新文章

Copyright @ 2022~2023