前端兩三問(20190923)

1、js如何獲取數組的key

function getObjectKeys(object){
    var keys = [];
    for (var property in object)
    return property;
}

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

2、如何過濾數組中的空數據

Array.prototype.notempty = function() {
  var arr = [];
  this.map(function(val, index) {
    if (val !== "" && val != undefined) {
      arr.push(val);
    }
  });
  return arr;
}
this.selectHouse = this.selectHouse.notempty()

3、iview checkboxGroup 動態刪除某個值後，頁面checkBox 選中狀態錯亂。

具體情況如下：

需求 ：

checkboxGroup v-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 導致重新賦值渲染。所以就導致實際值存在，但選中狀態缺消失了的問題。

關註公眾號 【小夭同學】