有意思的前端开发工程师经典面试题
摘要：1. javascript 代码 var foo = 1; function bar() { foo = 10; return; function foo() {} } bar(); console.log(foo); 2.javascript 代码 var foo = { n: 1 }; var bar = foo; foo.x = foo = ……
1.
javascript 代码
var foo = 1;
function bar() {
foo = 10;
return;
function foo() {}
}
bar();
console.log(foo);
2.javascript 代码
var foo = {
n: 1
};
var bar = foo;
foo.x = foo = {
n: 2
};
console.log(foo.x);
console.log(bar.x);
3.
javascript 代码
var fullname = ‘John Doe’;
var obj = {
fullname: ‘Colin Ihrig’,
prop: {
fullname: ‘Aurelio De Rosa’,
getFullname: function () {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());
4
javascript 代码
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
5.求一个正则表达式，要求 数字，大写字母，小写字母，特殊字符（_）至少两种或两种以上组合的正则表达式。
javascript 代码
/(?=.*\d)(?=.*[a-zA-Z])|(?=.*\_)(?=.*[a-zA-Z])|(?=.*\_)(?=.*\d)|(?=.*\_)(?=.*\d)(?=.*[a-zA-Z])^[\w]{6,20}$/
/^(?!\d+$)(?![A-Z]+$)(?![a-z]+$)(?![_]+$)([0-9a-zA-Z_]{6,20})$/
6.
javascript 代码
for (var i = 1; i <= 3; i++) {
setTimeout(function () {
console.log(i);
}, 0);
};
7.如何让第六题的代码输出1 2 3？
javascript 代码
for (var i = 1; i <= 3; i++) {
setTimeout((function (a) {
console.log(a);
})(i), 0);
}
8.下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>
javascript 代码
// 方法一：
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].onclick = (function (a) {
return function () {
alert(a);
}
})(i);
}
9.数组去重
javascript 代码
var arr = [1, 3, 1, 2, 3, 4, 55, 23, 4, 23, 2];
function uniquueArr(arr) {
var obj = {},
arr1 = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = true;
arr1.push(arr[i]);
}
}
return arr1;
}
console.log(uniquueArr(arr));
10.找出一个字符串里面出现最多个数的字符
javascript 代码
var str = ‘dasdasdadsssssaaaaaaaaaaaaa’;
function maxCode(str) {
var obj = {},
index = 0,
max = 0;
for (var i = 0, len = str.length; i < len; i++) {
if (!obj[str.charAt(i)]) {
obj[str.charAt(i)] = 1;
} else {
obj[str.charAt(i)]++;
}
}
for (var i in obj) {
if (obj[i] > max) {
index = i;
max = obj[index];
}
}
return {
index: index,
max: max
}
}
console.log(maxCode(str));
11.
javascript 代码
function Foo() {
getName = function () {
console.log(1);
};
return this;
}
Foo.getName = function () {
console.log(2);
};
Foo.prototype.getName = function () {
console.log(3);
};
var getName = function () {
console.log(4);
};
function getName() {
console.log(5);
}
//请写出以下输出结果：
Foo.getName(); //
getName(); //
Foo().getName(); //
getName(); //
new Foo.getName(); //
new Foo().getName(); //
new new Foo().getName(); //
12.
javascript 代码
function A() {
this.name = ‘lvdaofeng’;
return ‘wangdaming’;
};
var a = new A();
console.log(a.name);
function B() {
this.name = ‘chengli’;
return {
name: ‘dapang’
}
}
var b = new B();
console.log(b.name);
13.
javascript 代码
var test = (function (a) {
this.a = a;
return function (b) {
return this.a + b;
}
})((function (a, b) {
return a
})(1, 2));
console.log(test(4));
14.说一说这样的模块要怎么写，从切图说起
html 代码
<!– 商品排序 –>
<div class=”goods_sort clearfix”>
<div class=”page_turning”>
<span>共
<span class=”page_turning_num”>10074</span>个商品</span>
</div>
<ul class=”sort_content clearfix”>
<li>排序：</li>
<li class=”selling_price”>
<a href=”###” class=”two active”>售价</a>
</li>
<li class=”sales_volume”>
<a href=”###” class=”two”>销量</a>
</li>
<li class=”stock_balance”>
<a href=”###” class=”three”>库存量</a>
</li>
<li class=”time_shelves”>
<a href=”###” class=”four”>上架时间</a>
</li>
</ul>
</div>
css 代码
/*内容-商品排序*/
.goods_sort {
height:32px;
line-height:32px;
padding:033px018px;
background-color:#fff;
border:1pxsolid#e6e6e6;
margin-top:20px;
}
.sort_content {
height:100%;
}
.sort_content li {
float:left;
height:100%;
min-width:42px;
border-right:1pxsolid#e6e6e6;
font-weight:700;
}
.sort_content a {
display:block;
padding:020px010px;
height:100%;
text-align:center;
color:#333;
background:#fffurl(../images/icon.png)no-repeat;
}
.sort_content .two {
background-position:38px-3072px;
}
.sort_content .three {
background-position:51px-3072px;
}
.sort_content .four {
background-position:62px-3072px;
}
.sort_content a:hover {
color:#fff;
background-color:#ff7500;
}
.sort_content .two:hover {
background-position:38px-3115px;
}
.sort_content .three:hover {
background-position:51px-3115px;
}
.sort_content .four:hover {
background-position:62px-3115px;
}
.sort_content .active {
color:#fff;
}
.sort_content .sales_volume .active {
background:#ff7500url(../images/icon.png)no-repeat38px-3115px;
}
.sort_content .selling_price .active {
background:#ff7500url(../images/icon.png)no-repeat38px-3115px;
}
.sort_content .stock_balance .active {
background:#ff7500url(../images/icon.png)no-repeat51px-3115px;
}
.sort_content .time_shelves .active {
background:#ff7500url(../images/icon.png)no-repeat62px-3115px;
}
javascript 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
* {
padding: 0;
margin: 0;
}
div {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<script type=”text/javascript”>
function moveFrame(obj, attr, iTarget) {
this.cur = 0;
this.speed = 0;
this.move(obj, attr, iTarget);
}
moveFrame.prototype = {
move: function (obj, attr, iTarget) {
var oThis = this;
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var cur = 0,
speed;
if (attr === “opacity”) {
cur = Math.round(parseFloat(oThis.getStyle(obj, attr)) * 100);
} else {
cur = parseInt(oThis.getStyle(obj, attr));
}
speed = (iTarget – cur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (iTarget === cur) {
clearInterval(obj.timer);
} else {
cur += speed;
if (attr === “opacity”) {
obj.style.filter = “alpha(opacity:” + cur + “)”;
obj.style.opacity = cur / 100;
} else {
obj.style[attr] = cur + “px”;
}
}
}, 30);
},
getStyle: function (obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name]; //for IE
} else {
return getComputedStyle(obj, false)[name]; //for FF
}
}
};
var obj = document.querySelector(‘div’);
new moveFrame(obj, ‘left’, 1000);
</script>
</body>
</html>
16.
javascript 代码
for (var i = 1; i <= 3; i++) {
console.log(i);
}
for (var i = 1; i <= 3; i++) {
setTimeout(function () {
console.log(i);
}, 0)
}
for (var i = 1; i <= 3; i++) {
setTimeout((function (a) {
console.log(a);
})(i), 0)
}
17.
javascript 代码
var a = 1;
console.log(a.__proto__); //Number
console.log(a.__proto__.__proto__); //Object
console.log(a.__proto__.__proto__.__proto__); //null
console.log(a.prototype);
var a = {
x: 1
};
console.log(a.__proto__); //Object
console.log(a.__proto__.__proto__); //null
console.log(a.prototype);
function a() {
this.y = 2;
}
console.log(a.__proto__); //Object
console.log(a.__proto__.__proto__); //null
console.log(a);
var Person = function () {};
var p = new Person();
console.log(p.__proto__);
console.log(Person.prototype);
18.javascript 代码
var obj = {
name: 1
};
var aa = obj;
aa.name = 2;
var bb = obj;
bb.name = 3;
console.log(aa.name);
function Obj() {
this.name = 1;
}
var aa = new Obj();
aa.name = 2;
var bb = new Obj();
bb.name = 3;
console.log(aa.name);
19.
javascript 代码
var scope = ‘top’;
var f1 = function () {
console.log(scope);
};
var f2 = function () {
var scope = ‘f2’;
f1();
};
f2();
20.
javascript 代码
function A() {
this.add1 = function () {
return ++this.num;
}
}
A.prototype.num = 1;
var a1 = new A();
var a2 = new A();
console.log(a1.add1());
console.log(a2.add1());
21.
javascript 代码
function A() {
this.add1 = function () {
return ++this.num.x;
}
}
A.prototype.num = {
x: 1
};
var a1 = new A();
var a2 = new A();
console.log(a1.add1());
console.log(a2.add1());
22.
javascript 代码
let person = {
name: ‘大胖’,
say: function () {
console.log(this.name);
},
say1: () => {
console.log(this.name);
}
};
let name = ‘二胖’;
setTimeout(function () {
console.log(this);
person.say(); //大胖
}, 100);
setTimeout(person.say, 100); //二胖
person.say1(); //二胖
setTimeout(function () {
console.log(this);
person.say1(); //二胖
}, 100);
setTimeout(person.say1, 100); //二胖
23.判断一个对象是不是数组的办法：
javascript 代码
let arr1 = [];
console.log(arr1 instanceof Array);
console.log(arr1.length === ‘number’);
console.log(arr1.splice != ‘undefined’);
console.log(Object.prototype.toString.call(arr1) === ‘[object Array]’);
console.log(Array.isArray(arr1));
24.2017.2.18新增
javascript 代码
setTimeout(function () {
console.log(1);
}, 100);
for (var i = 0; i < 10000; i++) {
console.log(2);
}
setTimeout(function () {
console.log(3);
}, 50);
25.js事件循环机制
javascript 代码
setTimeout(function () {
console.log(‘timeout1’);
}, 100)
setTimeout(function () {
console.log(‘timeout2’);
})
new Promise(function (resolve) {
console.log(‘promise1’);
for (var i = 0; i < 1000; i++) {
i == 99 && resolve();
}
console.log(‘promise2’);
}).then(function () {
console.log(‘then1’);
})
console.log(‘global1’);
26.如何在设置一个对象的属性的时候同时改成这个对象的其他属性（已存在的）（2017年7月31日）
javascript 代码
var man = {
aa: 2008,
age: 15
};
Object.defineProperty(man, ‘year’, {
set: function (newValue) {
if (newValue > 2004) {
this.aa = newValue;
this.age += 1;
}
}
});
man.year = 2012;
console.log(man.aa);
console.log(man.age);
27.闭包 下面五段代码分别输出什么？并且什么时候输出什么？（2017年9月1号）
javascript 代码
for (var i = 0; i < 5; i++) {
console.log(i);
}
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000 * i);
}
for (var i = 0; i < 5; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, i * 1000);
})(i);
}
for (var i = 0; i < 5; i++) {
(function () {
setTimeout(function () {
console.log(i);
}, i * 1000);
})(i);
}
for (var i = 0; i < 5; i++) {
setTimeout((function (i) {
console.log(i);
})(i), i * 1000);
}
28.语法题 有一个合法的 JSON 对象（即不包含函数等值的对象），设计一个函数，取出该对象内所有 key 为 “id” 并且其值不为对象、数组的值，装入一个数组并返回。
function extractIds(data) {
// implement
}
样例数据：
var data = {
id: 1,
items: [
{ id: 2 },
{ item: 3, id: [
{ id: 4 },
{ id: 5 }
]}
]
};
extractIds(data); // should return [ 1, 2, 4, 5 ]
javascript 代码
function filter(items) {
const arr = [];
for (let key in items) {
if (key === ‘id’ && typeof items[key] !== ‘object’) {
arr.push(items[key])
}
if (typeof items[key] === ‘object’) {
arr.push(…filter(items[key]))
}
}
return arr
}
前端开发工程师的前途|助理web前端开发工程师|哪里招聘前端开发工程师？
» 本文来自：前端开发者 » 《有意思的前端开发工程师经典面试题》
» 本文链接地址：https://www.rokub.com/3916.html
» 您也可以订阅本站：https://www.rokub.com
近期评论