大家好，在上一篇文章 127个常用的JS代码片段，每段代码花30秒就能看懂（一）里，我分享了前21段代码，今天继续分享21段代码，希望对你的日常工作有所帮助。
22、deepFlatten
通过递归的形式，将多维数组展平成一维数组。
-
const deepFlatten = arr => [].concat(...arr.map(v => (
Array.isArray(v) ? deepFlatten(v) : v)));
-
-
deepFlatten([
1, [
2], [[
3],
4],
5]);
// [1,2,3,4,5]
23、default
去重对象的属性，如果对象中含有重复的属性，以前面的为准。
-
const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj);
-
-
defaults({ a:
1 }, { b:
2 }, { b:
6 }, { a:
3 });
// { a: 1, b: 2 }
24、defer
延迟函数的调用，即异步调用函数。
-
const defer = (fn, ...args) => setTimeout(fn,
1, ...args);
-
-
defer(console.log,
'a'), console.log(
'b');
// logs 'b' then 'a'
25、degreesToRads
此段代码将标准的度数，转换成弧度。
-
const degreesToRads = deg => (deg * Math.PI) /
180.0;
-
-
degreesToRads(
90.0);
// ~1.5708
26、difference
此段代码查找两个给定数组的差异，查找出前者数组在后者数组中不存在元素。
-
const difference = (a, b) => {
-
const s =
new Set(b);
-
return a.filter(x => !s.has(x));
-
};
-
-
difference([
1,
2,
3], [
1,
2,
4]);
// [3]
27、differenceBy
通过给定的函数来处理需要对比差异的数组，查找出前者数组在后者数组中不存在元素。
-
const differenceBy = (a, b, fn) => {
-
const s =
new Set(b.map(fn));
-
return a.filter(x => !s.has(fn(x)));
-
};
-
-
differenceBy([
2.1,
1.2], [
2.3,
3.4], Math.floor);
// [1.2]
-
differenceBy([{ x:
2 }, { x:
1 }], [{ x:
1 }], v => v.x);
// [ { x: 2 } ]
28、differenceWith
此段代码按照给定函数逻辑筛选需要对比差异的数组，查找出前者数组在后者数组中不存在元素。
-
const differenceWith = (arr, val, comp) => arr.filter(a => val.findIndex(b => comp(a, b)) ===
-1);
-
-
differenceWith([
1,
1.2,
1.5,
3,
0], [
1.9,
3,
0], (a, b) => Math.round(a) === Math.round(b));
-
// [1, 1.2]
29、digitize
将输入的数字拆分成单个数字组成的数组。
-
const digitize = n => [...`${n}`].map(i => parseInt(i));
-
-
digitize(
431);
// [4, 3, 1]
30、distance
计算两点之间的距离
-
const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);
-
-
distance(
1,
1,
2,
3);
// 2.23606797749979
31、drop
此段代码将给定的数组从左边开始删除 n 个元素
-
const drop = (arr, n =
1) => arr.slice(n);
-
-
drop([
1,
2,
3]);
// [2,3]
-
drop([
1,
2,
3],
2);
// [3]
-
drop([
1,
2,
3],
42);
// []
32、dropRight
此段代码将给定的数组从右边开始删除 n 个元素
-
const dropRight = (arr, n =
1) => arr.slice(
0, -n);
-
-
dropRight([
1,
2,
3]);
// [1,2]
-
dropRight([
1,
2,
3],
2);
// [1]
-
dropRight([
1,
2,
3],
42);
// []
33、dropRightWhile
此段代码将给定的数组按照给定的函数条件从右开始删除，直到当前元素满足函数条件为True时，停止删除，并返回数组剩余元素。
-
const dropRightWhile = (arr, func) => {
-
while (arr.length >
0 && !func(arr[arr.length -
1])) arr = arr.slice(
0,
-1);
-
return arr;
-
};
-
-
dropRightWhile([
1,
2,
3,
4], n => n <
3);
// [1, 2]
34、dropWhile
按照给定的函数条件筛选数组，不满足函数条件的将从数组中移除。
-
const dropWhile = (arr, func) => {
-
while (arr.length >
0 && !func(arr[
0])) arr = arr.slice(
1);
-
return arr;
-
};
-
-
dropWhile([
1,
2,
3,
4], n => n >=
3);
// [3,4]
35、elementContains
接收两个DOM元素对象参数，判断后者是否是前者的子元素。
-
const elementContains = (
parent, child) =>
parent !== child &&
parent.contains(child);
-
-
elementContains(document.querySelector(
'head'), document.querySelector(
'title'));
// true
-
elementContains(document.querySelector(
'body'), document.querySelector(
'body'));
// false
36、filterNonUnique
移除数组中重复的元素
-
const filterNonUnique = arr => [ …
new Set(arr)];
-
filterNonUnique([
1,
2,
2,
3,
4,
4,
5]);
// [1, 2, 3, 4, 5]
37、findKey
按照给定的函数条件，查找第一个满足条件对象的键值。
-
const findKey = (obj, fn) => Object.keys(obj).find(key => fn(obj[key], key, obj));
-
-
findKey(
-
{
-
barney: { age:
36, active:
true },
-
fred: { age:
40, active:
false },
-
pebbles: { age:
1, active:
true }
-
},
-
o => o[
'active']
-
);
// 'barney'
38、findLast
按照给定的函数条件筛选数组，将最后一个满足条件的元素进行删除。
-
const findLast = (arr, fn) => arr.filter(fn).pop();
-
-
findLast([
1,
2,
3,
4], n => n %
2 ===
1);
// 3
39、flatten
按照指定数组的深度，将嵌套数组进行展平。
-
const flatten = (arr, depth =
1) =>
-
arr.reduce((a, v) => a.concat(depth >
1 &&
Array.isArray(v) ? flatten(v, depth -
1) : v), []);
-
-
flatten([
1, [
2],
3,
4]);
// [1, 2, 3, 4]
-
flatten([
1, [
2, [
3, [
4,
5],
6],
7],
8],
2);
// [1, 2, 3, [4, 5], 6, 7, 8]
40、forEachRight
按照给定的函数条件，从数组的右边往左依次进行执行。
-
const forEachRight = (arr, callback) =>
-
arr
-
.slice(
0)
-
.reverse()
-
.
forEach(callback);
-
-
forEachRight([
1,
2,
3,
4], val => console.log(val));
// '4', '3', '2', '1'
41、forOwn
此段代码按照给定的函数条件，进行迭代对象。
-
const forOwn = (obj, fn) => Object.keys(obj).
forEach(key => fn(obj[key], key, obj));
-
forOwn({ foo:
'bar', a:
1 }, v => console.log(v));
// 'bar', 1
42、functionName
此段代码输出函数的名称。
-
const functionName = fn => (console.debug(fn.name), fn);
-
-
functionName(Math.max);
// max (logged in debug channel of console)
小节
今天的内容就和大家分享到这里，感谢你的阅读，如果你喜欢我的分享，麻烦给个关注、点赞加转发哦，你的支持，就是我分享的动力，后续会持续分享剩余的代码片段，欢迎持续关注。
本文原作者：Fatos Morina 来源网站：medium 注：并非直译
长按关注前端达人
转载：https://blog.csdn.net/Ed7zgeE9X/article/details/104284779
查看评论