前端面试修仙(一)
写在前面,本内容以《前端面试江湖》为基础的,以我的能力做了部分修改和加深,谈谈面试题。同时提示大家千万不要,买《前端面试江湖》这书,大大小小我能看出来的多达百处,还有些技术过时,还有些题是侮辱智商,这可是2016年出版的书啊,我已入坑,难受。
第一部分 JavaScript(一)
1. JavaScript是基于对象,事件驱动的脚步程序设计语言,不是面向对象的程序设计语言。
2. 游览器出现兼容性问题是因为各游览器厂商对web标准理解的不同所造成的。
3. JavaScript的tepeof运算符返回,undefined,object,function,number,string,boolean。
4. 问题:实现字符串反转函数?
function res(str){
var strlength = str.length;
var strli = "";
for(var i = (strlength - 1);i >= 0;i--){
strli += str.charAt(i);
}
return strli;
}
var a = "dajijfiajfoias";
var b = res(a);
console.log(b); //这是书上方法,charAt(),返回的是引索位置的字符
//真的麻烦!
function res(str){
var b=str.split('').reverse().join('');
return b
}
var a = "dajijfiajfoias";
var b = res(a);
console.log(b);//split()把字符串分割,参数是分割界限,reverse()数组元素倒排序,join()连接数组返回字符串,参数为连接符
5 . 关于变量参考js复习整理(一)第12条。
6 . 问题:js是怎么检查一个变量是字符串类型的?
//问题很简单,很容易想到teypof运算符
function toString(str){
if(typeof str == "string" ||str.constructor==String){
return true
}else{
return false
}
}
var b="sdfas";
console.log(toString(b));
var c= new String();
console.dir(c);//这段代码是为了理解str.constructor,因为有时候你的变量接受可能是一个字符串对象
7 .问题:将abcd-ddd-ghi处理成ghi&ddd&abcd?
var str="abcd-ddd-ghi";
var str=str.split('-').reverse().join('&');
console.log(str);
8.js数据类型:
- 原始数据类型【undefined】【null】【boolean】【number】【string】
- 复合数据类型【function】【array】
9.前端面试江湖第25题:false==0的结果是多少?正确结果是 true 书上答案错误(false做的数组类型的隐式转换是0)
10 .document.write和innerHTML的区别?
document.writer是写死的内容,会覆盖原来页面的内容,innerHTML是DOM对象属性,其实还不是w3c标准,只是各游览器厂商实现了他。
11 . 前端面试江湖第30题排版错误,而且还用for循环,实际应用很垃圾。问题:编写代码实现点击不同的li,获取其内容。
var ul = document.getElementById('ul');
ul.addEventListener('click',function(e){
var e=e.target||event.target
alert(e.innerHTML);
}) //addEventListener() DOM事件监听函数第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
用事件代理简单多了,书上的垃圾代码我就不写了,我都严重怀疑这本书的作者根本不是前端出身,而是网上收了相关资料出书骗钱的,毕竟前端面试书籍很少,几乎于没有。
12 .说到了事件代理,就说说事件捕获和事件冒泡
- 事件捕获,以上面的代码为例,就是父级传子级,上述代码你点击ul的区域不点击li的区域,便会弹出ul的内部内容。
- 事件冒泡,若你给ul绑定一个点击事件,当你点击li触发了li上的事件后会触发ul上的事件。
-
13 . 前端面试江湖第30题答案错误。问题如下面代码
var a = 1;
+function f(){
alert(a);
var a = 2;
}()//请问alert打印什么?
//答案是undefined,但书上答案为1,这明显错了,js中var声明的变量会导致声明提前,从而alert中的a是声明的了不会向父级要a的值,因为变量声明提前,导致拿到的a是未定的。
14 . 重新刷新页面通常使用:
- location.reload()
- history.go(0)
15 . 问题:js中获取元素的几种方式?(至少瞬间想到3种)不多说了。
16 . 问题:js中nodeName、nadeValue、nodeType的区别?
- nodeName属性含有某个节点的名称。分别是:标签名(元素节点)、属性名(属性节点)、#text(文本节点)、#document(文档节点)。
- nadeValue:对于文本节点包含了文本,对于属性节点那就是属性值,对元素节点和文档节点不适用。
- nodeType:值是1,2,3,分别表示 元素,属性,文本
17 .前端面试江湖第40题,解析错误,getElementByName(),请告诉我这是什么东西?我谁都不服就服这个作者!!!
18 . 前端面试江湖第55题,问题如下:
for(i = 0,j=0;i<10,j<6;i++,j++ ){
k = i+j;
}
alert(k)//书上答案18,我是不懂他18怎么算出来的,正确答案为10
//实际上k=5+5
19 .问题:有以下ES6代码
function * gen() {
yield 1;
yield 2;
yield 3;
}
下面选项描述正确的是哪个()?
A.gen()执行后返回2
B.gen()执行后返回undefined
C.gen()执行后返回一个Generator对象
D.gen()执行后返回1
解答:这是ES6的新feature, function 后面带 * 的叫做generator function。函数运行时,返回一个迭代器。正确答案:C。
这里就聊一聊ES6的迭代器(Iterator)和生成器(Generator)
用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置。新的数组方法和新的集合类型像set(),map()都依赖于迭代器的实现。
通常我们一般使用的迭代方式是用循环语句如下代码:
var colors = ['red','green','blue'];
for(var i = 0;i<colors.length;i++){
console.log(colors[i]);
}
使用for循环进行迭代,语法简单,但是多个循环嵌套,需要追踪多个变量,代码复杂度会增加,容易使得代码出错。
迭代器:
1 . 是一个特殊的对象,所有的迭代器对象都有一个next()方法,每次调用都返回一个结果对象
2 . 结果对象有二个属性,一个是value(表示将要返回的值),一个是done(是一个boolean值,判断还有没有更多的数据可以返回)
3 . es5创建的迭代器:
function creatIterator(items){ var i = 0;
return{
next:function(){//next()方法,next方法要返回结果对象
var done = (i>=items.length);
var value = !done ? items[i++] :undefined;
return{//这就是next方法返回的结果对象
done:done,//返回done,布尔值
value:value//返回值
}
}
} }
var iterator= creatIterator([1,2,3])
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())//与正则的某个知识点很像`
生成器:生成器是一个返回迭代器的函数,通过fanction关键字后面加*来表示,函数中会使用到一个新的关键字yield(vt. 屈服;出产,产生;放弃)[yield关键字,每当执行完一条yiled语句,函数会自动停止运行]
function *createIterator(items){
for(let i = 0;i<items.length;i++){
yield items[i];
}
}
let iterator = createIterator([1,2,3]);
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
就说这么多毕竟我也理解的不是很透彻,es6还没真正好好看。