ES6新增语法——letconstvar的区别

Posted 2021-09-03 前端知识搬运工

ES6简介

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

ES6与JavaScript的关系:
ES6是JavaScript的规范标准，JavaScript是ES6的一种实现。

变量/赋值

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

//通过定义的变量可以跨块作用域访问到
{
  var a = 12;
  console.log("a",a)
}
console.log("a",a)

//通过var定义的变量不能通过跨函数作用域访问到
(function(){
  var b = 5;
})()
console.log("b",b) // not defined

var 与 let 和 const 区别：

类型	定义	变量类型	作用域
var	可以重复定义	是变量，不能限制修改	没有块级作用域
let	不能重复定义	是变量	块级作用域，不能跨块访问
const	不能重复定义	是常量，初始化时必须赋值	块级作用域，不能跨块访问

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

实例1：修改对象的属性值。

const per = {
  name:\'倩倩\'
}
per.name = "我是嘻哈"
console.log("per.name",per.name) //打印出我是嘻哈

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

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

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

• 左右两边模式必须一致
• 必须让定义和赋值同步完成。

实例2：正确的结构赋值

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

实例3：左右两边模式一致，数据长短不同时

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

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

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

实例4：对象的解构赋值

let { bar,foo } = {
  foo:\'aaa\',
  bar:\'bbb\'
}
console.log(\'bar\',bar)
console.log(\'foo\',foo)
console.log(\'baz\',baz) // not defined