【前端|JavaScript】一种比较"偏门"的数据格式处理 最近在写前端的时候碰到一种比较"偏门"的数据格式,大致如下: [pre lang="JSON"] data: { civil: { 0: '3000-4500', }, criminal: { 0: '1500', 1: '2000', 2: '3000', }, administrative: { 0: '2500-3750', }, charge: { 0: { '0-2': '800', }, 1: { '2-10': '4', }, 2: { '10-50': '3', }, 3: { '50-100': '2', }, 4: { '100-500': '1', }, 5: { '500-1000': '0.5', }, 6: { '1000-5000': '0.2', }, 7: { '5000-Infinity': '这是最终的处理方式', }, }, },[/pre]算是一个多维的数组对象?需求大概是这样子的,根据条件分别取到对应层级下的某个key范围内的值,也就是比如我当前条件是要求取charge下的2-10之间的对应值,直接用下标取肯定是不合适的,这个时候呢,就只能用如下的方法去取,(仅记录,可能有更优的方法?欢迎交流)设定已经把上面格式赋值给了data变量,那么就会有如下代码: [pre lang="javascript"] let charge = data.charge; Object.values(charge).map((item)=>{ //>Object.keys取下标,也就是取(2-10,10-50)这个下标 console.log(Object.keys(item)); //>Object.values取值,通过条件对比是否在下标范围内,在下标范围内则进行赋值或者对应操作. console.log(Object.values(item)) }) [/pre]以上,记录下来防止以后再碰上忘记.欢迎各位大佬指教.

【VSCode】ES-LINT提示插件提示屏蔽（非语法错误） 最近在用VSCode写代码的时候发现，ES-LINT会有一些莫名的提示，比如，我注释习惯用 //> 这样子的开头。。。但是在ES-LINT的默认提示里就会说必须在注释里强行加空格，也就是要 // >这样，才不会出错。。。又比如 我写一个switch, 根据习惯来说，case是不会和switch持平的。。。但是es-lint默认要求他们持平才不报错。。。综上所述，虽然编译过程中并不报错，但是编辑器里的这种提示很是扎眼。。。一通搜索之后，在.eslintrc的rules里增加如下规则： //>注释后不加空格 "spaced-comment": [ 0, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] } ]， //>switch对齐 "indent": [ 2, 2, { "SwitchCase": 1 } ],

【Vue】canvas画图之小程序“隐藏”画布 近期在工作上有项目使用到canvas来生成图片，并提供下载的功能。基于canvas不支持自适应，都是用的px作为单位。当然网络上也有一些教程是使用比如计算像素比来金星等比例调整的。我也参考了网络上的几种方式进行了一些调整操作。发现都是有些不太稳妥，最后还是采取了生成图片后隐藏画布，用img来展示图片并提供下载（保存）的功能。也的确是可以实现的，但是，在这个过程中会有一个canvas隐藏然后展示img的切换过程，画面一闪而过的。。。在用户使用体验上并不是太好，但是又不能在一开始就把canvas给隐藏掉。否则draw()的回调进不去。于是在思考再三，尝试如下操作： <view style="top:-999999999999rpx;"> <canvas canvas-id="canvasId" id="canvasId"></canvas> </view> 这个操作把画布移除了当前的展示区与。然后在画图过程中使用loading加载框，在会话完成后隐藏loading加载框，展示图片。体验上就好了许多，又不会导致画图出现问题。顺便记录一下，canvas画布 宽高使用100%，不给宽高，都有可能导致draw回调不执行，小程序下添加type="2d" 标签也可能导致画布不显示。

vue 2.x踩坑日记-Watch篇 在watch中直接使用sessionStorage做缓存存储无法执行。根据相关搜索结果，localStorage也无法在watch中执行。若一定要在watch中进行操作，可以在methods中创建方法，然后在watch中执行方法。

Laravel-Admin使用Vue给ChartJS动态增加数据 首先需要引入几个JS:<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="/path/to/js/axios.min.js"></script> <script src="/vendor/laravel-admin-ext/chartjs/Chart.bundle.min.js"></script>然后body部分：<div id="app"> <canvas id="myChart" style="width:200px;hegiht:200px;"></canvas> </div>接下来在JS部分：var app = new Vue({ el: '#app', data: { //>定义数据 labels: [], datas: [], }, methods: { draw() { var self = this; axios.get('/admin/test?axios').then(function (res) { //>遍历处理数据 for (var key in res.data.labs) { self.labels.push(res.data.labs[key]); } for (var key in res.data.data) { self.datas.push(res.data.data[key]); } //>开始图表绘制 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', //>bar为柱状图，line为折线图，还有其他的图表方式，可以按照自己需求，从官方文档中获取更多类型 data: { labels: self.labels, //>x轴标签 datasets: [{ label: "", //>第一个标签 data: self.datas, //>展示数据 backgroundColor: [ //>柱状图背景色，折线图的话就是填充背景色，如果存在多个数据则用数组，单条数据则不需使用数组。 'rgba(255, 99, 132, 0.2)', 'rgba(26,66,230,0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', ], borderColor: [ //>边框颜色 'rgba(255,99,132,1)', 'rgba(26,66,230,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', ], borderWidth: 1 //>边框宽度 }] }, options: { categoryPercentage: 1.0, legend: false, //>是否显示图标顶部图示 title: { //>图标顶部标题显示，可以用来显示一些统计信息之类的 display: true, text: 'this is title' }, tooltips: { mode: 'index', intersect: false }, responsive: true, scales: { xAxes: [{ beginAtZero: true, }], yAxes: [{ ticks: { barPercentage: 1.0, beginAtZero: true }, }] } } }); }, function (err) { }) } }, mounted() { }, created() { this.draw(); } })