饥人谷技术博客我爱编程

JS 语法

2016-08-17  本文已影响114人  进击的阿群

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

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

2. 解释白屏和FOUC

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

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

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

4. 简述网页的渲染机制

  1. 解析HTML标签，构建DOM树
  2. 解析CSS文件，构建CSSOM渲染树
  3. DOM树和CSSOM树组合，形成渲染树（render tree）

  4. Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。即在渲染树的基础上进行布局, 计算每个节点的几何结构把每个节点绘制到屏幕上 (painting)


    网页渲染机制

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

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

<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的含义：未定义或不存在。

  1. null：空对象指针，虽然是单独的数据类型，但是用typeof操作时，显示其为对象类型：
    <script>
      alert(typeof null);
    </script>
  1. boolean：布尔值，即true或false；两者就是布尔值，和0或1不是一回事。对于平时的0对应false，1对应true那是用转型函数boolean()实现的：
  2. 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并判断是否不是数值。

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

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

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

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

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

    <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，所以显示错误。

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

上一篇 下一篇

猜你喜欢

热点阅读