项目中遇到的JS 基础知识小结

JS数据类型的判断方法

var type = function(data) {
   
      var toString = Object.prototype.toString;
      var dataType = data instanceof Element
          				? 'element' // 为了统一DOM节点类型输出
          				: toString.call(data).replace(/\[object\s(.+)\]/, ''$1').toLowerCase();
      return dataType;
}

类数组对象的遍历

var listMap = function (array, type, fn) {
   
    return !fn ? array : Array.prototype[type]['call'](array, fn)
}

// 使用
var divs = document.querySelectorAll('div')
listMap(divs, 'forEach', function (e) {
   
    console.log(e.innerHTML)
})

数组对象的去重

const data = [
           {
   
               name: 'Kris',
               age: '24'
           },
           {
   
               name: 'Andy',
               age: '25'
           },
           {
   
               name: 'Kitty',
               age: '25'
           },
           {
   
               name: 'Andy',
               age: '25'
           },
           {
   
               name: 'Kitty',
               age: '25'
           },
           {
   
               name: 'Andy',
               age: '25'
           },
           {
   
               name: 'Kitty',
               age: '25'
           }
]

const dataReducer = (prev, cur, idx) => {
   
    
     let obj = {
   };
     const {
    name } = cur;
     obj[name] = cur;
     return {
   
         ...prev,
         ...obj
     }
 }
 const reducedData = data.reduce(dataReducer, {
   })
 let newData = Object.values(reducedData)    

 console.log(newData)    
/***输出结果***/
0: {
   name: "Kris", age: "24"}
1: {
   name: "Andy", age: "25"}
2: {
   name: "Kitty", age: "25"}


/**
* 涉及到的知识点：
* 
* Object.keys获取对象属性， Object.values 获取对象的值
* reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
* 接收的函数可以有四个参数
* @param Object {prev} 前一个对象值，
* @param Object {cur}  当前对象值，
* @param Object {idx}  当前索引值，
* @param Array {arr}   数组对象，
* reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。
*/

阻止事件默认行为和冒泡的兼容性写法

// 阻止冒泡
function stopPropagation(e){
   
    if(e && e.stopPropagation){
   
         e.stopPropagation()
   }else{
   
       window.event.cancelBubble = true