每日学习的总结
7月18日:
1. 学习到了ES6的一些新增语法:箭头函数,let, const, for ( let value of Array)
2.学习到遍历数组的 find() 方法,即多用数组的API ,即尽量查阅数组的方法,少自己写函数
const cartItem = cartItems.find(cartItem => cartItem.item.barcode === barcode); //最右边的barcode 是前面已经给出的
cartItems 是一个数组,它里面的每个元素我们自己把它叫 cartItem(也可以是别的,因为是虚有的) ,每一个元素是一个 key :item,value :内容是一系列包含barcode 的键值对,只要找到固定的barcode,即 cartItem.item.barcode === barcode 为true ,该find()函数就返回 该元素cartItem
(数组的API : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find )
3.学习到优雅的写代码(首先保证自己的代码量足够少)
7月19日
1.擅于使用条件表达式 代替 if else :
let count = parseFloat( splitedInput[1] || 1 ); 省略了 if else 的使用,减少代码量
2.在ES6 中: 当箭头函数中只有一条语句的时候,可以直接写这条语句,不写{return ..}
如: let cartItem = cartItems.find( cartItem => cartItem.item.barcode === barcode); // 当函 里面的语句为true 时,就返回参数cartItem
3.使用数组的map()方法:
比如:array = [1,2,3];
let arr = array.map(i => i *2) ; // i表示数组array 的每一个元素, 这样 i 的值聚会被改变为 i*2
结果: arr = [2, 4, 6];
代码中的实例:
let buildReceiptItems = (cartItems, promotions) => {
return cartItems.map(cartItem => {
let promotionType = getPromotionType(cartItem.item.barcode, promotions);
let {subtotal, saved} = discount(cartItem, promotionType);
return {cartItem, subtotal, saved};
})
};
代码解释: 1. map函数中的参数cartItem 表示 数组cartITems 的每一个元素,该cartItem 会被map函数中的返回值 {cartItme,subtotal,saved} 替换
2.ES新特性: 当一个对象的 key 和 value 完全一样的时候,可以只写一个
比如:return {cartItem:cartItem , subtotal : subtotal, saved : saved}
等价于 return { cartItem, subtotal, saved };
4.数组的新方法 includes() ,比 find() 简单,只是去找一个数组里面有没包含一个指定的元素
如 :
let getPromotionType = (barcode, promotions) => {
let promotion = promotions.find(promotion => promotion.barcodes.includes(barcode));
return promotion ? promotion.type : '' '';
};
返回的和接受的顺序可以不一样,但是 key 必须完全一样 ,才能正确的匹配上(这是一个糖)
如:
主调函数: let {subtotal, saved} = discount(cartItem, promotionType);
被调函数: let discount = (cartItem, promotionType) => {
return {saved, subtotal};
};
6. 优雅的写代码,保证代码最优雅,即使用简洁的方法,让更少的代码完成更多的功能
7. 在写pos机时.关于计算小计subtotal的时候,有一个梗:
one: 在计算的过程中不需要考虑保留几位小数的问题, 单价* 数量 结果都是和测试是匹配的,因为它们比较的是数字类型的,即 30.00 = 30
two: 并且如果数字的最后位是 0 的话,浏览器里面是不会输出来的,它只会输出来不为0 的部分
three:只有在最后变成字符串形式的时候才需要考虑保留的小树的位数要与测试完全匹配,因为这时候它比较的是 字符型的数字,需要逐位完全一样.
7月20日
1.学会了数组的some()方法:
判断数组师是否包含一个元素,返回的是一个true or false
arr.some(callback[, thisArg])some为数组中的每一个元素执行一次callback函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some将会立即返回true。否则,some返回false。callback只会在那些”有值“
索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。some被调用时不会改变数组
var number = [2, 5, 8, 1, 4].some( element => element >= 10 ) ;
// passed is true
var number = [12, 5, 8, 1, 4].some( element => element >= 10 );
// passed is true
const promotion = promotions.find(promotion => promotion.barcodes.some(b => b === barcode));
2. 记住webstorm 常用快捷键的使用(45 个)
写在这样。。。。。。
3. 20分钟写完pos作业的代码
7月21日
1.filter()把一个数组变成另外一个新数组
filter() 一个数组变成另外一个数组arr.filter(callback[, thisArg])
callback用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素(通过测试),false则不保留。filter为数组中的每个元素调用一次callback函数,并利用所有使得callback返回 true或 等价于 true 的值 的元素 创建一个新数组。callback只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过callback测试的元素会被跳过,不会被包含在新数组中。
例子:筛选排除掉所有的小值 , 下例使用filter创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。var filtered = [12, 5, 8, 130, 44].filter( number =>element >= 10); // filtered is [12, 130, 44]2.reduce()数组的累加求和
数组 arr = [1,2,3,4] 求数组的累加求和
4.安装nodeJS的方法,能够快速安装 (有笔记,有步骤)
安装jasmine
webstorm里面debug : 写jasmine 的入口程序(jasmine 官网的四行代码),让程序来运行我们的代码(在终端运行该入口程序:node run-test.js 或者在webstorm 中光标聚焦在该文件上,右击 --> 点击run 该文件 ),然后在 webstorm 中debug(debug : ctrl alt f10 ---> 设置断点 ---> 点击webstorm 右上角的 虫子图标)
1.写测试的实现的时候需要写上‘use strict’ ,表示严格按照ES6 标准
2.postcodeObj = {postcode: postcode, str:"true"}
3. 字符串的方法 replace(指定要被 ‘425-609’.replace( ‘-’,' ') = '425609' // 表示把字符串中的横杠dash ‘-’ 替换成 空字符串 ,即去掉横杠 ‘ - ’
4. includes()方法 适用于数组里面每个元素存放的是字符串,如果是数字类型的数字,就不能用这个方法,而是用some() 方法
如[2,4,6].includes( 4) = false ;
故用[2,4,6].includes( b => b === 4) = true
5. map()一定有变量接受它的结果: let array = arr.map( element => element * 2);
6. 字符串最后都有一个 ' \0 ' , 故求字符串长度的是后要注意: str = ‘ abc’ ; str.length = 4 ; 因为它要把最后一个 ‘ \0 ’ 也加上
7. 数组的求下标的方法:Array.indexOf(element);
8.splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
该方法会改变原始数组
splice(start, quantity,newElement);
start :添加/删除项目的位置,使用负数可从数组结尾处规定位置。
quantity: 要删除的项目数量。如果设置为 0,则不会删除项目,而是在start位置除添加新元素newElement
newElement :可选(不写,表示只做删除),向数组添加的新元素。
9.slice() 方法可从已有的数组中返回选定的元素。
slice(start ,end)
start :其实下标位置,如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end :结束位置但不包括该位置。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
该方法并不会修改数组,而是返回一个新的数组,包含从 start 到 end (不包括该元素)-1 的 arrayObject 中的元素
10.substring() 用于提取字符串中介于两个指定下标之间的字符
string.substring( start , stop)
返回一个新的字符串 = start 处到 stop-1 处的所有字符,其长度为 stop 减start。
start : 提取的子串的第一个字符在 stringObject 中的位置
stop : 可选。结束位置但不包括该位置 如果省略该参数,那么返回的子串会一直到字符串的结尾。
如果参数 start 与 stop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。如果 start 比 stop 大,那么该方法在提取子串之前会先交换这两个参数。
重要事项:与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。
7月23日
1.今天分班考试,题目一点儿也不难,就跟pos机是差不多的,然而我却慌张了,心态没有放好,没有好好珍惜时间,导致结果没有把自己能做的做完,很遗憾,很受打击,心情低落到低谷
导致这样的原因:
心态放好,踏踏实实一步一步做,放轻松,没必要太紧张
写代码踩坑:1. 在传送输入的数据的时候
inputs = ["ITEM0001 x 1", "ITEM0013 x 2"]
这样的数据,每一个元素是一个字符串
该字符串是有一个"barcode空格x空格“这样组成的
对于字符串一定不要忽略空格,这就是一个坑,忽略空格就会出错
const arr = inputs.split("x"); const id = arr[0] ;
结果: id != ITEM0001 然后我死活找不到找不到为什么两个不相等
因为 id 后面还有一个空格
2.文件的引入,如果在本层目录(同一目录下)一定要写成 :
const a = reuqire("./items"); (items指的是文件名 而不是函数名)
const a = reuqire("items") 写成这样会出错的,会找不到该文件
3. 加上 .trim() 方法可以使即使 字符串模板里面第一行写了换行也结果也不会输出换行 ``
let receipt = bestCharge.getReceiptText(inputs).trim();
let expectReceipt = `
============= 订餐明细 =============
黄焖鸡 x 1 = 18元
肉夹馍 x 2 = 12元
-----------------------------------
使用优惠:
指定菜品半价黄焖鸡,省9元
-----------------------------------
总计:21元
===================================`.trim();
4. expext(a).toBe(b) : 在写测试的时候测试匹配的时候
expect(a).toBe(b) 即 .toBe 比较的是地址和内容都相等
故它只能比较返回的结果是一个数字
不能比较 对象和数组,因为他们的地址不想等;
expext(a).toEqual(a) 只是比较的是值内容,故他可以来比较对象和数组;
8月1日
学习react
1.用思维导图的方式来学习一门新技术,初要通过思维导图学会问自己问题来了解它
2.学会使用它,还是用思维导图来来罗列出要学习使用的知识点,由简单到复杂,由浅到深
通过思维导图,我了解了react的背景,以及有很清楚的认识
如下react的学习路线和方式:

8月3号
react实践方向:

8月4号
react 路由的学习
这部分我没有怎么学习,还很欠缺
只是在fake-golden-data中写页面跳转的时候用到一点儿,具体的我还是不清楚
下面有小波老师写fake-golden-data录的视频:
https://pan.baidu.com/s/1kUKgF8F<br>
视频录好了,过程中掉了两个坑,大家注意一下我是怎么快速爬出来的。
8月8号
我们开始做项目: 需求调研 - 功能拆分 - 敏捷开发 - 持续集成 - 团队协作 - 结对编程 - 代码评审
不管客户怎么的不感兴趣, 一定要像讲故事一样的给他说出我们产品的亮点
敏捷开发是啥 ?????
8月8日
用户故事:
8月10日
今天由于webstorm非常的卡,我基本一天没干什么事(最后去官网重新下载了一个最新版本,稍微好点儿)
写代码总结: return 后面千万不能直接回车然后在写东西,不然就是在给自己挖坑
return 后面要紧跟着东西
git总结: 一定要保证本地git仓库是干净的(都已经commit,然后git status 是干净的),才能进行远程的pull操作
本地仓库不干净,pull的时候ui出错
8月11日:
敏捷实践:
看板 ---> 用户故事 --> 持续集成 ----> code review ---->
8月12日
写代码常会出现的问题:
1.引入路径上的单词写不对,总是兑不上
2.个别单词拼写错误
3.不够小步
8月21日
1.写代码的时候发现: res.json() VS res.send()
res.json("nihao") // 输出"nihao"
res.send("nihao") //输出 nihao

浙公网安备 33010602011771号