前端面试题-编程题
1 写⼀个通⽤的事件侦听器函数
// event(事件)⼯具集，来源：github.com/markyun
markyun.Event = {
// 视能⼒分别使⽤dom0||dom2||IE⽅式 来绑定事件
// 参数： 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执⾏的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻⽌事件 (主要是事件冒泡，因为IE不⽀持事件捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认⾏为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件⽬标
getTarget : function(event) {
return event.target || event.srcElement;
}
2 如何判断⼀个对象是否为数组
function isArray(arg) {
if (typeof arg === 'object') {
return Object.prototype.toString.call(arg) === '[object Array]';
}
return false;
}
3 冒泡排序
- 每次⽐较相邻的两个数，如果后⼀个⽐前⼀个⼩，换位置
var arr = [3, 1, 4, 6, 5, 7, 2];
function bubbleSort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for(var j = 0; j < arr.length - i - 1; j++) {
if(arr[j + 1] < arr[j]) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
console.log(bubbleSort(arr));
4 快速排序
- 采⽤⼆分法，取出中间数，数组每次和中间数⽐较，⼩的放到左边，⼤的放到右边
var arr = [3, 1, 4, 6, 5, 7, 2];
function quickSort(arr) {
if(arr.length == 0) {
return []; // 返回空数组
}
var cIndex = Math.floor(arr.length / 2);
var c = arr.splice(cIndex, 1);
var l = [];
var r = [];
for (var i = 0; i < arr.length; i++) {
if(arr[i] < c) {
l.push(arr[i]);
} else {
r.push(arr[i]);
}
}
return quickSort(l).concat(c, quickSort(r));
}
console.log(quickSort(arr));
5 编写⼀个⽅法 求⼀个字符串的字节⻓度
假设：⼀个英⽂字符占⽤⼀个字节，⼀个中⽂字符占⽤两个字节
function GetBytes(str){
var len = str.length;
var bytes = len;
for(var i=0; i<len; i++){
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
alert(GetBytes("你好,as"));
6 bind的⽤法，以及如何实现bind的函数和需要注意的点
- bind 的作⽤与 call 和 apply 相同，区别是 call 和 apply 是⽴即调⽤数，⽽bind 是返回了⼀个函数，需要调⽤的时候再执⾏。 ⼀个简单的 bind 函数实现如下：
Function.prototype.bind = function(ctx) {
var fn = this;
return function() {
fn.apply(ctx, arguments);
};
};
7 实现⼀个函数clone
可以对 JavaScript 中的5种主要的数据类型,包括 Number 、 String 、
Object 、 Array 、 Boolean ）进⾏值复
-
考察点1：对于基本数据类型和引⽤数据类型在内存中存放的是值还是指针这⼀区别是否清楚
-
考察点2：是否知道如何判断⼀个变量是什么类型的
-
考察点3：递归算法的设计
// ⽅法⼀：
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this){
o[e] = typeof this[e] === "object" ? this[e].clone() : th
}
return o;
}
//⽅法⼆：
/**
* 克隆⼀个对象
* @param Obj
* @returns
*/
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf = []; //创建⼀个空的数组
var i = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
}else if (Obj instanceof Object){
buf = {}; //创建⼀个空对象
for (var k in Obj) { //为这个对象添加新的属性
buf[k] = clone(Obj[k]);
}
return buf;
}else{ //普通变量直接赋值
return Obj;
}
}
8 下⾯这个ul，如何点击每⼀列的时候alert其index
考察闭包
<ul id=”test”>
<li>这是第⼀条</li>
<li>这是第⼆条</li>
<li>这是第三条</li>
</ul>
// ⽅法⼀：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].onclick=function(){
alert(this.index);
}
//⽅法⼆：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].onclick=(function(a){
return function() {
alert(a);
}
})(i);
}
9 定义⼀个log⽅法，让它可以代理console.log的⽅法
可⾏的⽅法⼀：
function log(msg) {
console.log(msg);
}
log("hello world!") // hello world!
如果要传⼊多个参数呢？显然上⾯的⽅法不能满⾜要求，所以更好的⽅法是：
function log(){
console.log.apply(console, arguments);
};
10 输出今天的⽇期
以 YYYY-MM-DD 的⽅式，⽐如今天是2023年7⽉22⽇，则输2023-07-22
var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取⽉，⽉份⽐较特殊，0是1⽉，11是12⽉
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取⽇
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);
11 ⽤js实现随机选取10–100之间的10个数字，存⼊⼀个数组，并排序
var iArray = [];
funtion getRandom(istart, iend){
var iChoice = istart - iend +1;
return Math.floor(Math.random() * iChoice + istart;
}
for(var i=0; i<10; i++){
iArray.push(getRandom(10,100));
}
iArray.sort();
12 写⼀段JS程序提取URL中的各个GET参数
有这样⼀个 URL ： http://item.taobao.com/item.htm?a=1&b=2&c=&d=xx
x&e ，请写⼀段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将
其按 key-value 形式返回到⼀个 json 结构中，如{a:'1', b:'2', c:''
, d:'xxx', e:undefined}
function serilizeUrl(url) {
var result = {};
url = url.split("?")[1];
var map = url.split("&");
for(var i = 0, len = map.length; i < len; i++) {
result[map[i].split("=")[0]] = map[i].split("=")[1];
}
return result;
}
13 写⼀个 function ，清除字符串前后的空格
使⽤⾃带接⼝ trim() ，考虑兼容性：
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, "").replace(/\s+$/,"");
}
}
// test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"
14 实现每隔⼀秒钟输出1,2,3…数字
for(var i=0;i<10;i++){
(function(j){
setTimeout(function(){
console.log(j+1)
},j*1000)
})(i)
}
15 实现⼀个函数，判断输⼊是不是回⽂字符串
function run(input) {
if (typeof input !== 'string') return false;
return input.split('').reverse().join('') === input;
}
16、数组扁平化处理
实现⼀个 flatten ⽅法，使得输⼊⼀个数组，该数组⾥⾯的元素也可以是数组，
该⽅法会输出⼀个扁平化的数组
function flatten(arr){
return arr.reduce(function(prev,item){
return prev.concat(Array.isArray(item)?flatten(item):item);
},[]);
}