白也blog - 前端
type: channel
link: http://www.baiyeovo.cn/index.php/tag/%E5%89%8D%E7%AB%AF/
items: ES6中reduce的骚操作
items: 让JS控制台永远Debuger状态，禁止F12控制台调试JavaScript
items: Bootstrap 新手注意事项

ES6中reduce的骚操作
type: item
date: 2022-04-09T00:02:00+08:00
description: reduce方法是JavaScript中一个比较强大的方法，可能在平时开发中，有人根本没用过，通过下面的8个例子，学会reduce的用法以及它的常用场景。reduce方法是一个数组的迭代方法，和map、filter不同，reduce方法可缓存一个变量，迭代时我们可以操作这个变量，然后返回它。这是我大白话的解释，可能还是不容易理解，下面看例子吧1. 数组累加数组累加是项目经常遇到的，比如计算商品总价等，使用reduce就可以一行代码搞定，而且不用定义外部变量，reduce是完全无副作用的函数。// 累加[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i);// 输出：36// 累加，默认一个初始值[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i, 5);// 输出：41// 累乘[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a * i);// 输出：403202. 找出数组最大值在数组每次的迭代中，我们使用Math.max获取最大值并返回，最后我们将得到数组所有项目的最大值。[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => Math.max(a, i));当然如果数组每项都是数字我们可以使用...展开运算符和Math.max配合。Math.max(...[1, 2, 3, 4, 5, 6, 7, 8]);3. 处理不规则数组通过map和reduce配合使用，返回每个子数组拼接好的结果。let data = [ ["红色","128g", "苹果手机"], ["南北","两室一厅","128㎡","洋房住宅"], ["小米","白色","智能运动手表","心率血压血氧","来电信息提醒"], ["官方发售","2020年秋季","篮球","球鞋","品牌直邮"]]let dataConcat = data.map(item=>item.reduce((a,i)=>${a} ${i}))// 输出结果：["红色 128g 苹果手机""南北 两室一厅 128㎡ 洋房住宅""小米 白色 智能运动手表 心率血压血氧 来电信息提醒""官方发售 2020年秋季 篮球 球鞋 品牌直邮"]4. 删除数据重复项检查当前迭代项是否存在，如果不存在添加到数组中。let array = [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c'];array.reduce((noDupes, curVal) => { if (noDupes.indexOf(curVal) === -1) { noDupes.push(curVal) } return noDupes}, [])// 输出：[1, 2, 3, 'a', 'b', 'c']5. 验证括号是否合法这是一个很巧妙的用法，我在dev.to上看到的用法。如果结果等于0说明，括号数量是合法的。[..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0);// 输出：0// 使用循环方式let status=0for (let i of [..."(())()(()())"]) { if(i === "(")status = status + 1else if(i === ")")status = status - 1if (status < 0) {break;}}6. 按属性分组按照指定key将数据进行分组，这里我用国家字段分组，在每次迭代过程中检查当前国家是否存在，如果不存在创建一个数组，将数据插入到数组中。并返回数组。let obj = [ {name: '张三', job: '数据分析师', country: '中国'}, {name: '艾斯', job: '科学家', country: '中国'}, {name: '雷尔', job: '科学家', country: '美国'}, {name: '鲍勃', job: '软件工程师', country: '印度'},]obj.reduce((group, curP) => { let newkey = curP['country'] if(!group[newkey]){group[newkey]=[]} group[newkey].push(curP) return group}, [])// 输出：[ 中国: [{…}, {…}] 印度: [{…}] 美国: [{…}] ]7. 数组扁平化这里展示的数组只有一级深度，如果数组是多级可以使用递归来进行处理[[3, 4, 5], [2, …

让JS控制台永远Debuger状态，禁止F12控制台调试JavaScript
type: item
date: 2022-03-12T00:38:00+08:00
description: 分享一个禁止用户调试我们的JavaScript脚本的代码。代码很简单，加了几层的闭包，让调试的时候，没那么容易找到然后删除。当然加密前手动添加各个位置效果会更好。最好配合无限循环。禁用JavaScript调试代码(function (a) {return (function (a) { return (Function('Function(arguments[0]+"' + a + '")()')) })(a)})('bugger')('de', 0, 0, (0, 0)); JS控制台永远Debuger

Bootstrap 新手注意事项
type: item
date: 2022-03-11T16:36:00+08:00
description: Bootstrap v3版本官网container 自带左右15px的内边距row 是有 -15px的左右外边距经常是container做为版心,嵌套row来书写的当然栅格系统也是非常重要的,其中的档位需要重点理解 主要是将页面分成十二个小内容.与rem以继承html根元素的字体大小,vw(继承页面窗口宽度的百分之一),vh(继承页面窗口高度的百分之一不同).他是将市面常见的手机屏幕分档位,,我直接上图 便于理解当然使用bootstrap之类的js一定要注意引入的位置,顺序一转或者放错位置是无法生效的哈.P:引入的css样式,在当前布局中无法做到适配自己项目中的需求,可以去bootstrap官网定制css样式,然后下载重新引入定制的样式便可生效.