百度面试一面的准备

JS

1.call()  和 apply():

作用:扩充函数赖以运行的作用域;

这两个函数都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值;

apply()接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组,第二个参数可以是Array实例,也可以是arguments对象;

function sum(num1,num2){

             return num1 + num2;

}

function callSum1(num1,num2){

           return sum.apply(this,arguments);  //传入arguments对象

}


function callSum2(num1,num2){

         return sum.apply(this,[num1,num2]);   //传入数组

}

call()和apply()方法的作用相同,接收参数的方式不同,传递给函数的参数必须逐个列举出来;

function sum(num1,num2){

         return num1 + num2;

}

function callsum(num1,num2){

        return sum.call(this,num1,num2);  //注意所有参数都是直接传递给函数

}

扩充函数运行的作用域:

window.color = "red";

var o = {color: "blue"}

function sayColor(){

         alert(this.color);

}

sayColor(); //red

sayColor.call(this); //red

sayColor.call(window); //red

sayColor.call(o); //blue

上述的例子中先将sayColor()放在了对象o中,然后通过o来调用sayColor()函数;

其他的扩展作用域的方法:

ES5中bind()方法,创建一个函数的实例,this值会被绑定到传给bind()函数的值;

window.color = "red";

var o = {color: "blue"}

function sayColor(){

           alert(this.color);

}

var objectSayColor = sayColor.bind(o);   //sayColor()里的this表示对象o,

objectColor(); //blue

sayColor()函数调用bind()并传入对象o,创建objectSayColor()函数,此时this代表对象o,即使是在全局变量下,函数

2.$(document).ready的原理:不是使用轮询法,使用window.onload

DOMContentLoaded,直接绑定在Document下,页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件,HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

但是IE下不支持这个属性,使用轮询法;

兼容不支持该事件的浏览器

在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态,因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。

3.事件委托,事件冒泡,事件捕获:

(1)事件委托:针对"事件处理程序过多"的问题的解决方案

                    利用事件冒泡,只指定一个事件处理程序,可以管理某一类型的所有事件;


百度一面


1.<!Doctype html>

     告诉浏览器文档渲染的类型;

2.[  ]==false;  //true       [  ] === false;  //true   ({}) == false; //false

    0==[]; //ture    0 == "  "; //true

NaN == NaN; //false

undefined == null;  // true

undefined === null;  //false

3.IE下如何触发标准盒子模型;

IE在怪异模式下显示为IE盒子模型,标准模式下为W3C标准盒子模型;

其他浏览器都是标准盒子模型

例如,如下会触发quirks模式:

文件类型描述缺失或不完整时;

遇到一个HTML 3或者更早的文档时;

使用HTML 4.0 Transitional或Frameset的文件类型描述且系统标识符(URI)不存在时;

在DOCTYPE声明之前出现SGML注释或者其它无法识别的内容时;

文档任何地方有错误时;

注释符相遇时出现末尾文字重复;

Internet Explorer 6也会在DOCTYPE声明之前出现XML声明时使用quirks模式。

各种解决方法已被制定以迫使Internet Explorer 5以及更早版本使用W3C盒模型显示网页。这些解决方法一般是利用Internet Explorer的CSS选择器作用的无关的缺陷以从浏览器中隐藏某些规则。这些解决方法中,最为熟知的是由Tantek Çelik,一个工作于IE for Mac时发现这个主意的前微软员工,开发的“盒模型hack”。它涉及到为IE for Windows指定一个宽度声明,随后使用另一个为CSS-兼容的浏览器指定的宽度重写它。第二条声明通过利用IE for Windows解析CSS规则的其它缺陷而从该浏览器中隐藏。

3.vertical-align设置元素的垂直对齐方式;

baseline 默认。元素放置在父元素的基线上。

sub 垂直对齐文本的下标。

super 垂直对齐文本的上标

top 把元素的顶端与行中最高元素的顶端对齐

text-top 把元素的顶端与父元素字体的顶端对齐

middle 把此元素放置在父元素的中部。

bottom 把元素的顶端与行中最低的元素的顶端对齐。

text-bottom 把元素的底端与父元素字体的底端对齐。

length

4.实现水平垂直居中:

html:

<div class="one"></div>

css:

.one{

      display: flex;

      align-item: center;

      content-justfiy: center;

}

常规的做法:

<div  class="main">

         <div  class="div">123</div>

</div>

.main{

       display: table;

}

.div{

     display:table-cell;

     vertical-align: middle;

     text-align:center;

}

BFC布局:

5.svg和canvas的区别;

6.输入一串英文句子,把每个单词的首字母大写并输出;

正则匹配:

function replaceFirstUpper(str){

str.toLowerCase();

          str.replace(/\b(\w)|\s(\w)/g,function(m){

               return m.toUpperCase();

         });

}


携程电面:

1.null 和 undefined 的区别;

2.NaN;

3.怎样找出一个父元素是否包含子元素

nodeName和tagName;

4.jQuery中如何选择类选择器和ID选择器

5.将多维数组转化成一个一维数组;

var mult_arr = [1,23,[1,3],[1,3[1[2,4]]]];

function forEachArr(arr){

          var   result = [ ];

          for(var i = 0,len = arr.length; i < len;i++){

                   if(arr[i]  instanceof   Array){

                               arguments.callee(forEachArr);

                    }else{

                               result.push(arr[i]);

                     }

                      return   result;

         }

}

console.log(forEachArr(arr));

7.什么是Ajax和JSON,它们的优缺点。

Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。

优点:

可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量

避免用户不断刷新或者跳转页面,提高用户体验

缺点:

对搜索引擎不友好(

要实现ajax下的前后退功能成本较大

可能造成请求数的增加

跨域问题限制

JSON是一种轻量级的数据交换格式,ECMA的一个子集

优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)

8.vertical-align 属性设置元素的垂直对齐方式,对应的值

baseline 默认。元素放置在父元素的基线上。

sub 垂直对齐文本的下标。

super 垂直对齐文本的上标

top 把元素的顶端与行中最高元素的顶端对齐

text-top 把元素的顶端与父元素字体的顶端对齐

middle 把此元素放置在父元素的中部。

bottom 把元素的顶端与行中最低的元素的顶端对齐。

text-bottom 把元素的底端与父元素字体的底端对齐。

length

% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit 规定应该从父元素继承 vertical-align 属性的值。

8.对CSS3的理解:

CSS3是层叠样式表语言的最新发展,旨在扩展CSS2.1。它带来了很多期待已久的新事物,比如圆角,阴影,渐变,跳变或动画,以及新的布局,如多列,灵活的框或网格布局。

对HTML5的理解:

语义化的标签,新应用程序接口(API):

实时二维绘图

Canvas API:有关动态产出与渲染图形、图表、图像和动画的API[24]

定时媒体播放[25]

HTML5音频与视频:HTML5里新增的元素,它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API,而无需安装任何插件

离线存储数据库(离线网络应用程序)[26]

编辑[27]

拖放[28]

跨文档通信[29]

通讯/网络

Communication APIs:构建实时和跨源(cross-origin)通讯的两大基础: 跨文档通讯(Cross Document Messaging)与XMLHttpRequest Level 2。

浏览历史管理[30]

MIME和协议进程时表头登记[31][32]

微数据[33]

网页存储[34]

HTML5语义化的好处:

1.去掉或样式丢失的时候能让页面呈现清晰的结构:

2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页.

3.使用标签语义化可以使PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱).

4.搜索引擎的爬虫也依赖于标记.

HTTP状态码:

1XX:请求已被接受,需要继续处理,临时响应

2XX:请求已被服务器成功接收,理解,接受;

3XX:客户端采取进一步操作才能完成请求;

4XX:客户端的错误

403forbidden:服务器已经理解请求,但是拒绝执行;

404not found请求失败,希望请求的资源未在服务器上发现

5XX:服务器在处理请求时发生异常;

505服务器不支持或者拒绝支持在请求中使用的http版本;

5.跨域:由于同源策略的影响.a.com域名下的文件无法访问b.com或者是c.a.com下的域名下的对象

解决跨域的方法:

(1)document.domain+iframe;必须是主域名相同的时候才可以

(2)动态创建script标签

(3)利用iframe和location.hash

(4)window.name实现跨域数据传输

(5)HTML5中的postMessage

(6)利用flash

6.GET和POST请求的区别:

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据

GET 方法

请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:

/test/demo_form.asp?name1=value1&name2=value2

POST 方法

请注意,查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的:

POST /test/demo_form.asp HTTP/1.1

Host: w3schools.com

name1=value1&name2=value2

有关 GET 请求的其他一些注释:                          有关 POST 请求的其他一些注释:

GET 请求可被缓存                                                        POST 请求不会被缓存

GET 请求保留在浏览器历史记录中                                POST 请求不会保留在浏览器历史记录中

GET 请求可被收藏为书签                                              POST 不能被收藏为书签

GET 请求不应在处理敏感数据时使用                            

GET 请求有长度限制                                                    POST 请求对数据长度没有要求

GET 请求只应当用于取回数据

1.this的用法

来自阮一峰:

(1)作为单纯的函数调用的时候,代表全局变量;

(2)作为方法调用的时候代表上级对象;

(3)作为构造函数调用的时候,代表新对象;

(4)apply,call()调用,作用是改变函数的调用对象,第一个参数表示改变后的调用这个函数的对象,this指的就是这第一个参数

(1)Global context;

console.log(this.document === document); // true

// In web browsers, the window object is also the global object:

console.log(this === window); // true

this.a = 37;

console.log(window.a); // 37

(2)Function context;//取决于函数是如何被调用的

Inside a function, the value of this depends on how the function is called.

Simple call

function f1(){

return this;

}

f1() === window; // global object

(3)As an object method

When a function is called as a method of an object, its this is set to the object the method is called on.

3.CSS优先级

优先级顺序

内联样式 > ID 选择器 > 伪类 > 属性选择器 > 类选择器 > 元素(类型)选择器 > 通用选择器(*)

4.XML和JSON

3.XML和JSON的优缺点对比

(1).可读性方面。

JSON和XML的数据可读性基本相同,JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,XML可读性较好些。

(2).可扩展性方面。

XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的。

(3).编码难度方面。

XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有json.org提供的工具,但是JSON的编码明显比XML容易许多,即使不借助工具也能写出JSON的代码,可是要写好XML就不太容易了。

(4).解码难度方面。

XML的解析得考虑子节点父节点,让人头昏眼花,而JSON的解析难度几乎为0。这一点XML输的真是没话说。

(5).流行度方面。

XML已经被业界广泛的使用,而JSON才刚刚开始,但是在Ajax这个特定的领域,未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous Javascript and JSON)了。

(6).解析手段方面。

JSON和XML同样拥有丰富的解析手段。

(7).数据体积方面。

JSON相对于XML来讲,数据的体积小,传递的速度更快些。

(8).数据交互方面。

JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。

(9).数据描述方面。

JSON对数据的描述性比XML较差。

(10).传输速度方面。

JSON的速度要远远快于XML。

4.闭包:

闭包就是嵌套在函数里面的内部函数,并且该内部函数可以访问外部函数中声明的所有局部变量、参数和其他内部函数。当该内部函数在外部函数外被调用,就生成了闭包。(实际上任何函数都是全局作用域的内部函数,都能访问全局变量,所以都是window的闭包)

;()();可以立即执行,避免变量污染,但是要是闭包内引用类型的数据在闭包外被使用的话,那么这个闭包就无法释放,一直占用内存,前面的语句加分号的理由:为什么在前面加一个分号,其原因就是防止前面的语句忘记加分号;


6.SVG和canvas的区别:



手写冒泡排序:


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

推荐阅读更多精彩内容