JS 语法

• CSS和JS在网页中的放置顺序是怎样的？
• CSS放置在HTML中的元素内。
• 现代Web应用程序一般把全部JavaScript引用放在元素中的页面内容的后面。
• 解释白屏和FOUC
• 白屏现象：在浏览器中，如果把CSS样式放在HTML的底部，在刷新或打开新窗口的情况下，浏览器会出现白屏效果。使用@import引用CSS样式也会出现此效果(@import引用的CSS会等到页面全部被下载完再被加载。)
• FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式)：
  如果使用@import方法或点击链接,输入URL,使用书签进入等，对css进行导入,会导致某些页面在Windows 下的Internet Explorer出现以无样式显示页面内容的瞬间闪烁,
  原因：
  1，使用import方法导入样式表。
  2，将样式表放在页面底部
  3，有几个样式表，放在html结构的不同位置。
  原理：当样式表晚于结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的闪屏现象。
• async和defer的作用是什么？有什么区别
• defer：这个属性的用途是表明脚本在执行时不会影响页面的构造，脚本会被延迟到整个页面都解析完毕后再运行。在
  • async：这个属性与defer属性相似都只适用于外部脚本，都用于改变处理脚本的行为。async属性告诉浏览器立即下载文件，但async与defer不同在于，标记为async的脚本不保证按照指定它们的先后顺序执行。指定async属性的目的是不让页面等待js脚本的下载和执行，从而异步加载页面的其他内容。建议异步脚本不要在加载期间修改DOM。

  • 简述网页的渲染机制
    

    浏览器工作流程
    解析DOM 、CSSOM构造成渲染树

  • 浏览器这工作步骤：
    加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
    解析：
    1 通过解析JS语法、HTML标签、CSS属性，构建DOM树、CSSOM树。
    2 解析完成后，浏览器通过DOM树、CSSOM树构造出渲染树。
    渲染 ：在渲染树的基础上进行布局, 计算每个节点的几何结构。
    绘制 ：通过调用操作系统的API把每个节点绘制在屏幕上。

  • JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?

  • 5种简单数据类型(基本数据类型)：Undefined、Null、Boolean、Number和String。

  • 1种复杂复杂数据类型：Object

  • NaN、undefined、null分别代表什么?

  • NaN，即非数值(Not a Number)，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况。
    特点：
    1 任何涉及NaN的操作(例如NaN/10)都会返回NaN。
    2 NaN与任何值都不相等，包括NaN本身。
    

    

    (NaN == NaN);//false
    
    针对NaN的特点，ECMAscript定义了isNaN()函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN()在接受一个值后，会尝试这个值转换为数值。（字符串"10"或Boolean值会直接转换为数值）。任何不能被转换为数值的值都会导致这个函数返回true。

  console.log(isNaN(NaN));//true
  console.log(isNaN(10));//false
  console.log(isNaN("10"));//false
  console.log(isNaN("blue"));//true
  console.log(isNaN(true));//false(布尔值可以转换为0和1)
  

  

  Paste_Image.png

  • Undefined类型只有一个值，即特殊的Undefined。在使用var声明变量但未对其加以初始化时，这个变量的值就是Undefined。例如：

    
    
    

    变量未声明
    
    

    这个例子只声明了变量a，但未对其进行初始化，进行变量a与字面量Undefined的比较。可以等价写成：

    
    
    

    声明变量为Undefined
    
    结论：未经初始化的值默认就会取得Undefined值。一般而言，不存在需要声明一个变量为Undefined的情况。字面量Undefined主要目的是用于比较。

  • Null类型是第二个只有一个值的数据类型。null值表示一个空对象指针，所以typeof操作符检测null值会返回“object”的原因。

    
    
    

    typeof检测null
    
    

    如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null。这样一来只要直接检查null值就可以知道相应的变量是否已经保存了一个对象的引用。

  if (a != null) {
      //如果变量a定义了一个对象的引用就执行。
  }
  

  • typeof和instanceof的作用和区别?

  • typeof操作符是用于检测变量的数据类型。如果是使用构造函数创建的对象则会返回"object"，不过对于数组来说是个例外，无论是否是直接量都会返回"object"

    
    
    

    检查数据类型
  • instanceof此运算符可以判断一个变量是否是某个对象（类）的实例（检测 constructor.prototype 是否存在于参数 object 的原型链上），返回值是布尔类型的。示例：

  var oStringObject = new String("hello world"); 
   console.log(oStringObject instanceof String);   // 输出 "true"
  

  参考：JavaScript instanceof 运算符深入剖析、MDN

  • 代码
    • 完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）

  function isNumber(el){ 
        if (typeof(el) === number) {return "ture";}
        else {return "false";}
  }
  function isString(el){ 
        if (typeof(el) === string) {return "ture";}
        else {return "false";}
  }
  function isBoolean(el){ 
        if (typeof(el) === boolean) {return "ture";}
        else {return "false";}
  }
  function isFunction(el){ 
        if (typeof(el) === function) {return "ture";}
        else {return "false";}
  }
  var a = 2, 
           b = "jirengu", 
           c = false;
  alert( isNumber(a) ); //true
  alert( isString(a) ); //false
  alert( isString(b) ); //true
  alert( isBoolean(c) ); //true
  alert( isFunction(a)); //false
  alert( isFunction( isNumber ) ); //true
  

  • 以下代码的输出结果是?（难度**）

  console.log(1+1); //2
  console.log("2"+"4"); //24
  console.log(2+"4"); //24
  console.log(+new Date());//1467739918839
  console.log(+"4");//4
  

  • 以下代码的输出结果是? （难度***）

  var a = 1;
  a+++a;//3
  typeof a+2;//number2
  

  • 遍历数组，把数组里的打印数组每一项的平方 （难度**）

  var arr = [3,4,5];
  for (i = 0; i < arr.length; i++ ) {
        console.log(arr[i] * arr[i]);
        // 输出 9, 16, 25 
  }
  

  • 遍历 JSON, 打印里面的值 （难度**）

  var obj = { 
    name: 'hunger', 
    sex: 'male', 
    age: 28
  }
  for (var prop in obj) {
  console.log(prop + ":" + obj[prop])
  } 
  // 输出 name: hunger, sex: male, age:28
  

  • 下面代码的输出是? 为什么 （难度***）
    javascript变量提升机制。

  console.log(a);//undefined 因为下一句var a = 1还没执行，相当于只进行了var a; a没有赋值就console.log(a)
  var a = 1;
  console.log(a);//1 变量a已经赋值为1
  console.log(b);//error 这里的b并没有声明所以出现错误。
  

  console.log(a);//undefined
  var a = 1;
  等价于下示
  var a;
  console.log(a);
  a = 1;
  //当全局变量赋值前被提升到最上面先进行了声明。
  //JS在执行前会把所有的变量和函数提前声明
  

  本博客版权归 本人和饥人谷所有，转载需说明来源