ES6(一):let和const、模板字符串、函数默认值、剩余参数、扩展运算符、箭头函数

一、let和const声明变量

1.let没有变量提升,把let放下面打印不出来,放上面可以

<script>console.log(a);let a=1;</script>

2.let是一个块级作用域,花括号里面声明的变量外面找不到

<script>console.log(b);if(true){let b=1;}//undefinedif(true){let b=1;}console.log(b);//undefinedconsole.log(b);if(true){var b=1;}//undefinedif(true){var b=1;}console.log(b);// 1</script>

3.不能重复声明

<script>let a=1;let a=2;console.log(a);</script>

var会覆盖,但是let会报错,可以避免写代码的时候重复命名问题

4.const

const赋值之后,变量值就不能再修改了

<script>const a=1;a=2;console.log(a);//报错</script>
const people={name:'ttt'}people.name='hhh';console.log(people.name);// hhhconst people={name:'ttt'}people={age=18}console.log(people.age);// 报错

const也能声明对象这种常量,不可以修改对象,可以修改对象里的一些属性

5.let和const相同点和不同点

相同:都不能重复声明、是块级作用域、没有变量提升

不同:const赋值之后不能修改

6.优点

(1)for循环用let比var好

<script>var a=[];for(var i=0;i<10;i++){a[i]=function(){return i;}}console.log(a[5]());</script>

最后输出来是个10,我悟了,学js的时候遇到过这个问题当时没搞懂,i是全局变量的意思是,如果i变了,其他地方的i都变(整个页面都是这一个i),上面这段输出的不管a[几]都是10。下面第一段i没走完就去赋值,结果正常,第二段没有变量提升所以也正常。

var a=[];for(var i=0;i<10;i++){a[i]=i;}console.log(a[1]);
const a=[];for(let i=0;i<10;i++){a[i]=function(){return i;}}console.log(a[1]());

for里面肯定不用const,后面++会被改

(2)不会污染全局变量

let RegExp=10;console.log(RegExp);//10console.log(window.RegExp);//f RegExp[]

window的对象不会被改

总结:默认情况下用const,除非你要修改再用let

二、模版字符串

<script>var p=document.querySelector('p');var id='hh';const text='lilili';div.innerHTML="<ul><li><p id="+id+">"+text+"</p></li></ul>";</script>

以前写是这样的,要拼接字符串,升级版:

var div=document.querySelector('div');const id='hh';const text='lilili';div.innerHTML=`<ul><li><p id=${id}>${text}</p></li></ul>`;

id和text用${}包起来,这种方法类似在body写

三、函数默认值、剩余参数、扩展运算符

1.函数默认值

以前写一个加和函数的话:a b 如果没有输入得有一个默认值。

<script>function add(a,b){a=a||10;b=b||20;return a+b;}console.log(add());</script>

ES6中:

 <script>function add(a=10,b=20){return a+b;}console.log(add(20,30));</script>

可以直接在()中写

function add(a,b=20){return a+b;}console.log(add(20));//40?function add(a=20,b){return a+b;}console.log(add(20));//报错

老师讲的是只给一个值,像第一种a可以给到,b有值,能出结果,第二种肯定不行,但是我浏览器上第一种也不行,都是NaN

function zhi(c){return c+5;}function add(a=zhi(4),b=20){return a+b;}console.log(add());//29

默认值也可以用函数来写。

2.剩余参数

以前我们传参数的时候,不确定有几个参数值不是就用arguments伪数组来代替吗,如下:

<script>let obj={title:'算法',name:'ttt',age:18}function pick(obj){//对象肯定得给我传进来,后面你选择了啥不一定let result=Object.create(null);//创建一个对象,最后这个函数得把函数返回出去for(var i=1;i<arguments.length;i++)//从1开始,0是对象{//arguments[i]是name 和age;result[arguments[i]]=obj[arguments[i]];//arguments[i]才是里面的值}return result;}let hh=pick(obj,'name','age');//把obj对象中的name、age用pick方法选出来,存到hh对象中去console.log(hh);</script>

es6中:用...具名参数指定剩余参数

function pick(obj,...keys){//keys可以随便取//对象肯定得给我传进来,后面你选择了啥不一定let result=Object.create(null);for(let i=0;i<keys.length;i++)//从0开始{//keys[i]是name 和age;result[keys[i]]=obj[keys[i]];//keys[i]才是里面的值}return result;}let hh=pick(obj,'title','age');//把obj对象中的name、age用pick方法选出来,存到hh对象中去console.log(hh);

区别就是...是真数组,arguments是伪数组;obj对应let hh=pick(obj,'title','age');中的obj,所以i就从1开始了。

3.扩展运算符

剩余参数是把多个独立的合并到一个数组中去,扩展运算符就是把一个数组分割,并将各个项作为分离的参数给函数。

(1)以前我们想要获取两个数组中最大值的时候用apply

let a=[1,2,3,4];let b=[1,3,5,2];console.log(Math.max.apply(a,b));//5

es6:不再用apply了

let b=[1,3,5,2];console.log(Math.max(...a));//5
let b=[1,3,5,2];let a={c:1,...b}console.log(a);

a那里再...就不行了

四、箭头函数

1.箭头函数的语法

用=>代替之前的function。

// let arr=function(a,b){//     return a+b;// }let arr=(a,b)=>a+b//两个形参必须加()console.log(arr(10,20));

没有参数的情况:

let arr=()=>'hh'console.log(arr(10,20));

输出是个数组的话得用()包起来

// let arr=id=>{//     return{//         id:'id',//         name:'hh'//     }// }let arr=id=>({ id:'id',name:'hh'});let obj=arr(1);console.log(obj);

2.对象中的函数和箭头函数

 let people={name:'hh',eat:function(food){console.log(this.name+'吃了'+food);},eat2:food=>console.log(people.name+'吃了'+food),eat3:(food){console.log(people.name+'吃了'+food);}}people.eat3('chincken');

3.箭头函数的this指向

function的this就是看外面是谁,箭头函数的this就得往外翻两层

箭头函数没有this指向,箭头函数内部this只能通过查找作用域链来确定。

例1:

let Person = {name: 'zzy',age: 18,getAge: function () {console.log(this.age);}
}
Person.getAge();  //18
let Person = {name: 'zzy',age: 18,getAge: () => {console.log(this.age);}
}
Person.getAge();  //undefined

用function的时候,this指向的就是这个函数的调用者,但是用箭头函数,this就得翻两层,第二个指向外面的外面就是window,window没有age属性。

例2:

let Dj = {id: 007,drop: function () {document.addEventListener('click', function () {console.log(this);  //documentthis.dance();})},dance: function () {console.log('drop the beat');}
}
Dj.drop();  //报错

这是一个dj对象,调用dj.drop,点击document之后发生事件,调用者是document,所以this指向document,而document没有dance方法

let Dj = {id: 007,drop: function () {document.addEventListener('click', () => {console.log(this);  //Djthis.dance();})},dance: function () {console.log('drop the beat');}
}
Dj.drop();  //drop the beat

点击之后因为有箭头函数,this就得往外翻两个大括号到dj里面,有dance这个方法

let Dj = {id: 007,drop: () => {document.addEventListener('click', () => {console.log(this);  //windowthis.dance();})},dance: function () {console.log('drop the beat');}
}
Dj.drop();  //报错

现在是往外翻四次,到了window 里面,没有dance方法

例3:

(es5的)中bind是让newfn复制一份fn过来,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用。所以再次调用fn还是指向window

let people={name:'hh',color:'pink'}function fn(){console.log(this);return ()=>{console.log(this);}}fn();let newfn=fn.bind(people);newfn();
//Window {window: Window, self: Window, document: document, name: '', location: Location, …}{name: 'hh', color: 'pink'}

4.箭头函数的注意事项

1.箭头函数内部没有arguments了(arguments 是一个伪数组对象。代表传给一个function的参数列表。)this都指向window 了,arguments是外两层了不能用,没有外一层了。

2.箭头函数不能使用new关键字来事例化对象,function 是一个对象,但是箭头函数其实不是一个对象,是一个语法糖。

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

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

相关文章

el-table的border属性失效问题解决方案

目录 问题&#xff1a; 使用的代码&#xff1a; 官方文档的说明&#xff1a; 可能的问题所在&#xff1a; 关于使用了作用域插槽&#xff1a; a.自定义内容的样式覆盖&#xff1a; b.表格结构的改变&#xff1a; 解决方案&#xff1a; 通过css样式解决&#xff1a; 下面…

聚酰亚胺PI材料难于粘接,用什么胶水粘接?那么让我们先一步步的从认识它开始(一)

聚酰亚胺PI的基本概念 聚酰亚胺&#xff08;Polyimide&#xff0c;简称PI&#xff09;是一种重要的高性能聚合物材料。是指主链上含有酰亚胺环的一类聚合物&#xff0c;是综合性能最佳的有机高分子材料之一。它具有最高的阻燃等级&#xff08;UL-94&#xff09;&#xff0c;以及…

Editor.md-编辑器

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

学生时期学习资源同步-1 第一学期结业考试题8

原创作者&#xff1a;田超凡&#xff08;程序员田宝宝&#xff09; 版权所有&#xff0c;引用请注明原作者&#xff0c;严禁复制转载

云服务器2核4G配置,阿里云和腾讯云哪个便宜?性能更好?

租用2核4G服务器费用多少&#xff1f;2核4G云服务器多少钱一年&#xff1f;1个月费用多少&#xff1f;阿里云2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年&#xff1b;腾讯云轻量2核4G服务器5M带宽165元一年、252元15个月、540元三…

搭建谷歌Gemini

前言 Gemini是Google AI于2023年发布的大型语言模型&#xff0c;拥有强大的文本生成、理解和转换能力。它基于Transformer模型架构&#xff0c;并使用了大量文本和代码数据进行训练。Gemini可以执行多种任务&#xff0c;包括&#xff1a; 生成文本&#xff1a;可以生成各种类…

Qt/QML编程之路:基于QWidget编程及各种2D/3D/PIC绘制的示例(45)

关于使用GWidget,这里有一个示例,看了之后很多图形绘制,控件使用,及最基本的QWidget编程都比较清楚了。ui的绘制: 运行后的界面如 工程中有非常丰富的关于各种图形的绘制,比如上图中circle,还有image。有下面一段readme的说明: # EasyQPainter Various operation pra…

css超出部分显示省略号

目录 前言 一、CSS单行实现 二、CSS多行实现&#xff08;CSS3出的&#xff0c;兼容性需要注意&#xff09; 三、微信小程序超过2行出现省略号实现 四、JavaScript脚本实现 前言 CSS文本溢出就显示省略号&#xff0c;就是在样式中指定了盒子的宽度与高度,有可能出现某些内…

“antd“: Unknown word.cSpell

你遇到的问题是 VS Code 的 Code Spell Checker 插件在检查拼写时&#xff0c;将 "antd" 标记为未知单词。"antd" 是 Ant Design 的缩写&#xff0c;是一个流行的 React UI 库&#xff0c;不是一个英语单词&#xff0c;所以 Spell Checker 会将其标记为错误…

Linux的一些常用指令

一、文件中 r w x - 的含义 r&#xff08;read&#xff09;是只读权限&#xff0c; w&#xff08;write&#xff09;是写的权限&#xff0c; x&#xff08;execute&#xff09;是可执行权限&#xff0c; -是没有任何权限。 二、一些指令 # 解压压缩包 tar [-zxvf] 压缩包名…

Selenium 学习(0.20)——软件测试之单元测试

我又&#xff08;浪完&#xff09;回来了…… 很久没有学习了&#xff0c;今天忙完终于想起来学习了。没有学习的这段时间&#xff0c;主要是请了两个事假&#xff08;5工作日和10工作日&#xff09;放了个年假&#xff08;13天&#xff09;&#xff0c;然后就到现在了。 看了下…

hadoop报错:HADOOP_HOME and hadoop.home.dir are unset. 解决方法

参考&#xff1a;https://blog.csdn.net/weixin_45735242/article/details/120579387 解决方法 1.下载apache-hadoop-3.1.0-winutils-master 官网下载地址&#xff1a; https://github.com/s911415/apache-hadoop-3.1.0-winutils win配置系统环境&#xff1a; 然后重启idea…

Java优先级队列(堆)

&#x1f435;本篇文章将对优先级队列&#xff08;堆&#xff09;的相关知识进行讲解 一、优先级队列 队列是一种“先入先出”的数据结构&#xff0c;但有时操作的数据带有优先级&#xff0c;需要优先处理&#xff0c;这时普通的队列就不能满足需求。比如&#xff1a;在排队取…

(vue)Module Error (from ./node_modules/eslint-loader/index.js)

(vue)Module Error (from ./node_modules/eslint-loader/index.js) 参考&#xff1a;解决参考

mac安全干净卸载Anaconda3

使用which python显示当前使用的是/Users/username/anaconda3/bin/python 现在想卸载Anaconda&#xff0c;恢复使用mac系统自带的Python 删除隐藏文件目录 rm -rf ~/.anaconda修改~/.bash_profile文件&#xff0c;将anaconda相关删除 也有可能不是~/.bash_profile而是~/.zs…

现代DevOps如何改变软件开发格局

在软件开发的早期&#xff0c;该过程通常是开发人员编写代码&#xff0c;再将其交给质量保证&#xff08;QA&#xff09;进行测试。这种瀑布开发方法可能会导致质量问题和延迟&#xff0c;因为问题是在周期后期发现的。 一、了解DevOps和测试左移 DevOps是Development和Opera…

OCR-free相关论文梳理

引言 通用文档理解&#xff0c;是OCR任务的终极目标。现阶段的OCR各种垂类任务都是通用文档理解任务的子集。这感觉就像我们一下子做不到通用文档理解&#xff0c;退而求其次&#xff0c;先做各种垂类任务。 现阶段&#xff0c;Transformer技术的发展&#xff0c;让通用文档理…

Android App冷启动耗时优化

Android应用启动过程 Android应用启动过程&#xff0c;主要包含app::onCreate及执行前的Application阶段及Activity::onCreate执行之后的Activity阶段&#xff0c;以及两个阶段之间的间隙handleMessage阶段和最终页面渲染上屏完成前数据加载阶段四个区间组成。 具体来看&#x…

SpringBlade error/list SQL 注入漏洞复现

0x01 产品简介 SpringBlade 是一个由商业级项目升级优化而来的 SpringCloud 分布式微服务架构、SpringBoot 单体式微服务架构并存的综合型项目。 0x02 漏洞概述 SpringBlade 框架后台 /api/blade-log/error/list路径存在SQL注入漏洞,攻击者除了可以利用 SQL 注入漏洞获取数…

【SpringBoot】自定义工具类实现Excel数据新建表存入MySQL数据库

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》《项目实战》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 …