web前端：前端两三问(20190923)

　　前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及Javascript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

　　1、js如何获取数组的key

　　functiongetObjectKeys(object){

　　varkeys=[];

　　for(varpropertyinobject)

　　returnproperty;

　　}

　　console.log(getObjectKeys(3332:[]))//3332

　　2、如何过滤数组中的空数据

　　Array.prototype.notempty=function(){

　　vararr=[];

　　this.map(function(val,index){

　　if(val!==""&&val!=undefined){

　　arr.push(val);

　　}

　　});

　　returnarr;

　　}

　　this.selectHouse=this.selectHouse.notempty()

　　3、iviewcheckboxGroup动态删除某个值后，页面checkBox选中状态错乱。

　　具体情况如下：

　　需求：

　　checkboxGroupv-for生成三个checkbox，默认勾选。当我点击某个checkbox默认取消勾选并且删除该checkbox。

　　操作方法一：

　　从最后一个开始删，也就是删除默认绑定的model数组中的最后一个值，这时候剩余checkbox的选中状态是正常的。

　　操作方法二：

　　但是如果从中间开始删，比如删除第二，那么第二个checkbox会被删除，但是第三个checkbox的选中状态样式没有了，model数据还是在的。

　　解决方法一：

　　我们在删除model数据后，更新数据的时候用this.$nextTick进行数据更新

　　解决办法二：

　　v-for的时候key的取值不取index而取实际的value值

　　延伸：

　　v-for在更新已渲染的元素列表的时候，采用就地复用策略，如果列表的数据发生变化，那么它会根据key值取判断值是否修改，如果修改则重新渲染这一项，否则则复用之前的数据。但是如果我们用index下标来作为key，那么在上面的例子中，我们删除了第二个数据，数据由三条变成了两条，列表重新渲染，而原本第三个checkbox的key是2，由于model数据长度由3变成了2。第三个checkbox的key由2变成了1导致重新赋值渲染。所以就导致实际值存在，但选中状态缺消失了的问题。

　　前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。