ES6 新特性(详细复习笔记)--下

文章目录

  • ES6 新特性(详细复习笔记)-下
    • 对象相关新特性
      • 1. 需求: 演示声明对象简写
      • 2-需求: 演示对象方法简写
      • 3-应用实例-对象拓展运算符
    • 注意事项和使用细节
    • 箭头函数
      • 基本介绍
      • 应用实例 1-箭头函数使用
      • 应用实例 2-箭头函数使用
      • 应用实例 3-箭头函数+对象解构
    • 注意事项和使用细节
    • 综合代码示例
      • 1. 给你一个对象 let cat = {name: 'jack', age: 10}; 要求使用模板字符串显示 cat 的信息
      • 2. 看下面的代码, 请问输出什么， 并分析原因
      • 3. 根据给出的数据, 用 ES6 的方式, 构建对象 person, 并提供方法(用最简洁的方式),可以输出信息.
      • 4. 根据给出的数据, 用 ES6 的方式, 编写方法, 使用对象解构的方式, 得到 oper 和arr, 并根据 oper 的值 , oper 可以是+、-、*、/ 来计算结果
      • 5. 调用 f8 函数, arr 是数组, fun 传入箭头函数, 可以计算 arr 的和, 并写出调用方法

ES6 新特性(详细复习笔记)-下

对象相关新特性

应用实例-声明对象简写

1. 需求: 演示声明对象简写

  1. 代码演示
<!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>

2-需求: 演示对象方法简写

<!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>

3-应用实例-对象拓展运算符

  1. 需求: 演示对象拓展运算符使用

拷贝对象(深拷贝)的用法和理解

<!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. 箭头函数多用于匿名函数的定义

应用实例 1-箭头函数使用

  1. 需求: 演示箭头函数基本使用
<!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))// 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=> n+100);  hi((n) => {return n + 100});hi((n) => {return n - 100});</script>
</head>
<body></body>
</html>

应用实例 2-箭头函数使用

需求: 演示箭头函数使用

<!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>

应用实例 3-箭头函数+对象解构

  1. 需求: 演示箭头函数+解构使用
<!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>

注意事项和使用细节

箭头函数+对象解构, 注意参数是({属性名})

({属性名}) 是由{} 包括的，属性名需要和对象属性名一致，使用到了对象解构

综合代码示例

1. 给你一个对象 let cat = {name: ‘jack’, age: 10}; 要求使用模板字符串显示 cat 的信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">// 给你一个对象let cat = {name: 'jack', age: 10}; 要求使用模板字符串显示cat的信息let cat = {name: 'jack', age: 10};let str = `cat的信息为 name=${cat.name} age=${cat.age}`;console.log(str);</script>
</head>
<body></body>
</html>

2. 看下面的代码, 请问输出什么， 并分析原因

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fV2DssgZ-1690291627476)(…/…/…/Typora/%E5%9B%BE%E7%89%87/db1c4a40788b472c8819241a2a74d5d7-16902915610584.png)]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//看下面的代码, 请问输出什么， 并分析原因let dog = {name: "大黄", age: 3};//分析//1. 使用对象解构//2. namex  undefined//3. age 3let {namex, age} = dog;console.log("namex=", namex, " age=", age);</script>
</head>
<body></body>
</html>

3. 根据给出的数据, 用 ES6 的方式, 构建对象 person, 并提供方法(用最简洁的方式),可以输出信息.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//根据给出的数据, 用ES6的方式, 构建对象person, 并提供方法(用最简洁的方式), 可以输出信息const name = "周星驰";const job = "演员";let person = {name,job,show() {console.log("person信息 name=", this.name, " job=", this.job);}}person.show();</script>
</head>
<body></body>
</html>

4. 根据给出的数据, 用 ES6 的方式, 编写方法, 使用对象解构的方式, 得到 oper 和arr, 并根据 oper 的值 , oper 可以是+、-、*、/ 来计算结果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//根据给出的数据, 用ES6的方式, 编写方法, 使用对象解构的方式, 得到 oper 和 arr, 并根据oper的值 , oper可以是+、-、*、/  来计算结果var cal = {oper: "/",arr: [1, 2, 3, 5]}function f1({oper, arr}) {let res = 0;//初始化的值，要分析考虑//还可以考虑arr的传入，并且做分析//判断arr 是不是null, 并且arr.length <=1 , 就直接返回arr[0]if ("+" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res += arr[i];}} else if ("-" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res -= arr[i];}} else if ("*" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res *= arr[i];}} else if ("/" == oper) {res = arr[0];for (let i = 1; i < arr.length; i++) {res /= arr[i];}} else {console.log("oper输入不正确..")}return res;}console.log("f1运算的结果=", f1(cal))</script>
</head>
<body></body>
</html>

5. 调用 f8 函数, arr 是数组, fun 传入箭头函数, 可以计算 arr 的和, 并写出调用方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//调用f8 函数, arr是数组, fun传入箭头函数, 可以计算 arr的和, 并写出调用方法function f8(arr, fun) {console.log(fun(arr));//调用模板}f8([1, 2, 3, 4, 5], (arr) => {let res = 0;for (let i = 0; i < arr.length; i++) {res += arr[i];}return res;})</script>
</head>
<body></body>
</html>

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

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

相关文章

打卡力扣题目五

打卡力扣题目五

#左耳听风 ARST 打卡活动重启# 目录 一、问题 二、解题方法一 三、解题方法二 四、两种方法的区别 关于 ARTS 的释义 —— 每周完成一个 ARTS&#xff1a; ● Algorithm: 每周至少做一个 LeetCode 的算法题 ● Review: 阅读并点评至少一篇英文技术文章 ● Tips: 学习至少一个…
阅读更多...
Jgit 工具类 (代码检出、删除分支（本地、远程）、新建分支、切换分支、代码提交)

Jgit 工具类 (代码检出、删除分支（本地、远程）、新建分支、切换分支、代码提交)

https://blog.csdn.net/qq_37203082/article/details/120327084 Jgit 工具类 (代码检出、删除分支&#xff08;本地、远程&#xff09;、新建分支、切换分支、代码提交)_jgit删除远程分支_CJ点的博客-CSDN博客 <!--JAVA操作GIT--><dependency><groupId>org.…
阅读更多...
JavaScript学习 -- SM3算法基本原理

JavaScript学习 -- SM3算法基本原理

SM3算法是一种由国家密码管理局发布的哈希算法&#xff0c;被广泛用于数字签名和消息认证等应用中。在JavaScript中&#xff0c;我们可以使用第三方库来计算数据的SM3哈希值。本篇文章将介绍SM3算法的基本原理和相关技术&#xff0c;并提供一些实例来演示如何在JavaScript中使用…
阅读更多...
vue3 中模板字符串中添加click方法并传参

vue3 中模板字符串中添加click方法并传参

工作中遇到html字符串拼接出dom结构&#xff0c;并且需要触发事件和传参的场景。借此机会记录一下。 1. 拼接内容 核心是利用html的onClick属性&#xff0c;触发单击事件&#xff0c;想要传递对象&#xff0c;必须要JSON.stringify()&#xff0c;否则控制台会报错 // 传递对象…
阅读更多...
DAY14_FilterListenerAjaxAxiosJsonfastjson综合案例-axios和html交互

DAY14_FilterListenerAjaxAxiosJsonfastjson综合案例-axios和html交互

目录 1 Filter1.1 Filter概述1.2 Filter快速入门1.2.1 开发步骤1.2.2 代码演示 1.3 Filter执行流程1.4 Filter拦截路径配置1.5 过滤器链1.5.1 概述1.5.2 代码演示1.5.3 问题 1.6 案例1.6.1 需求1.6.2 分析1.6.3 代码实现1.6.3.1 创建Filter1.6.3.2 编写逻辑代码1.6.3.3 测试并抛…
阅读更多...
ERROR in unable to locate ‘***/public/**/*‘ glob

ERROR in unable to locate ‘***/public/**/*‘ glob

前提 自己搭了一个react项目的脚手架&#xff0c;npm包下载一切都很正常&#xff0c;启动的时候突然就报ERROR in unable to locate ***/public/**/* glob这个错误&#xff0c;根据百度分析了一下产生的原因&#xff1a;webpack配置文件中的CopyWebpackPlugin导致的 网上给出的…
阅读更多...
【idea工具】idea工具，build的时候提示:程序包 com.xxx.xx不存在的错误

【idea工具】idea工具，build的时候提示:程序包 com.xxx.xx不存在的错误

idea工具&#xff0c;build的时候提示:程序包 com.xxx.xx不存在的错误&#xff0c;如下图&#xff0c;折腾了好一会&#xff0c; 做了如下操作还是不行&#xff0c;idea工具编译的时候&#xff0c;还是提示 程序包不存在。 a. idea中&#xff0c;重新导入项目&#xff0c;也还…
阅读更多...
Vue+axios如何解决跨域

Vue+axios如何解决跨域

1、为什么会产生跨域&#xff1f; 出于浏览器的同源策略限制。 同源策略&#xff08;Sameoriginpolicy&#xff09;是一种约定&#xff0c;是浏览器的一种安全机…
阅读更多...
从源码角度去深入分析关于Spring的异常处理ExceptionHandler的实现原理

从源码角度去深入分析关于Spring的异常处理ExceptionHandler的实现原理

ExceptionHandler的作用 ExceptionHandler是Spring框架提供的一个注解&#xff0c;用于处理应用程序中的异常。当应用程序中发生异常时&#xff0c;ExceptionHandler将优先地拦截异常并处理它&#xff0c;然后将处理结果返回到前端。该注解可用于类级别和方法级别&#xff0c;…
阅读更多...
苍穹外卖心得与总结【对比瑞吉】【如何获得铁粉】

苍穹外卖心得与总结【对比瑞吉】【如何获得铁粉】

对于苍穹外卖项目&#xff0c;从学习课程加复习已经13天了。 对于一名已经学习过SSMLinuxRedis数据库的Java练习生来说&#xff0c;这个项目相对于之前学习的《瑞吉外卖》新增了很多功能和技术&#xff0c;是很值得练手和提升的课程&#xff0c;下面给出自己的一些见解。&#…
阅读更多...
django channels实战（websocket底层原理和案例）

django channels实战（websocket底层原理和案例）

1、websocket相关 1.1、轮询 1.2、长轮询 1.3、websocket 1.3.1、websocket原理 1.3.2、django框架 asgi.py在django项目同名app目录下 1.3.3、聊天室 django代码总结 小结 1.3.4、群聊&#xff08;一&#xff09; 前端代码 后端代码 1.3.5、群聊&#xff08;二&#xff09…
阅读更多...
nginx配置项目，配置文件及相应linux命令

nginx配置项目，配置文件及相应linux命令

云服务器安装nginx步骤 安装nginx&#xff1a; yum install nginx 启动nginx&#xff1a; nginx 停止nginx&#xff1a; nginx -s stop 配置文件路径/etc/nginx/conf.d/ 上传配置文件到这个目录下&#xff0c;然后重启nginx 配置文件&#xff08;单云服务器配置单项目&…
阅读更多...
uniapp兼容微信小程序和支付宝小程序遇到的坑

uniapp兼容微信小程序和支付宝小程序遇到的坑

1、支付宝不支持v-show 改为v-if。 2、v-html App端和H5端支持 v-html &#xff0c;微信小程序会被转为 rich-text&#xff0c;其他端不支持 v-html。 解决方法&#xff1a;去插件市场找一个支持跨端的富文本组件。 3、导航栏处有背景色延伸至导航栏外 兼容微信小程序和支…
阅读更多...
小研究 - JVM 垃圾回收方式性能研究（三）

小研究 - JVM 垃圾回收方式性能研究（三）

本文从几种JVM垃圾回收方式及原理出发&#xff0c;研究了在 SPEC jbb2015基准测试中不同垃圾回收方式对于JVM 性能的影响&#xff0c;并通过最终测试数据对比&#xff0c;给出了不同应用场景下如何选择垃圾回收策略的方法。 目录 4 垃圾回收器性能比较 4.1 测试结果 5 结语 …
阅读更多...
Ubuntu /dev/loop＜0..n＞挂载的目录的分析

Ubuntu /dev/loop＜0..n＞挂载的目录的分析

执行命令df -h lkmaoubuntu:~$ df -h Filesystem Size Used Avail Use% Mounted on udev 1.6G 0 1.6G 0% /dev tmpfs 391M 2.1M 389M 1% /run /dev/sda1 59G 30G 26G 54% / tmpfs 2.0G 0 2.0G 0% /dev/s…
阅读更多...
fpga开发--蜂鸣器发出连续不同的音调

fpga开发--蜂鸣器发出连续不同的音调

描述 使用fpga蜂鸣器连续发出do&#xff0c;re&#xff0c;mi&#xff0c;fa&#xff0c;so&#xff0c;la&#xff0c;xi七个不同的音调&#xff0c;每个音调的持续时间为0.5s。 思路 采用状态机实现音调的转化&#xff0c;当do状态持续了0.5s之后转移到re状态&#xff0c;…
阅读更多...
【Git】修改文件版本回退撤销修改删除文件

【Git】修改文件版本回退撤销修改删除文件

文章目录 修改文件版本回退git reset语法规则注意 撤销修改情况1&#xff1a;工作区的代码还未add情况2&#xff1a;工作区的代码已经add 但未commit情况3&#xff1a;工作区的代码已经add 并且已经 commit 删除文件 修改文件 Git⽐其他版本控制系统设计得优秀&#xff0c;Git…
阅读更多...
【Solr】Solr搜索引擎使用

【Solr】Solr搜索引擎使用

文章目录 一、什么是Solr?二 、数据库本身就支持搜索啊,干嘛还要搞个什么solr?三、如果我们想要使用solr那么首先我们得安装它 一、什么是Solr? 其实我们大多数人都使用过Solr,也许你不会相信我说的这句话,但是事实却是如此啊 ! 每当你想买自己喜欢的东东时,你可能会打开某…
阅读更多...
chatgpt 接口使用（一）

chatgpt 接口使用（一）

使用api实现功能 参考链接&#xff1a;https://platform.openai.com/examples 安装库&#xff1a; pip3 install openai 例如&#xff1a; import os import openaiopenai.api_key os.getenv("OPENAI_API_KEY") response openai.ChatCompletion.create(model&q…
阅读更多...
jenkins 配置git

jenkins 配置git

在linux 中输入 保证git 安装成功 git --version使用查看git 安装目录&#xff08;非源码安装直接用yum 安装的&#xff09; which gitjenkins 中到 系统管理–>全局工具配置–> Git installations 新建一个项目 选择自由风格 源码管理选择 git 如果使用的是码云&a…
阅读更多...
最新文章

Copyright @ 2022~2023