es6(二)——常用es6说明

news2024/11/23 9:08:17

ES6的系列文章目录

es6(一)——var和let和const的区别


文章目录

  • ES6的系列文章目录
  • 一、变量的结构赋值
    • 1.数组的结构赋值
    • 2.对象的结构赋值
  • 二、模板字符串
  • 三、扩展运算符
    • 1.字符串的使用
    • 2.数组的使用
  • 四、箭头函数
    • 1.普通函数的定义
    • 2.箭头函数的定义
    • 3.箭头函数的注意点
      • (1) this指向:是静态的,始终指向函数声明的作用域this的值
      • (2) 箭头函数不能作为构造函数实例化对象
      • (3) 不能使用arguments变量
      • (4) 箭头函数的简写
  • 五、函数的默认值
  • 六、函数的reset参数
  • 总结

一、变量的结构赋值

1.数组的结构赋值

const listArr = ['张三', 18, '男', '地球人'];
const [name, age, sex, address] = listArr
console.log(name); // 张三
console.log(age); // 18
console.log(sex); // 男
console.log(address); // 地球人

在这里插入图片描述

2.对象的结构赋值

// 2:对象的解构赋值
const listobj = {
    name: '张三', 
    age: 18, 
    sex: '男', 
    address: '地球人'
 };
 const {name, age, sex, address} = listobj
 console.log(name); // 张三
 console.log(age); // 18
 console.log(sex); // 男
 console.log(address); // 地球人

在这里插入图片描述

二、模板字符串

const userName = '张三';
const age = 18;
 console.log('我是'+ userName + ',我今年' + age + '岁了。'); // es5
 console.log(`我是${userName},我今年${age}岁了。`); // es6的模板字符串

在这里插入图片描述

三、扩展运算符

1.字符串的使用

const userName = 'zhagnsan';
console.log(...userName); // z h a g n s a n

在这里插入图片描述

2.数组的使用

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        const userName = ['张三', '李四', '王五'];
        const userName2 = ['赵六', '沈七'];
        
        // 1: 数组的合并
        const hebing = [...userName, ...userName2];
        console.log(hebing);

        // 2: 数组的克隆
        const kelong = [...hebing];
        console.log(kelong);

        // 3: 将伪数组 (arguments) 转成真数组
        const getDivList = document.querySelectorAll('div');
        const divList = [...getDivList];
        console.log(divList);
    </script>
</body>

在这里插入图片描述

四、箭头函数

1.普通函数的定义

(1)有关键字function,必须小写。
(2)有函数名:一遍由用户自定义,最好见名知意。
(3)函数的参数:'()'不能省略,'参数'是可选的(函数可以有参数,也可以没有参数)。
(4)'{}':不能省略,表示函数的控制范围。
(5)有return ,默认可以不写。

2.箭头函数的定义

在普通函数的基础上,省去了关键字function、采用箭头=>来定义函数、同时箭头在括号前面的函数叫做箭头函数。

3.箭头函数的注意点

(1) this指向:是静态的,始终指向函数声明的作用域this的值

可以通过bing、call、apple等方法来改变this指向。(也可以简单理解为箭头函数的上一级作用域,最高为windows)

(2) 箭头函数不能作为构造函数实例化对象

 // 注意:构造函数大写
let User = (name, age)=>{
     this.name = name;
     this.age = age;
 }

 let u1 = new User();
 console.log(u1)

在这里插入图片描述

(3) 不能使用arguments变量

const fn = () =>{
 console.log(arguments); // 报错
}
fn();

在这里插入图片描述

(4) 箭头函数的简写

当有且只有一个函数的时候,可以省略括号();
当有且只有一行代码体的时候,可以省略大括号{};如下所示:

let u1 = (name) => {
   console.log(name);
}
u1('张三'); 

let u2 = name => console.log(name);
u2('李四');

在这里插入图片描述

五、函数的默认值

简单概况: 允许给函数的参数设置默认值。相当于是为函数的参数加了一层保险(如果你没有给对应形参数量的实参的保险),同时为了更好辨别,一般将要设置默认值的放在最后面。

function add (a, b, c=10) {
  return a + b + c;
}
let a1 = add(1,2,3);
let a2 = add(1,2);
console.log(a1); // 6  1+2+3
console.log(a2); // 13 1+2+10

六、函数的reset参数

es6引入rest参数用于获取函数的实参(用来替代arguments)

以下为es5和es6的对比及其效果

// es5
function getUser(){
    console.log(...arguments);
}
getUser('张三','李四','王五');

// es6 的 rest参数
function getAge (a, b, ...c) {
    console.log(a);
    console.log(b);
    console.log(c);  // rest 参数可以是任意名字(符合命名规范)
}
getAge(1,2,3,4,5,6);

在这里插入图片描述

总结

结合es6(一)和es6(二)我们可以知道,常用的es6有const和let、解构赋值、模板字符串、扩展运算符、箭头函数、函数参数的默认值、函数的rest参数(替代arguments)。

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

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

相关文章

大数据时代精准营销是提升品牌竞争力的核心

在营销理论基石渐被撼动和数字时代逐渐兴起的环境下&#xff0c;基于大众市场和大众消费的传统营销理论和方式在受众裂变(碎片化与再中心化)的现实中遇到了瓶颈&#xff0c;传统营销理念和方式在寻找目标受众的过程中已失去了威力。在数字化环境下&#xff0c;如何更好、更精准…

官方烧录软件烧写2023.10版本树莓派镜像

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、下载官方系统二、使用步骤1.打开软件烧写镜像2. ssh是什么&#xff1f;3. 远程控制2.VNC连接3.VNC突然断开&#xff0c;使用外接显示器和鼠标双击打开wifi即…

有关数据集处理的脚本工具【附代码】

在做分类项目的时候(包括目标检测)&#xff0c;经常会涉及到数据集的预处理&#xff0c;这里我将把一些自己写的工具脚本代码开源出来供大家使用&#xff0c;后期也将不定时的更新。 相关功能&#xff1a; 1.分类任务one-hot标签转单标签 2.数据集中各个类别的统计 3.数据集…

ssm+vue的课程网络学习平台管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的课程网络学习平台管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体…

nodejs+vue+elementui酒店客房服务系统mysql带商家

视图层其实质就是vue页面&#xff0c;通过编写vue页面从而展示在浏览器中&#xff0c;编写完成的vue页面要能够和控制器类进行交互&#xff0c;从而使得用户在点击网页进行操作时能够正常。 简单的说 Node.js 就是运行在服务端的 JavaScript。 前端技术&#xff1a;nodejsvueel…

DBCO Sata650,二苯并环辛烷Sata650,Seta-650-DBCO

产品简介&#xff1a; CAS号&#xff1a;N/A 中文名&#xff1a;二苯并环辛烷Sata650 英文名&#xff1a;DBCO Sata650,Seta-650-DBCO 化学式&#xff1a;N/A 分子量&#xff1a;1431.85 纯度标准&#xff1a;95% 供应商&#xff1a;陕西新研博美生物科技有限公司 存储…

接口自动化测试框架搭建【附教程加源码】

1 接口测试 接口测试是对系统或组件之间的接口进行测试&#xff0c;主要是校验数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及相互逻辑依赖关系。 接口自动化相对于UI自动化来说&#xff0c;属于更底层的测试&#xff0c;这样带来的好处就是测试收益更大&#xff…

c++day6(菱形继承、虚继承、多态、模板、异常)

今日任务 1.思维导图 2.编程题&#xff1a; 代码&#xff1a; #include <iostream>using namespace std; /*以下是一个简单的比喻&#xff0c;将多态概念与生活中的实际情况相联系&#xff1a; 比喻&#xff1a;动物园的讲解员和动物表演 想象一下你去了一家动物园&a…

网络安全(黑客技术)—0基础学习手册

目录 一、自学网络安全学习的误区和陷阱 二、学习网络安全的一些前期准备 三、网络安全学习路线 四、学习资料的推荐 想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01; 网络安全可以基于攻击和防御视角来分类…

行业追踪,2023-10-12

自动复盘 2023-10-12 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…

【设计模式】八、桥接模式

文章目录 举例问题分析基本介绍桥接模式在 JDBC 的源码剖析桥接模式的注意事项和细节JDBC 举例 现在对不同手机类型的不同品牌实现操作编程(比如:开机、关机、上网&#xff0c;打电话等)&#xff0c; 传统方法对应的类图&#xff1a; 问题分析 扩展性问题(类爆炸)&#xff…

YOLOv7优化:轻量高效注意力模块Sea_AttentionBlock | ICLR2023|SeaFormer:轻量级语义分割算法,复旦大学和腾讯联合提出

💡💡💡本文独家改进:一种即插即用的通用注意力模块Sea_AttentionBlock ,带有squeeze Axial和细节增强,二次创新引入到YOLOv7增强特征提取能力 Sea_AttentionBlock | 亲测在多个数据集能够实现大幅涨点 收录: YOLOv7高阶自研专栏介绍: http://t.csdnimg.cn/tYI…

Raise抛出异常

raise 是Python中用于手动引发异常的关键字。你可以使用 raise 来触发特定类型的异常&#xff0c;以便在程序的某个位置明确地报告错误。以下是一个示例说明 raise 的用法&#xff1a; def divide(x, y):if y 0:raise ZeroDivisionError("除以零错误&#xff1a;y不能为…

高考600分能上哪些大学 分数线在600以下的大学

大部分学生在高考时最关注一定就是自己的分数最终可以考上哪些大学了&#xff0c;其中600是很多人最关注的一个分数线&#xff0c;那么高于600分的话可以上哪些大学呢&#xff1f;下面就来告诉大家吧。 高考600分能上的大学&#xff1a;湖南大学、西南大学、西安电子科技大学、…

nodejs+vue+elementui大学生心理健康管理系统

简单的说 Node.js 就是运行在服务端的 JavaScript。 前端技术&#xff1a;nodejsvueelementui 前端&#xff1a;HTML5,CSS3、JavaScript、VUE本大学生心理健康管理系统使用简洁的框架结构&#xff0c;专门用于用户咨询心理专家&#xff0c;系统具有方便性、灵活性、应用性。于是…

Facebook广告账户被封?这份防封及申诉指南收好

Facebook广告是海外营销的一大利器&#xff0c;但是随着互联网的发展&#xff0c;有部分不法分子正在利用他进行盈利&#xff0c;导致Facebook官方安全审核日益严格&#xff0c;不少卖家遭遇封号问题&#xff01;这篇文章就来教你如何更好地管理 Facebook广告帐户&#xff0c;实…

【Linux--进程间通信】

进程间通信介绍 进程间通信目的 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程资源共享&#xff1a;多个进程之间共享同样的资源通知事件&#xff1a;一个进程需要向另一个或一组进程发送消息。通知它&#xff08;它们&#xff09;发生了某种事件&#xff08;如…

萤石网络发布家用及商用清洁机器人 积极布局具身智能

10月12日&#xff0c;萤石网络在杭州举行“智无感 净无忧——2023清洁机器人新品发布会”&#xff0c;带来了两款采用具身智能理念研发的清洁服务机器人新品。AI扫拖宝RS20 Pro支持AI智能融合避障&#xff0c;搭载主动切毛滚刷等创新技术&#xff0c;告别传统清洁困扰&#xff…

02Maven核心程序的下载与settings.xml文件的配置,环境变量的配置

Maven核心程序的解压与配置 Maven的下载与解压 Maven官网下载安装包 将下载的Maven核心程序压缩包apache-maven-3.8.4-bin.zip解压到一个非中文且没有空格的目录 Maven的核心配置文件 在Maven的解压目录conf中我们需要配置Maven的核心配置文件settings.xml 配置本地仓库位置…

Websocket升级版

之前写过一个关于websocket的博客&#xff0c;是看书时候做的一个demo。但是纸上得来终觉浅&#xff0c;这次实战后实打实的踩了不少坑&#xff0c;写个博客记录总结。 1.安装postman websocket接口调试&#xff0c;需要8.5以及以上版本的postman 先把以前的卸载&#xff0c…