九、编程题相关
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) {
return Array.isArray(arg) || (typeof arg === 'object' && Object.prototype.toString.call(arg) === '[object Array]');
}
首先使用 Array.isArray 方法判断 arg 是否为数组。如果是数组，则直接返回 true。否则，执行后面的类型判断逻辑。
这样，你可以使用 isArray 函数来判断一个对象是否为数组。例如：
console.log(isArray([])); // true
console.log(isArray({})); // false
console.log(isArray('')); // false
3 冒泡排序
它通过比较相邻的两个数，如果后一个数比前一个数小，则交换它们的位置。重复这个过程，直到所有的数都按照从小到大的顺序排列。
代码中使用了两层嵌套的循环。外层循环控制比较的轮数，内层循环用于比较相邻的两个数并交换位置。
下面代码添加了一个标志位来判断是否发生了交换，如果某一轮比较中没有发生交换，说明数组已经有序，可以提前结束循环。
var arr = [3, 1, 4, 6, 5, 7, 2];
function bubbleSort(arr) {
var len = arr.length;
for (var i = 0; i < len - 1; i++) {
var swapped = false; // 标志位，判断是否发生交换
for (var j = 0; j < len - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
swapped = true; // 发生了交换
}
}
if (!swapped) {
break; // 没有发生交换，提前结束循环
}
}
return arr;
}
console.log(bubbleSort(arr));
我们在内层循环中添加了一个标志位 swapped，初始值为 false。如果发生了交换，将 swapped 设置为 true。在每一轮外层循环结束后，检查 swapped 的值，如果为 false，说明数组已经有序，提前结束循环。
这样可以避免在已经排序完成的数组上进行不必要的比较，提高了冒泡排序的效率。
运行结果应为 [1, 2, 3, 4, 5, 6, 7]。
4 快速排序
采用二分法，取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边
快速排序的思想很简单，整个排序过程只需要三步：
- 在数据集之中，找一个基准点
- 建立两个数组，分别存储左边和右边的数组
- 利用递归进行下次比较
- 快速排序的时间复杂度为
O(nlogn)，是一种高效的排序算法
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);
};
};
bind方法用于创建一个新函数，并将其中的this值绑定到指定的对象。与call和apply不同，bind方法不会立即调用函数，而是返回一个绑定了指定this值的新函数，供以后调用。
它将原函数保存在fn变量中，然后返回了一个匿名函数。当新函数被调用时，它会使用fn.apply来设置函数的上下文（this值）为传入的ctx对象，并将参数通过arguments对象传递进去。
需要注意的是，bind方法还可以接受额外的参数，这些参数会在调用新函数时作为参数传递进去。修改代码，使其支持传递额外参数的实现如下：
Function.prototype.bind = function(ctx) {
var fn = this;
var args = Array.prototype.slice.call(arguments, 1); // 获取额外参数
return function() {
var combinedArgs = args.concat(Array.prototype.slice.call(arguments)); // 合并额外参数和新函数调用时的参数
fn.apply(ctx, combinedArgs);
};
};
另外，需要注意的是，使用原型链修改内置对象的方法可能会与其他代码发生冲突或不兼容。因此，在实际开发中，最好避免修改内置对象的原型方法，以免引起意想不到的问题。
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() : this[e];
}
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;
}
}
这里提供了两种方法来实现对象的克隆（clone）。
- 方法一使用了原型链的方式，在
Object.prototype上添加了一个名为clone的方法。该方法可以克隆一个对象，对于数组类型则创建一个空数组，对于对象类型则创建一个空对象，并递归地复制属性值。 - 方法二是一个独立的函数
clone，通过判断对象的类型来进行不同的处理。如果是数组类型，则创建一个空数组，并递归地克隆数组的每个元素；如果是对象类型，则创建一个空对象，并递归地克隆对象的每个属性；对于其他类型的变量，直接返回该变量。 - 这两种方法都使用了递归算法，通过遍历对象的属性，并根据属性的类型进行复制操作，从而实现对象的克隆。需要注意的是，在使用递归算法时，要注意处理循环引用的情况，以避免进入无限循环。
在实际开发中，可以根据需要选择适合的方法来实现对象的克隆。同时，还可以使用现代的深拷贝工具库，如lodash、underscore等，来实现更复杂的对象克隆操作。
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的方式，比如今天是2014年9月26日，则输出2014-09-26
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);
除了上述代码中使用Date对象的方法外，还有其他方式可以获取今天的日期并输出。
一种常见的方式是使用toLocaleDateString()方法，该方法可以返回表示日期的字符串。可以通过传递适当的选项来指定所需的日期格式。
以下是使用toLocaleDateString()方法获取今天的日期的示例代码：
var today = new Date();
var options = { year: 'numeric', month: '2-digit', day: '2-digit' };
var formattedDate = today.toLocaleDateString('en-US', options);
console.log(formattedDate);
在上述代码中，首先创建一个Date对象表示今天的日期。
然后，定义一个选项对象options，其中指定了年份、月份和日期的格式。
最后，使用toLocaleDateString()方法将日期对象转换为指定格式的字符串，并将其赋值给formattedDate变量。
通过console.log()函数输出formattedDate，即可得到以YYYY-MM-DD的格式表示的今天的日期。
这种方法的优点是可以根据需求更灵活地定制日期的格式，适用于不同的地区和语言设置。
11 用js实现随机选取10–100之间的10个数字，存入一个数组，并排序
var iArray = [];
function getRandom(istart, iend){
var iChoice = iend - istart + 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=xxx&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)
}
在循环中，立即执行函数被用作一个闭包，用于保存每次循环中的i的值。这是为了避免在setTimeout函数中使用的回调函数在执行时捕获到的是循环结束后的i的值。
setTimeout函数用于设置一个定时器，它接受两个参数：回调函数和延迟时间（以毫秒为单位）。在每次循环中，通过将j*1000作为延迟时间，实现每隔一秒钟输出数字的效果。回调函数输出的数字为j+1，因为j从0开始。
通过这种方式，可以确保每隔一秒钟输出1, 2, 3...的数字。每个数字的输出时间间隔为一秒。
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);
},[]);
}
除了使用reduce方法，还可以使用递归和ES6的扩展运算符等方式来实现数组的扁平化处理。
- 递归方式：
function flatten(arr) {
var result = [];
arr.forEach(function(item) {
if (Array.isArray(item)) {
result = result.concat(flatten(item));
} else {
result.push(item);
}
});
return result;
}
- 使用ES6的扩展运算符：
function flatten(arr) {
while (arr.some(Array.isArray)) {
arr = [].concat(...arr);
}
return arr;
}
这些方法都可以将多层嵌套的数组扁平化成一个一维数组。使用递归方法时，通过遍历数组的每个元素，如果元素是数组，则递归调用扁平化函数；如果元素不是数组，则直接添加到结果数组中。使用ES6的扩展运算符时，通过不断地展开数组中的每个元素，直到所有元素都不再是数组为止。
17
实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this){
o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
}
return o;
}
18 手写 promise.all 和 race（京东）
//静态方法
static all(promiseArr) {
let result = [];
//声明一个计数器 每一个promise返回就加一
let count = 0;
return new Mypromise((resolve, reject) => {
for (let i = 0; i < promiseArr.length; i++) {
//这里用 Promise.resolve包装一下 防止不是Promise类型传进来
Promise.resolve(promiseArr[i]).then(
(res) => {
//这里不能直接push数组 因为要控制顺序一一对应(感谢评论区指正)
result[i] = res;
count++;
//只有全部的promise执行成功之后才resolve出去
if (count === promiseArr.length) {
resolve(result);
}
},
(err) => {
reject(err);
}
);
}
});
}
//静态方法
static race(promiseArr) {
return new Mypromise((resolve, reject) => {
for (let i = 0; i < promiseArr.length; i++) {
Promise.resolve(promiseArr[i]).then(
(res) => {
//promise数组只要有任何一个promise 状态变更 就可以返回
resolve(res);
},
(err) => {
reject(err);
}
);
}
});
}
}
19 手写-实现一个寄生组合继承
function Parent(name) {
this.name = name;
this.say = () => {
console.log(111);
};
}
Parent.prototype.play = () => {
console.log(222);
};
function Children(name) {
Parent.call(this);
this.name = name;
}
Children.prototype = Object.create(Parent.prototype);
Children.prototype.constructor = Children;
let child = new Children("111");
console.log(child.name);
child.say();
child.play();
20 手写-new 操作符
function myNew(fn, ...args) {
let obj = Object.create(fn.prototype);
let res = fn.call(obj, ...args);
if (res && (typeof res === "object" || typeof res === "function")) {
return res;
}
return obj;
}
// 用法如下：
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function() {
console.log(this.age);
};
let p1 = myNew(Person, "lihua", 18);
console.log(p1.name);
console.log(p1);
p1.say();
21 手写-setTimeout 模拟实现 setInterval（阿里）
function mySetInterval(fn, time = 1000) {
let timer = null,
isClear = false;
function interval() {
if (isClear) {
isClear = false;
clearTimeout(timer);
return;
}
fn();
timer = setTimeout(interval, time);
}
timer = setTimeout(interval, time);
return () => {
isClear = true;
};
}
- 函数内部定义了一个timer变量和一个isClear变量，timer用于保存setTimeout的返回值，isClear用于标记是否需要清除定时器。
- interval函数是核心的定时执行函数，它会在每个时间间隔内执行一次回调函数fn。在每次执行回调函数之前，会检查isClear的值，如果为true，表示需要清除定时器，此时会调用clearTimeout清除定时器并直接返回。否则，会执行回调函数fn，然后通过setTimeout设置下一个定时执行。
- 在调用mySetInterval函数时，会立即执行一次interval函数，并通过setTimeout设置下一次的定时执行。同时，返回一个函数，调用该函数可以手动清除定时器。
- 需要注意的是，模拟实现的mySetInterval函数在执行回调函数时是通过setTimeout实现的，因此会存在一定的延迟。实际上，使用setInterval能更准确地控制时间间隔，因为setInterval会尽可能保持固定的间隔时间。而使用setTimeout实现的mySetInterval函数可能会存在一些累积的误差。
// 测试
let a = mySettimeout(() => {
console.log(111);
}, 1000)
let cancel = mySettimeout(() => {
console.log(222)
}, 1000)
cancel()
22 手写-发布订阅模式（字节）
class EventEmitter {
constructor() {
this.events = {};
}
// 实现订阅
on(type, callBack) {
if (!this.events[type]) {
this.events[type] = [callBack];
} else {
this.events[type].push(callBack);
}
}
// 删除订阅
off(type, callBack) {
if (!this.events[type]) return;
this.events[type] = this.events[type].filter((item) => {
return item !== callBack;
});
}
// 只执行一次订阅事件
once(type, callBack) {
function fn() {
callBack();
this.off(type, fn);
}
this.on(type, fn);
}
// 触发事件
emit(type, ...rest) {
this.events[type] &&
this.events[type].forEach((fn) => fn.apply(this, rest));
}
}
// 使用如下
const event = new EventEmitter();
const handle = (...rest) => {
console.log(rest);
};
event.on("click", handle);
event.emit("click", 1, 2, 3, 4);
event.off("click", handle);
event.emit("click", 1, 2);
event.once("dbClick", () => {
console.log(123456);
});
event.emit("dbClick");
event.emit("dbClick");
23 手写-防抖节流（京东）
// 防抖
function debounce(fn, delay = 300) {
//默认300毫秒
let timer;
return function () {
const args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, args); // 改变this指向为调用debounce所指的对象
}, delay);
};
}
// 测试
window.addEventListener(
"scroll",
debounce(() => {
console.log(111);
}, 1000)
);
// 节流
// 设置一个标志
function throttle(fn, delay) {
let flag = true;
return () => {
if (!flag) return;
flag = false;
timer = setTimeout(() => {
fn();
flag = true;
}, delay);
};
}
window.addEventListener(
"scroll",
throttle(() => {
console.log(111);
}, 1000)
);
24 将虚拟 Dom 转化为真实 Dom（类似的递归题-必考）
{
tag: 'DIV',
attrs:{
id:'app'
},
children: [
{
tag: 'SPAN',
children: [
{ tag: 'A', children: [] }
]
},
{
tag: 'SPAN',
children: [
{ tag: 'A', children: [] },
{ tag: 'A', children: [] }
]
}
]
}
把上面的虚拟Dom转化成下方真实Dom
<div id="app">
<span>
<a></a>
</span>
<span>
<a></a>
<a></a>
</span>
</div>
答案
// 真正的渲染函数
function _render(vnode) {
// 如果是数字类型转化为字符串
if (typeof vnode === "number") {
vnode = String(vnode);
}
// 字符串类型直接就是文本节点
if (typeof vnode === "string") {
return document.createTextNode(vnode);
}
// 普通DOM
const dom = document.createElement(vnode.tag);
if (vnode.attrs) {
// 遍历属性
Object.keys(vnode.attrs).forEach((key) => {
const value = vnode.attrs[key];
dom.setAttribute(key, value);
});
}
// 子数组进行递归操作 这一步是关键
vnode.children.forEach((child) => dom.appendChild(_render(child)));
return dom;
}
25 手写-实现一个对象的 flatten 方法（阿里）
题目描述
const obj = {
a: {
b: 1,
c: 2,
d: {e: 5}
},
b: [1, 3, {a: 2, b: 3}],
c: 3
}
flatten(obj) // 结果返回如下
// {
// 'a.b': 1,
// 'a.c': 2,
// 'a.d.e': 5,
// 'b[0]': 1,
// 'b[1]': 3,
// 'b[2].a': 2,
// 'b[2].b': 3
// c: 3
// }
答案
function isObject(val) {
return typeof val === "object" && val !== null;
}
function flatten(obj) {
if (!isObject(obj)) {
return;
}
let res = {};
const dfs = (cur, prefix) => {
if (isObject(cur)) {
if (Array.isArray(cur)) {
cur.forEach((item, index) => {
dfs(item, `${prefix}[${index}]`);
});
} else {
for (let k in cur) {
dfs(cur[k], `${prefix}${prefix ? "." : ""}${k}`);
}
}
} else {
res[prefix] = cur;
}
};
dfs(obj, "");
return res;
}
flatten();
26 手写-判断括号字符串是否有效（小米）
题目描述
给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。
有效字符串需满足：
- 左括号必须用相同类型的右括号闭合。
- 左括号必须以正确的顺序闭合。
示例 1：
输入：s = "()"
输出：true
示例 2：
输入：s = "()[]{}"
输出：true
示例 3：
输入：s = "(]"
输出：false
答案
const isValid = function (s) {
if (s.length % 2 === 1) {
return false;
}
const regObj = {
"{": "}",
"(": ")",
"[": "]",
};
let stack = [];
for (let i = 0; i < s.length; i++) {
if (s[i] === "{" || s[i] === "(" || s[i] === "[") {
stack.push(s[i]);
} else {
const cur = stack.pop();
if (s[i] !== regObj[cur]) {
return false;
}
}
}
if (stack.length) {
return false;
}
return true;
};
27 手写-查找数组公共前缀（美团）
题目描述
编写一个函数来查找字符串数组中的最长公共前缀。
如果不存在公共前缀，返回空字符串 ""。
示例 1：
输入：strs = ["flower","flow","flight"]
输出："fl"
示例 2：
输入：strs = ["dog","racecar","car"]
输出：""
解释：输入不存在公共前缀。
答案
const longestCommonPrefix = function (strs) {
const str = strs[0];
let index = 0;
while (index < str.length) {
const strCur = str.slice(0, index + 1);
for (let i = 0; i < strs.length; i++) {
if (!strs[i] || !strs[i].startsWith(strCur)) {
return str.slice(0, index);
}
}
index++;
}
return str;
};
28 手写-字符串最长的不重复子串
题目描述
给定一个字符串 s ，请你找出其中不含有重复字符的 最长子串 的长度。
示例 1:
输入: s = "abcabcbb"
输出: 3
解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。
示例 2:
输入: s = "bbbbb"
输出: 1
解释: 因为无重复字符的最长子串是 "b"，所以其长度为 1。
示例 3:
输入: s = "pwwkew"
输出: 3
解释: 因为无重复字符的最长子串是 "wke"，所以其长度为 3。
请注意，你的答案必须是 子串 的长度，"pwke" 是一个子序列，不是子串。
示例 4:
输入: s = ""
输出: 0
答案
const lengthOfLongestSubstring = function (s) {
if (s.length === 0) {
return 0;
}
let left = 0;
let right = 1;
let max = 0;
while (right <= s.length) {
let lr = s.slice(left, right);
const index = lr.indexOf(s[right]);
if (index > -1) {
left = index + left + 1;
} else {
lr = s.slice(left, right + 1);
max = Math.max(max, lr.length);
}
right++;
}
return max;
};