前端面试题总结(一)

1.JavaScript的数据类型有哪些,如何判断某变量是否为数组数据类型?
答:string,number,boolean,undefined,null,object,symbol
用isArray() instanceof

2.已知id的input输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架)
答:var inp = document.getElementById("id").value;
alert(inp)

3.希望获取到页面中所有的CheckBox,怎么做?(不使用第三方框架)
答:可以将所有的CheckBox赋予同一个类名,然后通过document.getElementByClassName获取

4.设置一个一已知id的div的HTML内容为xxx,字体颜色设置为黑色(不使用第三方框架)
答:document.getElementById(“ID”).style("color":"black")

5.当一个DOM节点被点击时,我们希望能够执行一个函数,应该怎么做?JavaScript的事件流模型都有什么?

答:直接在DOM里绑定事件:<div onclick=”test()”></div>
在JS里通过onclick绑定:xxx.onclick = test
通过事件添加进行绑定:addEventListener(xxx, ‘click’, test)
那么问题来了,Javascript的事件流模型都有什么?
“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

6.看下列代码输出为何?解释原因
var a;
alert(typeof a); //undefined 因为声明了但是没有赋值
alert(b) //b is not defined 根本就没有声明 b

7.看下列代码,输出什么?解释原因
var a = null;
alert(typeof a);
答:object 从逻辑角度来看,null值表示一个空对象指针,而这正是使用typeof操作符检测null值时会返回“object”的原因。

8.看下列代码,输出什么?解释原因
var undefined; // 报错
undefined == null; // true
1==true; // true
2==true; // false
0==false; // true
0==''; // true
NaN==NaN; // false
{}==false; // false
{}==!{}; // false

9.居中div浮动元素,容器宽度为300px,高为200px,请居中显示div
<html>
<head>
<style type="text/css">
.div{width:300px;height:200px;margin:0 auto}
</style>
</head>
<body>
<div class="div">居中显示</div>
</body>
</html>

10.简单介绍以下几种值得显示效果。block,none,inline-block,list-item
答:none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。

11.css3有哪些 新特性
答: 第 1 选择器
第 2 rgba多栏布局
第 4 多背景图
第 5 Word Wrap
第 6 文字阴影
第 7 @font-face属性
第 8 圆角(边框半径)
第 9 边框图片
第 10 盒阴影
第 11 盒子大小
第 12 媒体查询
第 13 语音

12.解释一下localstorage和sessionstorage的区别。他们和cookie又有什么不同?
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存

1)共享 sessionStorage不能共享  localStorage在同源文档之间共享,cookie在同源且符合path原则的文档之间共享
2)有效期:cookie在设置的有效期内有效,默认浏览器关闭,sessionStorage在窗口关闭之前有效,localStroage长期有效,直到用户删除
3)localStroage的修改会促发其他文档窗口的update事件
4)cookie会在请求时发送到服务器,作为会话标识,服务器可修改cookie,webStorage不会发送到服务器
5)cookie有path概念,子路径可以访问父路径cookie,父路径不能访问子路径的cookie
6)cookie有secure属性要求https传输,浏览器不能超过300个cookie,单个服务器不能超过20个,每个cookie不能超过4k,webStroage大小支持能达到5m

13.有哪些性能优化方法?
第一:面向内容的优化
1. 减少 HTTP 请求
2. 减少 DNS 查找
3. 避免重定向
4. 使用 Ajax 缓存
5. 延迟载入组件
6. 预先载入组件
7. 减少 DOM 元素数量
8. 切分组件到多个域
9. 最小化 iframe 的数量
10. 不要出现http 404 错误
第二:面向 Server
1. 缩小 Cookie
2. 针对 Web 组件使用域名无关性的

14.简述"=="和"==="的不同?
==关系运算符
===数据类型也要一样

**15.简述NAN Null undefined区别 ** http://www.cnblogs.com/phpk/p/6093216.html 这个网站更全
null:空的,无效的的意思
NaN:计算中出现错误或者计算错误。
undefined:不明确,未知,可以指出字符串,,一般是出现了未定义的字符,需要宏定义一下。

16.在JavaScript中什么是伪数组?如何将伪数组转化为标准数组?
伪数组(类数组):
无法直接调用数组方法或期望length属性有什么特殊的行为,不具有数组的push,pop等方法,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

    function log(){
            var args = Array.prototype.slice.call(arguments); //为了使用unshift数组方法,将argument转化为真正的数组
            
            args.unshift('(app)'); console.log.apply(console, args);
    };

    这里把符合以下条件的对象称为伪数组:
        1,具有length属性
        2,按索引方式存储数据
        3,不具有数组的push,pop等方法
        如
        1,function内的arguments 。
        2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,
        document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等。
        3,特殊写法的对象 ,如
        Js代码  收藏代码
        var obj={};
        obj[0] = "一";
        obj[1] = "二";
        obj[2] = "三";
        obj.length = 3;

17.Window.onload和$(document).ready的区别?

    1.执行时间 

            window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
            $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 


    2.编写个数不同 

             window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
             $(document).ready()可以同时编写多个,并且都可以得到执行 

    3.简化写法 

             window.onload没有简化写法 
             $(document).ready(function(){})可以简写成$(function(){});
             
             Document.onload 是在结构和样式加载完才执行js
            Document.ready原生种没有这个方法,jquery中有 $().ready(function)

23.call和apply的区别?
call方法:
语法:call(thisObj,Object)
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

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

推荐阅读更多精彩内容

  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,418评论 1 19
  • 一. Java基础部分.................................................
    wy_sure阅读 3,731评论 0 11
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,295评论 18 399
  • 嗯哼,有趣的问题 瘦脸针打三次能定型吗? 我们先来科普关于瘦脸针 你真的需要瘦脸针吗? 这是大家都常见的问题瘦脸针...
    B姐整啥呢阅读 23,324评论 0 0
  • 小时候喜欢玩一种游戏:捉迷藏。 游戏有两种玩法: 一是:一群人手牵手围成一圈,用手绢蒙住一人双眼,把他转得不辨方向...
    悦然一笑阅读 1,089评论 0 1