js知識點~數組快速聲明，數組查找當前值對應的范圍，數組去重，數組對象去重

 

1、快速聲明一個數組，長度為 100，元素全是 0？ 

// 第一種：
new Array(101).join(0).split('')
    /*
        new Array(101).join(0).split('')
        ** 注意：101 數字，將要比想創建的長度 + 1
            split括號中，一定要引號中間不留空格，否則不出想要的結果
            返回的結果為字符串0
    */

// 第二種：
Array.apply(null, { length: 100 }).fill(0)
    /*
        Array.apply(null, { length: 100 }).fill(0)
        ** 注意：
            數組fill函數，為數組填充，且為淺拷貝，
            arr.fill(value, start, end)
    */

// 第三種：
Array(100).fill(0)

// 第四種：
[...Array(100).fill(0)]

// 第五種：
Array.from({length: 100}, _ => 0)
    /*
        Array.from({length: 100}, _ => 0)
        ** 注意：
            _僅為箭頭函數替代
    */

 

 2、查找某個值的范圍，返回其對應的狀態，

　　例如：在使用echart圖表時，使用

/**
    @param array整型數組，且已經按照從小到大排好了序的
    @param val 傳入的值
    @return 返回對應范圍的下標
    ** 說明：
    根據指定的值，在array查找第一個比它大的值，返回對應的索引，通過索引在voltageDataType獲取對應的類型
    1：如果值小於array最小的值時，則獲取最低類型。所以voltageDataType前被賦予了個0
    2：如果值大於array最大的值時，則類型最高一檔

    ** vue 請使用vue調用方法
*/
function searchIndexType(array, val) {
    // 如果值小於array最小的值時，則獲取最低檔類型
    if (val < Math.min.apply(null, array)) {
        return 0
    }

    // 如果值大於array最大的值時，則類型最高一檔
    if (val > Math.max.apply(null, array)) {
        return array.length - 1
    }

    var idx = 0; var i = 0; var j = array.length
    for (i; i < j; i++) {
        if (array[i] > val) {
            idx = i
            break
        }
    }
    return idx
}

/*
    調用：給一個值，判斷其對應的范圍，以及其對應的顏色值
    說明：
        voltageData 取值的范圍
        voltageDataType 取值范圍對應的描述
        voltageDataColor 取值范圍對應的顏色值
*/
const voltageData = [2.5, 2.8, 3.0, 3.45, 3.6, 3.7]
const voltageDataType = ['極低', '過低', '較低', '正常', '較高', '過高', '極高']
const voltageDataColor = ['#3d60f1', '#8867d2', '#d0bbff', '#90c223', '#ffb643', '#f98182', '#e64848']
const basicData = voltageDataType[searchIndexType(voltageData, 3)]
const basicDataColor = voltageDataColor[searchIndexType(voltageData, 3)]

console.log('對應范圍描述的取值==>', basicData)
console.log('對應范圍顏色的取值==>', basicDataColor)

 

 3、數組去重的10種方法（推薦：方法10）

let arrData = [1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4];
    console.log("原始數組=>", arrData);
    /**
     * 方法1
     * 思路：定義一個新數組，並存放原數組的第一個元素，然后將元素組一一和新數組的元素對比，若不同則存放在新數組中。
     *
     */
    function unique(arr) {
        let newArr = [arr[0]];
        for (let i = 1; i < arr.length; i++) {
            let repeat = false;
            for (let j = 0; j < newArr.length; j++) {
                if (arr[i] === newArr[j]) {
                    repeat = true;
                    break;
                } else {

                }
            }
            if (!repeat) {
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }

    console.log("1、去重后數組=>", unique(arrData));
    // 結果是[1, 2, 3, 5, 6, 7, 4]

    /**
     * 方法2
     * 思路：先將原數組排序，在與相鄰的進行比較，如果不同則存入新數組。
     *
     */
    function unique2(arr) {
        var formArr = arr.sort()
        var newArr = [formArr[0]]
        for (let i = 1; i < formArr.length; i++) {
            if (formArr[i] !== formArr[i - 1]) {
                newArr.push(formArr[i])
            }
        }
        return newArr
    }
    console.log("2、去重后數組=>", unique2(arrData));
    // 結果是[1, 2, 3, 4, 5, 6, 7]

    /**
     * 方法3
     * 思路：利用對象屬性存在的特性，如果沒有該屬性則存入新數組。
     *
     */
    function unique3(arr) {
        var obj = {}
        var newArr = []
        for (let i = 0; i < arr.length; i++) {
            if (!obj[arr[i]]) {
                obj[arr[i]] = 1
                newArr.push(arr[i])
            }
        }
        return newArr
    }
    console.log("3、去重后數組=>", unique3(arrData));
    // 結果是[1, 2, 3, 4, 5, 6, 7]

    /**
     * 方法4
     * 思路：利用數組的indexOf下標屬性來查詢。
     * 
     */
    function unique4(arr) {
        var newArr = []
        for (var i = 0; i < arr.length; i++) {
            if (newArr.indexOf(arr[i]) === -1) {
                newArr.push(arr[i])
            }
        }
        return newArr
    }
    console.log("4、去重后數組=>", unique4(arrData));
    // 結果是[1, 2, 3, 4, 5, 6, 7]

    /**
     * 方法5
     * 思路：利用數組原型對象上的includes方法。
     * 
     */
    function unique5(arr) {
        var newArr = []
        for (var i = 0; i < arr.length; i++) {
            if (!newArr.includes(arr[i])) {
                newArr.push(arr[i])
            }
        }
        return newArr
    }
    console.log("5、去重后數組=>", unique5(arrData));
    // 結果是[1, 2, 3, 4, 5, 6, 7]

    /**
     * 方法6
     * 思路：利用數組原型對象上的 filter 和 includes方法。
     * 
     */
    function unique6(arr) {
        var newArr = []
        newArr = arr.filter(function (item) {
            return newArr.includes(item) ? '' : newArr.push(item)
        })
        return newArr
    }
    console.log("6、去重后數組=>", unique6(arrData));
    // 結果是[1, 2, 3, 4, 5, 6, 7]

    /**
     * 方法7
     * 思路：利用數組原型對象上的 forEach 和 includes方法。
     * 
     */
    function unique7(arr) {
        var newArr = []
        arr.forEach(item => {
            return newArr.includes(item) ? '' : newArr.push(item)
        });
        return newArr
    }
    console.log("7、去重后數組=>", unique7(arrData));
    // 結果是[1, 2, 3, 4, 5, 6, 7]

    /**
     * 方法8
     * 思路：利用數組原型對象上的 splice 方法。
     * 
     */
    function unique8(arr) {
        var i, j, len = arr.length;
        for (i = 0; i < len; i++) {
            for (j = i + 1; j < len; j++) {
                if (arr[i] == arr[j]) {
                    arr.splice(j, 1);
                    len--;
                    j--;
                }
            }
        }
        return arr;
    }
    console.log("8、去重后數組=>", unique8(arrData));
    // 結果是[1, 2, 3, 4, 5, 6, 7]

    /**
     * 方法9
     * 思路：利用數組原型對象上的 lastIndexOf 方法。
     * 
     */
    function unique9(arr) {
        var res = [];
        for (var i = 0; i < arr.length; i++) {
            res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
        }
        return res;
    }
    console.log("9、去重后數組=>", unique9(arrData));
    // 結果是[1, 2, 3, 4, 5, 6, 7]

    /**
     * 方法10
     * 思路：利用 ES6的set 方法。
     * 
     */
    function unique10(arr) {
        //Set數據結構，它類似於數組，其成員的值都是唯一的
        return Array.from(new Set(arr)); // 利用Array.from將Set結構轉換成數組
    }
    console.log("10、去重后數組=>", unique10(arrData));
    // 結果是[1, 2, 3, 4, 5, 6, 7]

 

 4、數組對象去重的4種方法（推薦：方法2，方法4） 

let arrData = [
        { name: 'a', id: 1 },
        { name: 'a', id: 2 },
        { name: 'b', id: 3 },
        { name: 'c', id: 4 },
        { name: 'c', id: 6 },
        { name: 'b', id: 6 },
        { name: 'd', id: 7 }
    ];
    console.log("原始數組對象=>", arrData);

    /**
     * 方法1
     * 思路：es5冒泡排序法，去重arr
     * @param arr 為數組
     * @param type 根據某個字段去重
     */
    function duplicateRemoval1(arr, type) {
        let newArr = JSON.parse(JSON.stringify(arr));
        for (let i = 0; i < newArr.length - 1; i++) {
            for (let j = i + 1; j < newArr.length; j++) {
                if (newArr[i][type] == newArr[j][type]) {
                    newArr.splice(j, 1);
                    // 因為數組長度減小1，所以直接 j++ 會漏掉一個元素，所以要 j--
                    j--;
                }
            }
        }
        return newArr;
    }

    console.log("1、根據id去重后數組對象=>", duplicateRemoval1(arrData, "id"));
    console.log("1、根據name去重后數組對象=>", duplicateRemoval1(arrData, "name"));

    /**
     * 方法2
     * 思路：利用reduce方法遍歷數組,reduce第一個參數是遍歷需要執行的函數，第二個參數是item的初始值
     * @param arr 為數組
     * @param type 根據某個字段去重
     */
    function duplicateRemoval2(arr, type) {
        let newArr = JSON.parse(JSON.stringify(arr));
        var obj = {};
        newArr = newArr.reduce(function (item, next) {
            obj[next[type]] ? '' : obj[next[type]] = true && item.push(next);
            return item;
        }, []);
        return newArr;
    }
    console.log("2、根據id去重后數組對象=>", duplicateRemoval2(arrData, "id"));
    console.log("2、根據name去重后數組對象=>", duplicateRemoval2(arrData, "name"));


    /**
     * 方法3
     * 思路：利用對象訪問屬性的方法，判斷對象中是否存在key
     * @param arr 為數組
     * @param type 根據某個字段去重
     */
    function duplicateRemoval3(arr, type) {
        let result = [];
        let obj = {};
        for (let i = 0; i < arr.length; i++) {
            if (!obj[arr[i][type]]) {
                result.push(arr[i]);
                obj[arr[i][type]] = true;
            }
        }
        return result
    }
    console.log("3、根據id去重后數組對象=>", duplicateRemoval3(arrData, "id"));
    console.log("3、根據name去重后數組對象=>", duplicateRemoval3(arrData, "name"));

    /**
     * 方法4
     * 思路：es6的Map()
     * @param arr 為數組
     * @param type 根據某個字段去重
     */
    function duplicateRemoval4(arr, type) {
        let newArr = JSON.parse(JSON.stringify(arr));
        let map = new Map();
        for (let item of newArr) {
            if (!map.has(item[type])) {
                map.set(item[type], item);
            }
        }
        return [...map.values()];
    }
    console.log("4、根據id去重后數組對象=>", duplicateRemoval4(arrData, "id"));
    console.log("4、根據name去重后數組對象=>", duplicateRemoval4(arrData, "name"));