字节跳动（今日头条）前端面试
面试问题
字节提前两天约了面试，在晚上七点半，面试的岗位是前端高级开发工程师，面试官很和蔼首先上来做了下简单的自我介绍，然后看了简历的一段经历让我说了一下，问了我是倾向于前端还是后端，然后就进入了正式的面试环节。
typeof 和 instanceof 区别instanceof 是否可以判断自定义的数据类型
1. typeof 用来判断数据的类型 typeof判断所有变量的类型 返回值有 string number boolean object function undefined
2. typeof 对于丰富的对象实例，只能返回"Object"字符串。
3. instanceof 用来判断对象，代码形式为obj1 instanceof obj2（obj1是否是obj2的实例），obj2必须为对象，否则会报错！其返回值为布尔值。
4. instanceof 可以对不同的`对象实例`进行判断，判断方法是根据对象的`原型链`依次向下查询，如果obj2的原型属性存在obj1的原型链上，（obj1 instanceof obj2）值为 true。
5. instanceof 是可以判断我们自定义的数据类型的
const Person = function(){}
var person = new Person()
person instanceof Person // true
person instanceof Object // true
vue中数据绑定根据什么原理来改变DOM中的数据
// vue 中实现的数据的双向绑定 其实使用了 订阅发布模式 使用 Object.defineProperty 来劫持监听各个属性的变化 ，
// 当属性发生变化后通知订阅者 触发更新回调函数 重新渲染
可以参考这个博客写的 vue 双向绑定原理
- apply() 、call() 有什么区别
JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法，它们的语法分别为：
定义：调用一个对象的一个方法，用另一个对象替换当前对象。
例如：B.apply(A, arguments)、B.call(A,args,args2);即使得 A 对象可以使用 B 对象的方法，改变了 B 对象 this 的指向，B 对象中原本 this 指向的是 B 对象，经过 call(thisObj,arg1,arg2...) 或者 apply(thisObj,arguments) 后 this 指向了 thisObj 。
且 如果 apply 和 call 中不传入任何参数 那么 this 指向了 Global（全局）
不同点
1. apply 最多只能传两个参数 第一个参数是新的 this 对象 第二个参数是一个参数数组，其他参数可以写进这个数组中。
2. call 它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。
3. 实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。
4. 还有一个 bind() 方法 它的返回值是一个函数 需要调用执行
示例代码
// call()、apply()、bind() 重新指向对象的 this 第一个参数都是 this 的指向对象
var name="小王",age=17;// window 的属性
var obj={
name:"小张",
age:age,
Fun:function(fm,to){
console.log( this.name + "年龄：" + this.age + "；来自：" + fm +"; 去往：" + to);
},
child:{
name:"小张的儿子",
age:4,
say:function(fm,to){
console.log( this.name + "年龄：" + this.age + "；来自：" + fm +"; 去往：" + to);
}
}
}
var db={
name:"伽罗;",
age:23
}
// 输出
obj.Fun(); //小张年龄：17 this 指向了 定义它的 obj
obj.Fun.call();// 小王年龄：17 this 指向了 window
obj.Fun.call(db,"成都","上海");// 伽罗;年龄：23；来自：成都; 去往：上海 this 指向了 db
obj.Fun.apply(); // 小王年龄：17 this 指向了 window
obj.Fun.apply(db,["成都","上海"]);// 伽罗;年龄：23 this 指向了 db
obj.Fun.bind()();// 小王年龄：17 this 指向了 window
obj.Fun.bind(db,["成都","上海"],"aaa")();// 伽罗;年龄：23；来自：成都,上海; 去往：aaa this 指向了 db
5. 补充一个 arguments.callee
- argumnets 该 对象 代表正在 执行的函数和调用它的函数 的参数。是指函数调用传入的参数的数组 (类数组)
- arguments 有个属性 callee 是个指针 指向拥有这个 arguments 对象的函数。 应用：如 阶乘 setTimeout() 模拟 setInterval()
setTimeout(function(){
setTimeout(arguments.callee,2000)
},2000)
6. 容易混淆的 caller；
- caller 不是 arguments 的属性，它是 Function 的属性
funtion a(){
b();
}
funtion b(){
console.log(b.caller)
}
// 执行 a()
a() // 输出是 a 方法 顾明思议 b.caller 指 b 函数的调用者 即 谁调用了 b 在执行 a() 的时候 显然在 a 方法体中调用了 b 所以输出的是 a 方法
apply的一些其他巧妙用法
1.Math.max 可以实现得到数组中最大的一项：Math.max(1,2,3,4)
Math.max 不支持直接传入数组 比如 Math.max([1,2,3]) 这样是不对的 会输出 NaN
使用 apply 可以这样实现 Math.max.apply(null,[1,2,3,4]) // 输出 4 apply 会将数组转换成 一个接一个参数传递给方法。
同样 Math.min 是不是都可以这样呢？ // 是的
2. Array.prototype.push 数组对象的原型实例方法push 提供了 push(item1,item2,...item) 同样我们也可以使用 apply 方法进行数组的合并 数组合并可以使用 contact
[].push.apply([1,2],[4,5]) // 返回的是新数组的长度 感觉实用性不强
- 写代码：实现 ES6 语法中的 const 声明 使用 ES5 var 怎么去做
// 使用es5 的语法 去实现 ES6 中的 const 的声明
// 首先我们要知道 const 有什么特性：
- 不能重新定义
- 不能重新赋值
- 语义化标识，表示声明后不可更改的不变量
- 声明时 完成 初始化
// 本质上：const 所保证的并不是变量的值不可改变 而是 变量所指向的内存地址不可改变 简单的数据类型保存在内存地址中 等同于常量
var _const=function(param,value){
// 使用一个对象 这里设置成 window
var _global = window;
// 判断要声明的 param 是否合法 不可以是关键字
var key_arr = ['class','var','let','const','return']// 还可以在增加限定关键字
if(!param || key_arr.indexOf(param)>-1){
throw new Error(`${param} 属于关键字 声明不合法`)
}
// 判断是否已经存在了
if(_global.hasOwnProperty(param)){
throw new Error(`${param} 已经被声明过了`)
}
// 给 _global 添加属性 param
_global[param] = value;
// 使用定义属性方法 defineProperty
Object.defineProperty(_global,param,{
get:function(){
return value;
},
set:function(){
// 检查赋值 已经存在了 不可再进行赋值
if(_global.hasOwnProperty(param)){
throw new Error(`${param} 不可再进行赋值`)
}
return value;
}
})
}
_const('TEST', "test_value");
console.log("TEST",TEST);
//_const('TEST', "test_value"); // Uncaught Error: TEST 已经被声明过了
TEST = "9999"//Uncaught Error: TEST 不可再进行赋值
console.log("TEST2",TEST);
- 写代码：输入一串含有
()、[] 、{ }的字符串 写代码做出检查 括号要成对
// 检查合法性 对于一个字符检查括号的合法性 如 () [] {}
var checker = (str)=>{
var len = str.length;
if(len <= 1){
return false;
}
// 定义三个空数组 采用进栈出栈的方式去做判断
var arr_little = [] ,arr_middle = [], arr_big = [];
for(var i = 0 ; i < len ; i++){
if(str[i]==="("){
arr_little.push("(");
}else if(str[i]===")"){
if(arr_little.length==0){
return false;
}
arr_little.pop();
}else if(str[i]==="["){
arr_middle.push("[");
}else if(str[i]==="]"){
if(arr_middle.length==0){
return false;
}
arr_middle.pop();
}else if(str[i]==="{"){
arr_big.push("{");
}else if(str[i]==="}"){
if(arr_big.length==0){
return false;
}
arr_big.pop();
}else{
return false
}
}
// 判断 数组的个数为0
if(arr_little.length==0 && arr_middle.length==0 && arr_big.length == 0){
return true;
}
else
return false;
}
- 写代码：输入一个有序数组 输出一个无序数组
function randArr(arr){
let len=arr.length;
for(let i = 0;i < len;i++ ){
let index=parseInt(Math.random()*len-1);
let temp=arr[i];
arr[i]=arr[index];
arr[index]=temp;
}
return arr;
}
let arrNew=[1,2,3,4,5];
console.log(randArr(arrNew));
- Promise 以及 它有几种状态呢
Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.
// Promise 是一种异步处理 有三种状态 pending （初始化状态） fulfilled (执行完成成功) rejected （执行失败）
// 当状态发生改变了就会去触发 then() 方法 无论是 pending-->fulfilled 还是 pending-->rejected 的状态都可以触发 then()
/* 优点
* 1 解决回调
* 2 解决嵌套
* 3 分离链式调用
*/
// 1. 实例化Promise
var myPromise = new Promise(function(resolve,reject) {
// body...
console.log("promise 的 创建完成 ");
setTimeout(function(){
resolve();
},3000)
});
myPromise.then(function(){
console.log("成功 回调")
})
- 怎么产生的跨域 几种解决方法 都是怎么解决的
// 浏览器的同源策略 即相同协议 端口 域名 下允许相互通信 三者有一个不同便会引起跨域问题
1.jsonp的方式，只针对于get请求
2. window.domain 在不同源中设置 相同的 window.domain 来实现跨域 但是局限于 基础域相同、协议端口都要相同
3. window.name+iframe 常用
在父页面上有个iframe嵌入了异源的html 异源的html中将数据赋值给window.name
父页面获取数据前，将iframe中的异源html替换为同源的html 此时里面的window.name 不会因为src改变而改变，所以就得到了来自异源的数据
4. CORS 服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
5. H5 中新引进的 window.postMessage()