26 es6 -- let const 变量的解构赋值 模板字符串

104 阅读2分钟

认识es6

es全称 ecmascript ,是脚本语言的规范 ; JavaScript就是EcmaScript的一种实现

所以 es新特性 其实是 javascript新特性

学习es6好处

为什么要学习新特性?

1、语法简洁,功能丰富

2、框架开发应用

3、前端开发职业要求

作用域

变量作用域

变量在什么范围内是可用的

函数作用域

函数是有自己的作用域的

注 : JS中 只有函数才有作用域

es5之前,因为if和for都没有块级作用域的概念,所以在很多时候,我们都必须要借助于function的作用域来解决应用外面变量的问题

而在es6中,加入了let,let它主要作用于块级作用域中,所以它是有if和for的块级作用域的

let关键字

定义变量

声明

image.png

特性

不可以重复声明

image.png

let 是块级作用域

也就是说,let声明的只能在代码中有效果

let只作用于块级作用域

image.png

image.png

不存在变量提升

在var中可以有变量提升,提升后,变量输出undefined

而在let中没有

image.png image.png

不影响作用域链

image.png

image.png

const关键字

它是定义常量的,在普通类型下,是无法修改的

声明

image.png

特性

声明的时候就要赋予初始值

image.png

一般常量使用大写

这种没有规定,就是默认是大写,写小写也可以

image.png

常量的值不可以修改

普通情况下

在 普通的情况下是无法修改的

image.png

image.png

数组,对象情况下

但对于数组和对象来说,若用const来创建的,则是可以修改的。

当修改里面的内容的时候,不算对常量的修改,因为常量指向的是地址,而地址并没有改变,我们只是改变了地址所指向的内容而已

变量的解构赋值

es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值的,就是解构赋值

数组的解构

image.png

let 后面是[] 还是 {} , 取决于你解构的是数组还是对象

对象的解构

image.png

模板字符串

es6 引入新的声明字符串的方式是 : `` 。

声明

image.png

image.png

特性

使用 `` 包裹的内容可以进行换行

image.png

可以直接进行变量拼接 ${变量名}

image.png