2020年12月11日 星期五

陣列操作

取得陣列運算結果
[{value:2,text:'male'},{value:7,text:'female'},]
arr.reduce((partialSum, a) => partialSum + a.value, 0) // return 9

去除重複元素
arr.filter((value, index, array) => array.indexOf(value) === index);

去除重複元素 by 屬性值
export function arrayDistinctByKey(arr: Array<any>, key: string): Array<any> {
    return arr.filter((value, index, array) => arr.filter(a=>a[key]==value[key])[0] === value);
}

移除(置換)單一元素
keyname: 用來比對的屬性,若未設定則用整個物件比對
newvalue: 欲置換的元素
function arrayRemove(arr, value, keyname,newvalue) { 
    if (keyname) {
        for (let a of arr) {
            if (a[keyname] == value[keyname]) {
                value = a;
                break;
            }
        }
    }
    let index = arr.indexOf(value);
    if (index > -1) {
        if (!newvalue) arr.splice(index, 1);
        else arr.splice(index, 1, newvalue);
    }
    return arr;
}

將一個陣列插入另一個陣列某個位置
arr1.splice(i,0,...arr2) // ...arr2 = arr2[0],arr2[1],...

結合
Array.prototype.push.apply(arr1, arr2); // 將arr2 的元素放入arr1
arrs=arrs1.concat(arrs2);

走訪
arrs.forEach(a=>a.項次=項次--);
arrs.forEach(a=>{
...                       
});    

過濾後選擇某些屬性
arr.filter(res=>res.checked).map(ele=>({value:ele.value,text:ele.name}));

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器