JavaScript题目 简单的编写函数题 求大神帮忙解答



这题不难,IIFE 中的赋值过程其实是(赋值过程从右到左):

接下去就不难了,a 是局部变量,b 是全局变量。


前面两个输出没有问题,都是 bar,问题出在后面两个。用了 IIFE 后,匿名函数内的 this 其实已经指到了 window,所以第三个输出 this.foo 其实是 window.foo,而全局对象并没有 foo 这个 key,所以输出 undefined,而第四个输出,因为 self 引用了 myObject,所以还是 bar。


为什么要用 IIFE?

简单来说就是为了能模块化,创建私有变量等等,很多类库(比如 jQuery)都用了这样的写法。

可以参考我以前翻译的一篇文章 


严格模式下进行 Javascript 开发有啥好处?

这个就不展开来了,可以参考阮一峰老师的  或者自行谷歌百度。


执行以上两个函数,会返回相同的东西吗?

不会,第二个函数会返回 undefined。这是由于 Javascript 的封号插入机制决定的,如果某行代码,return 关键词后没有任何东西了,将会自动插入一个封号,显然 foo2 函数中,当 return 后被插入一个封号后,尽管后面的语句不符合规定,但是因为没有执行到,所以也不会报错了。没有 return 任何东西的函数,默认返回

所以很多 Javascript 规范建议把 { 写在一行中,而不是另起一行。


NaN 是什么鬼?typeof 的结果是?如果一个变量的值是 NaN,怎么确定?

NaN 是 'not a number' 的缩写,表示 "不是一个数字",通常会在运算过程中产生:

NaN 和任何变量都不相等,包括 NaN 自己:


上面代码的输出结果是什么?

这个问题正好我之前研究过,有兴趣的可以参考下 ,看懂了还有兴趣的可以看下这篇 


写一个方法 isInterger(x),可以用来判断一个变量是否是整数。

ES6 中自带了 Number.isInteger() 方法。但是目前 ES5 中没有自带的方法,可以把一个数去掉小数点后和原数进行比较,判断是否相等,那么问题就演变成如何对一个数进行取整了。


以上代码的输出结果是?

这题不难,只要知道 Javascript 是单线程的语言, 一些异步事件是在主体 js 执行完之后执行即可,所以主体的 1、4 先输出,而后是 3、2,没有问题,因为 3 的定时设置比 2 早。

具体可以参考我之前的文章 


判断一个字符串是不是回文。

这里想到一个进阶题,求字符串最长回文子串,可以参考 


写一个 sum 方法,使得以上代码得到预期结果。这题可以参考我以前的文章  中的最后一题,理论上此题更简单,因为它没要求能扩展(比如 sum(2)(3)(4)),甚至可以这样:


点击 'Button 4' 后输出什么?如何使得输出能跟预期相同?

答案是输出 5,事实上点击任意的 button,输出都是 5。因为循环结束后,i 值变成了 5。如何改,使得输出分别是 0, 1, 2, 3, 4?用闭包在内存中保存变量,可以参考我之前的文章  中的第 8 题。


这道题我答错了,忽略了 reverse() 方法的一个要重性质,reverse() 方法执行的结果并不是创建一个副本,而是在原数组上直接操作,并返回该数组的引用。

知道了这一点,该题也就迎刃而解了。arr2 其实和 arr1 引用了同一个对象,所以在 arr2 上的操作也会同时反映到 arr1 上。


+"2" 能将字符串 "2" 转换成整数 2,-"2" 同理,而两个变量进行 "+" 运算时,如果都是数字和字符串,则分别进行数字相加和字符串拼接,如果一个是数字一个是字符串,则将数字转为字符串,如果是 "-" 运算呢?则将字符串转为数字。

"A" - "B" 会返回 NaN,因为 "A" 和 "B" 无法转成数字进行运算,这里不要以为 "A" 和 "B" 能转为 ASCII码 进行运算(不要和 C 语言搞混了)。而 NaN 和字符串相加,会转成 "NaN" 和字符串去拼接,NaN 和任何数字相加结果还是 NaN。


以上代码可能会由于递归调用导致栈溢出,如何规避这个问题?

首先,任何递归都可以用迭代来代替,所以改写成迭代方式肯定没有问题。

而原文给的解答令人深思:

利用 setTimeout 的异步性质,完美地去除了这个调用栈。

如果你还是摸不着头脑,简单举个栗子:

上面的代码会依次输出 0 和 1,因为程序中形成了一个调用栈,1 被压到了栈底,最后出栈。

这回就是 1 和 0 了,因为 setTimeout 的回调只有当主体的 js 执行完后才会去执行,所以先输出了 1,自然也就没有栈这一说法了。

事实上,并不是所有递归都能这样改写,如果下一次递归调用依赖于前一次递归调用返回的值,就不能这么改了。



以上代码输出什么?如何能输出期望值?

很显然,输出都是 5。这题和第十三题有些类似,用立即执行函数+闭包即可。

还有种优雅的解法,使用 :


|| 和 && 是短路运算符。先说说 ||,如果前面变量值为 false(包括 0、null、undefined、flase、空字符串等等),则返回后面变量值,否则返回前面变量值。&& 恰恰相反,如果前面变量为 false,则返回前面变量值,否则返回后面变量值。


== 和 === 的区别, 后者是全等,只有两个值完全相同(或者两个对象引用相同)时,才会返回 true,而前者在比较时会进行隐式的转换。


一道有趣的题目,答案是 456。


其实可以写成这样,清楚些:

其实就是一个立即执行函数+递归,求个阶乘而已(10!)。给立即执行函数加了个名字 f,方便在递归里调用,其实完全可以用 arguments.callee 代替:


显然是 1,闭包,能引用函数外的变量。


执行第一次输出时,this 指向了 window,如何规避这个问题?用 bind 绑定 this 指向,具体可以参考 ,注意低版本 IE 的兼容。


遍历 DOM 树,不难,深度优先搜索即可。

这道题可以拓展,先序遍历 DOM树,中序遍历,甚至后序遍历的结果是?具体可以参考前文 ,都是树,原理是一样一样的。

   每一个构造函数都有一个属性叫做原型(prototype)。这个属性非常有用:为一个特定类声明通用的变量或者函数。prototype是一个对象,因此,你能够给它添加属性。你添加给prototype的属性将会成为使用这个构造函数创建的对象的通用属性。

   由于js类的定义方法和函数的定义方法一样,所以定义构造函数的同时就定义了类。构造函数内的方法和属性也就是类中的方法和属性。
  该方式利用了对象的prototype属性。首先定义了一个空函数,然后通过prototype属性来定义对象的属性。调用该函数时,原型的所有属性都会立即赋予要创建的对象

  面向对象的语言有一个标志,即拥有类的概念

js创建对象的方式包括两种:对象字面量和使用new表达式。对应代码:

继承是指一个对象直接使用另一对象的属性和方法
对象冒充,及call()Apply()参见上述call和apply的用法。
   js中每个对象均有一个隐藏的__proto__属性,一个实例化对象的__proto__属性指向其类的prototype方法,而这个prototype方法又可以被赋值成另一个实例化对象,这个对象的__proto__又需要指向其类,由此形成一条链。

   那么__proto__是什么?我们在这里简单地说下。每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。

  “事件处理程序过多”问题的解决方案就是事件委托。
事件委托利用的是事件冒泡机制,只制定一事件处理程序,就可以管理某一类型的所有事件(使用事件委托,只需在DOM树中尽量最高的层次上添加一个事件处理程序)。
  这里要用到事件源:event 对象,需要用到target属性,其 事件属性可返回事件的目标节点(触发该事件的节点)

37.js自定义事件:

on()是jQuery中的类似于bind(),live(),delegate()等绑定事件的方法。
trigger() 方法触发被选元素的指定事件类型。先给固定元素绑定一个自定义事件”someclick”,然后必须通过trigger()来使自定义事件可以使用。

函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。函数b是你以参数形式传给函数a的,那么函数b就叫回调函数。回调函数可以继续扩展一个函数的功能,可以是程序非常灵活。

,而"flex"是2012年的语法,是css3新规定的,也将是以后标准的语法。将父元素的display属性设置为-webkit-box(box),然后子元素通过属性-webkit-box-flex来指定一个框的子元素是否是灵活的或固定的大小,如上,定义两个灵活的p元素。如果父级box的总宽度为300px,#P1将有一个100px的宽度,#P2将有一个200px的宽度,也就是呈固定比例划分。当然了,也可以这样写:

当然了css3规定了,一系列的有关box的属性,比如 box-shadow。。。。。

  自适应指的就是指其长(宽)度可以根据浏器窗口的大小自动改变其长(宽)度(随浏览器长(宽)的改变而改变),而不会被浏览器遮住。
  实现方法(以左侧固定,右侧自适应为例):
①采用左列 left 浮动,右列不浮动,采用 margin-left 定位的方式。
②左列使用绝对定位,右列使用 margin-left 定位。

43.我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获!!!

45.从输入 URL 到页面加载完的过程中都发生了什么事情?

  ①首先如果我们如果输入的不是ip地址,而是域名的话,就需要IP解析,DNS域名解析(具体见DNS工作机制)。
  ②解析出来对应的IP后,如不包含端口号,http协议默认端口号是80;https(http+ssl(传输层))是430!然后向IP发起网络连接,根据http协议要求,组织一个请求的数据包,里面包含大量请求信息。
  ③服务器响应请求,将数据返回给浏览器。数据可能是根据HTML协议组织的网页,里面包含页面的布局、文字。数据也可能是图片、脚本程序等。
  ④开始根据资源的类型,将资源组织成屏幕上显示的图像,这个过程叫渲染,网页渲染是浏览器最复杂、最核心的功能。
  ⑤将渲染好的页面图像显示出来,并开始响应用户的操作。

   计算机发明后,为了在计算机中表示字符,人们制定了一种编码,叫ASCII码。
中国人利用连续2个扩展ASCII码的扩展区域(0xA0以后)来表示一个汉字,该方法的标准叫GB-2312。因为各个国家地区定义的字符集有交集,因此使用GB-2312的软件,就不能在BIG-5的环境下运行(显示乱码),反之亦然。
48.JS的数据类型:字符串、数字、布尔、数组、对象、Null、Undefined

undefined表示变量声明但未初始化时的值,javascript解释器不知道这是什麽东西,会抛出"未定义"的错误
null表示准备用来保存对象,还没有真正保存对象的值。从逻辑角度看,null值表示一个空对象指针,意思是你定义了它,但它没有分配内存空间。

css3总的说来大概就是边框的一些特殊样式,比如圆角,还有就是渐变,动画。

round : 图像平铺(重复)来填充该区域。

Stretch 这里,图像被拉伸以填充该区域。

Svg支持事件处理器,canvas不支持事件处理器
在 SVG 中,每个被绘制的图形均被视为对象,而canvas能够以 .png 或 .jpg 格式保存结果图像
如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

Html5的拖放功能、

HTML5 新的表单元素:

select:5个值里面选择1个;
datalist:你可以在文本框里填值,也可以在下面5个值里选1个。

<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时,会生成两个键,一个是私钥,一个公钥。
<output> 元素用于不同类型的输出,比如计算或脚本输出:

1.离线浏览 - 用户可在应用离线时使用它们
2.速度 - 已缓存资源加载得更快
3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

PS:新加一些问题,小伙伴们都会不会呀,不会赶紧去恶补呦。

1.html的doctype作用?严格模式和混杂模式都是什么?

2.列举js异步编程的方法

3.Css选择器(符)有哪些?哪些可继承?优先级如何?

4.setTimeout()的时间参数最小可以是多少?为什么?

方法1:直接改变arrayList所指向的对象,原对象并不改变。

  • 原型prototype机制或apply和call方法去实现较简单,建议使用构造函数与原型混合方式

5、例举3种强制类型转换和2种隐式类型转换?

  • 前者是切割成数组的形式,后者是将数组转换成字符串

11、ajax请求时,如何解释json数据

  • 使用eval parse,鉴于安全性考虑,使用parse更靠谱

  • 让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

12(1)请说说事件委托机制?这样做有什么好处?

  • 事件委托,就是某个事件本来该自己干的,但是自己不干,交给别人来干,就叫事件委托。打个比方:一个button对象,本来自己需要监控自身的点击事件,但是自己不来监控这个点击事件,让自己的父节点来监控自己的点击事件。

  • A,提高性能:例如,当有很多li同时需要注册时间的时候,如果使用传统方法来注册事件的话,需要给每一个li注册事件。然而如果使用委托事件的话,就只需要将事件委托给该一个元素即可。这样就能提高性能
  • B,新添加的元素还会有之前的事件

13、闭包是什么,有什么特性,对页面有什么影响?简要介绍你理解的闭包

  闭包就是能够读取其他函数内部变量的函数

  通俗的讲:就是函数a的内部函数b,被函数a外部的一个变量引用的时候,就创建了一个闭包。

  • ② 减少传递函数的参数量

  • 使用闭包会占有内存资源,过多的使用闭包会导致内存溢出等.

14、添加 插入 替换 移除 到某个接点的方法

14(1)、DOM怎样添加、移动、复制、创建和查找节点

// 添加、移除、替换、插入

  • 前者会自动转换类型,后者不会

  ==判断内容是否相等不比较类型

  ===判断内容相等且类型也相等

16、编写一个b继承a的方法、

17、如何阻止事件冒泡和默认事件

17(1)什么是事件冒泡/捕获

事件冒泡:子元素事件的触发会影响父元素事件

  • B,关闭事件冒泡:假设传统方式事件的返回值为e,就可以通过e.stopPropagation()来关闭事件冒泡;

事件捕获:父元素的事件会影响子元素的事件;

19、谈谈this对象的理解

  • this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。
  • 但是有一个总原则,那就是this指的是调用函数的那个对象。
  • this一般情况下:是全局对象Global。作为方法调用,那么this就是指这个对象

  • this是一个关键字,它代表函数运行时,自动生成一个内部对象,只能在函数内部使用
  • 1.作为纯粹的函数调用this指向全局对象
  • 2.作为对象的方法调用this指向调用对象
  • 3.作为构造函数被调用this指向新的对象(new会改变this的指向)
  • this总是指向函数的直接调用者(而并非间接调用者);
  • 如果有new关键字,this指向new出来的那个对象;
  • 在事件中,this指向这个事件的对象,特殊的是,IE中的attachEvent中的this总是指向全局对象Window;

24、对于前端自动化构建工具有了解吗?简单介绍一下

25、说一下什么是JavaScript的同源策略?

  • 一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一源指的是主机名,协议和端口号的组合

26、eval是指做什么的?

  • 它的功能是把对应的字符串解析成JS代码并运行;
  • 应该避免使用eval,不安全,非常耗性能(2次、一次解析成js语句,一次执行);

27.请列举字符串操作的方法?

  • chartCodeAt方法返回一个整数,代表指定位置字符的Unicode编码;
  • chartAt方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串;
  • slice方法返回字符串的片段
  • substring方法返回位于String对象中指定位置的子字符串。
  • substr方法返回一个从指定位置开始的指定长度的子字符串。
  • indexOf方法返回String对象内第一次出现子字符串位置。如果没有找到子字符串。则返回-1;
  • lastIndexOf方法返回String对象中字符串最后出现的位置。如果没有匹配到子字符串,则返回-1;
  • search方法返回与正则表达式查找内容匹配的第一个字符串的位置;
  • concat方法返回字符串值,该值包含了两个或多个提供的字符串的连接;
  • split将一个字符串分割为子字符串,然后将结果作为字符串数组返回;

null是表示"无"的对象,转为数值时为0;undefined是表示"无"的原始值,转为数值时为NaN。

  • 1、变量被声明了,但没有赋值,就等于undefined。
  • 2,应该提供的参数没有提供该参数等于undefined。
  • 3、对象没有赋值的属性,该属性的值为undefined.
  • 4、函数没有返回值时,默认返回undefined。

  • 1、作为函数的参数,表示该函数的参数不是对象
  • 2、作为对象原型链的终点。

29、new操作符具体干了什么呢?

  • 1、创建一个空对象,并且this变量引用该对象,同时还继承了该函数的原型。
  • 2、属性和方法被加入到this所引用的对象中。
  • 3、新创建的对象由this所引用,并且最后隐式的返回this。

json(JavaScript Object Notation)是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小

  • 1、apply()函数有两个参数:第一个参数是上下文,第二个参数是参数组成的数组。如果上下文是null,则使用全局对象代替。
  • 2、call()的第一个参数是上下文,后续是实例传入的参数序列。

//如果当前数组的第i已经保存进了临时数组,那么跳过, //否则把当前项push到临时数组里面 //如果当前数组的第i项在当前数组中第一次出现的位置不是i, //那么表示第i项是重复的,忽略掉。否则存入结果数组

  • 1、创建XMLHttpRequest对象,也就是创建一个异步调用对象。
  • 2、创建一个新的HTTP请求,并指想向该HTTP请求的方法、URL及验证信息。
  • 3、设置响应HTTP请求状态变化的函数。
  • 4、发送HTTP请求。
  • 5、获取异步调用返回的数据。

js延迟加载的方式有哪些?

  • defer和async,动态创建DOM方式(用得最多),按需异步载入js

  • 简单的说类是对象的模板。
  • 在js中没有类,所以在js中所谓的类就是构造函数,对象就是有构造函数创建出来的实例对象。面向对象就是使用面向对象的方式处理问题,面向对象是向过程进行封装。
  • 对象的概念,面向对象编程的程序实际就是多个对象的集合,我们可以把所有的事物都抽象成对象,在程序设计中可以看作:对象=属性+方法。属性就是对象的数据,而方法就是对象的行为
  • 类的概念,类是对象的模板,而对象是类的实例化。举个例子,汽车设计图可以看作是类,而具体的汽车就是对象。再比如有一个类是表示人,然后可以通过人这个模板来实例化出张三,李四...

  • 抽象性,需要通过核心数据和特定环境才能描述对象的具体意义
  • 封装性,封装就是讲数据和功能组合到一起,在js中对象就是键值对的集合,对象将属性和方法封装起来,方法将过程封装起来
  • 继承性,将别人的属性的方法成为自己的,传统继承基于模板(类),js中继承基于构造函数

我要回帖

更多关于 一次函数题30道应用题 的文章

 

随机推荐