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声明的变量是作用于上下文的。

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: '星巴克'})

福利时间

• 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
• 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
• 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！