1、输入一个值,返回其数据类型
function type ( para) {
return Object. prototype. toString. call ( para)
}
2、数组去重
function unique1 ( arr) {
return [ ... new Set ( arr) ]
}
function unique2 ( arr) {
var obj = { } ;
return arr. filter ( ele => {
if ( ! obj[ ele] ) {
obj[ ele] = true ;
return true ;
}
} )
}
function unique3 ( arr) {
var result = [ ] ;
arr. forEach ( ele => {
if ( result. indexOf ( ele) == - 1 ) {
result. push ( ele)
}
} )
return result;
}
3、字符串去重
String. prototype. unique = function ( ) {
var obj = { } ,
str = '' ,
len = this . length;
for ( var i = 0 ; i < len; i++ ) {
if ( ! obj[ this [ i] ] ) {
str += this [ i] ;
obj[ this [ i] ] = true ;
}
}
return str;
}
function uniq ( str) {
return str. replace ( /(\w)\1+/g , '$1' )
}
4、深拷贝 浅拷贝//深克隆(深克隆不考虑函数)
function deepClone ( obj, result) {
var result = result || { } ;
for ( var prop in obj) {
if ( obj. hasOwnProperty ( prop) ) {
if ( typeof obj[ prop] == 'object' && obj[ prop] !== null ) {
if ( Object. prototype. toString. call ( obj[ prop] ) == '[object Object]' ) {
result[ prop] = { } ;
} else {
result[ prop] = [ ] ;
}
deepClone ( obj[ prop] , result[ prop] )
} else {
result[ prop] = obj[ prop]
}
}
}
return result;
}
function deepClone ( target) {
if ( typeof ( target) !== 'object' ) {
return target;
}
var result;
if ( Object. prototype. toString. call ( target) == '[object Array]' ) {
result = [ ]
} else {
result = { } ;
}
for ( var prop in target) {
if ( target. hasOwnProperty ( prop) ) {
result[ prop] = deepClone ( target[ prop] )
}
}
return result;
}
var o1 = jsON. parse ( jsON. stringify ( obj1) ) ;
5、reverse底层原理和扩展// 改变原数组
Array. prototype. myReverse = function ( ) {
var len = this . length;
for ( var i = 0 ; i < len; i++ ) {
var temp = this [ i] ;
this [ i] = this [ len - 1 - i] ;
this [ len - 1 - i] = temp;
}
return this ;
}
6、圣杯模式的继承
function inherit ( Target, Origin) {
function F ( ) { } ;
F . prototype = Origin. prototype;
Target. prototype = new F ( ) ;
Target. prototype. constructor = Target;
Target. prop. uber = Origin. prototype;
}
7、找出字符串中第一次只出现一次的字母
String. prototype. firstAppear = function ( ) {
var obj = { } ,
len = this . length;
for ( var i = 0 ; i < len; i++ ) {
if ( obj[ this [ i] ] ) {
obj[ this [ i] ] ++ ;
} else {
obj[ this [ i] ] = 1 ;
}
}
for ( var prop in obj) {
if ( obj[ prop] == 1 ) {
return prop;
}
}
}
8、找元素的第n级父元素
function parents ( ele, n) {
while ( ele && n) {
ele = ele. parentElement ? ele. parentElement : ele. parentNode;
n-- ;
}
return ele;
}
9、 返回元素的第n个兄弟节点
function retSibling ( e, n) {
while ( e && n) {
if ( n > 0 ) {
if ( e. nextElementSibling) {
e = e. nextElementSibling;
} else {
for ( e = e. nextSibling; e && e. nodeType !== 1 ; e = e. nextSibling) ;
}
n-- ;
} else {
if ( e. previousElementSibling) {
e = e. previousElementSibling;
} else {
for ( e = e. previousElementSibling; e && e. nodeType !== 1 ; e = e. previousElementSibling) ;
}
n++ ;
}
}
return e;
}
10、封装mychildren,解决浏览器的兼容问题
function myChildren ( e) {
var children = e. childNodes,
arr = [ ] ,
len = children. length;
for ( var i = 0 ; i < len; i++ ) {
if ( children[ i] . nodeType === 1 ) {
arr. push ( children[ i] )
}
}
return arr;
}
11、判断元素有没有子元素
function hasChildren ( e) {
var children = e. childNodes,
len = children. length;
for ( var i = 0 ; i < len; i++ ) {
if ( children[ i] . nodeType === 1 ) {
return true ;
}
}
return false ;
}
12、我一个元素插入到另一个元素的后面
Element. prototype. insertAfter = function ( target, elen) {
var nextElen = elen. nextElenmentSibling;
if ( nextElen == null ) {
this . appendChild ( target) ;
} else {
this . insertBefore ( target, nextElen) ;
}
}
13、返回当前的时间(年月日时分秒)
function getDateTime ( ) {
var date = new Date ( ) ,
year = date. getFullYear ( ) ,
month = date. getMonth ( ) + 1 ,
day = date. getDate ( ) ,
hour = date. getHours ( ) + 1 ,
minute = date. getMinutes ( ) ,
second = date. getSeconds ( ) ;
month = checkTime ( month) ;
day = checkTime ( day) ;
hour = checkTime ( hour) ;
minute = checkTime ( minute) ;
second = checkTime ( second) ;
function checkTime ( i) {
if ( i < 10 ) {
i = "0" + i;
}
return i;
}
return "" + year + "年" + month + "月" + day + "日" + hour + "时" + minute + "分" + second + "秒"
}
14、获得滚动条的滚动距离
function getScrollOffset ( ) {
if ( window. pageXOffset) {
return {
x: window. pageXOffset,
y: window. pageYOffset
}
} else {
return {
x: document. body. scrollLeft + document. documentElement. scrollLeft,
y: document. body. scrollTop + document. documentElement. scrollTop
}
}
}
15、获得视口的尺寸
function getViewportOffset ( ) {
if ( window. innerWidth) {
return {
w: window. innerWidth,
h: window. innerHeight
}
} else {
if ( document. compatMode === "BackCompat" ) {
return {
w: document. body. clientWidth,
h: document. body. clientHeight
}
} else {
return {
w: document. documentElement. clientWidth,
h: document. documentElement. clientHeight
}
}
}
}
16、获取任一元素的任意属性
function getStyle ( elem, prop) {
return window. getComputedStyle ? window. getComputedStyle ( elem, null ) [ prop] : elem. currentStyle[ prop]
}
17、绑定事件的兼容代码
function addEvent ( elem, type, handle) {
if ( elem. addEventListener) {
elem. addEventListener ( type, handle, false ) ;
} else if ( elem. attachEvent) {
elem. attachEvent ( 'on' + type, function ( ) {
handle. call ( elem) ;
} )
} else {
elem[ 'on' + type] = handle;
}
}
18、解绑事件
function removeEvent ( elem, type, handle) {
if ( elem. removeEventListener) {
elem. removeEventListener ( type, handle, false ) ;
} else if ( elem. detachEvent) {
elem. detachEvent ( 'on' + type, handle) ;
} else {
elem[ 'on' + type] = null ;
}
}
19、取消冒泡的兼容代码
function stopBubble ( e) {
if ( e && e. stopPropagation) {
e. stopPropagation ( ) ;
} else {
window. event. cancelBubble = true ;
}
}
20、检验字符串是否是回文
function isPalina ( str) {
if ( Object. prototype. toString. call ( str) !== '[object String]' ) {
return false ;
}
var len = str. length;
for ( var i = 0 ; i < len / 2 ; i++ ) {
if ( str[ i] != str[ len - 1 - i] ) {
return false ;
}
}
return true ;
}
21、检验字符串是否是回文2
function isPalindrome ( str) {
str = str. replace ( /\W/g , '' ) . toLowerCase ( ) ;
console. log ( str)
return ( str == str. split ( '' ) . reverse ( ) . join ( '' ) )
}
22、兼容getElementsByClassName方法
Element. prototype. getElementsByClassName = Document. prototype. getElementsByClassName = function ( _className) {
var allDomArray = document. getElementsByTagName ( '*' ) ;
var lastDomArray = [ ] ;
function trimSpace ( strClass) {
var reg = /\s+/g ;
return strClass. replace ( reg, ' ' ) . trim ( )
}
for ( var i = 0 ; i < allDomArray. length; i++ ) {
var classArray = trimSpace ( allDomArray[ i] . className) . split ( ' ' ) ;
for ( var j = 0 ; j < classArray. length; j++ ) {
if ( classArray[ j] == _className) {
lastDomArray. push ( allDomArray[ i] ) ;
break ;
}
}
}
return lastDomArray;
}
23、运动函数
function animate ( obj, json, callback) {
clearInterval ( obj. timer) ;
var speed,
current;
obj. timer = setInterval ( function ( ) {
var lock = true ;
for ( var prop in json) {
if ( prop == 'opacity' ) {
current = parseFloat ( window. getComputedStyle ( obj, null ) [ prop] ) * 100 ;
} else {
current = parseInt ( window. getComputedStyle ( obj, null ) [ prop] ) ;
}
speed = ( json[ prop] - current) / 7 ;
speed = speed > 0 ? Math. ceil ( speed) : Math. floor ( speed) ;
if ( prop == 'opacity' ) {
obj. style[ prop] = ( current + speed) / 100 ;
} else {
obj. style[ prop] = current + speed + 'px' ;
}
if ( current != json[ prop] ) {
lock = false ;
}
}
if ( lock) {
clearInterval ( obj. timer) ;
typeof callback == 'function' ? callback ( ) : '' ;
}
} , 30 )
}
24、弹性运动
function ElasticMovement ( obj, target) {
clearInterval ( obj. timer) ;
var iSpeed = 40 ,
a, u = 0.8 ;
obj. timer = setInterval ( function ( ) {
a = ( target - obj. offsetLeft) / 8 ;
iSpeed = iSpeed + a;
iSpeed = iSpeed * u;
if ( Math. abs ( iSpeed) <= 1 && Math. abs ( a) <= 1 ) {
console. log ( 'over' )
clearInterval ( obj. timer) ;
obj. style. left = target + 'px' ;
} else {
obj. style. left = obj. offsetLeft + iSpeed + 'px' ;
}
} , 30 ) ;
}
25、封装自己的forEach方法
Array. prototype. myForEach = function ( func, obj) {
var len = this . length;
var _this = arguments[ 1 ] ? arguments[ 1 ] : window;
for ( var i = 0 ; i < len; i++ ) {
func. call ( _this, this [ i] , i, this )
}
}
26、封装自己的filter方法
Array. prototype. myFilter = function ( func, obj) {
var len = this . length;
var arr = [ ] ;
var _this = arguments[ 1 ] || window;
for ( var i = 0 ; i < len; i++ ) {
func. call ( _this, this [ i] , i, this ) && arr. push ( this [ i] ) ;
}
return arr;
}
27、数组map方法
Array. prototype. myMap = function ( func) {
var arr = [ ] ;
var len = this . length;
var _this = arguments[ 1 ] || window;
for ( var i = 0 ; i < len; i++ ) {
arr. push ( func. call ( _this, this [ i] , i, this ) ) ;
}
return arr;
}
28、数组every方法
Array. prototype. myEvery = function ( func) {
var flag = true ;
var len = this . length;
var _this = arguments[ 1 ] || window;
for ( var i = 0 ; i < len; i++ ) {
if ( func. apply ( _this, [ this [ i] , i, this ] ) == false ) {
flag = false ;
break ;
}
}
return flag;
}
29、数组reduce方法
Array. prototype. myReduce = function ( func, initialValue) {
var len = this . length,
nextValue,
i;
if ( ! initialValue) {
nextValue = this [ 0 ] ;
i = 1 ;
} else {
nextValue = initialValue;
i = 0 ;
}
for ( ; i < len; i++ ) {
nextValue = func ( nextValue, this [ i] , i, this ) ;
}
return nextValue;
}
30、获取url中的参数
function getWindonHref ( ) {
var sHref = window. location. href;
var args = sHref. split ( '?' ) ;
if ( args[ 0 ] === sHref) {
return '' ;
}
var hrefarr = args[ 1 ] . split ( '#' ) [ 0 ] . split ( '&' ) ;
var obj = { } ;
for ( var i = 0 ; i < hrefarr. length; i++ ) {
hrefarr[ i] = hrefarr[ i] . split ( '=' ) ;
obj[ hrefarr[ i] [ 0 ] ] = hrefarr[ i] [ 1 ] ;
}
return obj;
}
31、数组排序// 快排 [left] + min + [right]
function quickArr ( arr) {
if ( arr. length <= 1 ) {
return arr;
}
var left = [ ] ,
right = [ ] ;
var pIndex = Math. floor ( arr. length / 2 ) ;
var p = arr. splice ( pIndex, 1 ) [ 0 ] ;
for ( var i = 0 ; i < arr. length; i++ ) {
if ( arr[ i] <= p) {
left. push ( arr[ i] ) ;
} else {
right. push ( arr[ i] ) ;
}
}
return quickArr ( left) . concat ( [ p] , quickArr ( right) ) ;
}
function bubbleSort ( arr) {
for ( var i = 0 ; i < arr. length - 1 ; i++ ) {
for ( var j = i + 1 ; j < arr. length; j++ ) {
if ( arr[ i] > arr[ j] ) {
var temp = arr[ i] ;
arr[ i] = arr[ j] ;
arr[ j] = temp;
}
}
}
return arr;
}
function bubbleSort ( arr) {
var len = arr. length;
for ( var i = 0 ; i < len - 1 ; i++ ) {
for ( var j = 0 ; j < len - 1 - i; j++ ) {
if ( arr[ j] > arr[ j + 1 ] ) {
var temp = arr[ j] ;
arr[ j] = arr[ j + 1 ] ;
arr[ j + 1 ] = temp;
}
}
}
return arr;
}
32、遍历Dom树// 给定页面上的DOM元素,将访问元素本身及其所有后代(不仅仅是它的直接子元素) // 对于每个访问的元素,函数讲元素传递给提供的回调函数
function traverse ( element, callback) {
callback ( element) ;
var list = element. children;
for ( var i = 0 ; i < list. length; i++ ) {
traverse ( list[ i] , callback) ;
}
}
33、原生js封装ajax
function ajax ( method, url, callback, data, flag) {
var xhr;
flag = flag || true ;
method = method. toUpperCase ( ) ;
if ( window. XMLHttpRequest) {
xhr = new XMLHttpRequest ( ) ;
} else {
xhr = new ActiveXObject ( 'Microsoft.XMLHttp' ) ;
}
xhr. onreadystatechange = function ( ) {
if ( xhr. readyState == 4 && xhr. status == 200 ) {
console. log ( 2 )
callback ( xhr. responseText) ;
}
}
if ( method == 'GET' ) {
var date = new Date ( ) ,
timer = date. getTime ( ) ;
xhr. open ( 'GET' , url + '?' + data + '&timer' + timer, flag) ;
xhr. send ( )
} else if ( method == 'POST' ) {
xhr. open ( 'POST' , url, flag) ;
xhr. setRequestHeader ( 'Content-Type' , 'application/x-www-form-urlencoded' ) ;
xhr. send ( data) ;
}
}
34、异步加载script
function loadScript ( url, callback) {
var oscript = document. createElement ( 'script' ) ;
if ( oscript. readyState) {
oscript. onreadystatechange = function ( ) {
if ( oscript. readyState === 'complete' || oscript. readyState === 'loaded' ) {
callback ( ) ;
}
}
} else {
oscript. onload = function ( ) {
callback ( )
} ;
}
oscript. src = url;
document. body. appendChild ( oscript) ;
}
35、cookie管理
var cookie = {
set : function ( name, value, time) {
document. cookie = name + '=' + value + '; max-age=' + time;
return this ;
} ,
remove: function ( name) {
return this . setCookie ( name, '' , - 1 ) ;
} ,
get : function ( name, callback) {
var allCookieArr = document. cookie. split ( '; ' ) ;
for ( var i = 0 ; i < allCookieArr. length; i++ ) {
var itemCookieArr = allCookieArr[ i] . split ( '=' ) ;
if ( itemCookieArr[ 0 ] === name) {
return itemCookieArr[ 1 ]
}
}
return undefined;
}
}
36、实现bind()方法
Function. prototype. myBind = function ( target) {
var target = target || window;
var _args1 = [ ] . slice. call ( arguments, 1 ) ;
var self = this ;
var temp = function ( ) { } ;
var F = function ( ) {
var _args2 = [ ] . slice. call ( arguments, 0 ) ;
var parasArr = _args1. concat ( _args2) ;
return self. apply ( this instanceof temp ? this : target, parasArr)
}
temp. prototype = self. prototype;
F . prototype = new temp ( ) ;
return F ;
}
37、实现call()方法
Function. prototype. myCall = function ( ) {
var ctx = arguments[ 0 ] || window;
ctx. fn = this ;
var args = [ ] ;
for ( var i = 1 ; i < arguments. length; i++ ) {
args. push ( arguments[ i] )
}
var result = ctx. fn ( ... args) ;
delete ctx. fn;
return result;
}
38、实现apply()方法
Function. prototype. myApply = function ( ) {
var ctx = arguments[ 0 ] || window;
ctx. fn = this ;
if ( ! arguments[ 1 ] ) {
var result = ctx. fn ( ) ;
delete ctx. fn;
return result;
}
var result = ctx. fn ( ... arguments[ 1 ] ) ;
delete ctx. fn;
return result;
}
39、防抖
function debounce ( handle, delay) {
var timer = null ;
return function ( ) {
var _self = this ,
_args = arguments;
clearTimeout ( timer) ;
timer = setTimeout ( function ( ) {
handle. apply ( _self, _args)
} , delay)
}
}
40、节流
function throttle ( handler, wait) {
var lastTime = 0 ;
return function ( e) {
var nowTime = new Date ( ) . getTime ( ) ;
if ( nowTime - lastTime > wait) {
handler. apply ( this , arguments) ;
lastTime = nowTime;
}
}
}
41、requestAnimFrame兼容性方法
window. requestAnimFrame = ( function ( ) {
return window. requestAnimationFrame ||
window. webkitRequestAnimationFrame ||
window. mozRequestAnimationFrame ||
function ( callback) {
window. setTimeout ( callback, 1000 / 60 ) ;
} ;
} ) ( ) ;
42、cancelAnimFrame兼容性方法
window. cancelAnimFrame = ( function ( ) {
return window. cancelAnimationFrame ||
window. webkitCancelAnimationFrame ||
window. mozCancelAnimationFrame ||
function ( id) {
window. clearTimeout ( id) ;
} ;
} ) ( ) ;
43、jsonp底层方法
function jsonp ( url, callback) {
var oscript = document. createElement ( 'script' ) ;
if ( oscript. readyState) {
oscript. onreadystatechange = function ( ) {
if ( oscript. readyState === 'complete' || oscript. readyState === 'loaded' ) {
callback ( ) ;
}
}
} else {
oscript. onload = function ( ) {
callback ( )
} ;
}
oscript. src = url;
document. body. appendChild ( oscript) ;
}
44、获取url上的参数
function getUrlParam ( sUrl, sKey) {
var result = { } ;
sUrl. replace ( /(\w+)=(\w+)(?=[&|#])/g , function ( ele, key, val) {
if ( ! result[ key] ) {
result[ key] = val;
} else {
var temp = result[ key] ;
result[ key] = [ ] . concat ( temp, val) ;
}
} )
if ( ! sKey) {
return result;
} else {
return result[ sKey] || '' ;
}
}
45、格式化时间
function formatDate ( t, str) {
var obj = {
yyyy: t. getFullYear ( ) ,
yy: ( "" + t. getFullYear ( ) ) . slice ( - 2 ) ,
M : t. getMonth ( ) + 1 ,
MM : ( "0" + ( t. getMonth ( ) + 1 ) ) . slice ( - 2 ) ,
d: t. getDate ( ) ,
dd: ( "0" + t. getDate ( ) ) . slice ( - 2 ) ,
H : t. getHours ( ) ,
HH : ( "0" + t. getHours ( ) ) . slice ( - 2 ) ,
h: t. getHours ( ) % 12 ,
hh: ( "0" + t. getHours ( ) % 12 ) . slice ( - 2 ) ,
m: t. getMinutes ( ) ,
mm: ( "0" + t. getMinutes ( ) ) . slice ( - 2 ) ,
s: t. getSeconds ( ) ,
ss: ( "0" + t. getSeconds ( ) ) . slice ( - 2 ) ,
w: [ '日' , '一' , '二' , '三' , '四' , '五' , '六' ] [ t. getDay ( ) ]
} ;
return str. replace ( /([a-z]+)/ig , function ( $1 ) {
return obj[ $1 ]
} ) ;
}
46、验证邮箱的正则表达式
function isAvailableEmail ( sEmail) {
var reg = /^([\w+\.])+@\w+([.]\w+)+$/
return reg. test ( sEmail)
}
47、函数柯里化//是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术
function curryIt ( fn) {
var length = fn. length,
args = [ ] ;
var result = function ( arg) {
args. push ( arg) ;
length-- ;
if ( length <= 0 ) {
return fn. apply ( this , args) ;
} else {
return result;
}
}
return result;
}
48、大数相加
function sumBigNumber ( a, b) {
var res = '' ,
temp = 0 ;
a = a. split ( '' ) ;
b = b. split ( '' ) ;
while ( a. length || b. length || temp) {
temp += ~ ~ a. pop ( ) + ~ ~ b. pop ( ) ;
res = ( temp % 10 ) + res;
temp = temp > 9 ;
}
return res. replace ( /^0+/ , '' ) ;
}
49、单例模式
function getSingle ( func) {
var result;
return function ( ) {
if ( ! result) {
result = new func ( arguments) ;
}
return result;
}
}