当前位置: 首页 > 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…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...