ES6(声名、解构)

news2024/10/6 4:09:17

参考文档:

ES6 入门教程https://es6.ruanyifeng.com/

注意:内容较多:只看引用部分的内容即可(代码一眼过搭配理解)

一、变量声明

1. let

let声名的变量只在所处于的块级有效

let a = 10;
if (true) {
  let b = 20;
  console.log(b); //可以输出
  if (true) {
    let c = 30;
    console.log(c); //可以输出
  }
  console.log(c); //报错
}
console.log(a);
console.log(b); //报错
for (let i = 0; i < 2; i++) {}
console.log(i);
//var声名则是2:因为2才会终止循环
//let声名则是报错:因为无法获取块级内部的i

使用let声名变量不能变量提升

console.log(a); //报错 not defined
let a = 20;
console.log(a); //提升变量但是没有赋值
var a = 20;

let声名变量具有暂时性死区(TDZ)

由于没有变量提升引起

    <script>
      var num = 123;
      if (true) {
       console.log(num); //会报错:因为使用let声名所以必须先声明再调用
       let num = 20;
      }
  </script>

 不允许重复声名

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}
function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

 2 了解块级作用域

ES5中的没有块级作用域:导致很多时候变量提升引起的变量替换(行为)

在普通循环中特别容易导致泄露成为全局变量

块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

ES6 的块级作用域必须有大括号,如果没有大括号,JavaScript 引擎就认为不存在块级作用域。

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

ES6中块级作用域:体现在声名上(let、const)

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

函数也只声名在当前作用域的顶层

// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}

2. const

const声明一个只读的常量:注意是不可以改变的变量

同样不可以重复声名

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.
var message = "Hello!";
let age = 25;

// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

 const的作用域与let命令相同:只在声明所在的块级作用域内有效

注意:不允许只声名不赋值 

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

 const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

 二、解构赋值

1. 数组解构

ES6允许为所有数组元素直接赋值

        //原始数组赋值
        let a = 1;
        let b = 2;
        let c = 3;
        //解构赋值
        let [a, b, c] = [1, 2, 3];

当没有对应的结构值,就会解构失败:没有解构的变量值就等于undefined

变量>值

let [foo] = [];
let [bar, foo] = [1];

不完全解构 :值>变量(但是可以解构成功)

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

 解构赋值允许指定默认值。

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

赋值数组成员如果是undefined不能解构,如果成员是null,则会生效

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

 默认值是一个表达式,那么这个表达式是惰性求值的

因为x能取到值,所以函数根本不会执行

function f() {
  console.log('aaa');
}

let [x = f()] = [1];

默认值可以引用解构赋值的其他变量,但该变量必须已经声明

如果解构就用解构值,否则就用默认值

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

 2. 对象解构

直接解构

对象次序不同同样不影响解构

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

结构失败:变量值为undefined

let {foo} = {bar: 'baz'};
foo // undefined

 同样可以给对象属性值解构

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

 对象解构可以用于嵌套

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

 存在默认值

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

 

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

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

相关文章

人工智能 AI 绘画发展史

到了去年4月, 著名人工智能团队OpenAI 也发布了新模型 DALLE 2代&#xff0c;该名称来源于著名画家达利&#xff08;Dal&#xff09;和机器人总动员&#xff08;Wall-E&#xff09;, 同样支持从文本描述生成效果良好的图像. 而很多读者对AI绘画开始产生特别的关注, 或许是从以下…

有趣的Hack-A-Sat黑掉卫星挑战赛——AES加密通信链路侧信道攻击leaky

国家太空安全是国家安全在空间领域的表现。随着太空技术在政治、经济、军事、文化等各个领域的应用不断增加&#xff0c;太空已经成为国家赖以生存与发展的命脉之一&#xff0c;凝聚着巨大的国家利益&#xff0c;太空安全的重要性日益凸显[1]。而在信息化时代&#xff0c;太空安…

如何将Springboot项目通过IDEA打包成jar包,并且转换成可执行文件

首先在IDEA打开你的项目&#xff0c;需要确认项目可以正常运行&#xff0c;然后点击页面右侧的Maven,运行Lifecycle下的package, 此时在项目的target目录下就可以看到一个jar包 这个时候你可以在jar包所在目录下执行cmd窗口&#xff0c;运行 java -jar campus-market-0.0.1-S…

BUUCTF-SimpleRev

下载文件 查壳 没有加壳 并且是64 放入ida64 SHIFTF12 访问字符串 得到关键字符串 双击 然后 CRTLX 查找交互 F5 反编译 得到了代码 开始代码审计 我们可以发现有两个十六进制的东西 r 对其转换为字符串 srcSLCDN v9wodah 然后继续往下看 发现textjoin函数 我们进入看…

STM32+AT24C02实现易变参数存储

AT24C02是一个2K位串行CMOS E2PROM&#xff0c; 内部含有256个8位字节存储单元&#xff0c;该器件通过IIC总线接口进行操作&#xff0c; AT24C02把存储空间分为 32 页&#xff0c;每页可存储8个字节的数据&#xff0c;具有硬件数据写保护功能&#xff0c;100万次擦写&#xff0…

Docker理论总结

目录 容器技术的演变 物理机时代 虚拟化时代 容器化时代 容器化技术的应用场景 Docker介绍与基本概念 标准化的应用打包 Docker的发展 Docker是容器化平台 Docker体系架构 容器与镜像 Docker执行流程 容器内部 Tomcat容器内部结构 在容器中执行命令 容器生命周…

( “树” 之 DFS) 104. 二叉树的最大深度 ——【Leetcode每日一题】

104. 二叉树的最大深度 给定一个二叉树&#xff0c;找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。 说明: 叶子节点是指没有子节点的节点。 示例&#xff1a; 给定二叉树 [3,9,20,null,null,15,7]&#xff0c; 返回它的最大深度 3 。 思路&am…

深度学习TensorFlow

博主简介 博主是一名大二学生&#xff0c;主攻人工智能研究。感谢让我们在CSDN相遇&#xff0c;博主致力于在这里分享关于人工智能&#xff0c;c&#xff0c;Python&#xff0c;爬虫等方面知识的分享。 如果有需要的小伙伴可以关注博主&#xff0c;博主会继续更新的&#xff0c…

redis整理之-持久化

redis整理之-持久化5. 持久化5.1 持久化简介5.1.1 场景-意外断电5.1.2 什么是持久化5.2 RDB5.2.1 save指令5.2.2 bgsave指令5.2.3 save配置自动执行5.2.4 RDB三种启动方式对比5.3 AOF5.3.1 AOF概念5.3.2 AOF执行策略5.3.3 AOF重写5.3.4 AOF工作流程及重写流程5.4 RDB与AOF区别5…

python开发环境的安装,PyCharm+python解释器

文章目录注意&#xff1a;软件打包下载&#xff1a;PyCharm的下载与安装下载安装python解释器的下载与安装下载安装PyCharm软件设置注意&#xff1a; 以下是Windows下的安装&#xff0c;Linux以及其他操作系统下的安装请类比参照&#xff01; 软件打包下载&#xff1a; PyCh…

主干网络backbone讲解—— Conv4与Resnet12

1 Conv4 在一些论文中&#xff0c;也称为Conv-64F。其中“64F”表示网络中使用了64个滤波器&#xff08;filters&#xff09; 它包含 4 个重复的卷积块&#xff0c;在每个块中包含&#xff1a; 一个 kernel3&#xff0c;stride1&#xff0c;padding1的卷积层&#xff1b;一个…

jquery中的ajax方法怎样通过JSONP进行远程调用

关于JSONP的概念以及为什么要使用JSONP您可以参考JSONP教程&#xff0c;本文的重点在于演示下在JQUERY中的Ajax方法怎样通过JSONP进行远程调用。 $.ajax的参数 首先介绍下$.ajax的参数&#xff1a; type&#xff1a;请求方式 GET/POST url:请求地址 async:布尔类型&#xff…

第十四届蓝桥杯大赛软件赛省赛 C/C++ 大学 A 组题解+个人总结

提示&#xff1a;此题解为本人自己解决&#xff0c;如有差错请大家多多指正。 文章目录题解总结一、幸运数1.试题2.解法3.代码二、[有奖问答](https://blog.csdn.net/A2105153335/article/details/130038980?spm1001.2014.3001.5501)三、[平方差](https://blog.csdn.net/A2105…

spring 随笔 ioc/di 4-Bean生命周期钩子

0. RUN&#xff0c;或8RUN&#xff0c;是每年都会思考的问题 Spring框架后置处理器PostProcessor详解 BeanDefinitionRegistryPostProcessor 扩展接口 动态注册bean AOP的高级特性targetSource AnnotationAwareAspectJAutoProxyCreator#postProcessBeforeInstantiation源码解析…

第五十九章 线段树(二)

第五十九章 线段树&#xff08;二&#xff09;一、懒标记&#xff08;lazy_tag&#xff09;1、作用2、思路二、结构体定义三、带有懒标记的函数操作1、pushup函数2、build函数3、modify函数4、pushdown函数5、query函数四、代码一、懒标记&#xff08;lazy_tag&#xff09; 1、…

redis五大基本数据类型之(源码分析)

redis五大数据结构StringHashsetListZset总结String String 是最基本的 key-value 结构&#xff0c;key 是唯一标识&#xff0c;value 是具体的值&#xff0c;value其实不仅是字符串&#xff0c; 也可以是数字&#xff08;整数或浮点数&#xff09;&#xff0c;value 最多可以…

远程桌面连接是什么?远程桌面连接使用教程

有时候电脑出现各类网络连接、网址访问出错问题&#xff0c;自己无法解决的情况下&#xff0c;常常会求助其他擅长IT的同事或朋友&#xff0c;要么自己通过社交工具在线沟通、要么抱着电脑找人家解决。然而&#xff0c;通过远程桌面完全可以让朋友同事远程帮自己查看电脑问题&a…

永远加载不满的进度条

前言 各位开发大佬&#xff0c;平时肯定见到过这种进度条吧&#xff0c;一直在加载&#xff0c;但等了好久都是在99% 如下所示&#xff1a;有没有好奇这个玩意儿咋做的呢&#xff1f;细听分说 &#xff08;需要看使用&#xff1a;直接看实践即可&#xff09; fake-progress …

亚马逊云科技Serverless Data:数字经济下的创新动能

Serverless时代已经到来&#xff01;企业的技术架构&#xff0c;总是伴随着不断增长的数据与日趋复杂的业务持续演进。如何通过构建更易用的技术架构来聚焦在业务本身&#xff0c;而不必在底层基础设施的管理上投入过多的精力&#xff0c;是数据驱动型企业需要思考的重要议题。…

实操| 前端新人无敲代码开发APP

作为一种大型的基于GPT-3. 5结构的语言模型&#xff0c;ChatGPT由OpenAI训练&#xff0c;采用深度学习技术&#xff0c;通过大量的文本数据学习&#xff0c;可以生成类似于人类自然语言的文字。ChatGPT是一种非常强大的对话引擎&#xff0c;能进行对话、回答问题和完成任务。Ch…