当前位置: 首页 > news >正文

【前端】必学知识ES6 1小时学会

1.ES6概述

2.let和const的认识

3.let、const、var的区别

4.模板字符串

5.函数默认参数

6.箭头函数【重点】

​编辑7.对象初始化简写以及案例分析 【重点】

8.对象解构

8.对象传播操作符

9.对象传播操作符案例分析

​编辑 10.数组Map

11.数组Reduce 

12.NodeJS小结

1.ES6概述

ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。

2.let和const的认识

以前都是用var定义常量和变量 

现在使用let定义变量 const定义常量更好的区分

3.let、const、var的区别

这里应该打印0 1 2 3 4 5但是直接打印5了 这是var的一个问题 变量穿透 因为var定义可以是变量也

可以是常量 所以它作为常量来说 这里就穿透了

使用let 定义变量 就不会造成穿透问题

同时我们的常量都是不可以修改的 const可以直接定义常量 不允许修改 

修改常量直接报错

// 在实际开发和生产中,如果是小程序,uniapp或者脚手架中,可以大胆使用let和const

// 在web开发中,建议还是var,有些浏览器不支持ES6

小结:

        1.let和const主要解决 变量穿透 和 常量修改问题

 

4.模板字符串

相比较传统的字符串拼接 ES6的 `${}`更加简洁好用

5.函数默认参数

6.箭头函数【重点】

7.对象初始化简写以及案例分析 【重点】

对象简写案例

8.对象解构

8.对象传播操作符

    <script>// 对象传播操作符 ...var person={name:'taohy',address:'suzhou',link:'csdn',phone:15250,go(){console.log('开始上课了....')}}//解构出来var {name,address,...person2} = person;console.info(name);console.info(address);console.info(person2);</script>

9.对象传播操作符案例分析

<script>// java 后台 // 数据格式 var userPage ={page:10,users:[{},{}],pageNo:1,pageSize:10,total:100}// 异步请求// $.post('/user/search',function(res){})var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};var {users,...userPage2} = userPage;console.log(users);console.log(userPage2);
</script>

 10.数组Map

    <script>let arr = [1,2,3,4,5,6,7];// 需求,对数组中每个数 乘以2// 传统做法let arrNew = [];for(let i = 0; i < arr.length; i++){arrNew.push(arr[i] * 2);}console.info(arrNew);// ES6 Map 自带循环功能 并且会把处理的值回填到对应的位置// var arrNew2 = arr.map(function (ele) {//     return ele * 2; // 必须return// })// 省略var arrNew2 = arr.map(ele => ele * 2);console.info(arrNew2);// map 处理对象的数据 // 实现对象年龄加1var users = [{age:10,name:'小绿'},{age:12,name:'小红'}];//    var usersNew= users.map(function (ele) {//         ele.age = ele.age + 1;//         return ele;//     })// 简写var usersNew = users.map(ele => {ele.age = ele.age + 1;ele.check = true;return ele;});console.info(usersNew);</script>

 

11.数组Reduce 

    <script>let arr = [1,2,3,4];// a=1 b=2 a+b;a=3 b=3 a+b; let result = arr.reduce((a,b) => {return a + b;})console.info(result);// 全部相加 10</script>

12.NodeJS小结

ES6 js新建文件中,在node中可以直接使用

相关文章:

【前端】必学知识ES6 1小时学会

1.ES6概述 2.let和const的认识 3.let、const、var的区别 4.模板字符串 5.函数默认参数 6.箭头函数【重点】 ​编辑7.对象初始化简写以及案例分析 【重点】 8.对象解构 8.对象传播操作符 9.对象传播操作符案例分析 ​编辑 10.数组Map 11.数组Reduce 12.NodeJS小结 …...

【学生成绩管理】数据库示例数据(MySQL代码)

【学生成绩管理】数据库示例数据&#xff08;MySQL代码&#xff09; 目录 【学生成绩管理】数据库示例数据&#xff08;MySQL代码&#xff09;一、创建数据库二、创建dept&#xff08;学院&#xff09;表1、创建表结构2、添加示例数据3、查看表中数据 三、创建stu&#xff08;学…...

【电子通识】什么是物料清单BOM(Bill of Material))

BOM (Bill of Materials)是我们常说的物料清单。BOM是制造业管理的重点之一&#xff0c;用于记载产品组成所需要的全部物料&#xff08;Items&#xff09;。物料需求的计算是从最终产品开始&#xff0c;层层往下推算出部件&#xff0c;组件&#xff0c;零件和原材料的需求量。这…...

接口自动化测试难点:数据库验证解决方案!

接口自动化中的数据库验证&#xff1a;确保数据的一致性和准确性 接口自动化测试是现代软件开发中不可或缺的一环&#xff0c;而数据库验证则是确保接口返回数据与数据库中的数据一致性的重要步骤。本文将介绍接口自动化中的数据库验证的原理、步骤以及示例代码&#xff0c;帮…...

淘宝、1688代购系统;微信代购小程序,代购系统源代码,PHP前端源码演示

电商价格数据监测接口、品牌商品控价接口、商品数据分析接口和比价搜索API接口都是非常实用的电商接口服务&#xff0c;下面我将为您详细介绍这些接口的用途和使用方式。 1.电商价格数据监测接口&#xff08;注册获取请求调用key&#xff09; taobao.item_get-获得淘宝商品详…...

LED驱动控制专用电路

一、基本概述 TM1628是一种带键盘扫描接口的LED&#xff08;发光二极管显示器&#xff09;驱动控制专用IC,内部集成有MCU 数 字接口、数据锁存器、LED 驱动、键盘扫描等电路。本产品质量可靠、稳定性好、抗干扰能力强。 主要适用于家电设备(智能热水器、微波炉、洗衣机、空调…...

为什么 Flink 抛弃了 Scala

曾经红遍一时的Scala 想当初Spark横空出世之后&#xff0c;Scala简直就是语言界的一颗璀璨新星&#xff0c;惹得大家纷纷侧目&#xff0c;连Kafka这类技术框架也选择用Scala语言进行开发重构。 可如今&#xff0c;Flink竟然公开宣布弃用Scala 在Flink1.18的官方文档里&#x…...

scala 实现表达式解析

表达式解析 import org.junit.Testimport scala.collection.mutableclass ExprTestCase {private val orderSource "source_1"private val saleChannel "saleChannel"val datas new mutable.HashMap[String, String]();// p1, source1, sale1, source…...

分布式事务seata的AT模式介绍

分布式事务seata的AT模式介绍 seata是阿里开源的一款分布式事务解决方案&#xff0c;致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式&#xff0c;本文主要介绍AT模式的使用。 seata安装 下载seata服务&#xff0c;官方地址…...

初识Linux(1),看了这篇文章,妈妈再也不用担心我Linux找不到门了。

文章目录 前言1. ls 指令例如&#xff1a;只显示文件名属性ls显示文件详细属性 ls - l 该操作可以简写成ll查看隐藏文件ls -l -a 2.pwd例如&#xff1a;显示当前目录所处的路径类似于windows如下操作: 3.cd 指令例如&#xff1a;改变工作目录相当于windows如下操作 4.whoami 指…...

甲烷产生及氧化

温室气体排放被认为是加速气候变化的重要因素&#xff0c;甲烷(CH4)是仅次于二氧化碳(CO2)的重要温室气体&#xff0c;其百年温室效应潜势是CO2的28倍[1-2]。湿地中的CH4由产甲烷古菌在水体底部或沉积层严格厌氧环境下产生并释放进入水体&#xff0c;产生的CH4向上覆水运输过程…...

Javascript的form表单校验输入框

以下是HTML代码&#xff1a; <form name"myForm" onsubmit"return validateForm()"><label for"name">姓名&#xff1a;</label><input type"text" id"name" name"name"><br><l…...

大数据-之LibrA数据库系统告警处理(ALM-37003 GTM主备不同步或者GTM主备断连)

告警解释 当GTM主实例与GTM备实例连接异常或者GTM主实例未处于同步状态时&#xff0c;产生该告警。 告警属性 告警ID 告警级别 可自动清除 37003 严重 是 告警参数 参数名称 参数含义 ServiceName 产生告警的服务名称 RoleName 产生告警的角色名称 HostName 产…...

python每日一题——4移动0

题目 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0] 示例 2: 输入: nums [0]…...

CAN实验

CAN 寄存器 HAL库函数 代码 #include "./BSP/CAN/can.h"CAN_HandleTypeDef g_can1_handle; CAN_TxHeaderTypeDef g_can1_txheader; CAN_RxHeaderTypeDef g_can1_rxheader;/* STM32F103 TS1 8 TS2 7 BRP 3 波特率&#xff1a;36000 / [(9 8 1) * 4] 500Kbps …...

(一)pytest自动化测试框架之生成测试报告(mac系统)

前言 我们可以通过pytest-html插件来生成测试报告&#xff0c;但是pytest-html插件生成的测试报告不够美观&#xff0c;逼格也不够高&#xff0c;通过allure生成的测试报告是比较美观的&#xff0c;花里胡哨的&#xff0c;能够提升一个level。 allure官网&#xff1a; Allure…...

微服务实战系列之Nginx

前言 Nginx&#xff1f;写了那么多文章&#xff0c;为什么今天才轮到它的表演&#xff1f;那是因为它实在太重要了&#xff0c;值得大书特书&#xff0c;特别对待。 当我们遇到单点瓶颈&#xff0c;第一个idea是&#xff1f;Nginx&#xff1b; 当我们需要反向代理&#xff0c;…...

使用rsync从OpenShift的pod复制文件

环境 Red Hat Enterprise Linux release 8.6 (Ootpa)OCP 4.12.22 准备 安装rsync&#xff1a; yum install rsync 查看pod&#xff1a; [rootapi.kai1123.cp.fyre.ibm.com ~]# oc get pod -n cpd-instance | grep dmc ...... ibm-dmc-1700727413211000-monitor-0 …...

解决Activiti5.22流程图部署在Windows上正常,但在linux上部署后出现中文变方块的问题

总结/朱季谦 楼主最近在做公司的工作流平台&#xff0c;发现一个很无语的事情&#xff0c;Activiti5.22的流程图在Windows环境上部署&#xff0c;是可以正常查看的&#xff0c;但发布到公司的Linux服务器上后&#xff0c;在上面进行流程图在线部署时&#xff0c;发现中文都变成…...

EMG肌肉电信号处理合集(三)

本文主要展示常见的肌电信号预处理的实现&#xff0c;开发环境为matlab。 目录 1 肌电信号低通&#xff0c;高通&#xff0c;带通滤波 2 去除DC 0阶偏置&#xff0c;1阶偏置 3 全波整流 4 信号降采样 5 linear envolope / butterworth 低通滤波器 1 肌电信号低通&#xf…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

【C++】纯虚函数类外可以写实现吗?

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

数据库正常,但后端收不到数据原因及解决

从代码和日志来看&#xff0c;后端SQL查询确实返回了数据&#xff0c;但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离&#xff0c;并且ai辅助开发的时候&#xff0c;很容易出现前后端变量名不一致情况&#xff0c;还不报错&#xff0c;只是单…...