js基础——基本概念、数据类型、运算符、流程控制语句

一、CSS和JS在网页中的放置顺序是怎样的？

CSS和JS在网页中的放置顺序

二、解释白屏和FOUC

• 白屏问题

  如果把样式放在底部，对于IE浏览器，在某些场景下（新窗口打开、刷新等）页面会出现白屏，而不是内容逐步展现；
  如果使用@import标签，即使CSS放入link，并且放在头部，也可能出现白屏；
  把JavaScript放入页面顶部时会阻塞其后内容的呈现，所以也会导致白屏现象。

• FOUC（Flash Of Unstyled Content）无样式内容闪烁

  如果把样式放在底部，对于IE浏览器，在某些场景下（点击链接，输入URL，使用书签进入等），会出现FOUC现象（逐步加载无样式的内容，等CSS加载后页面突然展现样式）。对于Firefox会一直出现FOUC。

三、async和defer的作用是什么？有什么区别

• async和defer的作用
  当浏览器碰到script脚本的时候：
  1. <script src="script.js"><script>
     没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
  2. <script async src="script.js"><script>
     有async，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）。
  3. <script defer src="script.js"><script>
     有defer，加载后续文档元素的过程将和script.js的加载并行进行（异步），但script.js的执行要在所有元素解析完成之后，DOMContentLoad事件触发之前完成。
• async和defer的区别
  • defer：脚本延迟到文档解析和显示后按顺序执行，有顺序
  • async：脚本的执行不保证顺序，只要加载完了就会立刻执行

四、简述网页的渲染机制

网页的渲染主要分为以下几步：

• 解析html构建DOM树
• 解析CSS构建CSSOM树
• 把DOM和CSSOM组合成渲染树（Render Tree）
• 在渲染树的基础上进行布局，计算每个节点的几何结构（Layout Tree）

• 把每个节点绘制到屏幕上（Painting）

  
  

当浏览器从服务器接收到了html文档，并把html在内存中转换成DOM树，在转换过程中如果发现某个节点上引用了CSS或者image，就会再发一个request去请求CSS或image，然后继续执行下面的转换，而不需要等待request的返回，当request返回后，只需要把返回的内容放入到DOM树中对应的位置就可以了。但当引用了JS的时候，浏览器发送一个JS request就会一直等待该request的返回。

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

JavaScript的数据类型共有六种：

• 数值（Number）：整数和小数（比如1和3.14）
• 字符串（String）：字符组成的文本（比如“Hello World”）
• 布尔值（Boolean）：true（真）和false（假）两个特定值
• Undefined：表示“未定义”或不存在，及此处目前没有任何值
• Null：表示空缺，及此处应该有一个值，但目前为空
• 对象（Object）：各种指组成的集合

其中有5种简单数据类型（基本数据类型）：数值（Number）、字符串（String）、布尔值（Boolean）、Undefined、Null；

1种复杂数据类型：对象（Object）

对象又可以分成三个子类型：

• 狭义的对象（Object）
• 数组（Array）
• 函数（Function）

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

• NaN：即非数值（Not a Number）是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况

NaN有两个特点：
* 任何涉及NaN的操作（例如NaN/10）都会返回NaN
* NaN与任何值都不相等，包括NaN本身

• undefined：表示不存在值，就是此处不存在任何值。典型的用法是：

  • 变量被声明了，但没有赋值时，这个变量的值就是undefined
    
  • 调用函数时，应该提供的参数没有提供，该参数等于undefined
    
  • 对象没有赋值的属性，该属性的值为undefined
    
  • 函数没有返回值时，默认返回undefined
    

• null：表示空值，即该处的值现在为空。从逻辑角度来看，null值表示一个空对象指针，而这也正是使用typeof操作符检测null时会返回“object”的原因，如下面例子所示：
  

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

    if(car != null){
        //对car对象执行某些操作
    }
  

七、typeof和instanceof的作用和区别?

• typeof：用于获取给定变量的数据类型。对一个值使用typeof操作符可能返回下列某个字符串：

  • “undefined”——如果这个值未定义；

    
    

  • “boolean”——如果这个值是布尔值；

    
    

  • “string”——如果这个值是字符串；

    
    

  • “number”——如果这个只是数值；

    
    
  • “object”——如果这个值是对象或null；
    
  • “function”——如果这个值是函数；
    
    我们可以使用typeof来获取一个变量是否存在，如if(typeof a!="undefined"){}，而不要去使用if(a)，因为如果a不存在（为声明）则会出错，对于Array，Null等特殊对象使用typeof一律返回object，这正是typeof的局限性。
    

• instanceof：用于判断一个变量是否属于某个对象的实例。返回结果为boolean值，true或false。用法：

    var a=new Array();
    alert(a instanceof Array); //返回true
    alert(a instanceof Object)  //也会返回true，因为Array是object的子类  
  

因为typeof遇到Null、数组、对象时都会返回object，所以我们要判断一个对象是否是数组或判断某个变量是否是某个对象的实例时要选择用instanceof运算符。

代码实例

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

function isNumber(el){
    if(typeof el === "number"){
            return true;
        }
        else{
            return false;
        }
}
function isString(el){
    if(typeof el === "string"){
            return true;
        }
        else{
            return false;
        }
}
function isBoolean(el){
    if(typeof el === "boolean"){
            return true;
        }
        else{
            return false;
        }
}
function isFunction(el){
    if(typeof el === "function"){
            return true;
        }
        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

代码

2.以下代码的输出结果是？（难度**）

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

操作符"+"对不同的数据类型有不同的含义：

• 两个操作数都是数字的时候，会做加法运算
• 参数中至少有一个是字符串时，会把另外的非字符串参数转换成字符串做字符串拼接
• 在参数有对象的情况下会调用其valueOf或toString
• 在只有一个字符串参数的时候会尝试将其转换为数字
• 在只有一个数字参数的时候返回其正数值

3.以下代码的输出结果是？（难度***）

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

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

var arr = [3,4,5];
for(var i = 0; i < arr.length; i++)
{
    var a = arr[i];
    console.log(a*a);
}

5.遍历JSON，打印里面的值（难度**）

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

6.下面代码的输出是？为什么（难度***）

console.log(a);  //undefined
var a = 1;
console.log(a);  //1
console.log(b);  //报错

js变量提升：

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升

由于变量提升，我们如果声明了变量，即使在声明语句前使用也是可以的，只不过其值是初始值undefined

---

本文版权属吴天乔所有，转载务必注明出处。