前端须知名词解释

目录

一、多维转一维

二、一维转多维

一维转多维——使用场景：分页

三、判断当前元素是否为数组

四、判断当前元素是否是空对象

五、数字分割符：提高数字可读性

六、模糊盒子（怪异盒子）与标准盒模型

七、css的filter属性

图片模糊

这个filter滤镜可以用来做全局页面变灰，

转存失败重新上传取消​编辑​编辑

八、找到数组中的最大/最小值

 

九、虚拟dom

十、vue的template模版的渲染过程

十一、灰度发布（金丝雀发布、 渐进式发布）

---

一、多维转一维

一、使用forEach 结合 递归处理
function flatData(list,children){let resList = []list.forEach(ele => {if(ele[children]&&ele[children].length>0){resList=resList.concat(flatData(ele[children]))  }else {resList.push(ele)}});return resList}二、[1,[2,[3]]].join().split(',')
三、[1,[2,[3]]].flat()

二、一维转多维

一维转多维——使用场景：分页

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var row = 3; var multiArr = []; for (var i = 0; i < arr.length; i += row) { multiArr.push(arr.slice(i, i + row)); } console.log(multiArr);

三、判断当前元素是否为数组

[1,2,3] instanceof ArrayArray.isArray([1,2,3])[1,2].constructor ===Array

四、判断当前元素是否是空对象

Object.key/entries/value({}).length>0console.log(JSON.stringify({})=='{}')

五、数字分割符：提高数字可读性

属于ES新增，老项目可能不支持，若要提高数字的可读性，你可以使用下划线作为分隔符来更好地区分数字的各个部分。这样做可以让数字更易读，让人一目了然，而且还能在小白面前秀一把。

var num == 1_110_000;//等同于1110000

六、模糊盒子（怪异盒子）与标准盒模型

模糊盒子的宽包含了padding、content、border，当设置padding和border时，content会被压缩，因为宽包含了padding/border。属性box-sizing:border-box;

标准盒模型的宽只有一个content，所以当我们设置padding/border时，整个元素会扩大，content不会压缩。属性：box-sizing:content-box;

 

七、css的filter属性

图片模糊

给img标签设置属性

filter: blur(5px);

这个filter滤镜可以用来做全局页面变灰，

filter: grayscale(1);

还记得吗，当国家公祭日等重要节日，各大网站与软件网页置灰，就是用的这个

 

八、找到数组中的最大/最小值

 

 

九、虚拟dom

为什么要有虚拟dom呢，很多年前在没有vue和react的时候，修改数据后在渲染页面是通过大范围全局dom循环遍历查询要更新数据的dom，这就消耗了很多计算资源，多了很多没必要的性能消耗，那么虚拟dom是怎么回事呢，虚拟dom会把页面dom元素抽象化成一个嵌套对象（从dom根节点递归得来），当我们修改数据值，会在虚拟dom对象里查找，修改的是虚拟dom对象的属性，通过diff算法对比前后的虚拟dom后才会进行真实dom的渲染。

十、vue的template模版的渲染过程

首先将template里的内容转化为render函数，接下来就是挂载实例，把render函数从根节点开始递归形成虚拟dom，通过diff算法对比新旧虚拟dom更新真实dom

十一、灰度发布（金丝雀发布、 渐进式发布）

灰度发布就是发布非稳定版本供用户使用来进行测试的一种发布方式，我们常常看到游戏会抽取部分用户发放一些账号让大家提前体验新内容，也常常看到软件提醒要不要更新到最新的测试版本来体验新功能，用户想不想当小白鼠完全自愿，开发人员可以测试服务器的稳定性和新功能的流畅度来规避风险，再根据用户反馈做出进一步的调整，然后就有了稳定版发布，是双赢的一种策略。