几道常见的web前端工程师笔试题

一、媒体查询media query

1.

@media screen and (max-width: 300px) {

    body {

        background-color:lightblue;

    }

}

2.

<link rel="stylesteet" href="style.css" media="only screen and (max-width:800px) and (min-width:400px)">

二、数组去重

1.

Array.prototype.unique3 = function(){var arr = [this[0]];for(var i = 1; i < this.length; i++){if (this.indexOf(this[i]) == i){arr.push(this[i]);}}return arr;}[1,2,3,'4',3,4,3,1,'34',2].unique3(); //[1, 2, 3, "4", 4, "34"]

2.

Array.prototype.unique3 = function(){var arr = [this[0]];for(var i = 1; i < this.length; i++){if (this.indexOf(this[i]) == i){arr.push(this[i]);}}return arr;}[1,2,3,'4',3,4,3,1,'34',2].unique3(); //[1, 2, 3, "4", 4, "34"]

三、正则过滤

function LetterAndNum(str){var arr=[];var strExp=/^[A-Za-z0-9]{1}$/;for(var i=0;i<str.length;i++){     if(strExp.test(str[i])){       arr.unshift((str[i]);}}return String(arr);}

四、JSON语法

1.

var jsonStr = '{"name": "hanzichi", "sex": "male"}';

var ans = eval('(' + jsonStr + ')');

console.log(ans.name, ans.sex); // hanzichi male

2.

var jsonStr = '{"name": "hanzichi", "sex": "male"}';

var obj = JSON.parse(jsonStr);

console.log(typeof obj, obj); // object Object {name: "hanzichi", sex: "male"}

五、严格模式

设立"严格模式"的目的，主要有以下几个：错误检测、规范、效率、安全、面向未来

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

消除代码运行的一些不安全之处，保证代码运行的安全；

提高编译器效率，增加运行速度；

为未来新版本的Javascript做好铺垫。

严格模式影响范围

变量：  var、delete、变量关键字

对象： 只读属性、 对象字面量属性重复申明

函数：参数重名、arguments对象、申明

其他：this、eval、关键字...

参考网址：http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

六、面向对象

封装

封装最好理解了。封装是面向对象的特征之一，是对象和类概念的主要特性。

封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。

继承

面向对象编程 (OOP) 语言的一个主要功能就是“继承”。继承是指这样一种能力：它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。

多态

多态性（polymorphisn）是允许你将父对象设置成为和一个或更多的他的子对象相等的技术，赋值之后，父对象就可以根据当前赋值给它的子对象的特性以不同的方式运作。简单的说，就是一句话：允许将子类类型的指针赋值给父类类型的指针。

案例：

function LetterAndNum(str){var arr=[];var strExp=/^[A-Za-z0-9]{1}$/;for(var i=0;i<str.length;i++){     if(strExp.test(str[i])){       arr.unshift((str[i]);}}return String(arr);}