前言
2018 年伊始，我们准备实现一个小目标：
打造一个技术交流氛围浓郁的微信群。
让大家在这个群里轻松交流技术、没有扯淡，
拒绝吐槽，只关注技术学习本身。
因此，【WEB 前端抱团学习群】 就此诞生。
我们为这个群倾注极大精心与资源，期待给这个群提供诸多福利，例如：
1、聊天扯淡挺热闹，提个技术问题瞬间死寂？
——放心，在这个群里，拒绝扯淡，只谈学习。技术提问，必有回应~
2、独自一人无目的学习、没有学习目标？
——管理员会根据每人的基础做合理的学习计划、定期监督提醒~
3、自己学得怎么样？知识掌握的好不好？稀里糊涂的？
——群内提供阶段性技能水平测试，个人水平一目了然~
4、群里有没有技术大牛可以讨论的？
——每周邀请嘉宾（技术牛人、或妙味全职讲师）进行技术主题分享
5、做了练习无人点评、也不知道哪里可以优化或改进？
——专属的练习提交地址，会有资深讲师进行专业点评
6、都说进群抢红包，这群里会经常发红包么？
——围绕学习的奖励红包层出不穷，甚至会有奖学金提供唷~
7、还有更多可能的探索，我们会动态调整、不断尝试……
——也欢迎群友为我们提供各种建议，我们会认真倾听、努力改进~
VIP 进群：
“爱学习的人总是少数，但是大多数学习者都在这里！”- 扫码关注公众号，发送”VIP进群”关键字，入群共同学习，审核通过后入群
以下，是微信抱团群内举行的一次文字技术分享，全程内容如下：
下午 15:48 妙味-小妖 发布群通知
今天第二场技术分享通知
主题：《React 新手入门课程》系列之：ES6语法基础
时间：16:00~17:00
嘉宾：妙味讲师翟宏杰
方式：微信群内-文字直播
说明：
- 很多同学想学前端框架 react
- 但感觉自己基础不够
- 因此我们为大家定制了一套 React 新手入门课程
- 只要你具备：
1、JS 基础
2、DOM\EVENT 基础
3、面向对象基础 - 你就能跟着我们的分享
- 逐渐开始走入 React 开发的世界…
对了，值得一提的是，这个分享，是个连载哦~所以，我发给大家一些关于本次分享的详细内容
从今天起，我们会按以下内容进行群分享，也就意味着，这不是一次单独的技术分享，而是一个详尽的学习计划。想学 react 的同学们，跟着来就好哦~[愉快]
《React 新手入门课程》大纲
ES6 部分
- let const 变量声明
- 函数扩展: 箭头函数
- 匿名的
- 默认参数
- 语法
- 一个参数, 不写括号
- 箭头后面可以写函数体, 也可以直接写返回值,
- this 指向
- 模板字符串:
- 变量解构赋值
- spread 与 rest
- class 相关
- 继承
- 成员方法的 this 指向
常用的数组方法部分
- map()
- filter()
- every()
- some()
- reduce()
模块化的语法部分
- ES6 的模块化语法
- commonJS 的模块化语法
react 零基础入门
- 准备 create-react-app 脚手架工具
- 初次运行一个 Hellow World
- 认识 JSX
- 认识组件
- 认识 props
- 认识 state
- 使用事件
消息发布后，大家的反馈：
今天的内容，是 react 的前置知识：ES6
在正式分享前，我们先说一下简单的分享规则
讲师正在分享过程中，
请大家不要发与本次技术分享无关的话题。
如有其他问题可以私信 我 或者 妙味大宝
如果提醒了还随意打乱分享的小伙伴
只能遗憾的清出群了
敬请谅解~
另外，讲师们平时要上课
业余时间要做各种问题解答和技术分享，
因此大家请不要私加讲师好友，
有问题可以汇总到我们这里
我们会及时给大家举行技术分享活动
敬请理解哈~
我们本次分享方式是：
【群内文字技术分享】
分享过后
我们会把分享过程整理成文稿
并第一时间发布到群中
方便错过了的同学事后观看
按照惯例，我需要发个红包签到，看有多少朋友在线~
OK，闲话不多说，
接下来请出妙味全职讲师翟宏杰，
给大家带来今天的精彩分享内容~
妙味讲师 翟宏杰 上场：
大家好, 我是翟宏杰
今天是我们react基础教程的第一课
首先是弥补一下大家的基础, 我们先来看下ES6部分的东西
我们今天会说四个ES6相关的一些语法
首先说一下变量声明
ES6 新增了新的变量声明命令: let 和 const.
首先是 Let
声明变量的语法我们很熟悉:
var a = 5;
现在 你也可以使用 let 声明
let b = 6;
不过使用 let 声明变量后, 有了一些新的特性, 你要特别注意以下两点:
- 不能重复声明
比如:
2 是有块级作用域
可以把一个 {} 当成一个块, 比如, {}, 函数, if, for 的{}…
看看下面代码:
在这里问个问题, 说说打印的结果, 前三名发红包
结果，前 3 名 回答为 10 的小伙伴获得红包奖励：
公布正确答案：都是 10
解释如下：
现在如果是用 let 声明, 会变成另外一种情况
会依次打印 0-9
当然, 首先会抛出一个错误: i is not defined
因为 i 的作用域被限制在一个块内了
不再像之前 var 的时候, 变成了全局的
对于 let, 我们只要注意着两个特性就可以了
接着是 const
const 也拥有上面 let 的特性
但 const 用来声明一个常量, 它期望对它是只读的:
const NAME = "Bob";
首先: 你必须对它初始化
但是声明对象时需要注意，比如如下代码：
如果你打印: list
会发现 list 的属性值是会发生改变的
所以大多时候, 要注意对他只是进行读取就好了
对于 let 和 const, 我们只有注意这些就行
现在我们来看看第二个语法: 模板字符串
原来使用 单引号 或者 双引号 来写字符串. 现在有了一个新的写字符串的语法, 就是使用 ESC 键下面的那个反引号:
使用这个符号来定义一个字符串字面量, 就得到一个普普通通的字符串而已，和原来没有什么区别
但是, 你可以在它里面插入表达式, 它为我们提供了一种更优雅拼接字符串的方式, 比如:
在里面写一个 ${} , 接着在花括号里面写表达式. 结果就会被替换成表达式的结果
既然是表达式, 所以在里面写什么就很灵活了
比如:
对于模板字符串, 只要掌握这一点，在里面写表达式就可以了
ok, 我们要说的下一个语法就是：变量的解构赋值
现在如果有一个对象, 你可以直接提取里面的属性值:
想使用 p1, 或 p2 的值, 可以这样：
用一个花括号包住要提取的属性名
这个时候作用域里面就会有两个变量
当然, 你不必全部属性都取完, 其中一部分就可以了
可以看到, 你可以通过解构快速得到对象属性的一些值.
当然, 你也可以使用新的变量名:
let {p1: nP1, p2: nP2} = names;
p1 是要匹配的属性名, nP1 是要定义的变量名
然后打印一下
本质上是 p1 去匹配对象属性, 然后赋给变量 p1. 那么 p2 也是同理
其实之前的写法是一直简写的形式:
let {p1, p2} = names;
相当于
let {p1:p1, p2:p2} = names;
如果某一个解构出来的值是一个对象, 你可以继续解构下去:
打印就会发现 a, b 的值直接拿到了
可以看到, 对于嵌套解构的情况, 也是允许的. 语法也并不复杂.
你还可以在解构的时候给一个默认值:
打印后会发现, 如果没有某些属性, 那么就会使用默认值
最后, 数组也是可以解构的:
ok, 这个就是变量的解构赋值部分, 必须要掌握的内容
这些内容占据着我们大多数开发场景使用的情况
问答时间：
问答过后，继续下一个话题：ES6 在函数方面的扩展
ES6 在函数方面有了很多的改动, 比如添加了一种新的声明函数的语法: 箭头函数 ; 在传递参数方面也给了更多方便的东西.
我们来一起看看我们需要关注的一些地方, 这些是日常开发过程中比较常用的.
首先是: 默认参数值
现在, 如果函数在运行的时候某个参数没有传递值, 你可以在定义函数的时候给一个默认值:
如果给 a传递的值是 undefined, 那么 a 的值是5
b 也是同理
如果我们现在运行一下
fn(); // 5+3 = 8
fn(9,9); // 9+9 = 18
ok，现在来一个问题，前三的 红包奖励，大家准备好！抢答时间！
讲师回复大家的答案：
看看我之前的一句话很重要：
函数方面, 除了默认参数, 接下来这个就使用的非常多了
箭头函数！
先来看看它的语法:
这样你就可到了一个箭头函数. ( ) 里面写参数, { } 里面写函数体.
它是匿名的, 所以如果不是在行内使用, 而是在别的地方也用到, 那你需要一个变量来接收它:
当然, 某些情况它还有一些更简洁的写法, 注意下面代码的注释:
这样就声明了一个函数: 箭头函数
没有 function, 写法简单
ok, 继续, 关于返回值还有第二个特性
如果想返回对象, 需要加括号, 否则对象会被当成方法体
直接返回对象需要() 包起
这是关于它的语法, 大家需要掌握的, 掌握着写语法就可以在大多数开发场景中使用了，还有注意的是它的 this 指向，箭头函数的 this 永远会指向函数定义时的上下文环境:
当我们运行 o.func() 后，我们知道 o.func 这个函数的 this 执行 o
因为是 o 调用了 func
查看打印的就过我们会知道
logEvo 里的 this 也是指向 o,
和它所处在的 func 函数的 this 执行一致
如果是在 function 去声明的情况
就会变成另一个样子
除了 this 指向函数定义时所在的上下文环境, 你还要注意以下一些特性:
1- 不可以 new 它, 它不能被当做构造函数
2- 没有 arguments 对象
ok, 以上, 就是大家需要特别关注箭头函数的地方
一个是它的语法要掌握, 因为经常写
一个是它函数体内的 this 指向
可以去 mdn 看看：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
ok, 以上这些, 就是我们今天分享的内容了
提问环节：
作业环节：
讲师留作业环节：
那我想做个安排，不知道有没有同学愿意试试。
要不要给大家留个简单的作业，
如果提前做完的，有红包奖励，
有兴趣的话，就写 1
没时间做，就写 0
看来非常多的朋友来试试练习，因此，讲师开始布置练习：
要求
1、用原生的方式实现
2、用 ES6 语法
作业一示意：https://miaov.com/index.php/Course/homeworkDetail/hid/173.html
作业二示意：https://miaov.com/index.php/Course/homeworkDetail/hid/29.html
作业提交地址：https://study.miaov.com/bbs/60175
光学不练，还是不行滴，期待大家提交作业唷~[调皮]
今天分享到此为止，感谢大家参与~
精彩课程推荐：
足不出户，享受优质远程课程！妙味 2018 年最新版 “从零基础到全栈” 全套 WEB 前端开发课程，现已开启远程班招生~
- 资深讲师带领大家，只学精华内容、拒绝无用知识，配备走心远程服务：“直播+视频回放、全天超过 14 小时在线答疑、作业批改与练习讲解、丰富奖学金、全程面试远程指导服务…”
- 凡你所要，必得满足！
- 现在咨询，可享受更多课程优惠~
远程《零基础前端开发 “PC 端+移动端+响应式开发” 课程》
https://miaov.com/index.php/news/newsDetail/nid/322
远程《JS 前端资深工程师就业精英班》
https://miaov.com/index.php/news/newsDetail/nid/316
报名咨询：
• 咨询QQ：2852509866、2852509867、2852509868
• 电话：010-57269690
• 微信：miaov-class
妙味网友
