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

切图仔

发布于 2022-09-08 15:56:43

7140

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

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

变量可以重复声明变量重复的声明可能会导致一些预料不到的问题

var a = 0; 
var a = 1; 
console.log(a);//结果返回1

var没有块级作用域在es6之前是没有块级作用域的概念，只有全局作用域和函数作用域，块级作用域使变量只在当前代码块生效如if switch for……等等

if(true){ 
 var a = 1; 
} 
console.log(a);//es5正常打印没有块级作用域

var不能定义常量在es5中没有常量或者说不能直接定义常量，要定义常量，如下还是比较麻烦，在es6中使用const简单解决问题

var存在变量提升 ES6之前存在变量提升,如下

 console.log(a); 
 var a = 34; 
 //结果返回undifind

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

var x; 
console.log(x);//undifind 
x=2; 
//变量提升不会赋值

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

let a = 0; 
let a = 1; 
console.log(a);

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

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

if(true){ 
    let a = 1; 
} 
console.log(a);

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

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

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我们可能会通过闭包来解决上面的问题

for(var i=0;i<=btn.length;i++){ 
 !function(i){ 
        btn[i].onclick=function(){ 
        console.log(i) 
 }  
 }(i) 
}

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

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

for(let i=0;i<btn.length;i++){ 
    btn[i].onclick=function(){ 
        console.log(i) 
 }  
}

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

const声明常量

const PI = 1.34; 
console.log(PI)//正常输出 
PI = 34; 
console.log(PI);//尝试修改报错

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

var a = 76; 
var score = 90; 
console.log("你的学号为"+a+"你的成绩为"+score);

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

console.log(`你的学号为a你的成绩为score`);//es6 
//或 
console.log(`你的学号为${a}你的成绩为${score}`)

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

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

var arr = ['one','two','three']; 
var a = arr[0]; 
var b = arr[1]; 
var c = arr[2]; 
console.log(a,b,c)

使用es6解构赋值获取

let arr = ['one','two','three']; 
let [a,b,c] = arr; 
console.log(a,b,c) 
//one two three

对象/json解构赋值

let arr = {'name':'tz','sex':'m','hobby':'eat'} 
let {name,sex,hobby} = arr; 
console.log(name,sex,hobby)

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

let arr = {name:'tz',sex:'m'}; 
let {name:name1,sex:sex1} = arr; 
console.log(name1,sex1)//tz m

2.设置默认值

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

垮值解构

let [a,,c] = [1,2,3] 
console.log(a,c)//1 3

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-07-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

ecmascript

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐