【WEB 前端抱团学习群】0402 期技术分享:React

前言

2018 年伊始,我们准备实现一个小目标:

打造一个技术交流氛围浓郁的微信群。
让大家在这个群里轻松交流技术、没有扯淡,
拒绝吐槽,只关注技术学习本身。

因此,【WEB 前端抱团学习群】 就此诞生。

我们为这个群倾注极大精心与资源,期待给这个群提供诸多福利,例如:

1、聊天扯淡挺热闹,提个技术问题瞬间死寂?

——放心,在这个群里,拒绝扯淡,只谈学习。技术提问,必有回应~

2、独自一人无目的学习、没有学习目标?

——管理员会根据每人的基础做合理的学习计划、定期监督提醒~

3、自己学得怎么样?知识掌握的好不好?稀里糊涂的?

——群内提供阶段性技能水平测试,个人水平一目了然~

4、群里有没有技术大牛可以讨论的?

——每周邀请嘉宾(技术牛人、或妙味全职讲师)进行技术主题分享

5、做了练习无人点评、也不知道哪里可以优化或改进?

——专属的练习提交地址,会有资深讲师进行专业点评

6、都说进群抢红包,这群里会经常发红包么?

——围绕学习的奖励红包层出不穷,甚至会有奖学金提供唷~

7、还有更多可能的探索,我们会动态调整、不断尝试……

——也欢迎群友为我们提供各种建议,我们会认真倾听、努力改进~


VIP 进群:

“爱学习的人总是少数,但是大多数学习者都在这里!”
  • 扫码关注公众号,发送”VIP进群”关键字,入群共同学习,审核通过后入群


以下,是微信抱团群内举行的一次文字技术分享,全程内容如下:


下午 15:48 妙味-小妖 发布群通知

今天的技术分享通知来啦

主题:《React 新手入门课程》系列之:

  • 模块化基础 spread、rest 和 class,数组的 map 方法、数组的 filter 方法、reduce() …

时间:16:00~17:00
嘉宾:妙味讲师翟宏杰
方式:微信群内-文字直播
说明:

  • 很多同学想学前端框架 react
  • 但感觉自己基础不够
  • 因此我们为大家定制了一套 React 新手入门课程

只要你具备:
1、JS 基础
2、DOM\EVENT 基础
3、面向对象基础

你就能跟着我们的分享
逐渐开始走入 React 开发的世界…


按照惯例,咱们先来个红包签到:

签到红包被迅速秒抢~那我们就正式开始:

今天分享的内容是上周分享内容的延续,也就是《React 新手入门课程》。

有些朋友不太清楚,我们简单做个回顾~

上周我们做了一个系统的 react 学习计划,给大家分享了 react 前置的 ES6 相关内容,上周分享记录如下:

https://miaov.com/index.php/news/newsDetail/nid/333

如果错过的同学,可以看看上面的文字回顾。


在正式开始之前,
先和大家分享一位同学的作业
也就是上一次技术分享完毕以后
讲师留的作业。

这位同学完成的非常好
讲师也单独给他做了详细点评

给大家发一下部分截图
这是这位同学做的练习截图:

这个是讲师的作业点评:

因此
这位同学获得了上次作业的奖励红包
恭喜这位同学哈~
我稍后就给这位同学包奖励红包去~


OK,照例,先发一下文字分享规则:

讲师正在分享过程中,
请大家不要发与本次技术分享无关的话题。
如有其他问题可以私信 我 或者 妙味大宝
如果提醒了还随意打乱分享的小伙伴
只能遗憾的清出群了
敬请谅解~

另外,讲师们平时要上课
业余时间要做各种问题解答和技术分享,
因此大家请不要私加讲师好友,
有问题可以汇总到我们这里
我们会及时给大家举行技术分享活动
敬请理解哈~

我们本次分享方式是:
【群内文字技术分享】

分享过后
我们会把分享过程整理成文稿
并第一时间发布到群中
方便错过了的同学事后观看

接下来
给大家带来今天的精彩分享内容~

请出妙味全职讲师:翟宏杰
为大家带来今天的分享内容~


妙味讲师:翟宏杰 上场~

我们今天的内容先是 : 3个 es6 的语法

spread、rest 和 class 相关。
如果时间富裕,我们还可以多聊点。

首先是 Spread:
ES6 提供了 spread 和 rest 来出里数据的合并与读取问题, 这是一个很大的便利.

展开的语法是: … , 没错, 就是英文的三个小点.
展开, 是为了把自己的数据, 展开给别人.
我们会经常用这个语法做一些数据展开操作:

  1. 把一个数组展开到另外一个数组里

比如

展开的位置就是顺序

  1. 把一个对象展开到另外一个对象里

要注意后面的属性会把前面的属性覆盖

处理在数组里面和在对象里面展开

  1. 在函数参数列表里展开:

假设有一个数组和一个函数

传参数的时候直接展开数组

这个就是我们 spread 的基本使用。
接下来是: rest, 剩余
剩余, 就是代表剩余的数据. 让你拿到处理某些东西以外, 剩余的东西.
它的语法也是 …

看看下面的情况:

  1. 解构数组时, 拿到剩余的元素

可以看到, 数组里面, rest 是剩余没取完的元素所组成的数组.
注意: rest 必须要写在数组末尾

  1. 解构对象时, 拿到剩余的属性

可以看到, 对象里面, rest 是剩余没取完的属性组成的一个对象.

  1. 剩余就是在函数参数里面

拿到函数的剩余参数

看看执行的情况:

可以看到, 参数列表里面, rest 是剩余传过来的参数所组成的一个数组.


现在抢答一个问题, 前三名答对红包奖励!

大家开始热烈的抢答:

其实答案是:B

讲师开始解释分析答案过程:

标号 1 的函数是形参列表, 里面的 … 代表剩余
标号 2 的地方 是要执行 fn 函数, 我们展开了 rest 数组


接下来说的是 class, 类
类是某个实例的抽象, 比如 人, 就可以当成一个类. 而每一个具体的人, 就是人这个类的一个实例.

在 ES6 之前, 如果我们响应使用 new 操作得到一个对象, 那么我们需要先 声明一个函数, 然后去 new 它, 我们也把这个函数叫做构造函数. 我们可能还会在原型链上挂载些其他的东西.

像这样:

而现在, 你使用 class 来更简洁的声明类:

相对 ES5, 现在我们很明确的知道, People 是一个类, constructor() 是它的构造函数.

sing() 是这个类的方法.
所有的方法都写在类的花括号内, 清晰明了.
只是类需要掌握的基本语法

接下来我们看看 class 的基础:继承

在 ES5 里面, 我们的继承需要通过对原型链进行操作. 在 ES6 里面, 类之间的继承只需要一个非常简洁的语法: extend:

先是有个 People 类

继承的时候:

现在我们得到一个 StrongMan 的实例看看

可以看到, 通过 extends 关键字, 就可以继承另外一个类的属性和方法.

注意一点: 当继承了另外一个类之后, 如果你写了 constructor(), 那么你必须先 调用 super();

ok, 以上, 到现在位置, 经过这两次分享, 我们就把 ES6 基础部分讲完了

有学员总结:“实参展开,行参剩余——记住这个口诀。”

收获不少点赞~

另外,有些同学 “对面向对象、构造函数” 等这些基础不了解,可以看看相关视频:
https://study.miaov.com/study/show/chapter/147

另外,由于是现场分享,讲师有一个小失误,被同学指出:

讲师也及时回复:嗯嗯, 应该写 Joe 的, 写成 mask 了,好眼力!


顺便再补上刚刚抢答获奖的两位同学的红包:


好了,讲师继续分享中:

数组的一些方法也是我们基础的一部分

首先是 map

数组有个 map() 方法. 用于得到一个新数组, 新数组里面的元素依据 map() 的返回值而定.
假设下面代码:

let arr = [ 1, 2, 3, 4 ];

现在我们用一下 map 方法.

可以看到, map 接受一个回调函数作为参数.
回调函数有两个参数, 第一个参数是: 遍历到的元素 第二个元素是: 元素索引
回调函数返回的值会作为新数组的元素.

map 真是用的非常多
特别是要把 数据变成 组件的时候

接下来是 filter
数组有个 filter() 方法. 用于得到一个过滤原数组元素, 得到新数组, filter() 返回 bool 值, 根据 true 和 false 是否留下某个元素.

假设下面代码:

let arr = [ 1, 2, 3, 4 ];

现在我们用一下 map 方法.

可以看到, filter 接受一个回调函数作为参数.
回调函数有两个参数, 第一个参数是: 遍历到的元素 第二个元素是: 元素索引
回调函数返回 true 就会保留元素, false 就会移除元素.

接下来是 every() 方法
every() 方法. 返回 bool 值.
假设下面代码:

let arr = [ 1, 2, 3, 4 ];

现在我们用一下 every 方法.

console.log(bool);

回调函数有两个参数, 第一个参数是: 遍历到的元素 第二个元素是: 元素索引

如果每一次遍历, 回调函数 都返回 true, 那么 那么这一次 every() 返回 true 只要有一次返回 false, 那么 every() 返回 false

还有个和 every() 对应的 some()
同样返回 bool 值.情况和 every() 相反.

every() 是要求回调函数每次都返回 true, every() 执行的结果才是 true.

而 some() 只要回调函数有一次返回 true, 那么 some() 就会返回 true.

所以关于 some() 这个地方, 了解了 every, 也就知道 some() 了

ok, 接下来是我们基础阶段最后一个要掌握的方法了

reduce()

依然接收一个回调函数, 返回 最后一次回调函数执行的结果.

语法: arr.reduce( reducer, initial_value)

我们看下面使用示例:

可以看到实例, accu 是上一次函数调用的返回值, reduce() 最终的返回值是 最后一次回调函数返回的值.

注意一点, 如果没有提供 initial_value, 那么 reduce() 会从索引 1 的地方开始遍历, 这时, accu 的值会是 第 0 个元素.

ok, 这就是我们今天分享的内容啦
我们已经把 ES6 和 数组部分讲完

现在进入问答时间~


问:初始0可以省略吧
答:可以省略的,案例中是为了说明给初始值的情况

问:奇怪了 react-native 不管装在模拟器上还是真机上需要重启才能打开不重启一片空白
答:是的, 换了网络有时候都需要重新安装

问:可以问个问题吗 cookie里的值 JS 怎么操作替换掉?我发现只有localStorge 可以覆盖值 cookie好像不行
答:如果响应头规定了不能操作的话,就不能替换了,不能用 js 操作了,一般前端是不会去动 cookie 的,不安全。如果要操作的话, 可以自己封装一些方法,https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie 可以参考一下,特别注意它后面给了你一个操作 cookie 的小框架


精彩课程推荐:

足不出户,享受优质远程课程!

妙味 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

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部