ES6(声名、解构)

news/2024/7/10 22:43:26 标签: es6, 前端, javascript

参考文档:

ES6 入门教程es6.ruanyifeng.com/favicon.ico" />https://es6.ruanyifeng.com/

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

一、变量声明

1. let

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

javascript">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); //报错
javascript">for (let i = 0; i < 2; i++) {}
console.log(i);
//var声名则是2:因为2才会终止循环
//let声名则是报错:因为无法获取块级内部的i

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

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

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

由于没有变量提升引起

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

 不允许重复声名

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

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

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

 2 了解块级作用域

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

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

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

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

javascript">var tmp = new Date();

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

f(); // undefined

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

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

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

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

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

2. const

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

同样不可以重复声名

javascript">const PI = 3.1415;
PI // 3.1415

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

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

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

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

javascript">if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

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

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

 二、解构赋值

1. 数组解构

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

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

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

变量>值

javascript">let [foo] = [];
let [bar, foo] = [1];

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

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

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

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

javascript">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,则会生效

javascript">let [x = 1] = [undefined];
x // 1

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

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

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

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

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

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

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

javascript">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. 对象解构

直接解构

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

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

结构失败:变量值为undefined

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

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

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

 对象解构可以用于嵌套

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

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

 存在默认值

javascript">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.niftyadmin.cn/n/224657.html

相关文章

两个决策树例题经典案例-代码示例

以下是两个经典的决策树案例&#xff1a; 餐厅顾客流失预测&#xff1a; 假设你是一家餐厅的经理&#xff0c;想要预测哪些客户可能会流失&#xff0c;以便你可以采取措施来留住他们。为了解决这个问题&#xff0c;你可以使用决策树来构建一个分类模型。 在这个案例中&#x…

配置中心Disconf、SpringCloudConfig、Apollo、Nacos比较

Config Server Center 1、Disconf 1、1简介 2014年7月百度开源的配置管理中心&#xff0c;同样具备配置的管理能力&#xff0c;不过目前已经不维护了&#xff0c;最近的一次提交是两年前了。 2、SpringCloudConfig 2-1、简介 2014年9月开源&#xff0c;Spring Cloud 生态…

java mysql高校教学成果管理系统dzkfY3程序

1.用户管理模块&#xff1a; 该模块包括注册用户管理和系统用户管理&#xff0c;系统用户主要是普通管理员&#xff0c;对用户信息进行管理&#xff0c;只有注册用户才可在该系统上进行相应的操作。用户对个人信息可进行修改&#xff1b;管理员可对自己的个人信息进行维护&…

Oracle之增删改练习题(六)

1.删除学习“谌燕”老师课的SC 表记录&#xff1b;2.查询c002课的平均成绩3.查询没有上过c002课程的同学学号4.向SC表中插入一些记录&#xff0c;这些记录要求符合以下条件&#xff1a;没有上过编号“c002”课程的同学学号、“c002”号课的平均成绩&#xff1b;5.查询c001课成绩…

Zebec Protocol 出席香港 Web3 峰会,带来了哪些信息?

梳理香港加密新政的细节&#xff0c;一个明确的脉络是&#xff0c;香港加密新政的整体目的是令虚拟资产交易明确化和合法化&#xff0c;通过不断完善的监管框架&#xff0c;促进香港虚拟资产行业的可持续和负责任地发展。 在加强合规和持牌经营的监管思路下&#xff0c;长期审…

LinuxGUI自动化测试框架搭建(二)- 详细设计框架设计

&#xff08;二&#xff09;-详细设计&框架设计1 需求分析2 技术栈3 框架设计3.1 框架说明3.2 框架执行流程4 预期结果4.1 测试过程log日志4.2 测试报告html格式4.3 测试报告邮件格式1 需求分析 对 实现需求 进行详细分析&#xff0c;主要有下&#xff1a; 功能说明使用U…

ML:场景实战之模型部署、测试的疑难杂症(如Training-Serving Skew等,比如AUC指标线下上涨但线上却下降等问题)的经验总结

ML:场景实战之模型部署、测试的疑难杂症(如Training-Serving Skew等,比如AUC指标线下上涨但线上却下降等问题)的经验总结 目录 一、Training-Serving Skew(训练-服务偏差)的简介 1、TSS的概述 2、TSS的原因排查

chatGPT如何助力devops

随着软件开发行业的不断发展&#xff0c;DevOps已成为软件开发的主流方法。DevOps是一种将开发和运维工作结合起来的实践&#xff0c;旨在提高软件交付速度和质量&#xff0c;以及优化整个软件开发过程。最近&#xff0c;聊天机器人技术的崛起为DevOps带来了全新的变革&#xf…