知识点--面试可能用得到

  1. ::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用
    经常会遇到的的伪元素有:::before, ::after,伪类包括::focus, :hover, :link
    在css2中,对两者没有特别的区分,单冒号和双冒号都可以;css3中的伪元素需要用双冒号表示。
    CSS3伪类和伪元素的特性和区别
    :before和::before的区别

  2. undefined与null的区别
    js最早只有null,后来设计者认为null是个对象,需要一个非对象的类型,进而引入了undefined,其实两者差别不大。

  • null:

    1. 转为数字为0
    2. 作为函数的参数,表示该函数的参数不是对象
    3. 作为对象原型链的终点
  • undefined:

    1. 变量被声明了,但没有赋值时,就等于undefined。
    2. 调用函数时,应该提供的参数没有提供,该参数等于undefined
    3. 对象没有赋值的属性,该属性的值为undefined
    4. 函数没有返回值时,默认返回undefined

有必要解释下undefined:在IE8以下的浏览器,undefined是可以把覆盖的;在IE8+的浏览器中,undefined是不可以被覆盖的。因此早期的框架需要用函数多一个参数的方式来显示指定undefined,防止其被覆盖:

  (function(a,b,undefined){
  })("arg1","arg2");//最后一个形参不传值,则没传值得形参值为undefined类型

同理,判断一个值是不是undefined的最好办法是typeof,而不是直接对比值:

  typeof(value) === 'undefined'
  value === undefined   // undefined有被覆盖的危险

当然 可以采用通用的判断类型的方式进行判断:

  var o = {};
  o.toString.call(window.aaa).toLowerCase() // [object undefined]

还可以采用下面的方式:(events模块采用的方法)

  return value === void 0; // 

参考: 双面undefined

  1. ['1', '2', '3'].map(parseInt)的结果为什么是1, NaN, NaN?
    parseInt接受两个参数:数字和进制。
    map会给callback函数提供三个参数,分别是值、索引和数组本身。
    因此执行的结果应该是:parseInt(1,0), parseInt(2,1), parseInt(3,2)

  2. use strict的作用

  3. 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为

  4. 消除代码运行的一些不安全之处,保证代码运行的安全

  5. 提高编译器效率,增加运行速度

  6. 为未来新版本的Javascript做好铺垫

禁止以下用法:

  1. 不允许一个变量没有声明就赋值,默认是全局变量

  2. with和eval的使用

  3. 禁止this指向window

  4. 对象重名属性,函数重名参数

  5. 怎么利用js检测浏览器是否支持某个css特性
    判断DOM元素的style属性,如:document.body.style里是否含有这个属性。程序如下:

    var supports = (function() {
        var div = document.createElement('div'),
            vendors = 'Khtml O Moz Webkit'.split(' '),
            len = vendors.length;
        return function(prop) {
            if (prop in div.style) return true;
            if ('-ms-' + prop in div.style) return true;
            prop = prop.replace(/^[a-z]/, function(val) {
                return val.toUpperCase();
            });
            while (len--) {
                if (vendors[len] + prop in div.style) {
                    return true;
                }
            }
            return false;
        };
    })();

    // use
    if (supports('textShadow')) {
        document.documentElement.className += ' textShadow';
    }
  1. 0.1+0.2 为什么不等于0.3 而是0.30000000000000004
    计算机中数字的表示都是通过二进制实现的。0.1到0.9的9个小数中,只有0.5是可以准确表示的,其余的几个都是一种近似的表示;因此数字相加过程中的精度丢失是个很正常的事情。
    JavaScript奇味探索

  2. call和apply的第一个参数是null/undefined是什么意思?
    非严格模式下,是把函数的执行环境指定为全局变量(window或global);严格模式下不进行转换,传入什么是什么:

  function aa(){console.log(this);}
  aa.call(null) // 严格模式 输出null; 非严格模式 输出window
  1. 为什么 parseInt(0.0000008) === 8?
    当小数点后面大于等于7为的时候,会转成科学计数法。因此会有以下的转换:
  parseInt(0.0000008) == parseInt('8e-7') == 8
  parseInt(0.000008)  == 0
Paste_Image.png
  1. 一道题目的思考:
  var a = {n:1};  
  var b = a; // 持有a,以回查  
  a.x = a = {n:2};  
  alert(a.x);// --> undefined  
  alert(b.x);// --> {n:2}

关键是a和a.x赋值的时候,对象的指向:

Paste_Image.png

javascript 连等赋值问题

  1. 浏览器缓存控制
    Last-Modified和if-modified-since
    服务端在Response Header中返回 Last-Modified,下次请求的时候浏览器带上 if-modified-since字段,服务器依据此判断是不是有更新。
    expires
    过期时间,如果没有过期
    etag和if-none-match
    根据etag是不是一致决定要不要走缓存,但是由于etag在分布式服务器中不一致,不推荐使用。
    cache-control:max-age=秒
    通过max-age,去更新expires时间:Expires =max-age + “每次下载时的当前的request时间”
    浏览器缓存详解:expires,cache-control,last-modified,etag详细说明

  2. script中的async defer:

  3. <script src="script.js"></script>
    没有 defer或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

  4. <script async src="script.js"></script>
    有 async,加载和渲染后续文档元素的过程将和 script.js 的加载并行进行(异步),加载完成后立即执行。

  5. <script defer src="myscript.js"></script>
    有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

Paste_Image.png

采用了defer机制时,需要在 DOMContentLoaded 事件中进行DOM操作,如Angular1.x的手动bootstrap。
defer和async的区别

  1. observable数据监听的实现
    数据observable的实现方法包括以下几种:
  • 脏检测(Angular)
  • Object.defineProperty(vue avalon)
  • 低版本浏览器借助VbScript(avalon)
  • 属性转成函数:(knockout)
      function observable(val){
        return function(newVal){
          if (arguments.length > 0){
              val = newVal;
              notifyChanges();
          }else{
              return val;
          }
        }
    }
    var data = {};
    var data.a = observable(1);
    var value = data.a() //取值
    data.a(2); //赋值
    
  • Es6 Proxy:proxy

上述是是现在比较流行的方法。数组的话,需要对其方法进行监听, 如push/unshift/splice 这三种添加方法会对新加对象进行监听,而其他函数则直接触发依赖更新。如: [1,2,3] 这种数组,由于元素是简单对象,当其改变的时候不会触发模块更新。

谈谈数据监听observable的实现

前端面试常见问答
前端面试题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容