ES6新增语法—let、const、var的区别

开发 前端
ES6是ECMAScript 6.0的简称,是javascript语言的下一代标准,已经在2015年6月正式发布上线。目的就是为了统一javascript的语法标准,可以用来开发大型应用程序,称为企业级开发语言。

[[411612]]

ES6简介

ES6是ECMAScript 6.0的简称,是javascript语言的下一代标准,已经在2015年6月正式发布上线。目的就是为了统一javascript的语法标准,可以用来开发大型应用程序,称为企业级开发语言。

ES6与JavaScript的关系:

ES6是JavaScript的规范标准,JavaScript是ES6的一种实现。

变量/赋值

块级作用域{}

ES5中作用域有:全局作用域、函数作用域,没有块作用域的概念。ES6新增了块级作用域,块作用域由{}包括,if语句里面的{}也属于块级作用域。

//通过定义的变量可以跨块作用域访问到

  1. //通过定义的变量可以跨块作用域访问到 
  2.   var a = 12; 
  3.   console.log("a",a) 
  4. console.log("a",a) 
  5.  
  6. //通过var定义的变量不能通过跨函数作用域访问到 
  7. (function(){ 
  8.   var b = 5; 
  9. })() 
  10. console.log("b",b) // not defined 

 var 与let和const区别:

const定义的对象属性是否可以改变?

实例:修改对象的属性值。

  1. const per = { 
  2.   name:'倩倩' 
  3. per.name = "我是嘻哈" 
  4. console.log("per.name",per.name) //打印出我是嘻哈 

通过上个实例,我们发现对象的属性是可以修改的,这是什么原因呢?

对象是引用类型的,per中保存的仅是对象的指针,意味着指针不会发生改变,修改对象的属性不会改变对象的指针,所以是允许修改的。

赋值:新增解构赋值,就是对数据拆解并赋值。解构赋值的两个规则:

左右两边模式必须一致

必须让定义和赋值同步完成。

实例:正确的结构赋值

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

实例:左右两边模式一致,数据长短不同时

  1. let [bar, foo] = [1]; 
  2. console.log("bar",bar)//1 
  3. console.log("foo",foo) // undefined 

上述解构不成功,变量值等于undefined。

注意:对象也是可以解构的,但是需要注意的是对象和数组的解构有很大的区别,对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

  1. let { bar,foo } = { 
  2.   foo:'aaa'
  3.   bar:'bbb' 
  4. console.log('bar',bar) 
  5. console.log('foo',foo) 
  6. console.log('baz',baz) // not defined 

 

责任编辑:姜华 来源: 今日头条
相关推荐

2021-08-16 07:05:58

ES6Promise开发语言

2021-07-30 07:10:07

ES6函数参数

2021-08-18 07:05:57

ES6Asyncawait

2021-08-02 05:51:29

foreachES6数组

2022-01-26 07:18:57

ES6WeakSetMap

2023-05-10 08:21:42

Es6Set

2021-04-25 13:18:51

Wine 6.7LinuxWindows

2020-07-01 07:58:20

ES6JavaScript开发

2017-08-31 14:25:34

前端JavascriptES6

2024-06-26 08:18:08

ES6模板字符串

2023-03-01 15:39:50

JavaScrip对象属性ES6

2023-05-28 23:49:38

JavaScrip开发

2023-11-23 10:21:11

ECMAScriptJavaScript

2017-10-09 18:21:20

JavaScriptES6ES8

2022-07-26 09:02:15

ES6ES13ECMAScript

2022-06-01 09:06:58

ES6数组函数

2021-06-23 10:32:24

前端ES6代码

2020-11-16 08:10:04

ES6迭代器JavaScript

2018-07-16 16:10:03

前端JavaScript面向对象

2022-01-12 15:50:24

JavaScript开发循环
点赞
收藏

51CTO技术栈公众号