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"));