02 ES6的解构赋值和模板字符串以及对let和const的一些补充

936 阅读4分钟

补充:首先呢,我们先对let和const进行一些补充

let命令的基本用法:
    用来声明变量,他的用法类似var,但是所声明的变量,只在let命令所在的代码块内有效.
let注意事项:
    1.没有预解析,不存在变量提升
      必须在代码块内,let 定义的变量,在之前使用都会报错 先定义,后使用
    2.同一个作用域内不能用 let 重新定义变量,赋值没问题
    3.for 循环()里面是父级作用域,里面是子级块级作用域
const命令的基本语法:
    1.const 声明一个只读的常量。一旦声明,常量的值就不能改变。
      声明的变量不得改变值,这意味着,const 一旦声明变量,就必须立即赋值,不能留到以后赋值。
    2.const 的作用域与 let 命令相同:只在声明所在的块级作用域内有效。
    3.const 命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用
    
    Const 的特性与 let 一样 
    Const 定义的变量是不能修改的 
    Const 定义为变量,必须有值,不能后赋值

ES6 明确规定,如果区块中存在 let 和 const 命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。在代码块内,使用 let 命令声明变量之前,该变量都是不可 用的。这在语法上,称 为“暂时性死区”(temporal dead zone,简称 TDZ)

一、何为解构赋值?

从数组、对象、字符串中提取值,对变量进行赋值,这种方法称之为“解构赋值”

二、解构赋值的分类

数组的解构赋值、对象的解构赋值、字符串解构赋值、函数的解构赋值

1、数组的解构赋值 [数组对应数组]

注意:如果解构不成功,变量的值就等于undefine

1.完全解构

image.png

2.不完全解构

image.png

3.解构不成功

image.png

4.关于默认值

image.png

注意:

如果一个数组成员是 null,默认值就不会生效,因为 null 不严格等于 undefined。

如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。

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

2、对象的解构赋值

注意:

数组的元素是按次序排序的,变量的取值由他的位置决定.

对象的属性没有次序,变量和属性必须同名,才能得到正确的值.

image.png

1.别名的引用:

image.png

对象的解构赋值的内部机制,是先找到同名属 性,然后再赋给对应的变量。
真正被赋值的是后 者,而不是前者,前者 foo:bar bar 只是一个别名
2.解构也可以用于嵌套结构的对象

image.png

3.对象的解构也可以指定默认值

image.png

默认值生效的条件是,对象的属性值严格等于 undefined

image.png

已经声明的变量如何解构赋值

image.png

对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量

image.png

3、字符串的解构赋值

1. 字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

image.png

2.字符串属性解构

image.png

4、函数的解构赋值

a. 函数参数的解构

image.png

b.函数参数的解构使用默认值

image.png

三、解构赋值的应用

(1)交换变量的值

image.png

(2)从函数或数组返回变量的值

image.png

(3)函数参数的定义

(4)提取 JSON 数据

(5)函数参数的默认值

四、模板字符串

A、字符串模板的应用---连接

模板字符串(template string)是增强版的字符串,用反引号(`)标识。
它可以当作普通字符串使用,也可以 用来定义多行字符串,或者在字符串中嵌入变量。
01 普通字符串

image.png

02 关于换行

image.png

03 字符串中嵌入变量

image.png

image.png

image.png

image.png

image.png

image.png