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 申明变量时的异同点
• 解构对象
• 解构数组
• 解构函数参数

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

 componentDidMount() {

     // 创建一个小明对象
     let xiaoming = {}

     // 给小明这个对象添加属于他的属性
     xiaoming.name = 'XiaoMing'
     xiaoming.age = 20
     xiaoming.height = 180

     // 给小明这个对象添加属于他的方法
     xiaoming.eat = () => {console.log('eat')}
     xiaoming.learn = () => {console.log('learn RN')}

     // 获取小明的名字
     console.log(xiaoming.name)

     // 调用小明自己的方法
     xiaoming.eat()
     xiaoming.learn()

     // 打印小明对象看看效果吧
     console.log(xiaoming)
   }

日志

 

obj

var 与 let 申明变量时的区别

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

 (function() {
   var varVariable
   let letVariable
   console.log(varVariable) // 输出 undefined
   console.log(letVariable) // 输出 undefined
 }())

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

 (function() {
   console.log(varTest) // 输出 undefined
   console.log(letTest) // 输出 undefined

   var varTest = 'varTest'
   let letTest = 'varTest'
 }())

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

 (function() {

   var varTest = 'test var OK.'
   let letTest = 'test let OK.'

   var varTest = 'varTest changed.'
   let letTest = 'letTest changed.' // 直接报错：SyntaxError:Identifier 'letTest' has already been declared

   console.log(varTest) // 输出 varTest changed，覆盖掉了之前的值：test
   // var OK.
   console.log(letTest)
 }())

• 变量作用域，表现不同

 var xx

 const test = () => {
   var aa // 声明一
   let bb //声明二
   this.cc //声明三

   // 声明一局部代码块
   {
     let dd //声明四
   }
 }

区别

• let 声明的变量作用域为某个代码块。而代码块的长度可大可小。也就是说，当按声明二的方式声明一个变量时，该变量的作用范围于为整个function语句。当按声明四方式声明一个变量时，该变量的作用范围为局部的代码块。
• var 声明的变量作用域为整个函数体(当按声明一的方式声明变量时)；当var变量声明在函数外，该var变量的作用域为整个js文件周期（全局作用域）。

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

• 简单地说，用this声明的变量作用域也是全局的。如果实例化test函数 var p=new test() 那么用p能访问test函数内的哪些变量呢？答案是只有cc 。实际上this声明的变量是作用于上下文的。

任何函数中的this代表调用该函数的对象，如果没有任何对象调用该函数（直接让函数执行），那么就相当于是window对象调用该函数执行（其中的this就代表window对象）

var 与 let 总结

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

解构对象

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