记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(二)

请叫我海龟先生 等级 969 3 1
标签: 数组

D - F 系列

1、防抖函数,限制高频触发

const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
};
  • 可以运用在监听屏幕缩放,或者input 搜索时,做一些性能优化

2、转换首字母(或其他)大小写

const decapitalize = ([first, ...rest], upperRest = false) =>
  first.toLowerCase() +
  (upperRest ? rest.join('').toUpperCase() : rest.join(''));

decapitalize('FooBar'); // 'fooBar'
decapitalize('FooBar', true); // 'fOOBAR'
  • [first, ...rest] 通过这种解构的方式将字符分割成数组,同时获取到首字母

3、深克隆

const deepClone = obj => {
  if (obj === null) return null;
  let clone = Object.assign({}, obj);
  Object.keys(clone).forEach(
    key =>
      (clone[key] =
        typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])
  );
  // 如果是数组仍然会转成 key - value 形式
  if (Array.isArray(obj)) {
    // 添加 length 属性,便于 Array.from 进行转换(类数组或者可迭代对象)
    clone.length = obj.length;
    return Array.from(clone);
  }
  return clone;
};

4、数组打平

const deepFlatten = arr =>
  [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)))

// 数组打平 至指定深度

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]
  • 利用 map 将多维数组中的值返回成新数组,最后再展开与 [] 连接
  • 可以看到,在解决一些深层次嵌套问题时(深度冻结一个对象),大多会用到递归思想,以后类似问题可以往这方面思考

5、两个数组的交集(Set的使用)

const difference = (a, b) => {
  const s = new Set(b);
  return a.filter(x => !s.has(x));
}
difference([1, 2, 3, 3], [1, 2, 4]); // [3, 3]
  • 补充几个关于 set 的小知识
  • Set 对象允许你存储任何类型的唯一值(只会出现一次),无论是原始值或者是对象引用
  • 同时 set 的原型上提供了几个方法,size()(值的个数),add()(尾部添加),clear()(清除set对象中的所有元素),has()(返回布尔值)...

与数组相关

  • 除了使用 Array.from() 转换外,还可以使用 ... 展开操作符
  • 去重相关

本例中主要使用 has() 方法来判断两数组中的交集

6、实现一个求阶乘的函数

const factorial = n =>
  n < 0
    ? (() => {
        throw new TypeError('Negative numbers are not allowed!');
      })()
    : n <= 1
    ? 1
    : n * factorial(n - 1);

factorial(6); // 720

7、生成一个指定长度数组,包含斐波那契数列

const fibonacci = n =>
  Array.from({ length: n }).reduce(
    (acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i),
    []
  );

fibonacci(6); // [0, 1, 1, 2, 3, 5]
  • 通过 Array.from() 产生一个指定长度数组
  • reduce() ,给定初始值为 [],再使用 concat() 进行连接 acc,同时就做累加了
  • reduce()的好处就是 参数 acc 是上一次调用回调时返回的累积值

8、实现一个从右侧开始的数组遍历

const forEachRight = (arr, callback) =>
  arr
    .slice()
    .reverse()
    .forEach(callback);
forEachRight([1, 2, 3, 4], val => console.log(val)); // '4', '3', '2', '1'
  • 有点意思,从右侧开始遍历,其实就是先拷贝一个副本,然后颠倒,再遍历

9、全屏模式下打开或关闭一个元素

const fullscreen = (mode = true, el = 'body') =>
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen();

fullscreen(); // Opens `body` in fullscreen mode
fullscreen(false); // Exits fullscreen mode
  • requestFullscreen() 这个倒是是没见过

10、节流函数

const throttle = (fn, wait) => {
  let inThrottle, lastFn, lastTime;
  return function() {
    const context = this,
      args = arguments;
    if (!inThrottle) {
      fn.apply(context, args);
      lastTime = Date.now();
      inThrottle = true;
    } else {
      clearTimeout(lastFn);
      lastFn = setTimeout(function() {
        if (Date.now() - lastTime >= wait) {
          fn.apply(context, args);
          lastTime = Date.now();
        }
      }, Math.max(wait - (Date.now() - lastTime), 0));
    }
  };
};

window.addEventListener(
  'resize',
  throttle(function(evt) {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 250)
); // Will log the window dimensions at most every 250ms
收藏
评论区

相关推荐

微信小程序字符串展示为二维码
微信小程序中要将一个字符串展示为二维码的形式,需要引入该js文件 // Core code comes from https://github.com/davidshimjs/qrcodejsvar QRCode;(function () { / Get the type by string length
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧 (一)
A C 系列 1、+ 号的隐式类型转换使用js+[3] //3+[1,2,3].slice(1) //将 [3] 转换为了3 2、日期的转换jsconst addDaysToDate (date, n) const d new Date(date); d.setDate(d.getDate() + n); return d.toISOS
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(二)
D F 系列 1、防抖函数,限制高频触发jsconst debounce (fn, ms 0) let timeoutId; return function(...args) clearTimeout(timeoutId); timeoutId setTimeout(() fn.apply(this, args), ms);
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(三)
G I 系列 获取元素距离顶部的距离jsconst getVerticalOffset el let offset el.offsetTop, el el; while (el.offsetParent) el el.offsetParent; offset + el.offsetTop; return offse
JAVA_将二进制流转换成图片文件
_1. _ _\[代码\]_将二进制流转换成图片文件 晚风工作室 www.soservers.com     _跳至 [\[1\]](http://www.oschina.net/code/snippet_931591_17604#29253) [\[全屏预览\]](http://www.oschina.net/code/piece_full?code=17
Java网络学习笔记3:设置Socket选项(补充)
 接[上一篇](http://my.oschina.net/gently/blog/531117)博文,在小小添加几个Socket选项,  **4.SO\_LINGER选项:** //设置该选项: public void setSoLinger(boolean on,int seconds) throws SocketExcepti
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(四)
J Z 系列 获取数组元素下标(findIndex的实现)jsconst linearSearch (arr, item) for (const i in arr) if (arr[i] item) return +i; return 1;;linearSearch([2, 9, 9], 9); // 1linearSearch([
Chrome右键来个生成二维码
关注  Vue中文社区 ,回复“ 加群 ” 加入我们一起学习,天天进步 ![](https://oscimg.oschina.net/oscnet/7631e2d481ea2fc64a86cd99ef9831e2da1.jpg) 来源: 编程如画 初体验 ------ 外媒报道 Chrome 已经支持原生为网页生成
Cron表达式的用法介绍
**1.Cron表达式介绍**       Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: * Seconds Minutes Hours DayofMonth Month DayofWeek Year * Seconds Minutes Hours DayofMonth
Loadrunner压测时,出现的问题汇总
【问题1】 Error -27728: Step download timeout (120 seconds) has expired 错误分析:对于HTTP协议,默认的超时时间是120秒(可以在Run-time Settings中修改),客户端发送一个请求到端还没有返回结果,则出现超时错误。 解决办法:首先在运行环境中对超时进行设置,默认的超时时间可
Numerical Sequence (easy version)
http://codeforces.com/problemset/problem/1216/E1 E1. Numerical Sequence (easy version) time limit per test 2 seconds memory limit per test 256 megabytes input standard input
PHP导出exec xlswriter扩展测试
php-xlswrite [https://github.com/viest/php-ext-xlswriter](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fviest%2Fphp-ext-xlswriter) 100万数据,导出数据列较小的情况下,仅需几
Python3 tkinter基础 event keysym 查看按键的按键名
> *        **Python : 3.7.0** > *          **OS : Ubuntu 18.04.1 LTS** > *         **IDE : PyCharm 2018.2.4** > *       **Conda : 4.5.11** > *    **typesetting : Markdown
Spark Streaming StreamingContext详解+和Receiver详解+updateStateByKey+基于Direct的Kafka数据源
一.StreamingContext详解 -------------------- **有两种创建StreamingContext的方式:** val conf = new SparkConf().setAppName(appName).setMaster(master); val ssc = new StreamingContext(conf, S