01--04例子

2020-10-30

1、数组扁平化

数组扁平化是指将一个多维数组变为一个一维数组

1 2	const arr = [1, [2, [3, [4, 5]]], 6]; // => [1, 2, 3, 4, 5, 6]

方法一：flat() 方法
let newArray = arr.flat(depth)

flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。其中，depth指定要提取嵌套数组的结构深度，默认值为1。但使用 Infinity 作为深度，展开任意深度的嵌套数组

1	const res1 = arr.flat(Infinity);

方法二：使用正则

1 2	const res2 = JSON.stringify(arr).replace(/\[\|\]/g, '').split(','); //但数据类型全为字符串

方法三：正则改良版本

1	const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/\[\|\]/g, '') + ']');

方法四：使用reduce

const flatten = arr => {
    return arr.reduce((pre,cur) => {
        return pre.concat(Array.isArray(cur) ?
        flatten(cur) : cur);
    }, []);
}
const res4 = flatten(arr);

方法五：函数递归

const res5 = [];
const fn = arr => {
    for(let i = 0; i < arr.length; i++) {
        if(Array.isArray(arr[i])) {
            fn(arr[i]);
        } else {
            res5.push(arr[i]);
        }
    }
}
fn(arr);

2、数组去重

1	const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];

方法一：Set去重

1	const res1 = Array.from(new Set(arr));

方法二：两层for循环+splice

const unique1 = arr => {
    let len = arr.length;
    for(let i = 0; i < len; i++) {
        for(let j = i + 1; j < len; j++) {
            if(arr[i] === arr[j]) {
                arr.splice(j, 1);
                // 每删除一个树，j--保证j的值经过自加后不变。同时，len--，减少循环次数提升性能
                len--;
                j--;
            }
        }
    }
    return arr;
}
const res2 = unique(arr);

方法三：indexOf

const unique2 = arr => {
    const res = [];
    for(let i = 0; i < arr.length; i++) {
        if(res.indexOf(arr[i] === -1)) {
            res.push(arr[i]);
        }
    }
    return res;
}
const res3 = unique2(arr);

方法四：include

const unique3 = arr => {
    const res = [];
    for(let i = 0; i < arr.length; i++) {
        if(!res.includes(arr[i])) {
            res.push(arr[i]);
        }
    }
    return res;
}
const res4 = unique3(arr);

方法五：filter

const unique4 = arr => {
    return arr.filter((item, index) => {
        return arr.indexOf(item) === index;
    });
}

3、类数组转化为数组

类数组是具有length属性，但不具有数组原型上的方法。常见的类数组有arguments、DOM操作方法返回的结果.

方法一：Array.from

1	Array.from(document.querySelectorAll('div'));

方法二：Array.prototype.slice.call()

1 2	//call的应用-借用其他类型中的方法 Array.prototype.slice.call(document.querySelectorAll('div'));

方法三：扩展运算符

1	[...document.querySelectorAll('div')]

方法四：利用concat

1 2	//apply的应用--把数组展开传递给之前的方法 Array.prototype.concat.apply([], document.querySelectorAll('div'));

4、Array.prototype.filter

Array.prototype.filter = function(callback, thisArg) {
    //this调用的对象：例如：[1,2,3].filter==》this就是[1,2,3]
    if(this == undefined) {
        throw new TypeError('this is null or not undefined');
    }
    if(typeof callback !== 'function') {
        throw new TypeError(callback + 'is not a function');
    }
    const res = [];
    //让O成为回调函数的对象传递(强制转换对象)
    const O = Object(this);
    // >>>0 保证len为number,且为正整数
    const len = O.length >>> 0;
    for (let i = 0; i < len; i++) {
        //检查i是否在O的属性(会检查原型链)
        if (i in O) {
            //回调函数调用传参
            //call() 改变函数中的this,直接调用函数--通过 call()，您可以借用其他类型中的方法
            //函数的三个参数：O[i]-->item(当前元素)、i-->index(索引)、O-->array(数组本身)
            if (callback.call(thisArg, O[i], i, O)) {
                res.push(O[i]);
            }
        }
    }
    return res;
}