关于最近前端JS、Vue、iview学习中的总结

    最近项目需要，对前端一个功能模块进行改造，主要使用到了iview、bootstrap-vue、vue.js等前端知识，改造完成，作为一个后台开发，在前端的学习上遇到了很多不熟悉的知识点，在此总结。

1.iview中清空select组件选中项：

  Select(filterable, clearable, ref="store", .....)

    Option(v-for="item in dataList", :value="item.value", :key="item.value")
        span {{ item.label }}

    在Select组件中增加ref="store"这一属性，然后在需要触发清空组件选项的地方通过触发：

this.$refs.store.clearSingleSelect()

就能 清空select组件选中项。

2.js sort方法根据数组中对象的某一个属性值进行排序:

var arr = [
    {name:'zopp',age:0},
    {name:'gpp',age:18},
    {name:'yjj',age:8}
];

function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
console.log(arr.sort(compare('age')))

3.JS 数组去重（数组元素是对象的情况）:

js数组去重有经典的 几种方法

但当数组元素是对象时，就不能简单地比较了，需要以某种方式遍历各值再判断是否已出现。

因为：

1.如果是哈希判断法，对象作哈希表的下标，就会自动转换成字符型类型，从而导致所有元素都相等，这时判断方法不再有意义。一般最后数组就只剩一个。

2.如果是直接比较法，则因为对象在内存中是按引用访问的，属性值相同的对象也不会相等，简单的直接判断不再有意义。一般最后数组还是原样，所以就需要进行值的比较。

当然了，也可以换着法来将相应对象转为字符串（不是默认的那种[object Object]）

举个例子：

var array = [  
    {a:1,b:2,c:3,d:4},  
    {a:11,b:22,c:333,d:44},  
    {a:111,b:222,c:333,d:444},  
    {a:11,b:22,c:33,d:44},  
    {a:11,b:22,c:33,d:444}  
    ];  

方法为：

//将对象元素转换成字符串以作比较  
function obj2key(obj, keys){  
    var n = keys.length,  
        key = [];  
    while(n--){  
        key.push(obj[keys[n]]);  
    }  
    return key.join('|');  
}  
//去重操作  
function uniqeByKeys(array,keys){  
    var arr = [];  
    var hash = {};  
    for (var i = 0, j = array.length; i < j; i++) {  
        var k = obj2key(array[i], keys);  
        if (!(k in hash)) {  
            hash[k] = true;  
            arr .push(array[i]);  
        }  
    }  
    return arr ;  
}  

去重调用：

//进行去重  
var arr = uniqeByKeys(array,['a','b']);  

假如需要按照属性a,b为数组进行去重，那么最后将得到：

array = [  
    {a:1,b:2,c:3,d:4},  
    {a:11,b:22,c:333,d:44},  
    {a:111,b:222,c:333,d:444}  
    ]; 

4.另外，一些常见的前端开发规范：

1）变量的命名JS约定俗成使用驼峰式（aaBbCc）；

2）当组件要传递多个参数时，分类换行，避免挤在同一行里。