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: '🎂', drink: '🍵', fruit: '🍎'}
}

let {dessert: dessert, drink: drink,  fruit: fruit} = breakfast()

console.log(dessert) // 输入 🎂
console.log(drink) // 输入 🍵
console.log(fruit) // 输入 🍎

 

我们可以将上面的解构对象简化

const breakfast = () => {
  return {dessert: '🎂', drink: '🍵', fruit: '🍎'}
}

let {dessert, drink, fruit} = breakfast()

console.log(dessert) // 输入 🎂
console.log(drink) // 输入 🍵
console.log(fruit) // 输入 🍎

 

解构数组

• 常规数组取值方法

const breakfast = () => {
  return [🎂, 🍵, 🍎]
}

var tmpArr =  breakfast()
dessert = tmpArr [0]
drink = tmpArr [1]
fruit  = tmpArr [2]

console.log(dessert) // 输出 🎂
console.log(drink) // 输出 🍵
console.log(fruit) // 输出 🍎

 

• 使用解构语法

const breakfast = () => {
  return [🎂, 🍵, 🍎]
}
let [dessert, drink, fruit] = breakfast()

console.log(dessert) // 输出 🎂
console.log(drink) // 输出 🍵
console.log(fruit) // 输出 🍎

 

解构函数参数

const breakfast = (dessert, drink,  {locaiotn, restaurant} = {}) => {
  console.log(dessert, drink, locaiotn, restaurant) // 输出：🍰 🍺 济南 星巴克
}

breakfast ('🍰', '🍺', {locaiotn: '济南', restaurant: '星巴克'})

解构参数必须传参

解构参数与一般的参数不同点在于，它是一个必须要传值的参数，如果不传，则会引发程序报错：

function setCookie(name, value, {secure, path, domain, expires}) {
    console.log(expires);
    //其他代码
}

setCookie('type', 'js'); // Uncaught TypeError: Cannot destructure property `secure` of 'undefined' or 'null'.

 

原因是为什么呢？是因为解构参数存在的函数，当我们在调用setCookie()的时候，函数内部其实是这样的：

function setCookie(name, value, options) {

    let {secure, path, domain, expires} = options; //这是引擎背后做的

    console.log(expires);
    //其他代码
}

用于结果的对象如果是null或者undefined，则程序会报错，所以当我们不给解构参数传值的时候，会引发了程序报错。
为了解决以上问题，我们需要在定义函数的时候，给解构参数提供默认值：

function setCookie(name, value, {secure, path, domain, expires} = {}) {}

setCookie('id', 'mike'); //有了默认值，便不会报错 {} 为解构参数的默认值

 

给解构参数属性设置默认值

let defaultOptions = {
    secure: true,
    path: '/example',
    domain: 'test',
    expires: 60
};

function setCookie(name, value, {
    secure = defaultOptions.secure,
    path = defaultOptions.path,
    domain = defaultOptions.domain,
    expires = defaultOptions.expires
} = defaultOptions) {
    console.log(secure); //true
    console.log(path); //example
    console.log(domain);//test
    console.log(expires);//30
}

setCookie('id', 'mike', {path: '/example', domain: 'test', expires: 30});

给解构参数的属性设置默认值和一般对象的解构设置默认值是一样的，也是在用等号=给属性赋值。
这里特别要注意的是，如果只是单纯地给解构参数的属性设置默认值，而不给整个解构参数设置默认值，依然不能解决类似于setCookie('id', 'mike')这样不传参所引发的代码报错问题，所以不要忘了给整个解构参数设置默认值（也就是这个例子里面的
= defaultOptions)。