js中常用的函数

1. js中类型判断

let isType = (type , obj)=> {
  return Object.prototype.toString.call(obj) === `[object ${type}]`
}
isType('Number', 1) //true
isType('String', '123')  // true
isType('Boolean' , true) //true
isType('Array', [1,2,3])  //true
isType('Object' , {a:1})  //true
isType('Function' , function a(){}) //true

2. for in 和 Object.keys的区别

for in 会遍历对象本身属性以及自定义的属性和原型链上自定义的属性

var obj = {name : 'ding'}
Object.defineProperty(obj, 'age', {
  enumerable : true,
  value : true
})
Object.prototype.like = 'eat'
for (let k in obj){
  console.log(k)  // name age like
}

Object.keys 只会遍历本身属性和自定义的属性，不会遍历原型链上自定义的属性

var obj = {name : 'ding'}
Object.defineProperty(obj, 'age', {
  enumerable : true,
  value : true
})
Object.prototype.like = 'eat'
console.log(Object.keys(obj)) // name age

3. 缓存函数

缓存函数一般多应用于，需要大量重复的调用函数时，并且可能多次是参数一样的重复调用
hasher可有可无，哈希的目的也是记录参数的唯一性

let memoize = function (func, hasher){
  var memoize = function(){
    var  cache = memoize.cache
    var address = '' + (hasher ? hasher.apply(this, arguments) : arguments)
    if(!cache[address]){
        cache[address] = func.apply(this, arguments)
    }
    return cache[address]
  }
  memoize.cache = {}
  return memoize
} 

使用例子

var add = function(a , b){
  console.log('add')
  return a+b
}
var calculate = memoize(add)
var one = calculate(2,3)
var two = calculate(2,3)
var three = calculate(2,3)
// 只打印一个 add
//这里调用了三次，但是add函数只调用了一次，大大的节省了时间和性能

4. reduce函数

参考文档
arr.reduce(callback(prev, cur, index, array) , initialValue)
第一个参数是callback函数，第二个参数是初始值
callback中第一个参数是累计值，也就是上一次执行完后返回的结果，第二个参数是当前值，第三个是当前值的索引，第四个参数是源数组

// 求和
var arr = [1,2,3]
var sum = arr.reduce(function(prev, cur){
   return prev + cur
},0)
console.log(sum)  // 6
// 数组去重
var arr2 = [1,2,3,4,5,6,6,3,4]
var newArr = arr2.reduce((prev, cur) => {
  prev.indexOf(cur) === -1 && prev.push(cur)
  return prev
},[])
console.log(newArr) // [1,2,3,4,5,6]

5. 复合函数compose

目的：将多个纯函数组合到一起

let compose = function () {
  let args = [].slice.call(arguments)
  return function(x){
    return args.reduceRight((res, fn)=>{
      return fn(res)
    },x)
  }
}

let pipe =  function () {
  let args = [].slice.call(arguments)
  return function(x){
    return args.reduce((res, fn)=>{
      return fn(res)
    },x)
  }
}

上面两个函数一样，只不过参数的执行顺序不同，一个是从右往左，一个从左往右执行。

举个例子，对一个数字 先加10 再乘10

let add = x => x+10
let multiply = x => x*10
let fn1 = compose(multiply, add) // 执行顺序是从右往左执行
let res1 = fn1(10)  // 200 
let fn2 = pipe(add, multiply) //执行顺序是从左往右执行
let res2 = fn2(10) // 200

6. 过滤函数filter

// filter
let persons = [
  { 'name': 'Peter', age: 21 },
  { 'name': 'Mark', age: 28 },
  { 'name': 'Josn', age: 19 },
  { 'name': 'Jane', age: 31 },
  { 'name': 'Tony', age: 35 }
]
let newAge = persons.filter(item => item.age > 21);
console.log(newAge);

7. 防抖与节流

参考这里

8. 浅拷贝和深拷贝

let deepClone = obj => {
  let newObject = Array.isArray(obj) ? [] : {}
  if(obj && typeof obj === 'object'){
    for(let key in obj){
      // 使用hasOwnProperty的目的是确保不去遍历原型链上的属性
      if(obj.hasOwnProperty(key)){
        // 如果属性值仍是对象，则递归调用
        if(obj[key] && typeof obj[key] === 'object'){
          newObject[key] = deepClone(newObject[key])
        }else{
          // 如果不是，则直接赋值
          newObject[key] = obj[key]
        }
      }
    }
  }
  return newObject
}

举个例子：

let richGirl = {
  name: '开心',
  car: ['宝马', '奔驰', '保时捷'],
  deive: function () { },
  age: undefined
}

let richBoy = deepClone(richGirl);
richBoy.deive = '渣男开大G';
richBoy.name = '小明';
richBoy.car = ['哈罗单车', '膜拜'];
richBoy.age = 20;

console.log(richGirl);
console.log(richBoy);
// 二者互不影响