js 常用业务工具方法 (es5,es6)持续更新
数组去重
数组去重最原始的方法就是使用双层循环。
es5:
// 使用indexOf
function unique(array) {
var res = [];
for (var i = 0, len = array.length; i < len; i++) {
var current = array[i];
if (res.indexOf(current) === -1) {
res.push(current)
}
}
return res;
}
console.log(unique(array));
// ES6
var array = [1, 2, 1, 1, '1'];
function unique(array) {
return Array.from(new Set(array));
}
console.log(unique(array)); // [1, 2, "1"]
// 或
function unique(arr) {
const seen = new Map()
return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}
类型判断
// 判断数组
var isArray = Array.isArray || function(array) {
return Object.prototype.toString.call(array) === '[object Array]';
}
// 判断NaN
var isNaN = function(value) {
return isNumber(value) && isNaN(value);
}
// 判断DOM元素
var isElement = function(obj) {
// 两次感叹号将值转化为布尔值
return !!(obj && obj.nodeType === 1);
}
深浅拷贝
// 浅拷贝
var shallowCopy = function(obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是对象
var newObj = obj instanceof Array ? [] : {};
// 遍历obj,并且判断是obj的属性才拷贝
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
return newObj;
}
// 深拷贝 , 递归调用
var deepCopy = function(obj) {
if (typeof obj !== 'object') return;
var newObj = obj instanceof Array ? [] : {};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
}
return newObj;
}
扁平化(把数组平铺)
// 方法 1 递归
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (Array.isArray(arr[i])) {
result = result.concat(flatten(arr[i]))
} else {
result.push(arr[i])
}
}
return result;
}
console.log(flatten(arr))
// reduce
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
return arr.reduce(function(prev, next) {
return prev.concat(Array.isArray(next) ? flatten(next) : next)
}, [])
}
console.log(flatten(arr))
// 用 ... 解构方法
// 扁平化一维数组
var arr = [1, [2, [3, 4]]];
console.log([].concat(...arr)); // [1, 2, [3, 4]]
// 可以扁平化多维数组
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
console.log(flatten(arr))
函数柯里化
// es5
function curry(fn, args) {
var length = fn.length;
var args = args || [];
return function() {
newArgs = args.concat(Array.prototype.slice.call(arguments));
if (newArgs.length < length) {
return curry.call(this, fn, newArgs);
} else {
return fn.apply(this, newArgs);
}
}
}
function multiFn(a, b, c) {
return a * b * c;
}
var multi = curry(multiFn);
multi(2)(3)(4);
multi(2, 3, 4);
multi(2)(3, 4);
multi(2, 3)(4);
// es6
const curry = (fn, arr = []) => (...args) => (
arg => arg.length === fn.length ?
fn(...arg) :
curry(fn, arg)
)([...arr, ...args])
let curryTest = curry((a, b, c, d) => a + b + c + d)
curryTest(1, 2, 3)(4) //10
curryTest(1, 2)(4)(3) //10
curryTest(1, 2)(3, 4) //10
防抖与节流
// 防抖
function debounce(fn, wait) {
var timeout = null;
return function() {
if (timeout !== null) {
clearTimeout(timeout);
}
timeout = setTimeout(fn, wait);
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', debounce(handle, 1000));
// 节流
var throttle = function(func, delay) {
var timer = null;
var startTime = 0;
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) {
func.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
各种原理实现
// New
function New() {
var obj = new Object();
//取出第一个参数,就是我们要传入的构造函数;此外因为shift会修改原数组,所以arguments会被去除第一个参数
Constructor = [].shift.call(arguments);
//将obj的原型指向构造函数,这样obj就可以访问到构造函数原型中的属性
obj._proto_ = Constructor.prototype;
//使用apply改变构造函数this的指向到新建的对象,这样obj就可以访问到构造函数中的属性
var ret = Constructor.apply(obj, arguments);
//要返回obj
return typeof ret === 'object' ? ret : obj;
}
// call 参数形式是个体
Function.prototype.call = function(context) {
var context=context||window
context.fn = this;
let args = [...arguments].slice(1);
let result = context.fn(...args);
delete context.fn;
return result;
}
let foo = {
value: 1
}
function bar(name, age) {
console.log(name)
console.log(age)
console.log(this.value);
}
//表示bar函数的执行环境是foo,即bar函数里面的this代表foo,this.value相当于foo.value,然后给bar函数传递两个参数
bar.call(foo, 'black', '18') // black 18 1
// apply 参数形式是数组
Function.prototype.apply = function(context = window) {
context.fn = this
let result;
// 判断是否有第二个参数
if(arguments[1]) {
result = context.fn(...arguments[1])
} else {
result = context.fn()
}
delete context.fn
return result
}
// bind
Function.prototype.bind=function(context){
var self=this
var args=Array.prototype.slice.call(arguments,1);
var fNOP=function(){};
var fBound=function(){
var bindArgs=Array.prototype.slice.call(arguments);
return self.apply(this instanceof fNOP ? this : context, args.concat(bindAt))
}
}
// instanceof
function instanceOf(left,right) {
let proto = left.__proto__;
let prototype = right.prototype
while(true) {
if(proto === null) return false
if(proto === prototype) return true
proto = proto.__proto__;
}
}
// JSON.stringify
function jsonStringify(obj) {
let type = typeof obj;
if (type !== "object") {
if (/string|undefined|function/.test(type)) {
obj = '"' + obj + '"';
}
return String(obj);
} else {
let json = []
let arr = Array.isArray(obj)
for (let k in obj) {
let v = obj[k];
let type = typeof v;
if (/string|undefined|function/.test(type)) {
v = '"' + v + '"';
} else if (type === "object") {
v = jsonStringify(v);
}
json.push((arr ? "" : '"' + k + '":') + String(v));
}
return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}")
}
}
jsonStringify({x : 5}) // "{"x":5}"
jsonStringify([1, "false", false]) // "[1,"false",false]"
jsonStringify({b: undefined}) // "{"b":"undefined"}"
// JSON.parse
// eval
function jsonParse(opt) {
return eval('(' + opt + ')');
}
// new Function()
var jsonStr = '{ "age": 20, "name": "jack" }'
var json = (new Function('return ' + jsonStr))();
js 常用业务工具方法 (es5,es6)持续更新的更多相关文章
- FIle类常用工具方法整理(持续更新)
1.递归遍历一个目录,获取所有文件名(也可以取到绝对路径) public static void traverse(String filePath, List<String> files) ...
- Python3常用函数、方法总结(持续更新…)
最近刷LeetCode,自己自娱自乐完之后去discussion看大佬们的各种巧妙解法,总是止不住的双击666--加上最近Python3用的比较多(虽然Python实在不推荐跑算法题目,一是运行效率太 ...
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- JS常用时间处理方法
这里会扩展一些JS常用时间处理方法,内置时间对象的方法不再赘述 -- 传送门:http://www.w3school.com.cn/js/jsref_obj_date.asp 时间格式化 -- 转换为 ...
- 干货!IT小伙伴们实用的网站及工具大集合!持续更新!
1.Git 还在担心自己辛辛苦苦写的代码被误删了吗?还在担心自己改错了代码不能挽回吗?还在苦恼于多人开发合作找不到一个好的工具吗?那么用Git就对 了,Git是一个开源的分布式版本控制系统,用以有效. ...
- JS常用字符串处理方法应用总结
这篇文章主要总结了JS常用字符串的处理方法,需要的朋友可以参考下 1.indexOf()方法,从前往后查找字符串位置,大小写敏感,从0开始计数.同理,lastIndexOf() 方法从后往前,两个 ...
- Angungular.js 的过滤器&工具方法
字母大小写 数字 货币 截取字符串 截取数组 用JS操作 ----------------------------------------------------------------------- ...
- Python常用组件、命令大总结(持续更新)
Python开发常用组件.命令(干货) 持续更新中-关注公众号"轻松学编程"了解更多. 1.生成6位数字随机验证码 import random import string def ...
- (转)iOS开发——来改掉那些被禁用的方法吧(持续更新中)
iOS平台在快速的发展,各种接口正在不断的更新.随着iOS9的发布,又有一批老方法不推荐使用了,你若调用这些方法,运行的结果是没有问题的,但是会出现警告“***is deprecated :first ...
随机推荐
- GridMask:一种数据增强方法
GridMask Data Augmentation, ARXIV 2020 代码地址:https://github.com/akuxcw/GridMask 这篇论文提出了一种简单的数据增强方法,在图 ...
- 图解 JVM 核心知识点(面试版)
一.基本概念 1.1 OpenJDK 自 1996 年 JDK 1.0 发布以来,Sun 公司在大版本上发行了 JDK 1.1.JDK 1.2.JDK 1.3.JDK 1.4.JDK 5,JDK 6 ...
- 查看 __class__属性
查看complex的__class__属性 a = 5+2j print(a.__class__) print(a.__class__.__class__) ''' <class 'comple ...
- 因为不知道Java的CopyOnWriteArrayList,面试官让我回去等通知
先看再点赞,给自己一点思考的时间,微信搜索[沉默王二]关注这个靠才华苟且的程序员.本文 GitHub github.com/itwanger 已收录,里面还有一线大厂整理的面试题,以及我的系列文章. ...
- 比较两个等长的字符串,若相同,则输出Match!,若不同,则输出No Match!
文章目录 问题 代码 运行结果 问题 比较两个等长的字符串,若相同,则输出Match!,若不同,则输出No Match! 代码 data segment str1 db 'ASDFGHJKL';字符串 ...
- PHP array_map() 函数
实例 将函数作用到数组中的每个值上,每个值都乘以本身,并返回带有新的值的数组: <?phpfunction myfunction($v){return($v*$v);} $a=array(1,2 ...
- PHP diskfreespace() 函数
定义和用法 diskfreespace() 函数返回指定目录的可用空间,以字节为单位. 该函数是 disk_free_space() 函数的别名. 语法 diskfreespace(directory ...
- Calibre LVS BOX 详细用法
https://www.cnblogs.com/yeungchie/ LVS BOX的使用对于后端的团队协作起到非常便利的作用. 通过在lvs rules file添加BOX的相关语句可以达到这个目的 ...
- Springboot中的CommandLineRunner
CommandLineRunner接口的作用 在平常开发中可能需要实现在启动后执行的功能,Springboot提供了一种简单的实现方案,即实现CommandLineRunner接口,实现功能的代码在接 ...
- LeetCode 164. Maximum Gap[翻译]
164. Maximum Gap 164. 最大间隔 Given an unsorted array, find the maximum difference between the successi ...