每天学习10个实用Javascript代码片段（二）|倒序遍历数组、遍历对象、数组展平、过滤数组重复项

每天学习10个实用Javascript代码片段（二）

每天学习10个实用Javascript代码片段，加深对 Javascript 语法的理解，积累代码优化经验，今天是第二部分，当然看完后还能继续查看过完的代码片段《每天学习10个实用Javascript代码片段（一）》。

1. forObject

此代码片段遍历对象的每个属性，并分别为每个属性迭代一个回调。

const forObject = (obj, callback) =>
    Object.keys(obj).forEach((key) => callback(obj[key], key, obj));

const testObj = {
    title: "每天学习10个实用Javascript代码片段（一）",
    author: "天行无忌",
};
forObject(testObj, (val, key) => {
    console.log(`${key}:${val}`);
});
// title:每天学习10个实用Javascript代码片段（一）
// author:天行无忌

2. forReverse

此代码片段倒序遍历数组，即从数组的最后一个元素开始向前遍历数组的每个元素并执行一个回调函数。

const forReverse = (array, callback) =>
    array.slice(0).reverse().forEach(callback);

const testArray = [1, 2, 3, 4];
forReverse(testArray, (val) => console.log(val));

// 4
// 3
// 2
// 1

3. flatten

此代码片段使用递归将数组展平到指定的深度，ES6中有现成的函数可以实现，在这里有介绍《7 个你应该掌握的 JavaScript 编码技巧》。

const flatten = (array, depth = 1) =>
    array.reduce(
        (acc, current) =>
            acc.concat(
                depth > 1 && Array.isArray(current)
                    ? flatten(current, depth - 1)
                    : current
            ),
        []
    );
const arrayTest = [0, 1, 2, [[[3, 4, [5]]]]];

console.log(flatten(arrayTest)); // [ 0, 1, 2, [ [ 3, 4, [Array] ] ] ]
console.log(arrayTest.flat()); // [ 0, 1, 2, [ [ 3, 4, [Array] ] ] ]

const depth = 3;
console.log(flatten(arrayTest, depth)); // [ 0, 1, 2, 3, 4, [ 5 ] ]
console.log(arrayTest.flat(depth)); // [ 0, 1, 2, 3, 4, [ 5 ] ]

4. deepFlatten

此代码片段使用递归将数组全部展平，和上面的函数相比，此函数无需指定深度，全部展平。

const deepFlatten = (array) =>
    [].concat(
        ...array.map((item) => (Array.isArray(item) ? deepFlatten(item) : item))
    );

const arrayTest = [0, 1, 2, [[[3, 4, [5]]]]];
console.log(deepFlatten(arrayTest)); // [ 0, 1, 2, 3, 4, 5 ]

5. findKey

此代码片段通过键值查找对象，返回满足给定函数的第一个 key。

const findKey = (obj, fn) =>
    Object.keys(obj).find((key) => fn(obj[key], key, obj));

const testObj = {
    hballard: { age: 36 },
    sguzman: { age: 40 },
    plowe: { age: 32 },
};

console.log(findKey(testObj, (item) => item.age > 32)); // hballard

6. filterDuplicate

此代码片段过滤数组中的重复项，这是 Set 比较经典的使用场景。关于 Set 的使用可以参阅《JavaScript中的Set数据操作：交集、差集、交集、对称差集》。

const filterDuplicate = (arr) => [...new Set(arr)];
const testArray = [1, 3, 4, 5, 5, 5, 6, 2, 9];
console.log(filterDuplicate(testArray)); // [1, 3, 4, 5, 6, 2, 9]

7. dropWhile

此代码片段从数组中删除元素，直到传递的函数返回 true 。即从数组第一个元素开始删除，直到删除的元素满足函数返回 true 就停止。

const dropWhile = (array, fn) => {
    while (array.length > 0 && !fn(array[0])) array = array.slice(1);
    return array;
};
const testArray = [30, 29, 33, 31, 28];

console.log(dropWhile(testArray, (item) => item >= 33)); // [ 33, 31, 28 ]

8. digitize

此代码片段将数字拆分为单个数字组成的数组，这个是扩展运算符 ... 的比较经典的使用方法。更多扩展运算符的使用请参阅《ES6中扩展运算符的8种用法》

const digitize = (number) => [...`${number}`].map((item) => parseInt(item));

console.log(digitize(2021)); // [ 2, 0, 2, 1 ]

9 .differenceWith

此代码片段删除了比较器函数返回为 false 的值，其实也可以用来求两个数组的差集。

const differenceWith = (array1, array2, comp) =>
    array1.filter((a) => array2.findIndex((b) => comp(a, b)) === -1);
const a1 = [1, 2, 3, 4];
const a2 = [3, 4, 5, 6];
console.log(differenceWith(a1, a2, (a, b) => a === b)); // [ 1, 2 ]

10. defer

此代码片段将延迟函数的执行，直到当前调用堆栈全部执行完毕。

const defer = (fn, ...args) => setTimeout(fn, 1, ...args);

defer(console.log, "devpoint");
console.log("juejin"); // 先 juejin 后 devpoint

devpoint.cn