JS语法

2016-08-21  本文已影响21人  饥人谷_任磊

问答：

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

2.解释白屏和FOUC

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

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

4.简述网页的渲染机制。

1.解析HTML标签，构建DOM树。
2.解析CSS标签，构建CSSOM树。
3.把DOM和CSSOM组合成渲染树（render tree）。
4.在渲染树的基础上进行布局，计算每个节点的几何结构。
5.把每个节点绘制到屏幕上（painting）。


浏览器工作原理参考：
How browsers work
前端必读：浏览器内部工作原理

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

JavaScript语言的每一个值，都属于某一种数据类型。JavaScrip定义了六种数据类型，其中数组、字符串、布尔值、underfined和null为简单类型，对象为复杂类型。：

通常，我们将数值、字符串、布尔值称为原始类型（primitive type）的值，即它们是最基本的数据类型，不能再细分了。而将对象称为合成类型（conplex type）的值，因为一个对象往往是多个原始类型的值的合成，可以看做是一个存放各种值的容器。至于underfined和null，一般将它们看成两个特殊值。

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

NaN是JavaScript的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。NaN有以下几个运算规则：

NaN的运算规则

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

undefined用法

null表示空值，即该处的值现在为空，典型的用法是：

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

typeof运算符可以返回一个值的数据类型，可以有以下结果。
（1）原始类型
数值、字符串、布尔值分别返回number、string、boolean。

原始类型

（2）函数
函数返回function

函数

（3）undefined
undefined返回undefined

undifined

利用这一点，typeof可以用来检测一个没有声明的变量，而不报错。

利用typeof检测

实际编程中，这个特点通常用在判断语句。

判断语句 object instanceof

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

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

demo

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

console.log(1+1); //结果为2，数值之间的加法运算。
console.log("2"+"4"); //结果为"24"，字符串之间的连接运算。
console.log(2+"4"); //结果为"24"，有一个运算子是字符串，则执行字符串连接运算。
console.log(+new Date());//结果为1471665761733，new Date()会获得从 1970 年 1 月 1 日至今的毫秒数。
console.log(+"4");//结果为4，只有右边一个字符串，转换为数值4.

在JavaScript语言里， +运算符可以完成两种运算，既可以处理算术的加法，也可以做字符串的连接，它的算法步骤如下：

1.如果运算子是对象，先自动转成原始类型的值（即先执行该对象的valueOf方法，如果结果还不是原始类型的值，再执行toString方法；如果对象是Date实力，则先执行toString方法）。
2.两个运算符都是原始类型的值以后，只要有一个运算符是字符串，则两个运算子都转为字符串，执行字符串链接运算。
3.否则，两个字符串都转为数值，执行加法运算。
4.加法运算符一定有左右两个运算子，如果只有右边一个运算子，就是另一个运算符，叫做“数值运算符”，用于返回右边运算子的数值形式。
5.如果只有左边一个运算子，会报错。

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

var a = 1;
a+++a;

typeof a+2;
输出结果

先了解下a++和++a的区别：

a+++a这一行代码中，后置递增的优先级高于前置递增，所以先运行a++然后+a。
a++的运行结果为1，但此时的a等于2，最后a+++a的运行结果为3。

typeof a+2这一行代码中，typeof的优先级更高，所以先运行typeof a，运行结果为"number"，然后再加上2，最后的运行结果为"number2"。

关于优先级的判断参考运算符优先级。

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

var arr= [3,4,5];

for (var i=0;i< arr.length;i++) {
  console.log(arr[i]*arr[i]);
}
遍历数组

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

var obj = {
  name: 'hunger',
  sex: 'male',
  age:28,
};

for (var key in obj) {
  console.log(key+":"+obj[key]);
}
遍历对象

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

console.log(a);
var a = 1;
console.log(a);
console.log(b);
输出结果

输出结果如图，这里要说一下的是变量提升：

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。请注意，变量提升只对var命令声明的变量有效，如果一个变量不是用var命令声明的，就不会发生变量提升。。

所以，根据上文的解释，本题的代码实际运行为：

var a;
console.log(a);//变量a已声明，但还未赋值，所以结果显示为undefined。
a = 1;
console.log(a);//变量a已赋值1，所以结果显示为1。
consolo.log(b);//变量b未声明，所以显示报错error。

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

上一篇 下一篇

猜你喜欢

热点阅读