JS 语法

作者: 进击的阿群 | 来源:发表于2016-08-17 12:00 被阅读114次

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

理论上来说，CSS和JS的放置位置并没有严格要求，不过因为浏览器的工作方式原因，出于高性能考虑，通常，CSS放在html文档的head标签中，JS放在文档的</body>标签之前。
原因：浏览器会按照从上到下的顺序解析文档内容，而且默认在解析到javascript代码时，其他文档无法加载或显示，只有等待javascript代码下载并执行完毕才能显示文档。这样就造成一些问题：

如果将JS代码放在head元素中，在浏览器加载JS代码时，文档内容不会显示，会等待浏览器加载JS代码完成才能显示；
如果放在文档中随便一个位置，那么有可能JS代码比文档提前执行，而一般用户希望文档全部加载完成才执行JS。

2. 解释白屏和FOUC

白屏：由于DOM的存在，以及JS语言作为脚本语言的特点，当把CSS或JS文件放在html文档不同位置时，可能会出现一些问题，白屏问题就是其中一种。
- CSS：CSS和HTML文档能够并发同步加载，但是当把CSS文件放在底部时，部分浏览器会出现白屏，所以正常情况CSS要放在head标签中；而如果使用@import引入CSS文件，那么即使放在head标签中也可能会出现白屏。
- JS：JS作为脚本语言，在浏览器解析到JS时会加载JS，同时禁止HTML文档的下载和显示，即如果不做属性处理，正常情况下JS会影响文档的显示出现白屏问题，所以建议将JS放在文档</body>标签之上。
FOUC(Flash Of Unstyled Content)：无样式文本闪烁，顾名思义，当把CSS样式表放在文档的不同部位时，会有不同显示效果，如果放在文档底部，在加载完文档之后才应用样式，每一层DOM都会加载，故而发生文档闪烁。其中常见于IE浏览器，而这种CSS放在底部的情况，Firefox浏览器会一直闪烁。

3. async和defer的作用是什么？有什么区别

async和defer是<script>标签的两个属性，用于指定脚本文件的加载方式。正常情况下，浏览器从上到下解析HTML文件，当解析到<script>标签的时候会立即下载脚本并执行，只有当加载执行脚本之后浏览器才能继续解析<script>标签之后的文档内容，而async和defer属性就是改变这种加载方式的作用。

async：表示应该立即下载脚本，不影响页面其他操作诸如其他脚本的下载，async属性会使加载和渲染文档元素的过程和JS脚本加载和执行并行进行（即异步）。只对外部脚本文件有效。
defer：表示脚本可以延迟到文档完全被解析之后再执行。只对外部脚本文件有效，IE7及更早版本对嵌入脚本也支持这个属性。
区别：
- async：不保证按照指定顺序执行JS脚本，第二个JS可能会比第一个JS文件先执行。所以多个JS文件若设置此属性应避免依赖。

    <<script src="script-1.js"></script>
    <<script src="script-2.js"></script>

defer：脚本延迟到文档完全解析渲染后按照顺序执行。

4. 简述网页的渲染机制

解析HTML标签，构建DOM树
解析CSS文件，构建CSSOM渲染树
DOM树和CSSOM树组合，形成渲染树（render tree）
Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。即在渲染树的基础上进行布局, 计算每个节点的几何结构把每个节点绘制到屏幕上 (painting)

网页渲染机制

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

Javascript定义了5种简单数据类型，1种复杂数据类型

简单数据类型：
1. undefined：未定义或不存在；

<script>
var test1;
alert(test1);
alert(test2);
</script>

代码中声明了test1变量，但并未初始化，而未声明test2，效果如下：

undefined

只显示一次undefined，不同浏览器处理方式不同，有些不会无视而是显示错误。这就说明了：未初始化的声明变量值为undefined，未声明变量没有值，会显示错误，但是有一个现象如下：

    <script>
    var test1;
    alert(typeof test1);
    alert(typeof test2);
    </script>

对未声明变量使用typeof操作时，会显示类型为undefined：

typeof对未声明变量的操作

这也就是undefined的含义：未定义或不存在。

null：空对象指针，虽然是单独的数据类型，但是用typeof操作时，显示其为对象类型：

    <script>
      alert(typeof null);
    </script>

boolean：布尔值，即true或false；两者就是布尔值，和0或1不是一回事。对于平时的0对应false，1对应true那是用转型函数boolean()实现的：
number：

整数：十进制，八进制（0开头），十六进制（0x开头）；
浮点数：带小数点的数，对于极值用科学计数法表示，例如var floatnum = 3e-17，默认情况带有6个0的浮点数会自动转换为e表示法；0.1+0.2=0.30000000000000004这是由于IEEE754浮点计算通病所致，所以不能用浮点数进行条件测试；
NaN（not a number）：意为非数值，但是其类型本身就是数值；

    <script>
      alert(0 / 0);
      alert(2 / 0);
      alert(-2 / 0);
    </script>

alert(0 / 0)

alert(2 / 0)

alert(-2 / 0)

可以看出和数学中的概念是如出一辙的；
NaN不等于本身：

    <script>
      if(NaN == NaN) {
        alert("NaN等于本身");
      } else {
        alert("NaN不等于本身");
      }
    </script>

NaN不等于本身

NaN的任何操作都返回NaN：

    <script>
      alert(NaN / 10);
    </script>

NaN任何操作都返回NaN

ifNaN()函数：意为是否不是数值，除了NaN本身和不带数字的字符串是true，其他都是false，因为函数会自动将数据类型转型为number并判断是否不是数值。

string：字符串类型，一旦创建值就不变，要改变其所在变量值，需要先销毁字符串然后填充新字符串；
object：对象类型，较为复杂，意为一组数据和功能的集合，包含属性和方法。
还有诸多的知识，但是属于细节，在此不再赘述，采用思维导图进行整理如下：
数据类型
链接：http://pan.baidu.com/s/1nuED7qp 密码：1oom

6. NaN、undefined、null分别代表什么?

在上面的数据类型介绍中已经详细介绍，在此简单再回顾下：

NaN：意为非数值，不等于任何值包括其本身；
undefined：意为未定义或不存在，当代码并没有返回值时，会显示undefined，而不是错误；
null：是空对象指针，一种简单数据类型，但是用typeof操作时显示其为object类型；这是一个历史遗留问题。在 JavaScript 最初的实现中，JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是0。由于null代表的是空指针(大多数平台下值为0x00)，因此，null的类型标签也成为了0，typeof null就错误的返回了object.
另外，null、undefined是等于自身的。null==undefined，但不严格相等：
null == undefined

7. typeof和instanceof的作用和区别?

typeof是检测给定数据的数据类型，而instanceof检测给定数据的对象类型。
JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。但它们之间还是有区别的：

typeof：是一个一元运算符，放在运算数之前，运算数可以是任何类型。它会返回一个字符串显示数据类型；
instanceof：是一个二元运算符，用于判断某个变量是否为对象的实例：
instanceof
可以看出，数组a进行instanceof操作时，不仅会显示为Array的实例，同时也是Object的实例，因为Array是Object的子集。
谈到 instanceof 我们要多插入一个问题，就是 function 的 arguments，我们大家也许都认为 arguments 是一个 Array，但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象，尽管看起来很像。

    <script>
      var a = new Array();
      if(a instanceof Object) {
        alert(true);
      } else {
        alert(false);
      }
      if(window instanceof Object) {
        alert(true);
      } else {
        alert(false);
      }
      alert(typeof window);
    </script>

返回结果

代码有3个弹窗，分别是true，true，object，并且在IE11测试下效果相同，说明，instanceof在新版主流浏览器中，即是指ES的对象类型，也是指DOM的对象模型。

参考：instanceof——Javascript MDN

代码：

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task16-1</title>
  </head>
  <body>
    <script>
    function isNumber(el){
    if(typeof el == "number") {
      return true;
    } else {
      return false;
    }  // todo ...
    }
    function isString(el){
    if(typeof el == "string") {
      return true;
    } else {
      return false;
    }//todo ...
    }
    function isBoolean(el){
      if(typeof el == "boolean") {
        return true;
      } else {
        return false;
      }//todo ...
    }
    function isFunction(el){
      if(typeof el == "function") {
        return true;
      } else {
        return false;
      }//todo ...
    }

    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
    </script>
  </body>
</html>

代码一预览

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task16-2</title>
  </head>
  <body>
    <script>
    console.log(1+1);
    console.log("2"+"4");
    console.log(2+"4");
    console.log(+new Date()); // 1971年至今的毫秒数
    console.log(+"4");
    </script>
  </body>
</html>

代码2

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task16-3</title>
  </head>
  <body>
    <script>
      var a = 1;
      console.log(a+++a);
      console.log(typeof a+2);  // typeof先执行，+连接前后运算数
    </script>
  </body>
</html>

代码3

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task16-4</title>
  </head>
  <body>
    <script>
      var arr = [3,4,5];
      for(var i = 0; i < arr.length; i++) {
        console.log(arr[i] * arr[i]);
      }
    </script>
  </body>
</html>

代码4

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task16-5</title>
  </head>
  <body>
    <script>
      var obj = {
        name: 'hunger',
        sex: 'male',
        age: 28
      }
      for(var a in obj) {
        console.log(a + ":" + obj[a])
      }//todo ...
      // 输出 name: hunger, sex: male, age:28
    </script>
  </body>
</html>

代码5

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task16-6</title>
  </head>
  <body>
    <script>
    console.log(a);  //undefined，变量提升
    var a = 1;
    console.log(a);  //1
    console.log(b);  //错误，未声明变量
    </script>
  </body>
</html>

代码6
原因：在JS脚本中，在本身作用域内的变量会提升到代码最上方，但是其值不会跟随提升，所以第一个显示undefined意为“未定义”，而代码中未声明b，所以显示错误。

本文版权归本人和饥人谷所有，转载请注明来源，谢谢

JS 语法

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

2. 解释白屏和FOUC

3. async和defer的作用是什么？有什么区别

4. 简述网页的渲染机制

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

6. NaN、undefined、null分别代表什么?

7. typeof和instanceof的作用和区别?

代码：

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

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

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客

我爱编程

JS 语法

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

2. 解释白屏和FOUC

3. async和defer的作用是什么？有什么区别

4. 简述网页的渲染机制

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

6. NaN、undefined、null分别代表什么?

7. typeof和instanceof的作用和区别?

代码：

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

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

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客

我爱编程

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

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

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

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