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.hqwc.cn/news/540253.html

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

相关文章

【Python】进阶学习:计算一个人BMI(身体质量指数)指数

【Python】进阶学习&#xff1a;计算一个人BMI&#xff08;身体质量指数&#xff09;指数 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教…

《鸟哥的Linux私房菜》第6章——总结与习题参考答案

目录 一、 简介 二、一些新了解的指令 1.touch- 修改文件时间或创建新文件 2.umask-新建文件/目录的默认权限 3.文件隐藏属性 4.文件特殊权限 5.file-观察文件类型 三、简答题部分 一、 简介 本章介绍了一些常用的文件与目录指令&#xff0c;包括新建/删除/复制/移动/查…

R语言tidycmprsk包分析竞争风险模型

竞争风险模型就是指在临床事件中出现和它竞争的结局事件&#xff0c;这是事件会导致原有结局的改变&#xff0c;因此叫做竞争风险模型。比如我们想观察患者肿瘤的复发情况&#xff0c;但是患者在观察期突然车祸死亡&#xff0c;或者因其他疾病死亡&#xff0c;这样我们就观察不…

智能合约开发基础知识:最小信任机制、智能合约、EVM

苏泽 大家好 这里是苏泽 一个钟爱区块链技术的后端开发者 本篇专栏 ←持续记录本人自学两年走过无数弯路的智能合约学习笔记和经验总结 如果喜欢拜托三连支持~ 专栏的前面几篇详细了介绍了区块链的核心基础知识 有兴趣学习的小伙伴可以看看http://t.csdnimg.cn/fCD5E关于区块…

C# WPF中设置图标时出现TypeConverterMarkupExtension异常

异常内容为&#xff1a;System.Windows.Baml2006.TypeConverterMarkupExtension 是因为有些地方比如菜单和左上角默认的图标等&#xff0c;只能使用ico格式的文件&#xff0c;如果设置的是png格式的文件&#xff0c;就会出现此错误&#xff01;通过在线转ico的方式把png转换一…

数码管动态扫描显示

摸鱼记录 Day_16 (&#xff9f;O&#xff9f;) review 前边已经学习了&#xff1a; 串口接收&#xff1a;Vivado 串口接收优化-CSDN博客 1. 今日摸鱼任务 串口接收数据 并用数码管显示 (&#xff9f;O&#xff9f;) 小梅哥视频&#xff1a; 17A 数码管段码显示与动态扫…

1.绪论

目录 1.1 Web原理基础 1.1.1 Internet与万维网 1.1.2 Web架构 1.2 Web前端技术基础 1.2.1 HTML技术 1.2.2 CSS技术 1.2.3 JavaScript技术 1.3 Web前端新技术 1.3.1 HTML5技术 1.3.2 CSS3技术 1.3.3 jQuery技术 1.4 Web开发工具 1.1 Web原理基础 1.1.1 Internet与万…

Github和TeamCity的持续集成构建

一、简介 TeamCity是JetBrains旗下的一款持续集成[Continuous Integration&#xff0c;简称CI]工具&#xff0c;开箱即用。TeamCity提供一系列特性可以让团队快速实现持续集成&#xff1a;IDE工具集成、各种消息通知、各种报表、项目的管理、分布式的编译等等。 二、安装使用(…

Python实时追踪关键点组成人体模型

项目背景 最近遇到这样一个需求&#xff1a; 1&#xff1a;实时追踪关键点组成人体模型&#xff08;手臂包括三个点&#xff1a;手腕&#xff0c;肘关节&#xff0c;双肩&#xff1b;腿部包括胯骨&#xff0c;膝盖&#xff0c;脚踝&#xff09; 2&#xff1a;运用追踪到的关键…

github 中的java前后端项目整合到本地运行

前言: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供完整代码&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 本文章未…

K8S CNI

OCI基本概念 OCI&#xff0c;Open Container Initiative&#xff0c;开放容器标准&#xff0c;是一个轻量级&#xff0c;开放的治理结构&#xff08;项目&#xff09;&#xff0c;在 Linux 基金会的支持下成立&#xff0c;致力于围绕容器格式和运行时创建开放的行业标准。 OCI…

减资公告重磅上线:批量查询与实时监控,教你如何在公告期洞察企业风险!

官.网地址&#xff1a;合合TextIn - 合合信息旗下OCR云服务产品 新《公司法》将于2024年7月1日起施行。不少企业注意到其中的一大变化&#xff1a;新《公司法》对有限责任公司认缴登记制进行了完善&#xff0c;明确全体股东认缴的出资额由股东按照公司章程的规定自公司成立之日…