JS 语法

2016-07-06 本文已影响124人 coolheadedY

CSS和JS在网页中的放置顺序是怎样的？
CSS放置在HTML中的<head>元素内。
现代Web应用程序一般把全部JavaScript引用放在<body>元素中的页面内容的后面。
解释白屏和FOUC
白屏现象：在浏览器中，如果把CSS样式放在HTML的底部，在刷新或打开新窗口的情况下，浏览器会出现白屏效果。使用@import引用CSS样式也会出现此效果(@import引用的CSS会等到页面全部被下载完再被加载。)
FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式)：
如果使用@import方法或点击链接,输入URL,使用书签进入等，对css进行导入,会导致某些页面在Windows 下的Internet Explorer出现以无样式显示页面内容的瞬间闪烁,
原因：
1，使用import方法导入样式表。
2，将样式表放在页面底部
3，有几个样式表，放在html结构的不同位置。
原理：当样式表晚于结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的闪屏现象。
async和defer的作用是什么？有什么区别
defer：这个属性的用途是表明脚本在执行时不会影响页面的构造，脚本会被延迟到整个页面都解析完毕后再运行。在<script>元素中设置defer属性表示告诉浏览器立即下载，但延迟执行这个js脚本。

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

async：这个属性与defer属性相似都只适用于外部脚本，都用于改变处理脚本的行为。async属性告诉浏览器立即下载文件，但async与defer不同在于，标记为async的脚本不保证按照指定它们的先后顺序执行。指定async属性的目的是不让页面等待js脚本的下载和执行，从而异步加载页面的其他内容。建议异步脚本不要在加载期间修改DOM。

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

简述网页的渲染机制浏览器工作流程 (NaN == NaN);//false
针对NaN的特点，ECMAscript定义了isNaN()函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN()在接受一个值后，会尝试这个值转换为数值。（字符串"10"或Boolean值会直接转换为数值）。任何不能被转换为数值的值都会导致这个函数返回true。

console.log(isNaN(NaN));//true
console.log(isNaN(10));//false
console.log(isNaN("10"));//false
console.log(isNaN("blue"));//true
console.log(isNaN(true));//false(布尔值可以转换为0和1)

Paste_Image.png

Undefined类型只有一个值，即特殊的Undefined。在使用var声明变量但未对其加以初始化时，这个变量的值就是Undefined。例如：

变量未声明

这个例子只声明了变量a，但未对其进行初始化，进行变量a与字面量Undefined的比较。可以等价写成：

声明变量为Undefined
结论：未经初始化的值默认就会取得Undefined值。一般而言，不存在需要声明一个变量为Undefined的情况。字面量Undefined主要目的是用于比较。
Null类型是第二个只有一个值的数据类型。null值表示一个空对象指针，所以typeof操作符检测null值会返回“object”的原因。

typeof检测null

如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null。这样一来只要直接检查null值就可以知道相应的变量是否已经保存了一个对象的引用。

if (a != null) {
    //如果变量a定义了一个对象的引用就执行。
}

typeof和instanceof的作用和区别?
typeof操作符是用于检测变量的数据类型。如果是使用构造函数创建的对象则会返回"object"，不过对于数组来说是个例外，无论是否是直接量都会返回"object"

检查数据类型
instanceof此运算符可以判断一个变量是否是某个对象（类）的实例（检测 constructor.prototype 是否存在于参数 object 的原型链上），返回值是布尔类型的。示例：

var oStringObject = new String("hello world"); 
 console.log(oStringObject instanceof String);   // 输出 "true"

参考：JavaScript instanceof 运算符深入剖析、MDN

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

function isNumber(el){ 
      if (typeof(el) === number) {return "ture";}
      else {return "false";}
}
function isString(el){ 
      if (typeof(el) === string) {return "ture";}
      else {return "false";}
}
function isBoolean(el){ 
      if (typeof(el) === boolean) {return "ture";}
      else {return "false";}
}
function isFunction(el){ 
      if (typeof(el) === function) {return "ture";}
      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

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

console.log(1+1); //2
console.log("2"+"4"); //24
console.log(2+"4"); //24
console.log(+new Date());//1467739918839
console.log(+"4");//4

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

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

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

var arr = [3,4,5];
for (i = 0; i < arr.length; i++ ) {
      console.log(arr[i] * arr[i]);
      // 输出 9, 16, 25 
}

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

var obj = { 
  name: 'hunger', 
  sex: 'male', 
  age: 28
}
for (var prop in obj) {
console.log(prop + ":" + obj[prop])
} 
// 输出 name: hunger, sex: male, age:28

下面代码的输出是? 为什么（难度***）
javascript变量提升机制。

console.log(a);//undefined 因为下一句var a = 1还没执行，相当于只进行了var a; a没有赋值就console.log(a)
var a = 1;
console.log(a);//1 变量a已经赋值为1
console.log(b);//error 这里的b并没有声明所以出现错误。

console.log(a);//undefined
var a = 1;
等价于下示
var a;
console.log(a);
a = 1;
//当全局变量赋值前被提升到最上面先进行了声明。
//JS在执行前会把所有的变量和函数提前声明

本博客版权归本人和饥人谷所有，转载需说明来源

JS 语法

猜你喜欢

热点阅读