读源码学会一些编程小技巧

记录一下学习源码中了解到一些开发编程技巧

判断嵌套对象内部的值是否存在

     var i
    // 业务中出现的多层嵌套的对象
    var a = {
        s: {
            f: {
                sf: 333,
            },
        },
    }
    // 一般的写法
    if (a && a.s && a.s.f && a.s.f.sf) {
        console.log(222)
    }
    // vue源码里使用的方法，上方的嵌套会随着层级越来越长，而下方的方法用了一个中间变量保证只有一层
    if ((i = a) && (i = i.s) && (i = i.f) && (i = i.sf)) {
        console.log(222)
    }

Object.create(null)创建无原型属性的对象

使用for in遍历对象会把原型可枚举属性一起遍历出来，一般forin里面会包一层object.hasOwnProperty(key)
来确定是否是对象本身的方法，而Object.create(null)创建无原型属性的对象就不需要使用forin里面包一层了

判断构造函数是否使用new来创建

function ss(num) {
        // 方式1 instanceof 如果函数不是通过new就报错
        // 如果使用new关键字 this的__proto__指向函数的prototype
        if (!(this instanceof ss)) {
            console.error(222)
        }
        // 方式2 new.target 如果函数不是通过new就报错
        // new.target 参考阮一峰 es6
        if (new.target != ss) {
            console.error(222)
        }
        // 方式3 new.target 如果函数不是通过new就手动帮你new
        if (new.target != ss) {
            return new ss(num)
        }
        this.a = num
    }
    var ff = ss(33)
    console.log(ff)

保证对象的属性不可变

   var a = {}
    // // 使用这种方式创建的对象属性，利用默认设置是不可枚举，不可重写,不可配置的
    Object.defineProperty(a, "f", {
        value: 33,
    })

    // 跟上一种方式有些相似,利用读取只从get方法读取的原理,在谷歌打印出来是{},要点开才能看的数据
    Object.defineProperty(a, "f", {
        get: () => 55,
        configurable: true,
    })
    // 复习一下相关知识
    // Object.getOwnPropertyDescriptor 读取你的defineProperty设置
    Object.getOwnPropertyDescriptor(a, "f")

    // Object.preventExtensions 不允许在使用Object.defineProperty扩展a对象,加其他属性
    Object.preventExtensions(a)

    // Object.seal,在Object.preventExtensions功能上，加上之前的属性不可配置
    Object.seal(a)

    //  Object.freeze, 在Object.seal功能上，加上不允许值改变
    Object.freeze(a)

简化如果没有创建，有就直接操作的步骤

     var a
    // 之前经常会遇到如果第一次要创建再操作，之后直接操作，
    // 原来是用if else来写，现在可以用下面的方式来写，但是记得要加;号不然代码可能会被浏览器理解成其他意思
    ;(a = a || []).push(3)
    console.log(a)
    // 或者是给对象赋值，这种情况更加常见
    var b = {}
    ;(b.arr = b.arr || []).push(3)
    console.log(b)

bind直接从arguments传参

    // arguments 是从函数直接取得数组参数
    // fun 是你自己得方法需要用bind切换指向, obj 是你bind指向得对象
    Function.prototype.bind.apply(fun, [obj].concat(Array.prototype.slice.call(arguments))) 

复杂数组去重

   function unique (arr) {
    let obj = {}
    return arr.filter((item, index) => {
      // 防止key重复d
      let newItem = item + JSON.stringify(item)
      return obj.hasOwnProperty(newItem) ? false : (obj[newItem] = true)
    })
  }

返回的同时给变量赋值

   var ff = ''
    function aw(params) {
        return ff = 44
    }
    console.log(aw());
    console.log(ff);