Es6新特性之【变量-块级作用域-字符串模板-解构赋值】

2022-09-08 15:56:43 浏览数 (1)

Es6相对于Es5做出了很多改变,如变量的声明,箭头函数,块级作用域,模板字符串等等 本文将一一介绍Es6的新特性

变量的声明 Es6中引入了letconst来声明变量解决var的一些问题 使用var声明变量的问题

  • 变量可以重复声明 变量重复的声明可能会导致一些预料不到的问题
代码语言:javascript复制
var a = 0; 
var a = 1; 
console.log(a);//结果返回1 
  • var没有块级作用域 在es6之前是没有块级作用域的概念,只有全局作用域和函数作用域,块级作用域使变量只在当前代码块生效如if switch for……等等
代码语言:javascript复制
if(true){ 
 var a = 1; 
} 
console.log(a);//es5正常打印没有块级作用域 
  • var不能定义常量 在es5中没有常量或者说不能直接定义常量,要定义常量,如下 还是比较麻烦,在es6中使用const简单解决问题
  • var存在变量提升 ES6之前存在变量提升,如下
代码语言:javascript复制
 console.log(a); 
 var a = 34; 
 //结果返回undifind 

这里没有报错如 a 未定义什么的,这是因为变量提升机制相对于进行了下面操作

代码语言:javascript复制
var x; 
console.log(x);//undifind 
x=2; 
//变量提升不会赋值 

下面我们通过let声明变量 1.变量重复声明

代码语言:javascript复制
let a = 0; 
let a = 1; 
console.log(a); 

直接报错,let不允许变量重复声明,相对es5更严谨

2.块级作用域的问题 可以将块级作用域理解为一个代码块,如if for switch等等

代码语言:javascript复制
if(true){ 
    let a = 1; 
} 
console.log(a); 

报错a未定义,这里块级作用域就体现出来了,由于es6增加了块级作用域的特性,所以if里面的a与console的a完全是两个作用域,所以出现下图。

在来看一到块级作用域的案例 有如下需求 定义4个按钮 使用for循环,每次按钮被点击输出i

代码语言:javascript复制
var btn = document.getElementsByTagName('button'); 
for(var i=0;i<btn.length;i  ){ 
    btn[i].onclick=function(){ 
        console.log(i) 
 }  
} 

上面代码并不能正常运行,当我们点击按钮时,总是会输出4,而不是0,1,2,3 在没有使用es6我们可能会通过闭包来解决上面的问题

代码语言:javascript复制
for(var i=0;i<=btn.length;i  ){ 
 !function(i){ 
        btn[i].onclick=function(){ 
        console.log(i) 
 }  
 }(i) 
} 

正常输出i实现原理也简单,通过循环创建了4个闭包函数,形成了单独的4个函数作用域。

既然是一个作用域的方式解决,那我们知道es6中有块级作用域的概念,我们将var 换成let试试

代码语言:javascript复制
for(let i=0;i<btn.length;i  ){ 
    btn[i].onclick=function(){ 
        console.log(i) 
 }  
} 

结果也正常输出,相对于上面的方式简单太多了

const声明常量

代码语言:javascript复制
const PI = 1.34; 
console.log(PI)//正常输出 
PI = 34; 
console.log(PI);//尝试修改报错 

字符串模板 在es6之前我们使用要输出字符串 变量时通过连接的方式 这种方式变量少还好,变量多了是不是很麻烦可能稍不注意少些了符号

代码语言:javascript复制
var a = 76; 
var score = 90; 
console.log("你的学号为" a "你的成绩为" score); 

在es6中可以使用反单引号 ‘`` ’直接输出

代码语言:javascript复制
console.log(`你的学号为a你的成绩为score`);//es6 
//或 
console.log(`你的学号为${a}你的成绩为${score}`) 

与上面结果输出一样,但简化了许多

解构赋值 es6中新增了解构赋值的概念。 什么是解构赋值,看完下面示例你就懂了 如果我们要通过变量获取到数组的值,在es6之前这样做

代码语言:javascript复制
var arr = ['one','two','three']; 
var a = arr[0]; 
var b = arr[1]; 
var c = arr[2]; 
console.log(a,b,c) 

使用es6解构赋值获取

代码语言:javascript复制
let arr = ['one','two','three']; 
let [a,b,c] = arr; 
console.log(a,b,c) 
//one two three 

对象/json解构赋值

代码语言:javascript复制
let arr = {'name':'tz','sex':'m','hobby':'eat'} 
let {name,sex,hobby} = arr; 
console.log(name,sex,hobby) 

需要注意的是解构赋值必须满足两边的结构相同,当一边是数组时,根据数组下标赋值所以不管你左边写什么变量都可以,但对象解构赋值则根据key赋值,所以左边变量必须跟右边key相同。 解构其他写法 1.解构重命名

代码语言:javascript复制
let arr = {name:'tz',sex:'m'}; 
let {name:name1,sex:sex1} = arr; 
console.log(name1,sex1)//tz m 

2.设置默认值

代码语言:javascript复制
let arr = {name:'tz',sex:'m'}; 
let {name,sex,age=12} = arr; 
console.log(name,sex,age)//tz m 12 
let arr = {name:'tz',sex:'m',age:18}; 
let {name,sex,age=12} = arr; 
console.log(name,sex,age)//tz m 18 

垮值解构

代码语言:javascript复制
let [a,,c] = [1,2,3] 
console.log(a,c)//1 3 

0 人点赞