试做同学的阿里前端一面试题
w-xuefeng
4月 09, 2018
【题目1】
//请编写一段js函数，该函数的参数是一个骆驼命名法命名的变量标识符，
//函数最终返回该标识符的下划线命名法，如，输入：abcDefGh，返回：abc_def_gh
第一种写法
function changeName(name){
return name.replace(new RegExp(/[A-Z]/, 'g'), (str) => {
return '_' + String.fromCharCode(str.charCodeAt(0) | 32);
});
}
第二种写法
function changeName(name){
return name.replace(new RegExp(/[A-Z]/, 'g'), (str) => {
return `_${str.toLowerCase()}`;
});
}
【题目2】
/**
* 说明：获取一个数字数组中的最大值
* 示例：
* 输入：[1, 5, 3, 9, 2, 7]
* 输出：9
*/
第一种写法
function getMaxValue(array){
return array.sort((a, b) => {
return b - a;
})[0];
}
第二种写法 //ES5
function getMaxValue(array){
return Math.max.apply(null,array);
}
第三种写法 //ES6
function getMaxValue(array){
return Math.max(...array);
}
【题目3】
/**
* 多维数组打平成一维数组
* 说明
* 1. 数组维度表示数组嵌套数组的深度，如二维数组`[1, [2]]`
* 2. 数组维度不限，理论上可以无限
* 3. 数组项可以是number、string、boolean、object、null等JSON合法数据类型
* 示例：
* const a = ['1', 2, false, ['a[b]c', 'd,e,f', [3], [[4]]], [{g: 5}]];
* flatten(a); // 返回 ['1', 2, false, 'a[b]c', 'd,e,f', 3, 4, {g: 5}]
*/
function flatten(arr){
return arr.reduce((pre, cur) => {
return !Array.isArray(cur) ? [...pre,cur] : [...pre,...flatten(cur)];
},[])
}
【题目4】
/**
* 说明：简单实现一个事件订阅机制，具有监听on\one和触发emit方法
* 示例：
* const event = new EventEmitter();
* event.on('someEvent', (...args) => {
* console.log('some_event triggered', ...args);
* });
* event.one('someEvent', (...args) => {
* console.log('some_event triggered', ...args);
* });
* event.emit('someEvent', 'abc', '123');
*/
/**
* 事件中心
*/
export class EventEmitter {
event: {
[any: string]: { func: Function, one: Boolean }[]
};
constructor() {
// 事件池
this.event = {};
}
/**
* 监听事件
* @param {String} eventName 事件名称
* @param {Function} func 事件函数
* @param {Boolean} one 是否只监听一次
*/
on(eventName: string, func: Function, one?: Boolean) {
if (this.event[eventName]) {
this.event[eventName].push({ func, one });
} else {
this.event[eventName] = [{ func, one }];
}
}
/**
* 监听一次事件
* @param {String} eventName 事件名称
* @param {Function} func 事件函数
*/
one(eventName: string, func: Function) {
this.on(eventName, func, true)
}
/**
* 解绑事件
* @param {String} eventName 事件名称
*/
off(eventName: string) {
this.event[eventName] = [];
}
/**
* 发送事件
* @param {String} eventName 事件名称
* @param {any[]} args 传递的参数
*/
emit(eventName: string, ...args: any[]) {
if (!this.event[eventName]) return;
this.event[eventName].forEach((item, index, array) => {
item.func(...args);
if (item.one) {
array.splice(index, 1);
}
});
}
}
export default new EventEmitter();
【题目5】
/**
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="page">
<div class="content main">
<div class="refer">
<ul>
<li></li>
<li></li>
...
</ul>
</div>
</div>
</div>
<script>
var genCssSelector = function () {
}
document.addEventListener('click', function (e) {
//点击li时，返回：html body #page .content.main .refer ul li
console.log(genCssSelector(e.target));
})
</script>
</body>
</html>
*/
var genCssSelector = function (dom) {
let res = [];
while(dom.parentNode){
if(dom.id != ''){
res.push('#' + dom.id);
} else if(dom.className != ''){
let classname = '';
for (let i = 0, l = dom.classList.length; i < l; i++) {
classname += '.' + dom.classList[i]
}
res.push(classname);
}else{
res.push(dom.localName);
}
dom = dom.parentNode;
}
return res.reverse().join(' ');
}
本博客遵循署名 4.0 协议国际版 (CC BY 4.0)协议
本文链接：https://xuefeng.is-a.dev/archives/classmate-Alibaba-interview
(●'◡'●)
如果你觉得不错或者对你有帮助，
你可以替我买一杯咖啡 ☕
If you think it's good or helpful,
you can buy me a cup of coffee ☕
Ailpay
Wechat