个人学习-前端相关(1):ECMAScript 6-变量、模板字符串、解构表达式

前言

由于最近公司有接到一些小程序或者app相关的内容,可能考虑要做一些样例供参考。虽然在20年短暂学习和使用过vue2,但由于时间久远且技术发展太快,需要对一些旧知识进行巩固,新的内容进行学习。

ECMAScript 6简介

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

let和const

ES6中增加了let和const来声明变量。let在es6中推荐优先使用。

let 和var的差别

1、let 不能重复声明

// 报错
function func() {let a = 10;var a = 1;
}// 报错
function func() {let a = 10;let a = 1;
}


2、let有块级作用域,非函数的花括号遇见let会有块级作用域,也就是只能在花括号里面访问。
3、let不会预解析进行变量提升:var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined。但是let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;


4、let定义的全局变量不会作为window的属性:let和const不会污染全局变量

        var RegExp = 100;console.log(RegExp);//100console.log(window.RegExp);//100let RegExp = 100;//const RegExp = 100;console.log(RegExp);//100console.log(window.RegExp);//function RegExp()

模板字符串

比如有一个div我想要js动态的往里面加这些东西,平常的写法是:

    <div></div><script>const div = document.querySelector('div');let id='good';let name='写代码让我快乐';div.innerHTML = "<ul><li><p id="+id+">"+name+"</p></li></ul>";</script>

但是有了模板字符串之后:
使用tab上面那个小点点 "`"将内容包起来,里面的变量使用${变量名}来替换,非常方便。

        const div = document.querySelector('div');let id='good';let name='写代码让我快乐';div.innerHTML= `<ul><li><p id=${id}>${name}</p></li></ul>`// div.innerHTML = "<ul><li><p id="+id+">"+name+"</p></li></ul>";

ES6的解构表达式

一种便捷语法,快速将数组或对象的值拆分并赋值给变量。其中{}表示对象,[]表示数组。

2.2.1数组结构赋值

let [a,b,c] = [1,2,3]
console.log(a)  //1
console.log(b)  //2
console.log(c)  //3//使用默认值作为备选值,数组中对应位置缺失时使用默认值。
let[a,b,c,d=4]= [1,2,3]
console.log(d) //4//使用解构表达式取出数组中的元素
let arr = [11,22,33,4,55]
let [a,b,c,d,e=10] = arr
console.log(a,b,c,d,e) // 11,22,33,4,55

2.2.2对象解构赋值

//新增变量名必须和属性名相同,本质是初始化变量的值为对象中同名属性的值
let {a,b} = {a:1,b:2}  //相当于 let a = 对象.a  let b = 对象.b
console.log(a,b) //1,2//使用解构表达式获取对象的属性值
let person={name:"zhangsan",age:10
}
let{name,age} = person  //相当于 let name = person.name ...
console.log(name,age) //zhangsan

2.2.3应用在方法的参数列表

let arr = [11,22,33,44,55]
function showArr(arr){console.log(arr[0],arr[1],arr[2]) // 11,22,33
}function showArr([a,b,c]){console.log(a,b,c)
}
showArr(arr)//11,22,33

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

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

相关文章

设置Linux开发板开机自启动QT程序的报错解决办法

设置Linux开发板开机自启动QT程序报错解决办法 设置开发板开机自启动QT 打开 /etc/init.d/rsC 文件&#xff0c;添加以下内容 cd / ./my_start_run.shmy_start_run.sh 是自己编写的自启动脚本&#xff0c;内容例如下&#xff1a;(也可以将这些直接写到 /etc/init.d/rsC 文件…

C#算法之归并排序

算法释义&#xff1a;归并排序是一种分治算法&#xff0c;它采用分而治之的策略&#xff0c;将待排序的数组分成更小的部分&#xff0c;递归地对这些部分进行排序&#xff0c;然后将排序好的部分合并起来。它是一种比较稳定的排序算法。排序过程总结如下&#xff1a; 1、分解&a…

请编写一个函数void fun(char *tt,int pp[]),统计在tt字符串中“a”到“z”26个字母各自出现的次数,并依次放在pp所指数组中。

本文收录于专栏:算法之翼 https://blog.csdn.net/weixin_52908342/category_10943144.html 订阅后本专栏全部文章可见。 本文含有题目的题干、解题思路、解题思路、解题代码、代码解析。本文分别包含C语言、C++、Java、Python四种语言的解法和详细的解析。 题干 请编写一个函…

Python基础11-字符串处理

连接字符串 要将字符串连接在一起&#xff1a; greeting "Hello" name "Alice" message greeting ", " name "!" print(message)使用 str.format 进行字符串格式化 要将值插入字符串模板&#xff1a; message "{}, {}…

快来把wordpress图片放到免费的cloudflare R2上去

网站一直是用的wordpress&#xff0c;做了几年uploads下的图片已经大到了几十GB单位&#xff0c;VPS也一路升级&#xff0c;吃不消啊吃不消。 一直在想有什么办法能解决下这一大堆图片&#xff0c;网站逛了一圈发现cloudflare的R2有10G免费空间&#xff0c;而且本来就用的他家的…

Day17.一刷数据结构算法(C语言版) 654最大二叉树;617合并二叉树;700二叉搜索树中的搜索;98验证二叉搜索树

又是破防的一天...... 一.654最大二叉树 又是构造二叉树&#xff0c;昨天大家刚刚做完 中序后序确定二叉树&#xff0c;今天做这个 应该会容易一些&#xff0c; 先看视频&#xff0c;好好体会一下 为什么构造二叉树都是 前序遍历 题目链接&#xff1a;最大二叉树 文章讲解&…

Django框架之原始web框架优化

一、web应用框架简介及手撸web框架 软件开发架构详细&#xff1a;网络编程之网络架构及其趋势 - Xiao0101 - 博客园 (cnblogs.com) 软件开发架构分为两种&#xff1a; c/s架构&#xff1a;客户端软件(client)—服务端软件(server)b/s架构 &#xff1a;浏览器(Browser)------…

电子负载仪的远端控制

前言 最近研究了电子负载仪的远端控制&#xff08;区别于前面板控制&#xff09;&#xff0c;主要是用于程序控制&#xff0c;避免繁琐复杂的人工控制&#xff0c;举了南京嘉拓和艾维泰科的例子。 有纰漏请指出&#xff0c;转载请说明。 学习交流请发邮件 1280253714qq.com …

今日arXiv最热大模型论文:大模型也来看球,还能判断是否犯规

在足球世界&#xff0c;裁判的哨声可谓“千金难买”&#xff0c;因为它能直接决定俱乐部的钱包是鼓是瘪。但球场变化莫测&#xff0c;非常考验裁判的水平。 2022年卡塔尔世界杯上&#xff0c;半自动越位识别技术&#xff08;SAOT&#xff09;闪亮登场&#xff0c;通过12台摄像…

APP推广防作弊策略

背景 为保障下载、使用数量&#xff0c;APP厂商通常会投巨资给第三方渠道&#xff0c;用以推广宣传吸纳更多用户。在这一过程中&#xff0c;见有利可图的内鬼、羊毛党、刷量中介等则会趁势而入&#xff0c;成为刷量推广数据造假的中坚。据一本财经报道称&#xff0c;过千万流量…

企业微信私有化部署对接oauth2.0

1.添加依赖&#xff1a;JustAuth <dependency><groupId>me.zhyd.oauth</groupId><artifactId>JustAuth</artifactId><version>1.16.6</version> </dependency> 2.添加 ElephantAuthSource.java package com.elephant.devop…

玩转nginx的配置文件3

1. limit_req_zone配置限流 limit_req_zone $binary_remote_addr zonemylimit:10m rate10r/s;upstream myweb {server 10.0.105.196:80 weight1 max_fails1 fail_timeout1;}server {listen 80;server_name localhost;location /login {limit_req zonemylimit;proxy_pass http:…

总结反思 持续进步-开源即时通讯(IM)项目OpenIM 新版本release-v3.7发布

背景 过去&#xff0c;我们团队对开源项目的认知较浅&#xff0c;过分追求进度&#xff0c;而忽视了代码的质量和规范。这导致了一些问题&#xff0c;例如部署流程设计不当&#xff1a;流程复杂、不规范&#xff0c;以及Mac与Windows部署的明显缺陷。这些问题不仅给开发者带来了…

第十七章 数据管理和组织变革管理

17.2 变革法则 1&#xff09;组织不变革&#xff0c;人就变。 2&#xff09;人们不会抗拒变革&#xff0c;但抵制被改变。 3&#xff09;事情之所以存在是惯性所致。 4&#xff09;除非有人推动变革&#xff0c;否则很可能止步不前。 5&#xff09;如果不考虑人的因素&#xf…

git撤销更改的门道

1.​git checkout -- 文件 撤销对工作区某文件的修改。 git checkout . 撤销本地所有修改的、没有提交的文件的修改&#xff0c;都返回到原来的状态。 2.​git reset --hard [commit] 将工作区和暂存区的内容强制修改为commit时本地代码库的状态。 3.git reset --mixed [c…

centos上网卡突然找不到了

问题 今天登录centos突然发现ssh连接不上&#xff0c;在虚拟机中输入ifconfig才发现没有找到对应的网卡ens33了 解决 只需要输入两行命令就可以解决 禁用NetworkManager systemctl stop NetworkManagersystemctl disable NetworkManager 然后重启网络systemctl start netwo…

Android Studio初学者实例:RecyclerView学习--模仿今日头条

本案例来自于学校的一个简单的课程实验 先看效果图&#xff0c;可以显然的看到&#xff0c;一些item是不同的布局&#xff0c;而其他布局就是简单的布局嵌套 看一下xml代码&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout …

抽象的代理模式1.0版本

前言&#xff1a; 在阅读Spring Security官方文档时&#xff0c;里面设计到了一种设计模式——代理模式Proxy 众里寻她千百度&#xff0c;蓦然回首&#xff0c;那人却在灯火阑珊处 开始 在之前的文章里陈述了一个观点——编程语言和语言没有区别 现看看我们日常生活中的代理…

力扣爆刷第128天之动态规划五连刷(一个零、零钱兑换、组合)

力扣爆刷第128天之动态规划五连刷&#xff08;一个零、零钱兑换、组合&#xff09; 文章目录 力扣爆刷第128天之动态规划五连刷&#xff08;一个零、零钱兑换、组合&#xff09;终结背包问题&#xff1a;这篇文章和上一篇。动态规划解题步骤&#xff1a;背包问题总结一、474. 一…

垃圾分类子项目三 - 添加oled显示

本文继承自: 垃圾分类子项目2 - 加入舵机控制-CSDN博客 添加 oled 功能: 我们要使用oled&#xff0c;就需要添加 i2c 功能 需要在这个文件中 /boot/orangepiEnv.txt 添加这行&#xff0c;使用 i2c 协议overlaysuart5 i2c3 myoled.c #include <errno.h> #include…