JS语法

作者: 婷楼沐熙 | 来源:发表于2016-08-13 10:04 被阅读117次

JS基础和WebAPIs的关联性
react-jsx
4/07day28_js基础
JSX语法
Vue入门（1）
express+ejs实现最简模板
jsx语法
react入门(一)
-----Web APIs-----
React 知识点小结（一）：基础

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

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

CSS和JS在网页中的顺序是非常重要的，它会对其他资源的加载顺序产生影响。

CSS
CSS代码一般放在head标签当中，用link标签将样式放在顶部。网页渲染时，是先解析HTML标签，生成DOM树，再解析CSS标签，构成CSSOM树，然后再把DOM和CSSOM组合成渲染树。如果把CSS放在后面，可能会出现白屏问题或者FOUC (Flash of Unstyled Content) 无样式内容闪烁。
JS
JS文件需要被HTML引用才能在浏览器当中运行，而在HTML当中有不同的方式来引用脚本文件，这些方式就有可能带来性能的问题。
引用JS脚本文件必须要使用<script>标签，当浏览器遇到这个标签的时候，它不知道JS代码是否会修改页面，所以它会先停止解析页面，执行JS代码之后再来继续渲染页面。综上所述，浏览器遇到<script>，它会优先下载并解析里面的JS代码，禁用并发，这样一来就会阻塞后面页面的加载和渲染，造成白屏现象。所以JS代码一般放置在body里面的最后面，这样就可以避免这种情况。
JS非阻塞加载解决方案也有：
用defer标签。
用createElement来动态生成，但是加载顺序在IE下不一定会是按代码写的顺序来加载，可能会影响到依赖项，有些文件就是必须在另一个文件前引用（火狐跟opera是按顺序加载的）。
是用ajax加载，也是非阻塞似的但是这种方法不支持CDN。

二、解释白屏和FOUC

白屏和FOUC是浏览器加载和页面的显示方式不同造成的。

白屏
当浏览器获取到内容但没有得到CSS样式时，对于无样式内容不会进行渲染，所以这时候就会出现白屏现象。
在IE浏览器当中，如果把样式放在底部，在一些场景当中，比如刷新页面、新窗口打开等，页面就会出现白屏，而不是内容逐步展现。
如果使用@import标签，即使CSS放入link当中且也放在头部，也有可能会出现白屏现象。
对于图片和CSS，在加载时会并发加载。然而在加载JS文件时会禁用并发，阻止其他内容的下载。所以把JS代码放在页面顶部也会造成白屏现象。
FOUC
FOUC (Flash of Unstyled Content) ，即无样式内容闪烁。它指的是这样一种现象：逐步加载无样式的内容，等CSS加载完成后页面突然展现的样子。也就是说，浏览器加载了无样式内容，又突然解析到了样式，会对页面进行重新的渲染，这时候就会产生FOUC现象。
在IE浏览器中，如果把样式放在底部，某些场景下（点击链接、输入URL、使用书签进入等等），就会出现FOUC现象。对于 Firefox 则会一直表现出 FOUC。

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

引入JS文件必须要用到<script>标签，这个标签有两个和性能以及JS文件下载执行相关的属性，也就是async和defer。

没有async和defer

<script src="script.js"></script>

如果没有async和defer属性，浏览器会立即加载并执行指定的脚本。这里的“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

async

<script async src="script.js"></script>

async是html5中新增的属性，它的作用是能够异步加载和执行脚本，不会因为加载脚本而阻塞页面的加载，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。一旦加载到就会立刻执行，很有可能不是按照原本的顺序来执行的。如果js前后有依赖性，用async，就很有可能出错。

defer

<script defer src="script.js"></script>

如果script加了defer属性，即使放在head里面，它也会在HTML解析完成之后再去执行，就相当于把script放到了页面底部。有了defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。也就是说JS的加载不会阻塞页面的渲染和资源的加载。但defer会按照原本的JS的顺序执行，所以如果前后有依赖关系的JS可以放心使用。

比较async和defer
相同点
- 加载文件时不会阻塞页面的渲染。
- 对于inline的script无效。
- 使用这两个属性的脚本中不能调用document.write方法。
- 有脚本的onload的事件回调。
不同点
- async不保证原本的执行顺序；defer脚本延迟到文档解析和显示后执行，会按照原本的顺序执行。
- HTML5.0中定义了async，HTML4.0中定义了defer。

详细资料还可以参考script的defer和async。

四、简述网页的渲染机制。

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

详细资料可以参考：
前端必读：浏览器内部工作原理
 How browsers work

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

JavaScript语言的每一个值都属于某一种数据类型。JavaScript的数据类型一共有六种，分为五种简单数据类型（也称为基本数据类型）：

数值（number）：整数和小数，比如：1和3.14 。
字符串（string）：字符组成的文本，比如："Hello World"。
布尔值（boolean）：true和false两个特定的值。
undefined：表示未定义或者不存在，即此处目前没有任何值。
null：表示空缺，即此处应该有一个值，但目前为空。

还有一种复杂数据类型—object，也就是对象，它表示各种值组成的集合。对象又可以分成三个子类型。

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

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

NaN
NaN的含义是“Not a Number”，表示非数字。这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误）。NaN有两个不一般的特点，第一，NaN和任何值都不相等，包括自己；第二，任何涉及NaN的操作（比如NaN/1）都会返回NaN。
针对NaN的这两个特点，ECMAScript定义了isNaN()函数。它只有一个参数，这个参数可以是任何类型，该函数会帮我们确定这个参数是否“不是数值”。

控制台测试
undefined
undefined表示不存在值，就是此处目前不存在任何值。典型用法是：
变量被声明了，但没有赋值时，就等于undefined。
调用函数时，应该提供的参数没有提供，该参数等于undefined。
对象没有赋值的属性，该属性的值为undefined。
函数没有返回值时，默认返回undefined。

控制台测试
null
null表示空值，即该处的值现在为空。典型用法是：
作为函数的参数，表示该函数的参数是一个没有任何内容的对象。
作为对象原型链的终点。

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

因为ECMAScript是松散型的，所以需要一种手段来检测给定变量的数据类型。JS中有三种方法来确定一个值到底是什么类型。分别为：typeof运算符、instanceof运算符以及`Object.prototype.toString方法。

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

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

事实上，这个特点也经常用于判断语句当中。
其他
除此以外，其他的都是返回object。
instanceof
在使用typeof采用引用类型存储值时，无论引用的是什么类型的对象，都会返回object。针对这个问题，ECMAScript引入了instanceof来解决这个问题。与typeof不同，instanceof只有true和false两个输出。

oStringObject 是 String 对象的实例，因此结果是true。所以在 typeof 方法返回 "object" 的情况下，instanceof 方法还是很有用的。
更详细的用法可以参考JavaScript instanceof 运算符深入剖析。

八、代码

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

function isNumber(el){
 // todo ...
}
function isString(el){ 
//todo ...
}
function isBoolean(el){ 
//todo ...
}
function isFunction(el){ 
//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

DEMO1
DEMO2

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

console.log(1+1);    //2。 加法计算
console.log("2"+"4");     //24。 有一个是字符串，转换为字符串的拼接。
console.log(2+"4");    //24。 有一个是字符串，转换为字符串的拼接。
 console.log(+new Date());    //1471048600952。 获得当日的日期，用new Date() 参与计算会自动转换为从1970.1.1开始的毫秒数。
console.log(+"4");    //4。  只有一个字符串，会转换成数字。

运行结果

JS中的运算符主要用于连接简单的表达式，组成一个复杂的表达式。常见的有算数表达式、比较表达式、逻辑表达式、赋值表达式等，也有单目运算符，指操作原始表达式。大多数运算符都由标点符号组成（+、>=、!），也有关键字表示的运算符，如typeof、delete、instanceof等。
在JavaScript中运算符通常会根据需要对操作数进行类型转换，乘法操作符*希望操作数是数字，但是 "3" * "5" 也是合法的，JavaScript会自动将其转换为数字计算，返回Number 15。
有些操作符对不同的数据类型有不同的含义，比如：+

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

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

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

在a+++a表达式当中，后置递增的优先级最高。所以相当于(a++)+a。a一开始赋值为1，a++表示先赋值再自增，所以a++的计算结果为1，且此时a等于2。所以a+++a表达式的计算结果为3。
而typeof a+2中，typeof的优先级比“+”高，所以它会先计算typeof a，得到的输出是"number"。然后是一个字符串加上一个数字，会把数字转换成字符串。所以得到的输出为"number2"的字符串。

运行结果
运算符优先级
4.遍历数组，把数组里的打印数组每一项的平方（难度**）。

var arr = [3,4,5]
// todo..// 
输出 9, 16, 25

运行结果

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

var obj = { 
name: 'hunger', 
sex: 'male', 
age: 28
}
//todo ...
// 输出 name: hunger, sex: male, age:28

运行结果

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

console.log(a);
var a = 1;
console.log(a);
console.log(b);

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，给他初始值undefined，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
所以在上面的代码中，变量a先被声明，再执行console.log(a);，也就是相当于执行了var a; console.log(a);。因为此时a没有赋值，所以console.log(a);结果为undefined。然后a被赋值为1，再执行console.log(a);，所以console.log(a);结果为1。最后，console.log(b);，由于b变量不存在，所以结果报错。