127个常用的JS代码片段,每段代码花30秒就能看懂(中)

Wesley13
• 阅读 508

关注  Vue中文社区 ,回复“ 加群 ”

加入我们一起学习,天天进步

127个常用的JS代码片段,每段代码花30秒就能看懂(中)

大家好,在上一篇文章 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')); // trueelementContains(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 注:并非直译

往期

127个常用的JS代码片段,每段代码花30秒就能看懂(上)

得心应手的Vue高级技巧

127个常用的JS代码片段,每段代码花30秒就能看懂(中)

转发在看就是最大的支持❤️

本文分享自微信公众号 - Vue中文社区(vue_fe)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
1星期前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
127个常用的JS代码片段,每段代码花30秒就能看懂(下)
关注 Vue中文社区,回复“加群”加入我们一起学习,天天进步!(https://oscimg.oschina.net/oscnet/d9b66c0e296e90a7ce0c7f1abedb76aa52b.jpg)大家好,在前两篇文章里127个常用的JS代码片段,每段代码花30秒就能看懂(一)(https://
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
6个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这