字节跳动面试

**

1、什么是跨域,解释原理

**
跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。首先狭义的同源就是指,域名、协议、端口均为相同
cors

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信

简述一下简单请求和复杂请求
只要同时满足以下两大条件,就属于简单请求

1) 请求方法是以下三种方法之一:

HEAD
GET
POST
2HTTP的头信息不超出以下几种字段:

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

复杂请求
非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。

非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)

jsonp:jsonp跨域是JavaScript设计模式中的一种代理模式。在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的(从js中调用不行),所以我们可以通过这个“漏洞”来进行跨域。一般,我们可以动态的创建script标签,再去请求一个带参网址来实现跨域通信。局限是只能get请求。

为什么jsonp利用script能跨域?

script:src 是不会跨域的,所以JSONP的基本原理将一个Script节点动态插入document,随后浏览器会自动发起一个远程请求。
let script = document.createElement('script');

script.src = 'http://www.xxx.com/xxx.js?callback=callback';

document.body.appendChild(script);

function callback(res) {

  console.log(res);

}

柯里化函数实现

sum(1,2,3,4).sumof()//10
sum(1)(2)(3)(4).sumof()//10

function sum(...args){
	let parmas =args;//接受多个参数
		function sum1(){
			parmas = [...parmas,...arguments];//利用arguments接受多个参数
			return sum1
		}
		sum.toString=function(){
           return parmas.reduce((acc,item)=>{
            return acc+item
            })
           
        }
        return sum
}

css实现垂直水平居中

可以分为不定高,和定高,方法很多种,这里不赘述

vue中的data为什么返回的是一个函数,而不能是一个对象?

vue 中每一个 .vue文件都是一个组件,vue抽离成一个个单独的组件就是为了实现复用,那么问题来了,如果组件实现了复用,组件中的data数据 自然就会被复用,但我们复用组件目的可不是为了在不同页面展示相同的数据。而且假设data是Object引用数据类型,每个组件的data对象都是指向内存的同一个地址,复用组件时,一处改变了就会连累其他复用组件改变,这当然也不是我们想要的结果,所以,每个data不能指向同一个地址,
可以用简单的原型链解释

Component.prototype.data = {
    a: 1,
    b: 2,}
const component1 = new Component();
const component2 = new Component();
component1.data.a === component2.data.a; // true;证明两个实例对象都是指向同一个地址
component1.data.b = 3; //通过实例1修改,导致实例2访问到的data对象中的b发生改变,vue组件就是一个个vue实例,为了让每一个复用的vue组件都独立的展示自己的data,就注定data不能一个对象的形式存在。
component2.data.b // 3

data为函数,通过return 返回对象的拷贝,从而开辟一个新的空间地址,致使每个实例都有自己独立的对象,数据改变时也只是在自己的作用域改变,而实例之间是不会相互影响的

解释一下事件循环

记不得具体代码,大致这样,简述一下输出结果,并简述一下为什么这么输出,这里就不赘述,可以看一下阮一峰大神的事件循环讲解

	console.log('start');//1

        var intervalA = setInterval(() => {
            console.log('intervalA');//9
        }, 0);

        setTimeout(() => {
            console.log('timeout');//10

            clearInterval(intervalA);
        }, 0);

        var intervalB = setInterval(() => {
            console.log('intervalB');
        }, 0);

        var intervalC = setInterval(() => {
            console.log('intervalC');//11
        }, 0);

        new Promise((resolve, reject) => {
            console.log('promise');//2

            for (var i = 0; i < 10000; ++i) {
                i === 9999 && resolve();
            }

            console.log('promise after for-loop');//3
        }).then(() => {
            console.log('promise1');//6
        }).then(() => {
            console.log('promise2');//8

            clearInterval(intervalB);
        });

        new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('promise in timeout');//12
                resolve();
            });

            console.log('promise after timeout');//4
        }).then(() => {
            console.log('promise4');//13
        }).then(() => {
            console.log('promise5');//14

            clearInterval(intervalC);
        });

        Promise.resolve().then(() => {
            console.log('promise3');//7
        });

        console.log('end');//5
        输出顺序根据后面的序号

多重数组降为一重数组

const arr = [1, [2, [3, 4]],3,[22,1,[11,1]]];
for(var i=0;i<arr.toString().split(",").length;i++){
arrData = arrData.concat(arr.toString().split(",")[i]);
}

const flatten = function(arr) {
  let result = [];
  arr.forEach(function(item, i, arr){
    if (Array.isArray(item)) {
    result=result.concat(flatten(item)) ;
    } else {
      result.push(arr[i])
      
    }
  })

  return result;
};
console.log(flatten(arr))

持续更新中。。。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值