找回密码
当前位置：前端开发者 > 资源 > 正文

有意思的前端开发工程师经典面试题

2018-06-17 22:02:01 分类：资源 / 面试 阅读(328) 评论(0)

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 代码

15.写一js运动框架
html 代码

<!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
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论