Es6解构赋值,熟练掌握作用域

news2024/9/20 16:26:38

5.3 数组的解构赋值 数组的解构赋值是按照前后数据的索引值一一对应的

5.4 前后数据结构也要保持一致,不然解构的可能与原数组解构嵌套不同

5.5 数组解构时的默认值

6 对象的解构赋值 对象的解构赋值是按照key一一解构

7 解构数组,如果有两个值必须写在后面,rest参数

8 解构对象rest参数前写谁就不解构谁

9 解构函数的剩余参数

10函数的形参可以写赋值形式,对象是键值对

11 Js默认字符串前面有一个空字符串拼接

12 扩展运算符


1 全局作用域


解释:var变量是定义在window上

var a = 123;

​ console.log(a); //123

​ console.log(window); //window a: 123

2 函数级作用域


function fn() {

​ var b = 234;

​ console.log(b); //234

console.log(window); //没有b属性,因为它是函数级作用域,有c属性.因为在函数不定义直接使用属于全局变量

​ c = 555;

​ console.log(window); //window c: 555 ,因为在函数不定义直接使用属于全局变量

​ }

​ fn()

3 变量提升


// 变量提升将变量的声明会提升至本作用域的最顶部

​ console.log(a); //undefined

​ var a = 123;

​ //上面代码相当于

​ var a;

​ console.log(a);

​ a = 123;

4  const和let


// let和const声明的变量不存在变量提升 因为let和const声明变量后会将当前代码块转化为一个暂

//时性的死区

​ //暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有

//等到声明变量的那一行代码出现,才可以获取和使用该变量

​ // let声明的变量首次可以不赋值 let声明的变量在相同作用于内不能重复定义, const声明的常量必须

//有默认值 const声明的是常量 不能重新赋值 但是如果值是引用数据类型 数据内部的属性是可以修改

const a = 1;

​ console.log(a);//1

​ a = 2 //报错 无法直接修改常量

​ const obj = {

​ name: ‘张三’

​ }

​ obj.name = ‘李四’;

​ console.log(obj.name); //李四

5 解构赋值


总结:

1 解构赋值就是按照一定的模式将对象或者数组中的数据取出赋值给变量,数组解构按照索引等号两边相对应,对象解构按照key解构,

2 无论是对象的解构赋值还是数组的解构赋值 “等号” 两边的数据类型都要保持一致, 不然是undefined.前后数据结构也要保持一致, 不然解构的可能与原数组解构嵌套不同

5.1 数组类型 ‘’=‘’ 如果前后类型不同是undefined


var arr = [1, 2, 3, 4];

var a, b, c, d = arr //类型不同

console.log(a, b, c); //undefined undefined undefined

console.log(d) //(4) [1, 2, 3, 4]

5.2解构交换变量


var a = 1;

var b = 2;

console.log(a, b);//1 2

var [a, b] = [b, a];

console.log(a, b);// 2 1

5.3 数组的解构赋值 数组的解构赋值是按照前后数据的索引值一一对应的


var arr = [1, 2, 3, 4];

var [a, b, , d] = arr;

console.log(a, b, d); //1 2 4,逗号也算一位

5.4 前后数据结构也要保持一致,不然解构的可能与原数组解构嵌套不同


var arr = [1, [2, 3, [4]]];

var [a, [b, c, [d]]] = arr;

console.log(a, b, c, d); //1 2 3 4

5.5 数组解构时的默认值


var arr = [1, 2, 3, 4, undefined];

var [a, b, c, d, e = 5] = arr; //直接赋值默认值

console.log(a, b, c, d, e);//1 2 3 4 5

let arr = [];//三个空数组,有时候直接用数组长度作为判断条件

arr.length = 3;

console.log(arr); //(3) [empty × 3]

6 对象的解构赋值 对象的解构赋值是按照key一一解构

框架相关

原生JS虽能实现绝大部分功能,但要么就是过于繁琐,要么就是存在缺陷,故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架,两者工作原理上存在共通点,也存在一些不同点,对于校招来说,不需要两个框架都学得特别熟,一般面试官会针对你简历中写的框架进行提问。

在框架方面,生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的,在学习的过程可以结合框架的官方文档

Vue框架

知识要点:
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点:
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

Vue框架*

知识要点:
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-TIQHTFaA-1725995917822)]

React框架

知识要点:
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-OnouMNSt-1725995917824)]

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

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

相关文章

VMware账户授权迁移Broadcom账户-操作指南

前言: VMware被Broadcom收购后,大量的国内VMware企业用户获取技术支持的渠道改变。 特别是授权以及开Case的问题。 这篇文章保姆级教学,从你怎么拨打外国电话(并且告诉你背诵英文短语的方式从400处获取答案,不用交流),怎么获取Site ID,以及如何…

湖仓一体-Paimon篇-简介

简介 Apache Paimon 是一种数据湖的格式,支持使用 Flink 和 Spark 构建实时湖仓架构,用于流式和批处理操作。Paimon 创新性地结合了数据湖格式和LSM结构,将实时流式更新引入数据湖架构。 Paimon 提供以下核心功能: ● 实时更新&a…

游戏开发引擎___unity位置信息和unlit shader(无光照着色器)的使用,以桌子的渲染为例

unity是左手坐标系 1.位置信息 1.1 代码 using System.Collections; using System.Collections.Generic; using UnityEngine;public class positionTest : MonoBehaviour {public Camera Camera;private void OnGUI(){//世界坐标系,GUI里的标签GUI.Label(new Rec…

【智能流体力学】机器学习 (ML) 增强计算流体动力学 (CFD) 的最新进展

这篇综述探讨了通过机器学习 (ML) 增强计算流体动力学 (CFD) 的最新进展。文献系统地分为三个主要类别:数据驱动的代理、物理知情的代理和 ML 辅助数值解。随后,我们重点介绍了 ML for CFD 在关键科学和工程…

【开发工具】IntelliJ IDEA插件推荐:Json Helper——让JSON处理更高效

导语:在Java开发过程中,JSON作为一种轻量级的数据交换格式,被广泛应用于前后端数据交互。今天,我要为大家介绍一款IntelliJ IDEA插件——Json Helper,帮助开发者更高效地处理JSON数据。 一、什么是Json Helper&#x…

部署定时任务每2天清理一次表

1、创建存储过程 create or replace procedure truct authid current_user ---使用“authid Current_user”将存储过程转化为调用者权限 as begin execute immediate truncate table rep.tmp_s_st_busi_send_arc; end; / 2、创建定时任务 begin dbms_scheduler.create…

Java 内存分析及三种初始化

1.Java内存分析: (1)堆:①存放new的对象和数组;②可以被所有的线程共享,不会存放别的对象引用。 (2)栈:①存放基本变量类型(包括这个基本类型的…

【网络安全】-xss跨站脚本攻击实战-xss-labs(1~10)

Level1: 检查页面源代码: function函数: (function(){try{let tn ;if(tn.includes(oem)){Object.defineProperty(document, referrer, {get: function(){return ;}});}else if(tn.includes(hao_pg)){if(!document.referrer.match(tn)){Object.definePro…

合宙低功耗4G模组Air780EX——硬件设计手册01

Air780EX是一款基于移芯EC618平台设计的LTECat1无线通信模组。支持FDD-LTE/TDD-LTE的4G远距离无线 传输技术。另外,模组提供了USB/UART/I2C等通用接口满足IoT行业的各种应用诉求。 一、主要性能 1.1 模块功能框图 1.2 模块型号列表 1.3 模块主要性能 *注: 模组…

计算机毕业设计 智能推荐旅游平台 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…

Java 每日一刊(第3期):Hello World

文章目录 前言Hello World程序是如何执行的Hello World 里有什么本期小知识 阳光洒进窗台,花香伴着书香,静谧而温暖,仿佛时光停驻。 前言 这里是分享 Java 相关内容的专刊,每日一更。 本期将为大家带来以下内容: “…

MFC工控项目实例之十三从文件读写板卡信号名称

承接专栏《MFC工控项目实例之十二板卡测试信号输出界面》 1、在BoardTest.h文件中添加代码 class CBoardTest : public CDialog {public:CBoardTest(CWnd* pParent NULL); // standard constructor... CString NO_Combox[16]; CString strTemp[16];//数据项名称 CString st…

Sentinel 使用案例详细教程

文章目录 一、Sentinel 使用1.1 Sentinel 客户端1.2 Sentinel 控制台1.3 客户端和控制台的通信所需依赖 二、测试 Sentinel 限流规则2.1 启动配置2.2 定义限流资源2.3 配置流量控制规则2.4 运行项目 三、 测试 Sentinel 熔断降级规则3.1 定义资源3.2 配置熔断降级规则3.3 运行项…

[Postman]接口自动化测试入门

文章大多用作个人学习分享,如果大家觉得有不足或错漏的地方欢迎评论指出或补充 此文章将完整的走一遍一个web页面的接口测试流程 大致路径为: 创建集合->调用接口登录获取token->保存token->带着token去完成其他接口的自动化测试->断言-&g…

信息架构的战略视角:驱动数字化转型的设计原则与实践创新

在数字经济快速发展的今天,企业的成功越来越依赖于其信息架构的稳健性和灵活性 数字化转型不仅要求技术创新,更需要架构设计上的深思熟虑。《信息架构:商业智能&分析与元数据管理参考模型》作为信息架构领域的权威指南,为企业…

走心式精密数控车床

当然,让我来为您深入解析一下“走心式精密数控车床”这一话题。一、定义与概述 走心式精密数控车床,也被称为走心式数控车床或走心机,是一种高精度、高效率的金属加工设备。它以其独特的走心式加工方式和精密的数控技术,在精密机械…

基于JAVA+SpringBoot+Vue的中药实验管理系统

基于JAVASpringBootVue的中药实验管理系统 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末附源码下载链接🍅 哈…

【2024】Math-Shepherd:无需人工注释即可逐步验证和强化法学硕士。

搜索词: Math-shepherd: Verify and reinforce llms step-by-step without human annotations P Wang, L Li, Z Shao, R Xu, D Dai, Y Li, D Chen, Y Wu, Z Sui Proceedings of the 62nd Annual Meeting of the Association for …, 2024•aclanthology.org 摘要…

Vue3.0项目实战(四)——大事件管理系统个人中心实现

目录 1. ChatGPT & Copilot 1.1 工具 Github Copilot 智能生成代码的使用 2. 个人中心项目实战 - 基本资料 2.1 静态结构 2.2 校验处理 2.3 封装接口,更新个人信息 3. 个人中心项目实战 - 更换头像 3.1 静态结构 3.2 选择预览图片 3.3 上传头像 4. 个…

国产化数据库挑战及发展趋势

非国产数据库如Oracle、MySQL和MSSQL等在某些领域占据重要地位,但国产数据库的市场份额正在逐步提升,特别是在政策支持和市场需求的双重推动下,国产数据库的替代进程正在加速。 一、国产数据库市场规模 2024年中国数据库市场规模预计为543.1亿…