美文网首页
前端知识总结(1)

前端知识总结(1)

作者: 王清水 | 来源:发表于2019-05-05 00:56 被阅读0次

    一, 数据类型

    基本数据类型有哪些?(要知道值类型和引用类型的本质,回答该问题的时候,可以自己发挥这一点)
    Number, String,  Boolean,  Null,  Undefined,  Symbol (es6滴, 反正我没用过)


    使用typeof判断

    其中null的返回为 object, 所以判断类型其实最简单是使用恒等于, 即“===”

    具体项目中一般不具体判断, 直接使用取反即可,对null和undefined统一处理

    null为什么返回类型为object, 其实是js设计之初是32位,只有五种基本数据类型, 后来null(全是0)进来后, 和标记位000(原来就是object)相合,所以表达出的typeof就是object, 所以有 Number(null) === 0   // true; 

    Symbol确保每个Symbol值不相等, 独一无二, 接受字符串为参数, Symbol类型值不是对象, 类似于字符串, 为了消除强耦合, 解决es5对象属性都为字符串所造成的属性名冲突问题, 使用Object.getOwnPropertySymbols方法,可以获取指定对象的所有Symbol属性名, 循环是循环不出该值的;复制Symbol值, 使用s1 = Symbol.for('s');s2 = Symbol.for('s'); s1 === s2  //true

    较为通用的判断方法:Object.prototype.toString.call(变量名) === ‘[object 类型]’,可以精确判断Date, Function,Object等

    二,操作对象(遍历属性, 复制对象, 合并, 排序...)

    假设我们有原始数据:

       

    1, for in方法得到自身和继承的可枚举属性, 值得注意的是不能遍历得到上述说的Symbol类型值

    2, Object.keys(), 返回一个属性名(可枚举, 不含继承)组成的数组,我们可以使用返回的数组进行更多的操作,比如,复制对象,根据属性名排序等
    3,Object.getOwnPropertyNames(), 返回一个属性名(返回自身的所有属性,包括不可枚举属性), Symbol照样不能得到
    4,得到自身的Symbol类型值

    注意: getOwn都是自身的, for.. in方法是最全面的, 遍历时要注意属性是否在自身上或者来自于继承。方法还有很多,但是前端真的用的不会那么的全面,咱们是工科,不要求也不要苛求自己去知道所有的东西, 但是求知欲是要时刻保持的,代码优化性能优化等要时时刻刻关注,换工作是个提高自己的极好的机会!

    对象的深度拷贝

    1,自定义实现clone()方法来实现对象复制(比较常考的)


    方法1, 简单接收一个对象的最简单方法 此处添加递归复制,为方法1的优化版,但是切记对象不能太长和自执行,原因可查询递归算法的相关知识

    当然还有一些复制方法啦,比如常用的Object.assign({}, obj),es6的...扩展运算符,数组的slice()等,结合实际场景,就会慢慢了解哪一款适合你自己啦,要敢于尝试哟。

    数组的操作

    基本的数组操作就先不谈了,但是值得注意的是,可能会考一些执行数组操作后的返回值和是否会影响原始数组类似的问题,反正我不会去记,这是重点!

    接下来就是一些新的或者不是初学者触碰的或者所谓es6出的新语法(为什么说“所谓”, 我面试过程碰到过面试官和我说,某某某是es5出的而不是es6的这种问题),低端浏览器基本需要自己做兼容哦,现在假设我们有数组 arr = [1,2,3,4,5,6,11,7,8,9]

    1,map()  ,不会影响原数组哦!

    map()方法接受三个参数,元素值,元素下标,原数组(我觉得没啥用),后续后接处理函数,如果进行赋值打击新数组,处理函数要return,不然就是默认undefined

    真实项目中,使用map()方法用来返回对象数组的某一属性值

    2,filter()

    顾名思义,就是过滤器,即将所有元素通过这个过滤器来过滤,然后返回啥呢,我们来看看吧


    filter()基本语法,接受三个参数(元素值, 元素下标,原数组),其他的我们暂时未知哈

    接下来我们给数组加一些属性,方便我们进行过滤,我们对其进行一系列的操作

    结果发现:1,过滤仅仅是过滤,在此过程中进行的操作都不会有效(仅对过滤元素); 2,过滤不会影响到原始数组;3,过滤条件要注意范围性,只要满足条件,就都返回,且明确要求return是需要内容的;
    其他测试表明:1,只要满足条件,即返回满足条件元素组成的数组,只要return的内容有值; 2,数组执行过滤时,就已经将数组长度固定(或者说资源已经缓存好),操作中或者外部改变都不能打破其过滤长度。

    3,call(),apply(), bind() ,new关键字

    经常听,面试几乎都会考,实际如果只是写简单的界面或者没有其他复杂要求,几乎没用到的,  但是,确实是咱们前端往js深度发展的必经之路。

    Function.prototype上的方法,本质其实改变函数的执行上下文【可以理解js函数中存在定义时上下文和运行时上下文】,这里可以说是改变this的指向,那么,这里又可以说到this的指向问题啦 。

    总结他们的区别:改变相关函数的指向,call和apply是直接函数调用,而bind是返回一个新的函数,新函数默认已经绑定了新的this指向,再其次call和apply具体表现在参数的类型上。

    指向问题:【切记一点:谁调用this就指向谁】。

    接下来是一些this的表现,关于this的高级考核应该是构造函数以及与之相结合的继承实现(这里后续补充吧,老铁你也可以评论留下精彩代码或地址哟!)


    【全局下使用】结果显示:严格模式下,函数的this指向是undefined
    结果体现bind需要我们自己手动设置函数执行 结果显示:1,setTimeout()指向的window或者global; 2,对象中规避this的指向问题,可以使用箭头函数,虽然不推荐这么使用

    我查了一些资料,还有一些绑定的优先级以及结合new又有哪些变化呢?上述的箭头函数改变了一些东西,如果我们带有箭头函数的函数,进行多次改变执行上下文结果又是如何?如果再加上其他的一些es6的新东西又如何呢?


    原因:箭头函数的绑定无法修改,这也是为什么通常不推荐在对象中使用箭头函数的原因 证明:使用let和const声明变量,window下无法挂载,结合this...自己去发挥吧,骚年!

    最后,希望本文对你有所帮助,也算是自我总结,希望各位指正和添加相关的论据,祝大家早日找到自己的信仰!

    相关文章

      网友评论

          本文标题:前端知识总结(1)

          本文链接:https://www.haomeiwen.com/subject/ovqznqtx.html