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.mzph.cn/news/742768.shtml

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

相关文章

vscode插件开发-发布插件

安装vsce vsce是“Visual Studio Code Extensions”的缩写&#xff0c;是一个用于打包、发布和管理VS Code扩展的命令行工具。 确保您安装了Node.js。然后运行&#xff1a; npm install -g vscode/vsce 您可以使用vsce轻松打包和发布扩展&#xff1a; // 打包插件生成name…

一.java介绍和idea基础使用

java技术体系 Java技术体系说明Java SE(Java standard Edition):标准版Java技术的核心和基础Java EE(Java Enterprise Edition):企业版企业级应用开发的一套解决方案Java ME(Java Micro Edition):小型版针对移动设备应用的解决方案&#xff08;认可少&#xff0c;主要是安卓和…

目标跟踪SORT算法原理浅析

SORT算法 Simple Online and Realtime Tracking(SORT)是一个非常简单、有效、实用的多目标跟踪算法。在SORT中&#xff0c;仅仅通过IOU来进行匹配虽然速度非常快&#xff0c;但是ID switch依然非常严重。 SORT最大特点是基于Faster RCNN的目标检测方法&#xff0c;并利用卡尔…

Unity开发中Partial 详细使用案例

文章目录 **1. 分割大型类****2. 与 Unity 自动生成代码协同工作****3. 团队协作****4. 共享通用逻辑****5. 自定义编辑器相关代码****6. 配合 Unity 的 ScriptableObjects 使用****7. 多人协作与版本控制系统友好** 在 Unity 开发中&#xff0c; partial 关键字是 C# 语言提供…

【音视频开发】:RTSP服务器协议内容

一、什么是RTSP协议 RTSP是一个实时传输流协议&#xff0c;是一个应用层的协议。通常说的RTSP包括RTSP协议、RTP协议、RTCP协议。 RTSP协议&#xff1a;负责服务器与客户端之间的请求与相应RTP协议 &#xff1a;负责服务器与客户端之间传输媒体数据RTCP协议&#xff1a;负责提…

使用html+css制作一个发光立方体特效

使用htmlcss制作一个发光立方体特效 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Documen…

Acwing.4261 孤独的照片(贡献法)

题目 Farmer John 最近购入了 N 头新的奶牛&#xff0c;每头奶牛的品种是更赛牛&#xff08;Guernsey&#xff09;或荷斯坦牛&#xff08;Holstein&#xff09;之一。 奶牛目前排成一排&#xff0c;Farmer John 想要为每个连续不少于三头奶牛的序列拍摄一张照片。 然而&…

视觉信息处理与FPGA实现第三次作业-7人表决器

一、模块端口图 二、代码 timescale 1ns / 1nsmodule vote_7(person1,person2,person3,person4,person5,person6,person7,out); input person1,person2,person3,person4,person5,person6,person7 ; output out ; assi…

mac激活pycharm,python环境安装和包安装问题

1.PyCharm到官网下载就行 地址&#xff1a;Other Versions - PyCharm (jetbrains.com) 2.MacOS 下载python环境&#xff0c;地址&#xff1a; Python Releases for macOS | Python.org 3.PyCharm环境配置&#xff1a; 4. 如果包下载不下来可以换个源试试 pip install py…

在Linux/Ubuntu/Debian中使用windows应用程序/软件

Wine 是一个兼容层&#xff0c;允许你在类 Unix 操作系统&#xff08;包括 Ubuntu&#xff09;上运行 Windows 应用程序。 以下是在 Ubuntu 上安装和使用 Wine 的基本步骤&#xff1a; 在 Ubuntu 上安装 Wine&#xff1a; 更新软件包列表&#xff1a; 打开终端并运行以下命令以…

苹果电脑下载crossover对电脑有影响吗 crossover mac 好用吗CrossOver虚拟机 CrossOver打游戏

苹果电脑下载crossover对电脑有影响吗&#xff1f; 在苹果电脑下载安装crossover对电脑没有什么影响&#xff0c;并且可以解决macOS系统不能安装Windows应用程序的问题。相较于虚拟机和双系统而言&#xff0c;crossover安装软件更简单&#xff0c;占用内存也更小。下面我们来看…

Django框架的全面指南:从入门到高级【第128篇—Django框架】

Django框架的全面指南&#xff1a;从入门到高级 Django是一个高效、功能强大的Python Web框架&#xff0c;它被广泛用于构建各种规模的Web应用程序。无论是初学者还是有经验的开发人员&#xff0c;都可以从入门到掌握Django的高级技巧。在本指南中&#xff0c;我们将带你逐步了…

云原生消息流系统 Apache RocketMQ 在腾讯云的大规模生产实践

导语 随着云计算技术的日益成熟&#xff0c;云原生应用已逐渐成为企业数字化转型的核心驱动力。在这一大背景下&#xff0c;高效、稳定、可扩展的消息流系统显得尤为重要。腾讯云高级开发工程师李伟先生&#xff0c;凭借其深厚的技术功底和丰富的实战经验&#xff0c;为我们带…

计算机网络-第4章 网络层(2)

主要内容&#xff1a;网络层提供的两种服务&#xff1a;虚电路和数据报&#xff08;前者不用&#xff09;、ip协议、网际控制报文协议ICMP、路由选择协议&#xff08;内部网关和外部网关&#xff09;、IPv6,IP多播&#xff0c;虚拟专用网、网络地址转换NAT&#xff0c;多协议标…

爬虫 配置charles

1,安装charles(青花瓷) 网上有很多资源这里我也传不上去 2,配置代理 访问控制 监听端口 证书 安装过程&#xff1a;点击help --》SSL proxying --》install charles root certificate --》安装证书 --》选择本地计算机 --》点下一步 --》选择将所有的证书都放入下列存储 -- 》…

java拷贝数组

package com.mohuanan.exercise;public class Exercise {public static void main(String[] args) {int[] arr {1, 2, 3, 4, 5, 6, 7, 8, 8}; //格式化快捷键 CTRL 加 Alt 加 L键// F1截图 F3贴图//调用 copyOfRangeint[] ints copyOfRange(arr, 3, 7);for (int i 0; i &l…

Monitor.TryEnter使用避坑

创建线程的函数 internal class MultiThread {/// <summary>/// 线程的工作函数类型/// </summary>public delegate void WorkProc();/// <summary>/// 创建进程的函数/// </summary>/// <param name"work">进程要执行的函数</par…

代码随想录算法训练营Day44 ||leetCode 完全背包 || 518. 零钱兑换 II || 377. 组合总和 Ⅳ

完全背包 518. 零钱兑换 II 遍历硬币和金额&#xff0c;累加所有可能 class Solution { public:int change(int amount, vector<int>& coins) {vector<int> dp(amount1,0);dp[0]1;for (int i 0; i < coins.size();i){for(int j coins[i]; j < amount;…

中科大计网学习记录笔记(十八):网络层:数据平面:导论

前言&#xff1a; 学习视频&#xff1a;中科大郑烇、杨坚全套《计算机网络&#xff08;自顶向下方法 第7版&#xff0c;James F.Kurose&#xff0c;Keith W.Ross&#xff09;》课程 该视频是B站非常著名的计网学习视频&#xff0c;但相信很多朋友和我一样在听完前面的部分发现信…

从汇编来角度剖析C语言函数调用过程

目录 1.引言 2.寄存器 3.栈帧 4.函数调用前调用者的动作 5.被调用者在函数调用后的动作 6.被调用者返回前的动作 7.调用者在返回后的动作 8.总结 1.引言 当一个c函数被调用时&#xff0c;一个栈帧(stack frame)是如何被建立&#xff0c;又如何被消除的。这些细节跟操作…