一些有趣的使用function
转载来源:新人必看的短小而精悍的javascript function
1.回到顶部,优点使用浏览器刷新频率的requestAnimationFrame,很顺滑
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
}; Examples:
scrollToTop()
2.smoothScroll(平滑滚动)
const smoothScroll = element =>
document.querySelector(element).scrollIntoView({
behavior: 'smooth'
});
3.CopyToClipboard(复制到黏贴版)
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
}; copyToClipboard('我最帅'); // '我最帅' copied to clipboard.
4.HH:MM:SS 时间格式的快速获取
const getColonTimeFromDate = date => date.toTimeString().slice(0, 8); getColonTimeFromDate(new Date()); // "08:38:00"
5.compose(中间件,redux源码里就使用该函数)right-to-left依次执行函数
const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)));
const add5 = x => x + 5;
const multiply = (x, y) => x * y;
const multiplyAndAdd5 = compose(add5, multiply);
multiplyAndAdd5(5, 2); //
6.debounce(比较常见)
const debounce = (fn, ms = 0) => {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn.apply(this, args), ms);
};
};
window.addEventListener(
'resize',
debounce(() => {
console.log(window.innerWidth);
console.log(window.innerHeight);
}, 250)
); // Will log the window dimensions at most every 250ms
7.equals 深度对比相等
const equals = (a, b) => {
if (a === b) return true;
if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
if (!a || !b || (typeof a != 'object' && typeof b !== 'object')) return a === b;
if (a === null || a === undefined || b === null || b === undefined) return false;
if (a.prototype !== b.prototype) return false;
let keys = Object.keys(a);
if (keys.length !== Object.keys(b).length) return false;
return keys.every(k => equals(a[k], b[k]));
};
equals({ a: [2, { e: 3 }], b: [4], c: 'foo' }, { a: [2, { e: 3 }], b: [4], c: 'foo' }); // true
8.escapeHTML
const escapeHTML = str =>
str.replace(
/[&<>'"]/g,
tag =>
({
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
}[tag] || tag)
);
escapeHTML('<a href="#">Me & you</a>'); // '<a href="#">Me & you</a>'
9.getURLParameters
const getURLParameters = url =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
{}
);
getURLParameters('http://url.com/page?name=Adam&surname=Smith'); // {name: 'Adam', surname: 'Smith'}
getURLParameters('google.com'); // {}
10.promisify
const promisify = func => (...args) =>
new Promise((resolve, reject) =>
func(...args, (err, result) => (err ? reject(err) : resolve(result)))
);
const delay = promisify((d, cb) => setTimeout(cb, d));
delay(2000).then(() => console.log('Hi!')); // // Promise resolves after 2s
作者:wuliDream
链接:https://juejin.im/post/5ab8fa12518825188038ef6a
来源:掘金
一些有趣的使用function的更多相关文章
- 小红书第五章——引用类型之function类型
有趣的函数——function类型 函数实际上是对象,每个函数都是function类型的实例,具有属性和方法. 1.函数的定义方法 1)函数声明语法 function sum(num1,num2){/ ...
- JS function 是函数也是对象, 浅谈原型链
JS function 是函数也是对象, 浅谈原型链 JS 唯一支持的继承方式是通过原型链继承, 理解好原型链非常重要, 我记录下我的理解 1. 前言 new 出来的实例有 _proto_ 属性, 并 ...
- javascript 函数声明和函数表达式的区别(学习笔记)
javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函 ...
- javascript数据结构和算法[转]
字符串表示的数组 join() 和 toString() 函数返回数组的字符串表示.这两个函数通过将数组中的元素用逗号分隔符分割,返回字符串数组表示. 这里有个例子: var names = [&qu ...
- 从Chrome源码看JS Array的实现
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line spa ...
- js压箱底的宝贝
框架的确好用, 不过他们也隐藏了JavaScript中丑陋的细节和DOM的运作机制. 如果你的目标是敢于自称"我懂JavaScript", 那么花时间学习框架无异于南辕北辙. 下面 ...
- JS调用模式
在js中,一共4中调用方式.需要注意的是,调用方式中,this的指向问题. 函数调用模式 this丢失,debug会提示未定义相应属性.按照规范,需要将this赋值给that let myObj = ...
- js 闭包 弊端
闭包有许多有趣的用途,Javascript的两个特征使它这么有趣:1. function是一个对象,它跟数组,Object一样,地位平等.2. Javascript变量作用域范围.<Javasc ...
- 明白JavaScript原型链和JavaScrip继承
原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: <script type="text/javascript"&g ...
随机推荐
- Centos文件切割利器_split命令及cat命令合并文件
有个文件要处理,因为很大,所以想把它切成若干份,每份N行,以便并行处理.split命令可以将一个大文件分割成很多个小文件,有时需要将文件分割成更小的片段,为提高可读性,生成日志等 命令格式 -b:值为 ...
- finedb(内置的HSQL数据库)迁移数据到MySQL
finedb(内置的HSQL数据库)迁移数据到MySQL 1. 前言 在FineBI中,决策平台的数据(用户.角色.组织机构.权限等信息)是存储在finedb数据库中的,默认情况下finedb是一个内 ...
- 20165211 2017-2018-2 《Java程序设计》第2周学习总结
20165211 2017-2018-2 <Java程序设计>第2周学习总结 教材学习内容总结 本周,我学习了书本上二三两章的内容,以下是我整理的主要知识 第二章 基本数据类型与数 标识符 ...
- 串口WIF简单I调试
串口WIF简单I调试 /*********************************************************************** Title:Wifi串口调试 H ...
- 联想预装Win10/Win8换Win7 教程 以及svn使用教程
1.换系统教程 http://ideapad.it168.com/thread-4869510-1-1.html http://jingyan.baidu.com/article/08b6a591c8 ...
- Python3基础 os listdir curdir 查看当前工作目录的所有文件的名字
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- DDMS files not found
在eclipse中启动新建的android项目的时候,控制台提示如图: 方法1.cmd中adb kill-server,然后adb -startserver 方法2.方法1不管用,那么在任务管理器中杀 ...
- 51nod 1051 最大子矩阵和
没想到居然可以O(n3)暴力过 就是大概之前的 最大连续子序列和 加成2维度了 枚举起始列 和 终止列 然后计算从1到n行最大的子矩阵的和 注意n 和 m 的输入顺序!! #include< ...
- LuoguP3183 [HAOI2016]食物链 记忆化搜索
题目描述 如图所示为某生态系统的食物网示意图,据图回答第1小题现在给你n个物种和m条能量流动关系,求其中的食物链条数.物种的名称为从1到n编号M条能量流动关系形如a1 b1a2 b2a3 b3.... ...
- 深入理解Java面向对象三大特性 封装 继承 多态
1.封装 封装的定义: 首先是抽象,把事物抽象成一个类,其次才是封装,将事物拥有的属性和动作隐藏起来,只保留特定的方法与外界联系 为什么需要封装: 封装符合面向对象设计原则的第一条:单一性原则,一个类 ...