JavaScript 基础

CSS和JS在网页中的放置顺序是怎样的?

  • CSS 推荐放置在 <head> </head>中的 link 标签
  • JavaScript 推荐放置在 </body> 前

解释白屏和FOUC

  • 白屏问题:如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现,如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏
  • FOUC(Flash of Unstyled Content)无样式内容闪烁:如果把样式放在底部,浏览器会逐步加载无样式的内容,等CSS加载后页面突然展现样式,对于 Firefox 会一直表现出 FOUC

async和defer的作用是什么?有什么区别

  • 对于<script src="script.js"></script>,没有 defer 或 async,浏览器会立即加载并执行指定的脚本,在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行
  • 对于<script async src="script.js"></script>,有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步),不保证顺序
  • 对于<script defer src="script.js"></script>,有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成,脚本延迟到文档解析和显示后执行,有顺序

简述网页的渲染机制

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

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

  • 数值(number):整数和小数(比如1和3.14)
  • 字符串(string):字符组成的文本(比如"Hello World")
  • 布尔值(boolean):true(真)和false(假)两个特定值
  • undefined:表示“未定义”或不存在,即此处目前没有任何值
  • null:表示空缺,即此处应该有一个值,但目前为空
  • 对象(object):各种值组成的集合,复杂类型
  • 狭义的对象(object)
  • 数组(array)
  • 函数(function)

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

  • null表示空值,即该处的值现在为空。典型用法是:
  • 作为函数的参数,表示该函数的参数是一个没有任何内容的对象
  • 作为对象原型链的终点
  • undefined表示不存在值,就是此处目前不存在任何值。典型用法是:
  • 变量被声明了,但没有赋值时,就等于undefined
  • 调用函数时,应该提供的参数没有提供,该参数等于undefined
  • 对象没有赋值的属性,该属性的值为undefined
  • 函数没有返回值时,默认返回undefined
  • NaN含义是Not a Number,表示非数字,NaN和任何值都不相等,包括自己

typeof和instanceof的作用和区别?

  • typeof运算符可以返回一个值的数据类型,可能有以下结果:
  • 原始类型:数值、字符串、布尔值分别返回number、string、boolean
typeof 123; // "number"
typeof "123"; // "string"
typeof false; // "boolean"
  • 函数:函数返回function
function f(){}
typeof f;  // "function"
  • undefined返回undefined
typeof undefined; // "undefined"

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

v; // ReferenceError: v is not defined
typeof v; // "undefined"
  • 其它:除此之外都返回object
typeof window // "object"
typeof {} // "object"
typeof [] // "object"
typeof null // "object"
  • instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型。与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。例如:
var oStringObject = new String("hello world");
alert(oStringObject instanceof String); //输出 "true"

这段代码问的是“变量 oStringObject 是否为 String 对象的实例?”oStringObject 的确是 String 对象的实例,因此结果是 "true"。

代码题

  1. 完成如下代码判断一个变量是否是数字、字符串、布尔、函数
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(el instanceof 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
  1. 以下代码
console.log(1+1); 
console.log("2"+"4"); 
console.log(2+"4"); 
console.log(+new Date());
console.log(+"4");

输出结果:

2
24
24
1477731277228
4
  1. 以下代码
var a = 1;
a+++a;
typeof a+2;

输出结果

"number2"
  1. 遍历数组,打印数组每一项的平方
var arr = [3,4,5];
for(var i=0;i<arr.length;i++){
  console.log(arr[i]*arr[i]);
}

或者

var arr = [3,4,5];
for(value in arr){
  console.log(arr[value]*arr[value]);
}
  1. 遍历 JSON, 打印里面的值
var obj = {
  name: 'hunger',
  sex: 'male',
  age: 28
};
for(k in obj){
  console.log(obj[k]);
}
  1. 下面代码的输出是? 为什么
console.log(a);
var a = 1;
console.log(a);
console.log(b);
  • 第一个结果:undefined,var a = 1;变量提升,会把var a 放在最开始,此时 a 未赋值,所以结果为undefined
  • 第二个结果:1;此时有 a = 1
  • 第三个结果,报错,b 未声明

本教程版权归饥人谷和作者所有,转载须说明来源。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容