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

关注

发布于: 4 小时前

每天学习 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("infoq"); // 先 infoq 后 devpoint

复制代码

发布于: 4 小时前阅读数: 4

原文链接:【http://xie.infoq.cn/article/50640a1f7f3ec2bffbfa262b0】。文章转载请联系作者。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

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

1. forObject

2. forReverse

3. flatten

4. deepFlatten

5. findKey

6. filterDuplicate

7. dropWhile

8. digitize

9 .differenceWith

10. defer

devpoint

评论