见证ES6革命:深入学习let、const、var的区别、解构赋值、箭头函数等常用知识点,开创全新开发模式。

news2025/1/16 11:04:27

let、const、var的区别

  • 使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
  • 使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
  • 使用const声明的是常量,在后面出现的代码块中,不能在修改改常量的值。

var

let

const

函数级作用域

块级作用域

块级作用域

变量提升

不存在变量提升

不存在变量提升

值可改

值可改

值不可改

解构赋值

数组解构赋值

ES6中允许从数组中提取值,按照对应的位置,对应的变量赋值。对象也可以实现解构

示例

   <script>
        // 数组解构赋值 允许从数组中提取值,按照对应的位置,对应的变量赋值
        let ary = [1, 2, 3];
        let [a, b, c, d] = ary;
        // let [a, b, c] = [1, 2, 3];
        console.log(a);//1
        console.log(b);//2
        console.log(c);//3
        console.log(d);//undefined
    </script>

 

 对象解构

 <script>
        // 对象解构 允许我们使用变量的名字匹配对象的属性 匹配成功将对象属性的值赋值给变量
        let person = { name: '王五', age: 20, sex: '男' };
        let { name, age, sex } = person;
        console.log(name);//zhangsan 相当于 let neme = person.name
        console.log(age);//20  相当于 let age = person.age
        console.log(sex);
        // 写法2
        let { name: myName } = person;
        console.log(myName);
    </script>

 

箭头函数

ES6中新增的函数方式。     

语法:

() => {}          // () 还是放形参的地方  {}还是函数体
const fn = () => {}

小技巧:

  • 在箭头函数中函数体如果只有一句代码,且执行结果就是返回值,此时可以省略大括号 {}
  • 如果形参只有一个,可以省略小括号()

示例

<script>
        // 箭头函数是用来简化函数定义语法的
        const fn = () => {
            console.log(123);
        }
        fn();

        // const sum = (num1, num2) => {
        //     return num1 + num2;
        // }
        // 在箭头函数中函数体如果只有一句代码,且执行结果就是返回值,此时可以省略大括号和 return 
        const sum = (num1, num2) => num1 + num2;
        const result = sum(2, 3);
        console.log(result);
        // 如果形参只有一个, 可以省略小括号
        const fun = v => alert(v);
        fun(20);
    </script>

箭头函数中的this指向

箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this

示例 

 <script>
        // 箭头函数不绑定this 也就是说它没有自己的this关键字,如果在箭头函数中使用this
        // this关键字指向箭头函数 定义位置中的this(它父级的this)
        const obj = { name: '张三' }
        function fn() {
            console.log(this);
            return () => {
                console.log(this);
            }
        }
        const resFn = fn.call(obj);// 指向 obj
        resFn();//也是obj 因为这里的箭头函数指向 fn函数但 fn函数指向 obj 所以箭头函数也
        // 指向obj 
    </script>

 

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

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

相关文章

ThingsBoard教程(五十):规则节点解析 创建关系节点Create Relation Node,删除关系节点 Delete Relation Node

创建关系节点 Create Relation Node Since TB Version 2.2.1 根据类型和方向,从所选实体创建到消息发起方的关系。 以下消息发起方类型被允许:资产、设备、实体视图、客户、租、仪表板。 通过元数据键模式查找目标实体,然后在源实体和目标实体之间创建关系。 如果选择的…

AbstractStringBuilder源码

介绍 AbstractStringBuilder这个抽象类是StringBuilder和StringBuffer的直接父类&#xff0c;而且定义了很多方法&#xff0c;因此在学习这两个类之前建议先学习 AbstractStringBuilder抽象类 该类在源码中注释是以JDK1.5开始作为前两个类的父类存在的 abstract class Abstr…

【已解决】使用selenium启动谷歌Chrome浏览器打开指定网站,页面空白,而使用其它浏览器手动打开该网站则正常

问题描述 1、在使用python实现自动化网络爬虫时&#xff0c;我使用到selenium来驱动谷歌Chrome浏览器来打开某一个网页&#xff0c;然后爬取数据&#xff0c;代码如下&#xff1a; from selenium import webdriver import timedriver webdriver.Chrome() driver.get(https://…

基于JavaSpringBoot+Vue+uniapp实现微信小程序新闻资讯平台

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

多模态大模型时代下的文档图像智能分析与处理

多模态大模型时代下的文档图像智能分析与处理 0. 前言1. 人工智能发展历程1.1 传统机器学习1.2 深度学习1.3 多模态大模型时代 2. CCIG 文档图像智能分析与处理论坛2.1 文档图像智能分析与处理的重要性和挑战2.2 文档图像智能分析与处理高峰论坛2.3 走进合合信息 3. 文档图像智…

<SQL>《SQL命令(含例句)精心整理版(2)》

《SQL命令&#xff08;含例句&#xff09;精心整理版&#xff08;2&#xff09;》 跳转《SQL命令&#xff08;含例句&#xff09;精心整理版&#xff08;1&#xff09;8 函数8.1 文本处理函数8.2 数值处理函数8.3 时间处理函数8.3.1 时间戳转化为自定义格式from_unixtime8.3.2 …

案例17:Java代驾管理系统设计与实现开题报告

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

类的加载过程

一、前言   类加载器的技术 二、类的加载过程 2.1 JVM将类加载过程分为三个步骤&#xff1a;装载&#xff08;Load&#xff09;&#xff0c;链接&#xff08;Link&#xff09;和初始化(Initialize)。链接又分为三个步骤&#xff0c;如下图所示&#xff1a; 装载&#xff1a;…

linux命名管道总结

FIFO&#xff0c;也称为命名管道&#xff0c;它是一种文件类型。 1、特点 (1)FIFO可以在无关的进程之间交换数据&#xff0c;与无名管道不同。 (2)FIFO有路径名与之相关联&#xff0c;它以一种特殊设备文件形式存在于文件系统中。 2、原型 (1)#include <sys/types.h> #in…

一篇文章告诉你什么是Java内存模型

在上篇 并发编程Bug起源:可见性、有序性和原子性问题&#xff0c;介绍了操作系统为了提示运行速度&#xff0c;做了各种优化&#xff0c;同时也带来数据的并发问题&#xff0c; 定义 在单线程系统中&#xff0c;代码按照顺序从上往下顺序执行&#xff0c;执行不会出现问题。比…

一图看懂 click 模块:一个通过组合的方式来创建精美命令行界面的包,资料整理+笔记(大全)

本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 click 模块&#xff1a;一个通过组合的方式来创建精美命令行界面的包&#xff0c;资料整理笔记&#xff08;大全&#xff09; &#x1f9ca;摘要&#x1f9ca;模块图&#…

Python篇——数据结构与算法(第一部分)

目录 一、查找 1、顺序查找&#xff1a;也叫线性查找&#xff0c;从列表第一个元素开始&#xff0c;顺序进行搜索&#xff0c;直到找到元素或搜索到列表最后一个元素为止。 2、二分查找&#xff1a;也叫折半查找&#xff0c;从有序列表的初始候选区li[0:n]开始&#xff0c;通…

【远程访问】Linux搭建SVN服务器,并内网穿透实现公网远程访问

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

C++入门预备语法

C入门预备语法 C关键字命名空间C输入&输出初步缺省参数函数重载引用内联函数auto和范围for&#xff08;C11&#xff09;指针空值nullptr C关键字 命名空间 命名空间是一种将变量名、函数名、类名和库名称等封装到一个命名空间域中&#xff0c;与其他域的同名量相隔离&…

【AUTOSAR】【以太网】SomeIpTp

目录 一、概述 二、限制与约束 三、功能说明 3.1 SOME/IP帧头 3.1.1 消息类型字段 3.1.2 偏移字段 3.1.3 更多段标志 3.1.4 示例 3.2 错误分类 3.2.1 开发错误 3.2.2 运行错误 四、API接口 4.1 API定义 4.2 回调接口 4.3 调度接口 一、概述 规范规定了AUTOSAR 基…

知识付费:创客匠人的发展转型之路

互联网时代到来后&#xff0c;知识付费行业以极快的速度崛起&#xff0c;让最早入局的人赚得盆满钵满&#xff0c;同时&#xff0c;也有很多人想进入行业发展&#xff0c;却没有真正打造好自己的平台&#xff0c;无法形成系统成熟的企业。如今&#xff0c;行业发展趋势还在不断…

案例19:Java私房菜定制上门服务系统设计与实现开题报告

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

小型双轮差速底盘实现红外避障功能

1. 功能说明 在R023e机器人车体上安装1个近红外传感器&#xff0c;实现机器人小车避障功能。 2. 电子硬件 在这个示例中&#xff0c;我们采用了以下硬件&#xff0c;请大家参考&#xff1a; 主控板 Basra主控板&#xff08;兼容Arduino Uno&#xff09; 扩展板 Bigfish2.1扩展板…

VS2022 CUDA环境配置

文章目录 安装准备新建项目 安装准备 配置Cuda环境主要分为以下几个步骤 安装VS 这个应该不用太说&#xff0c;直接装最新版安装CUDA 下载地址&#xff1a;Cuda Toolkit安装cuDNN 下载地址&#xff1a;cuDNN archieve 这个安装顺序非常重要&#xff0c;一定是先装VS后装CUDA…

19 # promisify:将回调方法 promise 化

之前写个单独的方法去处理文件读取 function read(filename) {return new Promise((resolve, reject) > {fs.readFile(filename, "utf-8", function (err, data) {if (err) reject(err);resolve(data);});}); }将 node 的 api 快速的转化成 promise 的形式 cons…