前端面试题（实习篇）第一天-JS

所有面试题目均来自互联网，如有不妥，请联系删除，联系方式：1391298394

一.谈谈js中的基础数据类型和引用类型

1.基础类型(有6种)
number(数值) string(字符串) boolean(布尔类型) null undefined symbol(原型，ES6新增

2.引用类型
array(数组) function(函数) object(对象) Date(时间)
参考：js数据类型

二.判断!!typeof 'string' === 'string'的输出值

答案是false,只有`!!(typeof ' string'  === 'string')`时才是true

三.调用BOM中的哪个对象的相应方法可以实现页面刷新

history

参考：BOM里面的常用方法

四：请说出js中有返回值的api有哪些

map

map()方法创建一个新数组，其结果是该数组中的每个元素都调用提供的函数后返回的结果
map方法有三个参数，第一个参数currentValue是数组中正在处理的当前函数；第二个参数index是数组正在处理的当前元素的索引；第三个参数是map方法调用的数组

• 求数组中的平方根

var numbers = [1,4,9];
var roots=numbers.map(Math.sqrt);
//roots的值是[1,2,3],numbers的值是[1,4,9]

通常情况下，map方法中的callback函数只需要接受一个参数，就是正在遍历的数组元素本身，但这并不意味着map只给callback传了一个参数。这种惯性思维可能会让我们犯一个很容易犯的错误

[“1”,“2”,“3”].map(parseInt）

我们期望的输出是[1,2,3],而实际却是[1,NaN,NaN]
解决方案

1. 把parseInt改为Number
   
   2:定义转换函数

function returnInt(element){
	return parseInt(element,10)
}
['1','2','3'].map(returnInt)

参考：map方法

filter

filter()方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素;接受三个参数，第一个element是当前正在处理的元素；第二个参数index是当前正在处理元素在数组中的索引；第三个参数array调用了filter的数组本身

• 代码示例一

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']
const result = words.filter(word => word.length > 6)
console.log(result);//output: Array ["exuberant", "destruction", "present"]

• 代码示例二

function isBigEnough(element){
return element >= 10;
}
var filtered = [12,5,8,130,44].filter(isBigEnough)//filtered is [12, 130, 44]

参考：filter方法
更多api及其更加详细的介绍可以查看：Array

五：请说出改变函数作用域的几种方法
有四种方法

apply()

apply()方法调用一个具有给定this值的函数，以及作为一个数组(或类似数组对象)提供参数；简单来说就是可以改变this的指向

示例代码一：

var  name='小王',age=17;
var obj={
name:'小战'，
objAge:this.age,
myFun:function(){
console.log(this.name+"年龄"+this.age)
	}
}
console.log(obj.objAge)//17
obj.myFun()//小战年龄 undefined

示例代码二：

var fav='盲僧';
function shows(){
console.log(this.fav)
}
show()//盲僧

call()

bind()

以上三者对比

var name='小王',age=17;
var obj=
name:'小张',
objAge:this.age,
myFun:function(fm,t){
console.log(this.name+"年龄"+this.age,"来自"+fm+"去往"+t);
	}
}
var db={
name:'德玛',
age:99
}

obj.myFun.call(db,'成都','上海');// 德玛 年龄 99  来自 成都去往上海
obj.myFun.apply(db,['成都','上海']);// 德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,'成都','上海')();// 德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])(); // 德玛 年龄 99  来自 成都, 上海去往 undefined

call和bind的传参方式都是列表，apply的传参方式是数组，此外使用bind时需要在最后加上()来让函数立即执行
参考：javascript中call(),apply(),bind()的用法理解

new关键字

function Person(name,age){
        this.name=name;
        this.age=age;
        this.sayName=function(){
            alert(this.name)
        }
    }
    var p1=new Person("xiaomei",27);
    var p2=new Person("xiaoli",24);
    p1.sayName();//xiaomei
    p2.sayName();//xiaoli

参考：js中改变作用域的三种方式

六：请说出iframe的使用场景

1. 典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe
2. ajax上传文件
3. 加载别的网站内容，例如goole广告，网站流量分析
4. 在上传图片时，不用flash实现无刷新
5. 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源
   参考： 牛客网不定项选择题
   参考：深入浅出iframe

七：聊聊你对事件冒泡的理解

1. 事件冒泡属于事件流的三步(事件捕获/目标阶段/事件冒泡)的最后一个阶段
2. 举一个例子，当一个div里面包含ul，我们点击ul里边的li时，那么ul和div，也就是它的所有子孙和祖宗都会监听到这一个事件
3. 事件委托就是利用事件冒泡来减少浏览器的重排和重绘，减少了DOM操作，极大的优化了性能
4. 可以使用e.stopPropagation来阻止事件冒泡
   参考：js事件流