面试题总结

一、谈谈bfc？

一、什么是BFC 
BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫做 Flow Root）

二、 形成 BFC 的条件 
1、浮动元素，float 除 none 以外的值； 
2、绝对定位元素，position（absolute，fixed）； 
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions； 
4、overflow 除了 visible 以外的值（hidden，auto，scroll）

三、BFC常见作用 
1、包含浮动元素 
问题案例：高度塌陷问题：在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合。这时就可以用bfc来清除浮动了。 

2、不被浮动元素覆盖 
问题案例： div浮动兄弟遮盖问题：由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden，触发bfc来解决遮挡问题。 

3、 BFC 会阻止外边距折叠 
问题案例：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。 

二、跨域携带的cookie如何设置？

方法一：服务器端使用CROS协议解决跨域访问数据问题
1.1 resp.setHeader("Access-Control-Allow-Origin", origin);            // 允许指定域访问跨域资源
1.2 resp.setHeader("Access-Control-Allow-Credentials", "true");      
 // 允许客户端携带跨域cookie，此时origin值不能为“*”，只能为指定单一域名




方法二：客户端需要设置Ajax请求属性withCredentials=true，让Ajax请求都带上Cookie。


2.1 对于XMLHttpRequest的Ajax请求.
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.withCredentials = true; // 携带跨域cookie
xhr.send();


2.2 对于JQuery的Ajax请求


$.ajax({
type: "GET",
url: url,
xhrFields: {
    withCredentials: true // 携带跨域cookie
},
processData: false,
success: function(data) {
    console.log(data);  
}
});


2.3 对于axios的Ajax请求


axios.defaults.withCredentials=true; // 让ajax携带cookie

意思就是该属性是一个用来配置xhr对象的键值对，比如你可以在跨域请求有需要的时候设置withCredentials:true

　　那么withCredentials:true是什么意思？

　　该属性是告诉浏览器，1、允许创建来自不同域的cookie信息；2、每次的跨域请求都允许带上该cookie信息

　　该配置项还需要后台的允许才有效，后台如果允许浏览器发送带凭据的请求，那么会在响应头中带上"Access-Control-ALLOW-Credentials",值为"true"。

　　如果不加此响应头，浏览器将获取不到服务端的响应体。

　　好了，到此我们已经知道怎么跨域创建cookies,并在每次的跨域请求中带上cookies了,简单的说就是前台要配置一个ajax参数：xhrFields:{withCredentials:true}，有的资料上说还要设置crossDomain:true,但是笔者测试好像不需要；后台要在响应头中绑定"Access-Control-ALLOW-Credentials",值为"true"。

前端和后端都需要设置 Credentials, 后端如果是 PHP 的话是设置 header("Access-Control-Allow-Credentials: true");

 cookie一般情况下是没法跨域的，甚至POST请求一般情况下都是无法跨域的。但经过特殊处理后就可以了，这个处理需要客户端服务器的配合。

        一些请求可以通过jsonp的方式来实现跨域，但如果是非幂等的请求，还是需要POST的。处理如下：

服务器端设置：

[plain]  view plain  copy

1. header("Access-Control-Allow-Credentials: true");  
2.   
3. header("Access-Control-Allow-Origin: http://www.xxx.com");  

客户端请求的时候带上withCredentials参数，代码如下：

原生ajax：

[javascript]  view plain  copy

1. var xhr = new XMLHttpRequest();    
2. xhr.open("POST", "http://xxxx.com/demo/b/index.php", true);    
3. xhr.withCredentials = true; //支持跨域发送cookies  
4. xhr.send();  

jquery ajax：

[javascript]  view plain  copy

1.  $.ajax({  
2.      type: "POST",  
3.      url: "http://xxx.com/api/test",  
4.      dataType: 'jsonp',  
5.      xhrFields: {  
6.           withCredentials: true  
7.      },  
8.      crossDomain: true,  
9.      success:function(){},  
10.      error:function(){}  
11. })  

三、vue中更新data中的数组如何响应？

vue的核心是数据与视图的双向绑定，改变数组触发视图更新（push（最后添加）pop（删最后一个）shift（删第一个）unshift（开头添加）splice（删除  删几个 添加几个）sort（排序）reverse（颠倒顺序）    slice（返回选定元素（开始 结束））vue、数组更新那，有时候你用push，你会发现，数据已经改变，但是dom结构上却没有更新，所有一般还是使用$set（）和object.assign（））

vue中data数组的更新，需要使用vm.assgin（{}，arr,{新增的属性}）;
let _this = this;
        for(let i=0; i<_this.list.length; i++){  //list为列表信息,就不附上了，下同
            _this.a[i] = Object.assign({}, _this.a[i], true);
        }
        _this.a = Object.assign({}, _this.a);
或者直接使用this.$set(arr,item,value);
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2.当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新，例如：
Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
解决第二类：
example1.items.splice(newLength)

 四、几个promise顺序执行，如果是数组呢？（这个百度都没百度到  可能根据自己的理解吧  .all .then async 和 await）

###promise异步执行转同步执行,每次promise都需要return一个新的promise
var a = function() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log('a')
            resolve('a')
        }, 1000)
    })
}


var b = function(data) {
    return new Promise(function(resolve, reject) {
        console.log('b')
        resolve(data +'b')
    })
}


var c = function(data) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log('c')
            resolve(data +'c')
        }, 500)
    })
}




//链式调用
a()
.then(function(data) {
    return b(data)
})
.then(function(data) {
    return c(data)
})
.then(function(data) {
    console.log(data)// abc
})
.catch(function(e) {
    console.log(data)
})


方法二  如果是数组，(使用组织函数队列)


// 组织函数队列
function reduce(arr) {
    var sequence = Promise.resolve()


    arr.forEach(function(item) {
        sequence = sequence.then(item)
    })


    return sequence
}


// 顺序执行函数队列
reduce([a, b, c])
.then(function(data) {
    console.log(data)// abc
})
.catch(function(e) { 
    console.log(e)

})