66-ES6:var,let,const,函数的声明方式,函数参数,剩余函数,延展操作符,严格模式

1.JavaScript语言的执行流程

编译阶段:构建执行函数;执行阶段:代码依次执行

2.代码块:{   }

3.变量声明方式var

有声明提升,允许重复声明,声明函数级作用域

访问:声明后访问都是正常的,在声明之前访问值为undefined

(对于变量来说,变量允许使用的范围被称为作用域)

    <script>//for(表达式1;表达式2;表达式3)//表达式1 执行1次//表达式2 执行n+1次//表达式3 执行n次for(var i = 0;i<10;i++){console.log(i);}debugger;//此处可以访问到i变量,可以证明var声明的变量是函数级作用域console.log('循环后输出i变量的值',i)//10</script>

4. ES6新增的变量声明方式let

没有声明提升,不允许重复声明但允许重新赋值,声明块及作用域 

访问:声明前不允许访问

(变量访问时,如果当前作用域不存在,则沿作用域向上级作用域查找,找到即返回,直到全局作用域未找到返回undefined)

    <script>//console.log('let声明变量a:',a);//Cannot access 'a' before initializationlet a = 10;// let a = 100;// Identifier 'a' has already been declareda = 100; //允许重新赋值{let a = 100;//此处通过let声明变量a,作用域仅限于当前代码块内部,所以let声明的变量是块及作用域console.log('代码块中let a=',a);//代码块中let a= 100debugger;//用于调试JS代码}console.log('a',a);//a 100</script>
    <script>for(let i = 0;i<10;i++){console.log(i);//1,2,3,4,5,6,7,8,9}console.log('循环后输出i变量的值',i);//此处访问的是全局变量i,所以报错</script>

5.变量声明方式const

声明前必须复制,不允许重复赋值,块级作用域,不存在变量提升

暂时性死区:声明(编译阶段)到赋值(执行阶段)之间的区域被称为暂时性死区

    <script>/***    - JS中的数据类型*      - 数值类型*      - Number,String,Boolean,Null,Undefined*      - 引用类型*      - Array,Object*  对于引用类型来说,通过地址修改属性的值,不是重新赋值*  const修饰的是变量的特征,而不是对象的特征*///声明时必须赋值const a = 10;{const a = 100;console.log(a);//100}//a = 200;//报错,常量不允许重新赋值console.log(a);//10//对于引用类型来说,变量中存储的地址改变了,才是重新赋值const obj = {name:'张三',age:18}//通过obj修改了name属性的值obj.name = '李四';//obj = [4,5,6];//报错,因为变量的值不能改变console.log(obj);//age:18,name:"李四"</script>

6.函数的声明方式

6.1new Function()构造函数形式

      // new Function()构造函数形式let fn1 = new Function('return 1');console.log(fn1.toString());//function anonymous() {return 1};

6.2function函数声明

声明前置(提升),可以在声明前调用,必须拥有函数名,并且函数名符合标识规范

    <script>//function函数声明fn2();//输出fn2 executedfunction fn2(){console.log('fn2 executed');return 2;}fn2();//输出fn2 executed</script>

6.3函数表达式let fn() = function(){}

    <script>fn3();//报错,var fn3相当于变量提升,值为undefind,不是函数不可以调用var fn3 = function(){console.log('fn3 executed');return 3;}fn3();//fn3 executed</script>

6.4立即执行函数表达式(function() {})()

function前面一定要加(),因为function是关键字,function如果作为一行的第一个字符,则被认为函数声明结构

    <script>//立即执行函数表达式,是特殊的函数表达式形式,声明后立即调用,特性与函数表达式方式相同//此处只需要证明function不是第一个字符(function(){console.log('fn4 executed');})();</script>

7.函数参数

函数定义时被称为形参,函数调用时参数被称为实参;实参的数量=形参的数量时依次赋值;实参的数量>形参的数量时依次赋值多余的实参被忽略;实参的数量<形参的数量时依次赋值未被赋值的形参为undefined

    <script>//形参默认值function fn(a,b,c,d=500){console.log(a,b,c,d);}fn(1,2,3,4);//输出1,2,3,4//当实参的值为undefined时执行默认值fn(1,2,3,undefined,null);//输出1,2,3,500</script>

8.剩余参数...args在函数定义时,被称为剩余函数​​​​​​​

函数声明时使用;ES6新特性,用于替换arguments对象 

特征:只能有一个剩余函数;必须是最后一个参数; 是数组,可以使用数组的方法

    <script>function add(a,b,...args){console.log(a,b,args);}add(1,2,3,4,5,6,7,8,9,10);</script>

    <script>function add(a,b,...args){console.log(a,b,...args);}add(1,2,3,4,5,6,7,8,9,10);//输出1 2 3 4 5 6 7 8 9 10</script>

 9.延展操作符...变量

可以展开的是可迭代对象(ES6中新增的内容),延展操作符可以展开变量的内容

延展操作符与剩余参数二者格式相同,都是...变量;在函数调用时使用,是延展操作符 ,将可迭代对象展开

    <script>function add(a,b){console.log(a,b);}add(1,2);//输出1,2add([3,4]);//输出[3, 4] undefined//赋值给a变量,b变量没有赋值let arr = [3,4];add(...arr);//输出3,4let str = 'xy';add(...str);//x ylet obj = {name:'zhangsan',age:18}//add(...obj);//报错//默认情况下,对象不能展开let array = ['a','b','c'];console.log(array);//['a', 'b', 'c']console.log(...array);//a b c//可迭代对象中每一个项作为参数传递给函数console.log('a','b','c');//a b c//...array效果相同</script>

10.严格模式

就是在代码的头部加上use strict ​​​​​​​

在严格模式下,函数的arguments和当前函数定义的形参是没有映射关系,并且禁用arguments.callee和arguments.callee.caller(caller是function的属性)

arguments变成类数组对象 (特征像数组,拥有length属性,本质是一个对象)

    <script>function fn3(a,b,c){"use strict";//严格模式的开关,如果解释器识别则进入严格模式console.log(arguments);console.log(a,b,c);}fn3(4,5,6);</script>

 函数的形参拥有默认值函数内部自动进入严格模式 

    <script>function fn3(a,b,c=100){console.log(arguments);console.log(a,b,c);}fn3(4,5,6);</script>

两种代码输出结果一致 

​​​​​​​​​​​​​​

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

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

相关文章

拿下边界机器进行内网渗透的方案

拿下机器后&#xff0c;使用代理访问内网 windows环境&#xff1a;reGeorg与proxifier Linux环境&#xff1a;reGeorg与proxychains&#xff0c; 使用nmap等工具进行扫描&#xff0c;发现web服务的主机和其它信息。有时这些边界机器上会记录一些 内网服务器上的一些信息&…

QT C++实现点击按键弹出窗口并显示图片/视频|多窗口应用程序的设计和开发

一、介绍 首先&#xff0c;QT界面开发中主要大体分为2种多窗口的形式&#xff1a; 嵌入式&#xff1a; 新生成的窗口嵌入在主窗口内部独立窗口&#xff1a; 以弹窗形式的新窗口生成和展示 这里就讲解最简单的&#xff1a;点击案件后&#xff0c;跳出一个新窗口 二、代码实…

利用FFMPEG 将RTSP流的音频G711 转码为AAC 并 推流到RTMP

之前我们的视频转码项目中 是没有加入音频的 现在 需要加入音频 &#xff0c;由于RTMP只支持AAC的 音频流 而有的RTSP流的音频编码并不是AAC 大多数都是G711编码 还分为G711A 和G711U 之前用ffmpeg命令行可以直接 完成转码 并推送到RTMP 但是考虑到无法获取更详细的状…

Qt篇——QTableWidget保存表格数据到Excel文件中,读Excel内容到QTableWidget

表格和excel例子如下图所示&#xff1a; 一、QTableWidget保存表格数据到Excel文件中 代码如下&#xff1a; &#xff08;pro文件中添加QT axcontainer&#xff09; #include <QAxObject>void MainWindow::saveTableToExcel() {QDateTime current_date_time QDateTi…

六、MQTT源码简单浏览

1、MQTT程序分层 1.1、MQTT客户端工作流程 (1)连接MQTT服务器。 (2)客户端向服务器发送订阅主题。 (3)客户端等待MQTT的消息。 (4)客户端向服务器发送消息。 2.2、MQTT程序结构 APP层 while循环或一个进程中&#xff1a;等待消息&#xff0c;处理消息&#xff1b; 发送消…

[法规规划|方案实操]数据资产入表,城投将获融资新渠道

2023年8月&#xff0c;财政部发布了《企业数据资源相关会计处理暂行规定》&#xff0c;并从2024年1月1日开始实施&#xff0c;标志着数据资产正式纳入企业的资产负债表。这一举措被视为数据资产从理论走向实践的重大一步。 数据资产入表对城投运营模式的影响 随着全球经济格局…

Vue3速成

文章目录 day 11. 创建vue3工程3. 响应式数据4. 计算属性 day 25. watch 监视6. watchEffect7. 标签的ref属性8. 回顾TS中的接口_泛型_自定义类型 day 1 1. 创建vue3工程 相关代码如下&#xff1a; ## 创建vue工程 npm create vuelastest## 安装node_modules npm install //…

JSON 文件里的 “$schema” 是干什么用的?

最近我在做一些前端项目&#xff0c;我发现有的配置文件&#xff0c;比如 .prettierrc.json 或者 tsconfig.json 里面都会看到一个 $schema 字段&#xff0c;有点好奇&#xff0c;就查了一下。 什么是 JSON Schema JSON Schema是一种基于JSON (JavaScript Object Notation) 的…

【Leetcode】2369. 检查数组是否存在有效划分

文章目录 题目思路代码结果 题目 题目链接 给你一个下标从 0 开始的整数数组 nums &#xff0c;你必须将数组划分为一个或多个 连续 子数组。 如果获得的这些子数组中每个都能满足下述条件 之一 &#xff0c;则可以称其为数组的一种 有效 划分&#xff1a; 子数组 恰 由 2 个…

MATLAB算法实战应用案例精讲-【图像处理】三维重建(最终篇)

目录 前言 相机定标和三维重建 针孔相机模型和变形 三维成像 一、机器视觉系统组成

大数据智能化-长视频领域

随着数字化时代的到来&#xff0c;长视频领域的发展迎来了新的机遇和挑战。在这一背景下&#xff0c;大数据智能化技术的应用成为长视频行业提升用户体验、优化运营管理的重要手段之一。本文将从优爱腾3大长视频背景需求出发&#xff0c;分析静态资源CDN、视频文件存储与分发、…

网络安全、信息安全、计算机安全,有何区别?

这三个概念都存在&#xff0c;一般人可能会混为一谈。 究竟它们之间是什么关系&#xff1f;并列&#xff1f;交叉&#xff1f; 可能从广义上来说它们都可以用来表示安全security这样一个笼统的概念。 但如果从狭义上理解&#xff0c;它们应该是有区别的&#xff0c;区别在哪呢&…

力扣hot100题解(python版36-40题)

36、二叉树的中序遍历 给定一个二叉树的根节点 root &#xff0c;返回 它的 *中序 遍历* 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,2]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入&am…

tcping实用小工具

Tcping实用小工具命令详解 一、tcping介绍 tcping&#xff1a;tcping命令基于tcp协议监控&#xff0c;可以从较低级别的协议获得简单的&#xff0c;可能不可靠的数据报服务。 原则上&#xff0c;TCP应该能够在从容硬线连接到分组交换或电路交换网络的各种通信系统之上操作。 …

【机器学习基础】层次聚类-BIRCH聚类

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;机器学习 欢迎订阅&#xff01;相对完整的机器学习基础教学&#xff01; ⭐特别提醒&#xff1a;针对机器学习&#xff0c;特别开始专栏&#xff1a;机器学习python实战…

企业微信私有部署:实现高效沟通与信息安全

随着移动互联网的快速发展&#xff0c;企业微信作为一种高效、便捷的通讯工具&#xff0c;已经成为了众多企业的首选。然而&#xff0c;对于一些对信息安全有特殊要求的大型企业而言&#xff0c;使用公有版企业微信并不能满足其安全需求。因此&#xff0c;企业微信私有部署应运…

matplotlib.animation 3d姿态动画

目录 演示效果&#xff1a; 演示代码&#xff1a; 保存为gif 演示效果&#xff1a; 演示代码&#xff1a; import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from matplotlib.animation import FuncAnimation# 定义人体关键点…

【c++入门】纯粹的五位偶数

说明 纯粹偶数指的是一个数的各个位都是偶数的数&#xff0c;比如&#xff1a;24686&#xff1b;请编程求出10000~n中&#xff0c;所有的五位的纯粹偶数有多少个&#xff1f; 输入数据 一个整数n&#xff08;n为一个5位的整数&#xff09; 输出数据 一个整数&#xff0c;代…

网络防御第6次作业

防病毒网关 按照传播方式分类 病毒 病毒是一种基于硬件和操作系统的程序&#xff0c;具有感染和破坏能力&#xff0c;这与病毒程序的结构有关。病毒攻击的宿主程序是病毒的栖身地&#xff0c;它是病毒传播的目的地&#xff0c;又是下一次感染的出发点。计算机病毒感染的一般过…

Java基础 - Stream 流:Stream API的中间操作

在上一篇博客中&#xff0c;我介绍了构建 Stream 流的多种方式&#xff0c;以及 Stream 流的特点和优势。如果你还没有阅读&#xff0c;你可以点击这里查看。 Java基础 - Stream 流&#xff1a;构建流的多种方式 在这篇博客中&#xff0c;我将探索 Stream API 的中间操作&…