前端面试题摘录

Q：什么情况下会碰到跨域问题？有哪些解决方法？

• 跨域问题是这是浏览器为了安全实施的同源策略导致的，同源策略限制了来自不同源的document、脚本，同源的意思就是两个URL的域名、协议、端口要完全相同。
• script标签jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端在头部信息设置安全域名、后端在服务器上设置cors。

Q：如何判断一个变量是对象还是数组？

判断数组和对象分别都有好几种方法，其中用Object.prototype.toString.call()兼容性最好。

function isObjArr(value){
     if (Object.prototype.toString.call(value) === "[object Array]") {
            console.log('value是数组');
       }else if(Object.prototype.toString.call(value)==='[object Object]'){//这个方法兼容性好一点
            console.log('value是对象');
      }else{
          console.log('value不是数组也不是对象')
      }
}

ps：千万不能使用typeof来判断对象和数组，因为这两种类型都会返回"object"。

Q：html中title属性和alt属性的区别？

• alt是图片未正常加载显示的信息，当图片正常输出时，鼠标放上去显示tittle信息，alt信息不显示
• 当图片未正常加载时，显示alt信息，鼠标放上去显示tittle信息；

1.<img src="#" alt="alt信息" />
//1.当图片不输出信息的时候，会显示alt信息 鼠标放上去没有信息，当图片正常读取，不会出现alt信息
2.<img src="#" alt="alt信息" title="title信息" />
// 2.当图片不输出信息的时候，会显示alt信息 鼠标放上去会出现title信息
//当图片正常输出的时候，不会出现alt信息，鼠标放上去会出现title信息

Q：标准盒子模型和IE盒子模型的区别？

标准盒子模型的高度 = content；
IE盒子模型的高度 = content+padding + border;

Q:翻转一个字符串

var str = "hello zaron";
var rev = str.split('').reverse().join('');
console.log(rev);//noraz olleh

Q：垂直居中有哪些方法？

• 单行文本的话可以使用height和line-height设置同一高度。
• position+margin：设置父元素:position: relative;，子元素height: 100px; position:absolute;top: 50%; margin: -50px 0 0 0;（定高）
• position+transform：设置父元素position:relative,子元素：position: absolute;top: 50%;transform: translate(0, -50%);（不定高）
• 百搭flex布局(ie10+)，设置父元素display:flex;align-items: center;（不定高）

Q:如何对一个数组去重？

• 1.Set结构去重。
  这是ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

let unique= [...new Set(array)];
//es6 Set数据结构类似于数组，成员值是唯一的，有重复的值会自动去重。
//Set内部使用===来判断是否相等，类似'1'和1会两个都保存，NaN和NaN只会保存一个

• 2.遍历，将值添加到新数组，用indexOf()判断值是否存在，已存在就不添加，达到去重效果。

let a = ['1','2','3',1,NaN,NaN,undefined,undefined,null,null, 'a','b','b'];
    let unique= arr =>{
         let newA=[];
        arr.forEach(key => {
           if( newA.indexOf(key)<0 ){ //遍历newA是否存在key，如果存在key会大于0就跳过push的那一步
             newA.push(key);
           }
        });
        return newA;
    }
    console.log(unique(a)) ;//["1", "2", "3", 1, NaN, NaN, undefined, null, "a", "b"]

indexOf()这个方法不能区分NaN

---

作者：OBKoro1
链接：https://juejin.im/post/5aad40e4f265da237f1e12ed
来源：掘金