当前位置:首页 » 网页前端 » 前端数组排序方法面试题
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端数组排序方法面试题

发布时间: 2023-01-11 09:53:08

前端如何给数组元素按降序排序

众所周知, sort 方法默认是为字符串排序的,

结果为

如果想要降序该怎么做呢,这时候你要用到字符串的 localeCompare 方法

结果为

不知道你是否会在 b.localeCompare(a)) 还是 a.localeCompare(b)) 上纠结,所幸,可供的选择不多,死记硬背完全可行,比如

对于数字也是这样的

对于 sort 方法

看一个冒泡排序的实现

sort 方法只是将 arr[i] > arr[i + 1] 还是 arr[i] < arr[i + 1] 的决定权交给了我们

至于 sort 方法的实现就更加有趣的,并不是简单的快排,会根据数组的长度、递归的深度等选择不同方式,记得之前写过一篇关于快排的文章 https://www.jianshu.com/p/7186c0b2d23f ,相比之下就要简陋的多了。

Ⅱ 前端面试题2021(JS篇(上))

(水仙花数也被称为超完全数字不变数、自恋数、自幂数、阿姆斯特朗数。水仙花数是指一个3位数,它的每个位上的数字的3次幂之和等于它本身 例如: 1~3 + 5~3 + 3~3 =153)

(质数就是在大于1的自然数中,除了1和它本身以外不在有其他因数的自然数)

a:11,b:10

A [] B [""] C [undefined] D [null]

A ['false'] B [false] C[0] D[]

A null B undefined C “hello” D“world”

A "llowo" B "llow" C "llo" D null

A "llowo" B "llow" C "llo" D null

A getYear()
B getMonth()
C getDay()
DgetDate()

A 基于对象
B 移动端优先
C 事件驱动
D 跨平台

A String
B Float
C Number
D Null

A 任意单个字符
B 任意单个字母
C 任意单个字母、数字、下划线
D 任意单个字母、数学、下划线、$符号

A <javascript>
B <script>
C <scripting>
D <js>

A var s = 'heloe'
B var n = 20
C var x = document.getElementsByTagName('box')
D var y = document.querySelectorAll('ul li')

A document.createElement
B document.createTextNode
C document.getElementById
B document.querySelector

A ele.innerText
B ele.innerHTML
C ele.textContent
D ele.htmlContent

插入排序的算法描述的是一种简单直观的排序算法,它的工作原理是通过构建有序序列,对于未排序的数据,在已排序序列中从后向前扫描,找到对应位置并插入

A.对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序的参数
B.reverse用于对数组数据的倒序排列
C.向数组的最后位置加一个新元素,可以用pop方法
D.unshift方法用于向数组删除第一个元素

A.window.status = "已经选中该文本框"
B.document.status = '已经选中该文本框'
C.window.screen = '已经选中该文本框'
D.document.screen = '已经选中该文本框'

A <input type="button" value="new" onclick="open('new.html','_blank')" />
B. <input type="button" value="new" onclick="window.location = 'new.html'" />
C.<input type="button" value="new " onclick = "location.assign('new.html)">
D. <form target = "_blank" action="new.html">
<input type="submit" value="new" />
</form>

A.<script type="text/javascript">document.write(<h1>hello</h1>)</script>
B.<script type="text/javascript">document.write("<h1>hello</h1>")</script>
C.<script type="text/javascript"><h1>hello</h1></script>
D.<h1><script type="text/javascript">document.write("hello")</script></h1>

以下说法中正确的是(AD)
A.在页面的第二个文本框中输入内容后,当目标离开第二个文本框时,第一个文本框的内容不变
B.在页面的第一个文本框中输入内容后,当鼠标离开第一个文本框时,将在第二个文本框中复制第一个文本框的内容
C.在页面的第二个文本框中输入内容后,当鼠标离开第二个文本框时候,将在第一个文本框中复制第二个文本框的内容
D.在页面的第一个文本框中输入内容后,当鼠标离开第一个文本框时,第二个文本框的内容不变

Ⅲ Web前端企业面试题

答:

一、display和visibility的相同与不同点

1、相同点:display和visibility都有讲元素隐藏的意思

2、不同点:display是元素隐藏,隐藏的元素不占文档流

而visibility隐藏的元素仍然占文档流

二、display和visibility的属性值

1、display

2、visibility


答:

在开发过程中经常需要循环遍历数组或者对象,使用最多的方法 forEach、for…in 、 for…of ,整理一下他们的异同点

for循环

其实除了这三种方法以外还有一种最原始的遍历,自Javascript诞生起就一直用的 就是for循环,它用来遍历数组

for循环中可以使用return、break等来中断循环

结果:

forEach

对数组的每一个元素执行一次提供的函数(不能使用return、break等中断循环),不改变原数组,无返回值undefined。

输出结果:

for…in

循环遍历的值都是数据结构的键值

总结一句: for in也可以循环数组但是特别适合遍历对象

结果:

for…of

它是ES6中新增加的语法,用来循环获取一对键值对中的值

循环一个数组

循环一个普通对象(报错)

答:

px:像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的 。--即分辨率不同的机型当前对应的距离可能发生变化。(1Inches=xPx)。

所以相对于同一机型来说是一个绝对的长度单位。


em:是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸

以其父级元素为基准来变化长度。所以其算法不是一个固定的值。


rem:是CSS3新增的一个相对单位(root em,根em)

那么其好用在用可以直接设置HTML的font-size,然后在其子类都是以这个大小为基准变化的值。

在移动设备上,我们常常设置

此方式的目的是为了将当前屏幕(PC)分辨率的px转化成手机端的px,让px在手机上能够兼容此方式。


因此,此时看见的12px与PC端的12px无异。但是,如果不写着个meta的话,那么,浏览器会一直以PC的视图来决定手机端的px的大小,让视图看起来变小了很多。

那么,响应式页面则经常配合媒体查询media 来设置不同分辨率下手机的各种不同的配置机构,然后根据父级来变化所有的相对长度。


基础篇

1.shift

// 删除原数组的第一项,并返回删除元素的值,如果数组为空则返回undefined

2.unshift

// 将参数添加到原数组开头,并返回数组的长度

//注:此方法在ie6.0下

// 测试的返回值始终为undefined,在firefox下测试的返回值为7,所以此方法不可靠

// 一般需要用返回值时可用splice代替

3.pop

// 删除原数组的最后一项,并返回删除元素的值;如果数组为空则返回undefined

4.push

// 将参数添加到原数组末尾,并返回数组的长度

5.concat

// 返回一个新数组,是将参数添加到原数组中构成的

6.splice

7.reverse

8.sort(orderfunction)

9.slice(start,end)

10.join(separator)

11.indexOf

12.lastIndexOf

13. Array.isArray()

14. Array.toString()


进阶篇

1.forEach

是最为常用的情景,它至于遍历,可以在获取当前数据项的前提下,对数据进行修改。它没有返回值。理解起来也是最容易的。

2.map

map的本意就是映射,也就是将一个值从一种形式映射到另一种形式,比如将key映射到value。它的每一次遍历都会有一个返回值。这些返回值组合成最终的结果数组。事实就是如此



forEach和map对比

相同点

1)都是循环遍历数组中的每一项;

2)forEach()和map()匿名函数的参数相同,参数分别是item(当前每一项)、index(索引值)、arr(原数组);

3)this都是指向调用方法的数组;

4) 只能遍历数组;


不相同点

1)map()创建了新数组,不改变原数组;forEach()可以改变原数组。

2)遇到空缺的时候map()虽然会跳过,但保留空缺;forEach()遍历时跳过空缺,不保留空缺。

3)map()按照原始数组元素顺序依次处理元素;forEach()遍历数组的每个元素,将元素传给回调函数。


3.filter

它致力于从已有的数组中筛选出符合一定条件的数据项,最后的返回值是所有符合条件的数据项构成的数组。它不会修改原来的数组。记住,它的立足点就是筛选。也仅仅是筛选。还有一点需要注意:每一次遍历都会有一个返回值,它的类型是布尔类型。返回值只有是true,当前遍历项才会被筛选中。不要试图在filter中去修改原始数组。

理解: 就是在一堆数据里面去筛选你需要的数据 或者 剔除你不需要的数据


4.find()

返回通过测试的数组的第一个元素的值,

理解:假如你去一个一群人的地方去找人 你说我找xxb 他要是在那里就找到 不在那里就是undefined

在第一次调用 callback 函数时会确定元素的索引范围,因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。

语法

array.find(function(value, index, arr),thisValue)

value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值

返回值:返回符合测试条件的第一个数组元素的值,如果没有符合条件的则返回undefined。

扩展: findIndex()方法的用法与find()方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。自己try吧

5.every

理解: 这个就像 上课了 老师说 昨天布置的作业 只要有一个人没有写完 今天就不讲课 然后挨个检查 当检查到有一个没有写完的时候 就不检查了 返回 不讲课了(false)


6.some

理解: 相当于在一个数组里面找你想要的那个数 找到了 就返回true 找不到就返回false


7.rece

它这个方法是接收一个函数作为累加器,将数组中的值(从左向右)开始合并,最总为一个值 然后返回出来,callback

他可以传四个参数:

1,previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue)

2,currentValue:数组中当前被处理的元素

3,index:不啰嗦,自己顾名思义去吧

4,array:返回调用rece的数组


彩蛋: 这里附上前几天某某人比较喜欢的切割字符串的方法

substring() 和 substr()

相同点: 如果只是写一个参数,两者的作用都一样:都是是截取字符串从当前下标以后直到字符串最后的字符串片段。

不同点: 第二个参数

substr(startIndex, lenth) // 第二个参数是截取字符串的长度(从起始点截取某个长度的字符串);

substring(startIndex, endIndex) // 第二个参数是截取字符串最终的下标 (截取2个位置之间的字符串,‘含头不含尾')。

1:在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理。


首先来看下官方解释,官方解释说created是在实例创建完成后呗立即调用。在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。


这话的意思我觉得重点在于说挂架阶段还没开始,什么叫还没开始挂载,也就是说,模板还没有被渲染成html,也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。

所以,一般creadted钩子函数主要是用来初始化数据。


2:mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下:

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。下面看实例

下面是结果

nihao

取到了值,这说明这时候vue模板已经渲染完毕。因此,Dom操作一般是在mounted钩子函数中进行的

computed:{} 计算属性,什么是计算属性呢,我个人理解就是对数据进行一定的操作,可以包含逻辑处理操作,对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的,只有在相关依赖发生改变时侧能更新变化,以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。

总结:
通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。
methods:{}中的方法都需要主动去触发,比如点击click之类的
而created(){}、mounted(){}、里面的代码都是自动去执行的,即vue生命周期到了哪一步就直接去执行对应钩子函数里面的代码了,无需手动去执行
created中主要放初始化获取数据之类,mounted()中挂载到具体的DOM节点

computed:{} 计算属性,什么是计算属性呢,我个人理解就是对数据进行一定的操作,可以包含逻辑处理操作,对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的,只有在相关依赖发生改变时侧能更新变化,以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。

mounted 是生命周期钩子,vue的生命周期中一个实例的mounted只会运行一次。mounted在vue的渲染模板挂载到$el元素上才会调用,很显然你export的时候el都么有自然不会运行mounted钩子函数了。
所有的方法都应该在methods里定义,然后在created或者mounted里 使用this调用方法,用这种方式实现初始化

6、Vue中组件之间的传参方式有哪些方式?

Vue 组件传参的八种方式总结

Vue 组件的使用不管是在平常工作还是在面试面试中,都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的

一、props 传参

子组件定义 props 有三种方式:

// 第一种数组方式

// 第二种对象方式

// 第三种对象嵌套对象方式

第三种对象默认支持 4 种属性,并且都是非必填的。可以随意使用


父组件传参的俩种方式

第一种静态属性传参

注意:

1、在不定义 props 类型的情况下 props 接受到的均为 String。

2、当 props 属性指定为 Boolean 时,并且只有属性 key 没有值 value 时接受到的是 true


第二种动态属性传参

注意:

1、需要区分非简写形式传入的值是对象,则会对应 props 中多个值

2、会保留传入值的类型

3、如果是表达式则获取到的是表达式的计算结果


二、attrs 和listeners

$attrs

$attrs 会获取到 props 中未定义的属性(class 和 style 属性除外),支持响应式。常用的场景有俩种:

组件嵌套组件时可以使用 $attrs 来支持过多的属性支持。比如 elementUI 的 table 组件。支持的属性十几个,而平常封装的时候用的最多的也就一俩个。

属性默认是添加在父组件上的,有时候想把多余的属性添加在子组件上(可以结合 inheritAttrs: false 属性,让父属性不接受多余的属性)

$listeners 定义的事件都在子组件的根元素上,有时候想加到其他元素上。就可以使用 $listerners。它包含了父组件中的事件监听器(除了带有 .native 修饰符的监听器)


三、$emit 通知

这里有一道考题: for 循环的时候如何拿到子组件的传值和 for 中循环的值

答案有俩种,一是 $event, 二是 闭包。只是需要注意 $event 只能获取到第一个值

四、v-model

这个其实是一种通过 emit,on 的组合方式。优点再于同步值方便,写法优雅。下面三种写法其实是一个意思


五、插槽

六、$refs, $root, $parent, $children

$root 获取根组件

$parent 获取父组件

$children 获取子组件(所有的子组件,不保证顺序)

$refs 组件获取组件实例,元素获取元素


七、project / inject

注意:注入的值是非响应的



八、Vuex

这个相当于单独维护的一组数据,就不过多的说了。

watch,computed和methods的关系

1.watch和computed都是以Vue的依赖追踪机制为基础的 ,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。

2.对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和computed那样,“自动执行”预先定义的函数


watch和computed各自处理的数据关系场景不同

1. watch 擅长处理的场景: 一个数据影响多个数据

2. computed 擅长处理的场景: 一个数据受多个数据影响

watch用法 监听下记haiZeiTuan_Name的值,会改变其他所有的值

结果:this.suoLong会变为 '橡胶海贼团索隆',以此类推

computed用法 监听下记firstName,secName,thirdName的值,会改变luFei_Name的值

methods和computed的区别例子

注意两次点击computed返回的时间是相同的!!

1.两次点击methods返回的时间是不同的

2.注意两次点击computed返回的时间是相同的

【注意】为什么两次点击computed返回的时间是相同的呢?new Date()不是依赖型数据 (不是放在data等对象下的实例数据) ,所以computed只提供了缓存的值,而没有重新计算

只有符合:1.存在依赖型数据 2.依赖型数据发生改变这两个条件 ,computed才会重新计算。

参考:http://www.cnblogs.com/penghuwan/p/7194133.html

答:https://codecat.blog.csdn.net/article/details/100031285

1、Promise

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大,简单地说,Promise好比容器,里面存放着一些未来才会执行完毕(异步)的事件的结果,而这些结果一旦生成是无法改变的


2、async await

async await也是异步编程的一种解决方案,他遵循的是Generator 函数的语法糖,他拥有内置执行器,不需要额外的调用直接会自动执行并输出结果,它返回的是一个Promise对象。

两者的主要用法、语法就不赘述了,感兴趣的同学可以自行查阅 es6中文文档


两者的区别

1、Promise的出现解决了传统callback函数导致的“地域回调”问题,但它的语法导致了它向纵向发展行成了一个回调链,遇到复杂的业务场景,这样的语法显然也是不美观的。而async await代码看起来会简洁些,使得异步代码看起来像同步代码,await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖,只有这一句代码执行完,才会执行下一句。

2、async await与Promise一样,是非阻塞的。

3、async await是基于Promise实现的,可以说是改良版的Promise,它不能用于普通的回调函数。

简单来看,这两者除了语法糖不一样外,他们解决的问题、达到的效果是大同小异的,我们可以在不同的应用场景,根据自己的喜好来选择使用。

Ⅳ js数组排序的几种方法

一、 冒泡排序
平均复杂度:o(n^2) 空间复杂度:o(1) 稳定性:稳定
步骤: 1、比较相邻的元素。如果第一个比第二个大,就交换他们两个;
2、对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对,这样,最后的元素应该会是最大的数;
3、针对所有的元素重复以上的步骤,除了最后一个;
4、持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。
二、选择排序
平均复杂度:o(n^2) 空间复杂度:o(1) 稳定性:不稳定
步骤: 1、每一次循环,找到最小的那个数,并用变量记住它的索引
2、然后将最小值放在它该在的位置上
3、持续对越来越少的元素重复上面的步骤
三、插入排序
平均复杂度:o(n^2) 空间复杂度:o(1) 稳定性:稳定
(1)直接插入排序:将第一个数和第二个数排序,然后构成一个有序序列;将第三个数插入进去,构成一个新的有序序列;对第四个数、第五个数......直到最后一个数,重复第二步
(2)二分插入排序:将寻找每个数插入位置的方法改为折半比较即可
四、Shell排序(插入排序的一种,又称为缩小增量排序)
平均复杂度:o(nlogn) 空间复杂度:o(1) 稳定性:不稳定
步骤:把数组按下标的一定增量分组,然后对每组使用直接插入排序
想学习更多前端开发的知识,就来北京尚学堂!

Ⅳ 记录下js几种常见的数组排序和去重的方法

js 数组去重

1

注:应该也可以适用于 object数组,但是本人没有进行验证,贴出来仅供你参考

第一种是比较常规的方法思路:1.构建一个新的数组存放结果2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比3.若结果数组中没有该元素,则存到结果数组中代码如下:

Array.prototype.unique1 = function(){ var res = [this[0]]; for(var i = 1; i < this.length; i++){ var repeat = false; for(var j = 0; j < res.length; j++){ if(this[i] == res[j]){ repeat = true; break; } } if(!repeat){ res.push(this[i]); } } return res;}var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]alert(arr.unique1());

第二种方法比上面的方法效率要高思路:1.先将原数组进行排序2.检查原数组中的第i个元素 与 结果数组中的最后一个元素是否相同,因为已经排序,所以重复元素会在相邻位置3.如果不相同,则将该元素存入结果数组中代码如下:

Array.prototype.unique2 = function(){ this.sort(); //先排序 var res = [this[0]]; for(var i = 1; i < this.length; i++){ if(this[i] !== res[res.length - 1]){ res.push(this[i]); } } return res;}var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]alert(arr.unique2());

二种方法也会有一定的局限性,因为在去重前进行了排序,所以最后返回的去重结果也是排序后的。如果要求不改变数组的顺序去重,那这种方法便不可取了。第三种方法(推荐使用)思路:1.创建一个新的数组存放结果2.创建一个空对象3.for循环时,每次取出一个元素与对象进行对比,如果这个元素不重复,则把它存放到结果数组中,同时把这个元素的内容作为对象的一个属性,并赋值为1,存入到第2步建立的对象中。说明:至于如何对比,就是每次从原数组中取出一个元素,然后到对象中去访问这个属性,如果能访问到值,则说明重复。代码如下:

Array.prototype.unique3 = function(){ var res = []; var json = {}; for(var i = 0; i < this.length; i++){ if(!json[this[i]]){ res.push(this[i]); json[this[i]] = 1; } } return res;}var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];alert(arr.unique3());

Ⅵ 有哪些经典的 Web 前端或者 JavaScript 面试笔试题

给你一份面试题,参考一下:
一、不定项选择题 (每题3分,共30分)
1. 声明一个对象,给它加上name属性和show方法显示其name值,以下代码中正确的是( D )
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:”zhangsan”,show:”alert(this.name)”};
C. var obj = {name:”zhangsan”,show:function(){alert(name);}};
D. var obj = {name:”zhangsan”,show:function(){alert(this.name);}};
2. 以下关于Array数组对象的说法不正确的是( CD )
A. 对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数
B. reverse用于对数组数据的倒序排列
C. 向数组的最后位置加一个新元素,可以用pop方法
D. unshift方法用于向数组删除第一个元素
3. 要将页面的状态栏中显示“已经选中该文本框”,下列JavaScript语句正确的是( A )
A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”
4. 点击页面的按钮,使之打开一个新窗口,加载一个网页,以下JavaScript代码中可行的是( AD )
A. <input type=”button” value=”new”
onclick=”open(‘new.html’, ‘_blank’)”/>
B. <input type=”button” value=”new”
onclick=”window.location=’new.html’;”/>
C. <input type=”button” value=”new”
onclick=”location.assign(‘new.html’);”/>
D. <form target=”_blank”action=”new.html”>
<inputtype=”submit” value=”new”/>
</form>
5. 使用JavaScript向网页中输出<h1>hello</h1>,以下代码中可行的是( BD )
A. <scripttype=”text/javascript”>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=”text/javascript”>
document.write(“<h1>hello</h1>”);
</script>
C. <scripttype=”text/javascript”>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=”text/javascript”>
document.write(“hello”);
</script>
</h1>
6. 分析下面的代码:
<html>
<head>
<script type=”text/javascript”>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=”#ffffff”>
<form name=”myfm”>
<input type=”text” name=”first_text”>
<input type=”text” name=”second_text”>
</form>
</body>
</html>
以下说法中正确的是( CD )
A. 在页面的第二个文本框中输入内容后,当鼠标离开第二个文本框时,第一个文本框的内容不变
B. 在页面的第一个文本框中输入内容后,当鼠标离开第一个文本框时,将在第二个文本框中复制第一个文本框的内容
C. 在页面的第二个文本框中输入内容后,当鼠标离开第二个文本框时,将在第一个文本框中复制第二个文本框的内容
D. 在页面的第一个文本框中输入内容后,当鼠标离开第一个文本框时,第二个文本框的内容不变
7. 下面的JavaScript语句中,( D )实现检索当前页面中的表单元素中的所有文本框,并将它们全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==”text”)
form1.elements.value=”";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==”text”)
forms[0].elements.value=”";
}
C. if(document.form.elements.type==”text”)
form.elements.value=”";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==”text”)
document.forms.elements[j].value=”";
}
}
8. 在表单(form1)中有一个文本框元素(fname),用于输入电话号码,格式如:010-82668155,要求前3位是010,紧接一个“-”,后面是8位数字。要求在提交表单时,根据上述条件验证该文本框中输入内容的有效性,下列语句中,( A )能正确实现以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
B. var str= form1.fname.value;
if(str.substr(0,4)!=”010-” && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
C. var str= form1.fname.value;
if(str.substr(0,3)!=”010-”|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(“无效的电话号码!”);
D. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
9. 关于正则表达式声明6位数字的邮编,以下代码正确的是( C )
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(“\d{6}”);
10. 关于JavaScript里的xml处理,以下说明正确的是( BCD )
A. Xml是种可扩展标记语言,格式更规范,是作为未来html的替代
B. Xml一般用于传输和存储数据,是对html的补充,两者的目的不同
C. 在JavaScript里解析和处理xml数据时,因为浏览器的不同,其做法也不同
D. 在IE浏览器里处理xml,首先需要创建ActiveXObject对象
二、问答题
1. 列举浏览器对象模型BOM里常用的至少4个对象,并列举window对象的常用方法至少5个 (10分)
对象:Window document location screen history navigator
方法:Alert() confirm() prompt() open() close()
2. 简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明 (10分)
Document.getElementById 根据元素id查找元素
Document.getElementByName 根据元素name查找元素
Document.getElementTagName 根据指定的元素名查找元素
三、程序题
1、补充按钮事件的函数,确认用户是否退出当前页面,确认之后关闭窗口; (10分)
<html>
<head>
<script type=”text/javascript” >
function closeWin(){
//在此处添加代码
if(confirm(“确定要退出吗?”)){
window.close();
}
}
</script>
</head>
<body>
<input type=”button”value=”关闭窗口”onclick=”closeWin()”/>
</body>
</html>
2、写出简单描述html标签(不带属性的开始标签和结束标签)的正则表达式,并将以下字符串中的html标签去除掉(15分)
var str = “<div>这里是div<p>里面的段落</p></div>”;
//
<scripttype=”text/javascript”>
varreg = /<\/?\w+\/?>/gi;
varstr = “<div>这里是div<p>里面的段落</p></div>”;
alert(str.replace(reg,”"));
</script>
3、完成foo()函数的内容,要求能够弹出对话框提示当前选中的是第几个单选框。(10分)
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
</head>
<body>
<script type=”text/javascript” >
function foo() {
//在此处添加代码
var rdo =document.form1.radioGroup;
for(var i =0 ;i<rdo.length;i++){
if(rdo.checked){
alert(“您选择的是第”+(i+1)+”个单选框”);
}
}
}
</script>
<body>
<form name=”form1″ >
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”submit”/>
</form>
</body>
</html>
4、完成函数showImg(),要求能够动态根据下拉列表的选项变化,更新图片的显示 (15分)
<body>
<script type=”text/javascript” >
function showImg (oSel) {
//在此处添加代码
var str = oSel.value;
document.getElementById(“pic”).src= str+”.jpg”;
}
</script>
<img id=”pic”src=”img1.jpg”width=”200″ height=”200″ />
<br />
<select id=”sel”>
<option value=”img1“>城市生活</option>
<option value=”img2“>都市早报</option>
<option value=”img3“>青山绿水</option>
</select></body>

Ⅶ java算法面试题:排序都有哪几种方法

一、冒泡排序
[java] view plain
package sort.bubble;
import java.util.Random;
/**
* 依次比较相邻的两个数,将小数放在前面,大数放在后面
* 冒泡排序,具有稳定性
* 时间复杂度为O(n^2)
* 不及堆排序,快速排序O(nlogn,底数为2)
* @author liangge
*
*/
public class Main {
public static void main(String[] args) {
Random ran = new Random();
int[] sort = new int[10];
for(int i = 0 ; i < 10 ; i++){
sort[i] = ran.nextInt(50);
}
System.out.print("排序前的数组为");
for(int i : sort){
System.out.print(i+" ");
}
buddleSort(sort);
System.out.println();
System.out.print("排序后的数组为");
for(int i : sort){
System.out.print(i+" ");
}
}
/**
* 冒泡排序
* @param sort
*/
private static void buddleSort(int[] sort){
for(int i=1;i<sort.length;i++){
for(int j=0;j<sort.length-i;j++){
if(sort[j]>sort[j+1]){
int temp = sort[j+1];
sort[j+1] = sort[j];
sort[j] = temp;
}
}
}
}
}
二、选择排序
[java] view plain
package sort.select;
import java.util.Random;
/**
* 选择排序
* 每一趟从待排序的数据元素中选出最小(或最大)的一个元素,
* 顺序放在已排好序的数列的最后,直到全部待排序的数据元素排完。
* 选择排序是不稳定的排序方法。
* @author liangge
*
*/
public class Main {
public static void main(String[] args) {
Random ran = new Random();
int[] sort = new int[10];
for (int i = 0; i < 10; i++) {
sort[i] = ran.nextInt(50);
}
System.out.print("排序前的数组为");
for (int i : sort) {
System.out.print(i + " ");
}
selectSort(sort);
System.out.println();
System.out.print("排序后的数组为");
for (int i : sort) {
System.out.print(i + " ");
}
}
/**
* 选择排序
* @param sort
*/
private static void selectSort(int[] sort){
for(int i =0;i<sort.length-1;i++){
for(int j = i+1;j<sort.length;j++){
if(sort[j]<sort[i]){
int temp = sort[j];
sort[j] = sort[i];
sort[i] = temp;
}
}
}
}
}
三、快速排序
[java] view plain
package sort.quick;
/**
* 快速排序 通过一趟排序将要排序的数据分割成独立的两部分, 其中一部分的所有数据都比另外一部分的所有数据都要小,
* 然后再按此方法对这两部分数据分别进行快速排序, 整个排序过程可以递归进行,以此达到整个数据变成有序序列。
* @author liangge
*
*/
public class Main {
public static void main(String[] args) {
int[] sort = { 54, 31, 89, 33, 66, 12, 68, 20 };
System.out.print("排序前的数组为:");
for (int data : sort) {
System.out.print(data + " ");
}
System.out.println();
quickSort(sort, 0, sort.length - 1);
System.out.print("排序后的数组为:");
for (int data : sort) {
System.out.print(data + " ");
}
}
/**
* 快速排序
* @param sort 要排序的数组
* @param start 排序的开始座标
* @param end 排序的结束座标
*/
public static void quickSort(int[] sort, int start, int end) {
// 设置关键数据key为要排序数组的第一个元素,
// 即第一趟排序后,key右边的数全部比key大,key左边的数全部比key小
int key = sort[start];
// 设置数组左边的索引,往右移动判断比key大的数
int i = start;
// 设置数组右边的索引,往左移动判断比key小的数
int j = end;
// 如果左边索引比右边索引小,则还有数据没有排序
while (i < j) {
while (sort[j] > key && j > start) {
j--;
}
while (sort[i] < key && i < end) {
i++;
}
if (i < j) {
int temp = sort[i];
sort[i] = sort[j];
sort[j] = temp;
}
}
// 如果左边索引比右边索引要大,说明第一次排序完成,将sort[j]与key对换,
// 即保持了key左边的数比key小,key右边的数比key大
if (i > j) {
int temp = sort[j];
sort[j] = sort[start];
sort[start] = temp;
}
//递归调用
if (j > start && j < end) {
quickSort(sort, start, j - 1);
quickSort(sort, j + 1, end);
}
}
}
[java] view plain
/**
* 快速排序
*
* @param a
* @param low
* @param high
* voidTest
*/
public static void kuaisuSort(int[] a, int low, int high)
{
if (low >= high)
{
return;
}
if ((high - low) == 1)
{
if (a[low] > a[high])
{
swap(a, low, high);
return;
}
}
int key = a[low];
int left = low + 1;
int right = high;
while (left < right)
{
while (left < right && left <= high)// 左边向右
{
if (a[left] >= key)
{
break;
}
left++;
}
while (right >= left && right > low)
{
if (a[right] <= key)
{
break;
}
right--;
}
if (left < right)
{
swap(a, left, right);
}
}
swap(a, low, right);
kuaisuSort(a, low, right);
kuaisuSort(a, right + 1, high);
}
四、插入排序
[java] view plain
package sort.insert;
/**
* 直接插入排序
* 将一个数据插入到已经排好序的有序数据中,从而得到一个新的、个数加一的有序数据
* 算法适用于少量数据的排序,时间复杂度为O(n^2)。是稳定的排序方法。
*/
import java.util.Random;
public class DirectMain {
public static void main(String[] args) {
Random ran = new Random();
int[] sort = new int[10];
for (int i = 0; i < 10; i++) {
sort[i] = ran.nextInt(50);
}
System.out.print("排序前的数组为");
for (int i : sort) {
System.out.print(i + " ");
}
directInsertSort(sort);
System.out.println();
System.out.print("排序后的数组为");
for (int i : sort) {
System.out.print(i + " ");
}
}
/**
* 直接插入排序
*
* @param sort
*/
private static void directInsertSort(int[] sort) {
for (int i = 1; i < sort.length; i++) {
int index = i - 1;
int temp = sort[i];
while (index >= 0 && sort[index] > temp) {
sort[index + 1] = sort[index];
index--;
}
sort[index + 1] = temp;
}
}
}
顺便添加一份,差不多的
[java] view plain
public static void charuSort(int[] a)
{
int len = a.length;
for (int i = 1; i < len; i++)
{
int j;
int temp = a[i];
for (j = i; j > 0; j--)//遍历i之前的数字
{
//如果之前的数字大于后面的数字,则把大的值赋到后面
if (a[j - 1] > temp)
{
a[j] = a[j - 1];
} else
{
break;
}
}
a[j] = temp;
}
}
把上面整合起来的一份写法:
[java] view plain
/**
* 插入排序:
*
*/
public class InsertSort {
public void sort(int[] data) {
for (int i = 1; i < data.length; i++) {
for (int j = i; (j > 0) && (data[j] < data[j - 1]); j--) {
swap(data, j, j - 1);
}
}
}
private void swap(int[] data, int i, int j) {
int temp = data[i];
data[i] = data[j];
data[j] = temp;
}
}
五、顺便贴个二分搜索法
[java] view plain
package search.binary;
public class Main {
public static void main(String[] args) {
int[] sort = {1,2,3,4,5,6,7,8,9,10};
int mask = binarySearch(sort,6);
System.out.println(mask);
}
/**
* 二分搜索法,返回座标,不存在返回-1
* @param sort
* @return
*/
private static int binarySearch(int[] sort,int data){
if(data<sort[0] || data>sort[sort.length-1]){
return -1;
}
int begin = 0;
int end = sort.length;
int mid = (begin+end)/2;
while(begin <= end){
mid = (begin+end)/2;
if(data > sort[mid]){
begin = mid + 1;
}else if(data < sort[mid]){
end = mid - 1;
}else{
return mid;
}
}
return -1;
}
}

Ⅷ 木易杨前端面试题第 43 题:使用 sort() 数组排序

[ 102, 15, 22, 29, 3, 8 ]

我觉得对于一个js的方法,这里指数组方法,一般要记住以下几个方面

arrayObject.sort(sortby)

sortby 可选。规定排序顺序。必须是函数。

没有返回,直接修改原数组

先把对象转成字符,再按照字符编码的顺序进行排序

由小到大排序
[3, 15, 8, 29, 102, 22].sort((a,b) => {return a - b});

以上出了 bind 方法后面多了个 () 外 ,结果返回都一致!
由此得出结论,bind 返回的是一个新的函数,你必须调用它才会被执行。

值得一提的是 call其实参数也可以是数组

在有了es6之后 数组打开可以更加地方便

Ⅸ java对局部有序的数组进行排序。某公司面试题

直接插入排序比较效率高
基本思想:在要排序的一组数中,假设前面(n-1)[n>=2] 个数已经是排好顺序的,现在要把第n个数插到前面的有序数中,使得这n个数也是排好顺序的。如此反复循环,直到全部排好顺序

Ⅹ 前端数组排序

第一种:简单的sort排序
2.冒泡排序
3.选择排序
4.数组sort加splice截取去重(推荐)
5.数组splice截取方法去重
6.数组indexOf方法去重(推荐)