ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同

js常用语法系列教程如下

• es5与es6常用语法教程(1)
• es5与es6常用语法教程(2)
• es5与es6常用语法教程(3)
• es5与es6常用语法教程(4)
• es5与es6常用语法教程(5)
• es5与es6常用语法教程(6)
• es5与es6常用语法教程(7)

这部分教程我们主要讲解以下几个常用语法

• 如何创建对象，如何给对象添加属性和方法
• var 与 let 申明变量时的异同点
• 解构对象
• 解构数组
• 解构函数参数

如何创建对象，如何给对象添加属性和方法

 1 componentDidMount() {
 2
 3     // 创建一个小明对象
 4     let xiaoming = {}
 5
 6     // 给小明这个对象添加属于他的属性
 7     xiaoming.name = 'XiaoMing'
 8     xiaoming.age = 20
 9     xiaoming.height = 180
10
11     // 给小明这个对象添加属于他的方法
12     xiaoming.eat = () => {console.log('eat')}
13     xiaoming.learn = () => {console.log('learn RN')}
14
15     // 获取小明的名字
16     console.log(xiaoming.name)
17
18     // 调用小明自己的方法
19     xiaoming.eat()
20     xiaoming.learn()
21
22     // 打印小明对象看看效果吧
23     console.log(xiaoming)
24   }

日志

 

obj

var 与 let 申明变量时的区别

• 只申明变量不赋值，表现相同

1 (function() {
2   var varVariable
3   let letVariable
4   console.log(varVariable) // 输出 undefined
5   console.log(letVariable) // 输出 undefined
6 }())

• 使用未声明的变量时，表现相同

1 (function() {
2   console.log(varTest) // 输出 undefined
3   console.log(letTest) // 输出 undefined
4
5   var varTest = 'varTest'
6   let letTest = 'varTest'
7 }())

• 重复声明同一个变量时，表现不同

 1 (function() {
 2
 3   var varTest = 'test var OK.'
 4   let letTest = 'test let OK.'
 5
 6   var varTest = 'varTest changed.'
 7   let letTest = 'letTest changed.' // 直接报错：SyntaxError:Identifier 'letTest' has already been declared
 8
 9   console.log(varTest) // 输出 varTest changed，覆盖掉了之前的值：test
10   // var OK.
11   console.log(letTest)
12 }())

• 变量作用域，表现不同

 1 var xx
 2
 3 const test = () => {
 4   var aa // 声明一
 5   let bb //声明二
 6   this.cc //声明三
 7
 8   // 声明一局部代码块
 9   {
10     let dd //声明四
11   }
12 }

区别

那么，用this声明的变量呢？

var 与 let 总结

• 使用 var 申明的变量，可以重复申明，只是后申明的会覆盖前面申明的
• 使用 let 申明的变量，不能够重复申明，重复申明直接报错
• 使用 let 声明变量，该变量的作用范围限于声明它的代码块中
• 如果未在 var \ let 语句中初始化变量，则将自动为其分配 JavaScript 值 undefined

解构对象

1 const breakfast = () => {2   return {dessert: '