js常用的一些代码

字符串中各个字符串出现的次数

var arr = 'abcdaabc';var info = arr .split('') .reduce((p, k) => (p[k]++ || (p[k] = 1), p), {});console.log(info); //{ a: 3, b: 2, c: 2, d: 1 }

reduce 对于低版本兼容性不是很好， 可以用下面的方法

var temp = {};'abcdaabc'.replace(/(\w{1})/g,function($1){ temp[$1] ? temp[$1]+=1 : temp[$1] = 1;})console.log(temp) // {a: 3, b: 2, c: 2, d: 1}// 或者function getTimesO(str){ var obj = {} str.split('').map(function(val,index){ if(!obj[val]){ obj[val] = 1  }else{ obj[val] += 1 } }) return obj}

阻止事件冒泡

function stopBubble(e){ if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true}

判断数据类型，typeof

typeof 变量 返回的是变量的数据类型，但是不能区分数组和对象

instanceof

变量 instanceof Object||Array 判断变量是数组还是对象，返回true和false

Array.isArray()

Array.isArray(变量) 判断变量是不是数组，返回true和false

在console.log（）中加上前缀，‘iphone’

封装log函数

初步封装

function log(){ console.log.apply(console,arguments)}

第二次封装，怎么才能在参数前面加前缀

function log(){ var newArguments = [] if(arguments.length > 0){ for(var i = 0; i < arguments.length; i++){ newArguments.push('iphone',arguments[i]) } } console.log.apply(console,newArguments)}

也可以下面的写法

function getLog(){ var args = Array.prototype.slice.call(arguments) // 把arguments伪数组转化为真数组 args.unshift('(app)') // 调用数组的方法 console.log.apply(console,args)}getLog('df') // (app) df

数组排序第一种 (二分法排序)

function sortMany(arr){ if(arr.length <= 1){ return arr } var left = [], right = [] var middleIndex = Math.floor(arr.length/2) var middleValue = arr.splice(middleIndex,1)[0] for(var i = 0; i < arr.length; i++){ if(arr[i] < middleValue){ left.push(arr[i]) }else{ right.push(arr[i]) } } return sortMany(left).concat(middleValue,sortMany(right))}

二分法的搜索(需要先对数组进行排序)

var arr = [1,2,3,4,5,6,7]function searchBinary(arr, target){ let s = 0 let e = arr.length-1 let m = Math.floor((s + e)/2) let sortTag = arr[s] <= arr[e] while(s < e && arr[m] !== target){ if(arr[m] > target){ sortTag && (e = m - 1) !sortTag && (s = m + 1) }else{ sortTag && (s = m + 1) !sortTag && (e = m -1) } m = Math.floor((s + e)/2) } if(arr[m] === target){ return m }else{ return -1 }}searchBinary(arr, 3) // 2

第二种冒泡排序

function sortTwo(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[j] arr[j] = arr[i] arr[i] = temp } } } return arr}

第三种数组内置的排序

Array.prototype.innerSort = function(){ this.sort(function (a,b){ return a - b; }) return this}

数组的去重

function deletMany(arr){ var obj = {} var newArr = [] for(var i=0; i<arr.length-1;i++){ if(!obj[arr[i]]){ newArr.push(arr[i]) obj[arr[i]] = 1 } } return newArr}

对象的深拷贝问题

代码如下，实现对象的深拷贝

function deepCopy(p, c){ var c = c || {} for(var i in p){ if(typeof p[i] === 'object'){ c[i] = (p[i].constructor === Array) ? [] : {} deepCopy(p[i], c[i]) }else{ c[i] = p[i] } } return c }

拷贝分为深拷贝和浅拷贝，拷贝就是把父对象的属性全部拷贝给子对象。

浅拷贝只是把对象的第一层属性拷贝下来，如果第一层中有复杂数据类型，只是拷贝的指针，如果父属性的属性变化也会导致拷贝的子对象的属性变化，这有时是不需要的。上面的代码实现的是使用递归实现的深拷贝，也可以使用JSON.stringfy先转成简单类型，再使用JSON.parse转换成复杂类型。

另外一种对象深拷贝

function copyObject(orig){ var copy = Object.create(Object.getPrototypeOf(orig)) copyOwnPropertiesFrom(copy, orig) return copy}function copyOwnPropertiesFrom(target, source){ Object .getOwnPropertyNames(source) .forEach(function(val){ var desc = Object.getOwnPropertyDescriptor(source, val) if(typeof desc.value === 'object'){ target[val] = copyObject(source[val]) }else{ Object.defineProperty(target, val, desc) } }) return target}

判断类型的封装

let type = (o) => { const s = Object.prototype.toString.call(o) return s.match(/\[object (.*?)\]/)[1].toLowerCase()}[ "Undefiend", 'Null', 'Object', 'Array', "String", "Boolean", 'RegExp', 'Function'].forEach(t => { type['is'+ t] = (o) => { return type(o) === t.toLowerCase() }});type.isArray([]) //true

金额格式化

function toThousands(num) { var potStr = '.00' num = (num||0).toString() if(num.indexOf('.') !== -1){ potStr = num.substr(num.indexOf('.'),3) }  var result = [ ], counter = 0; num = num.substring(0,num.indexOf('.')).split(''); for (var i = num.length - 1; i >= 0; i--) { counter++; result.unshift(num[i]); if (!(counter % 3) && i != 0) { result.unshift(','); } } return result.join('')+potStr;}

lazyMan

function _LazyMan(name){ this.name = name this.quene = []  console.log('Hi This is ' + this.name) setTimeout(() => { this.next() }, 0); }_LazyMan.prototype.next = function (){ if(this.quene.length){  const fn = this.quene.shift() if((typeof fn).toLowerCase() === 'function'){ fn() return this } }else{ return this }}_LazyMan.prototype.sleep = function(time){  const fn1 = () => {  setTimeout(() => { console.log('Wake up after ' + time) this.next() }, time); } this.quene.push(fn1)  return this}_LazyMan.prototype.dinner = function (){ const fn = () => { console.log('Eat dinner') this.next() } this.quene.push(fn) return this}function LazyMan(name){ return new _LazyMan(name)}LazyMan('Hank').sleep(2000).dinner()

防抖节流

在项目中一般会遇到防止多次点击的情况，这种情况以前处理的时候是使用一个开关，后来研究了下防抖这种方法，在这里记录下

function debounce(fn, delay, immidate){ var timer; return function (){ var that = this; var args = arguments; clearTimeout(timer) if(immidate){ // 立即执行的走这里 var doNow = !timer; timer = setTimeout(function(){ timer = null }, delay) if(doNow){ fn.apply(that, args) } }else{ timer = setTimeout(function(){ fn.apply(that, args) }, delay) }  }}function foo(){ console.log('scroll timer is running')}document.getElementById('box').addEventListener('mousemove', debounce(foo, 2000, true))

数组去重

方法一

// 使用字符串的indexOf和lastIndexOf方法去重数组Array.prototype.removeTwice = function(){ var i = 0 while( i < this.length ){ if(this.join('').indexOf(this[i]) !== this.join('').lastIndexOf(this[i])){ this.splice(this.join('').lastIndexOf(this[i]), 1) }else{ i++ } } return this}var arr = [1,2,4,5,2,4,5,6,1,3,7,9,2,4]var result = arr.removeTwice()console.log(result) // [1,2,3,5,6,3,7,9]