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学习资料给大家，谢谢支持！
