任务16-JS 语法

问答题

• CSS和JS在网页中的放置顺序是怎样的？
  答：
  css：通过link标签将样式表放在中。
  js：放在中尾部。如果放置在中那么会导致页面延迟，因为浏览器必须等到js代码都被执行完成以后才开始呈现页面内容。

• 解释白屏和FOUC
  答：
  白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的。
  当把css样式放在底部或者使用@import方式引入样式时，一些浏览器例如chrome,他的加载和渲染机制是等css全部加载解析完后再渲染展示页面,而这个等待的时间就为白屏。另一些浏览器例如Firefox,他会在css未加载前先展现页面,等css加载后再重绘一次,这就造成了FOUC (无样式内容闪烁)。所以为了避免这些问题,最好使用LINK标签将样式表放在文档的HEAD中。

• async和defer的作用是什么？有什么区别
  答：
  async和defer的作用是实现异步加载。

  1. 没有async和defer浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
  2. async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
  3. defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

• 简述网页的渲染机制
  答：

  • 解析 HTML 标签, 构建 DOM 树
  • 解析 CSS 标签, 构建 CSSOM 树
  • 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
  • 在渲染树的基础上进行布局, 计算每个节点的几何结构

  • 把每个节点绘制到屏幕上 (painting)

    
    
    

    Paste_Image.png

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

  1. 数值（number）：整数和小数（比如1和3.14）
  2. 字符串（string）：字符组成的文本（比如"Hello World"）
  3. 布尔值（boolean）：true（真）和false（假）两个特定值
  4. undefined：表示“未定义”或不存在，即此处目前没有任何值
  5. null：表示空缺，即此处应该有一个值，但目前为空
  6. 对象（object）：各种值组成的集合。

  简单类型：Number,String,boolean,undefined,null。
  复杂类型：object。
  对象又分为三个子类型：狭义的对象（object）、数组（array）、函数（function）。

• NaN、undefined、null分别代表什么?
  答：
  NaN：NaN含义是Not a Number，表示非数字，NaN和任何值都不相等，包括自己。

NaN == NaN; //false

null与undefined都可以表示“没有”

typeof undefined 返回"undefined"
typeof null 返回"object"

• typeof和instanceof的作用和区别?
  答：
  typeof运算符可以返回一个值的数据类型。

abc 返回String
123 返回Number
true 返回boolean
函数 返回function
undefined返回undefined
[-] 返回object
{} 返回object
null 返回object

instanceof可以识别某个变量是否是某个对象的实例。返回true/false
    
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2858982-efebad0575c1f272.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)







#代码题

1. 完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）
ps: 做完后可参考 underscore.js 源码中部分实现。

    ```
    function isNumber(el){
        // todo ...
        return typeof(el) === 'number';
    }
    function isString(el){
        //todo ...
        return typeof(el) === 'string';
    }
    function isBoolean(el){
        //todo ...
        return typeof(el) === 'boolean';
    }
    function isFunction(el){
        //todo ...
        return typeof(el) === 'function'
    }
    
    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());//结果：当前时间的时间戳。
    console.log(+"4");//结果：4  字符串4转换成数字4
    ```
    ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2858982-5a03d79d292a8fec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

    ```
    var a = 1;
    a+++a;//a++优先级最高，所以是（a++）+a
            //a++结果为1，然后a+1==2.所以1+2=3
    
    typeof a+2;//typeof a优先计算，结果："number"，然后与2相加，结果为字符串"number2"
    ```
    ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2858982-9ea6e254065b51c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

    ```
    var arr = [3,4,5]
    for(var i=0; i