基础前端面试题

CSS篇

1.CSS 盒子模型，绝对定位和相对定位

css盒模型有两种，一种是标准盒模型 一种是怪异盒子模型

1.box-sizing: content-box; // width = content + padding + border
2.box-sizing: border-box;  // width = 定义时的宽度(包含padding + border)

2.绝对定位和相对定位

绝对定位： position: absolute; // 使元素脱离文档流，绝对定位的参照物是最近的已经定位的的元素
相对定位： position: relative; 

3. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

(1) 给父级定义具体的height
(2) 在标签尾部增加空的 div标签 (style="clear: both;")
(3) 在父级元素增加 :after伪类 <div class="parent"></div>

.parent:after {
        display: block;
        clear: both;
        content: '';
        visibilty: hidden;
        height: 0;
    }
    .parent {
        zoom: 1; //兼容IE5一下的版本
    }

(4) 给父级标签定义overflow: hidden || auto;

4.如何保持浮层水平垂直居中　

(1) 知道父级元素的高度
    父元素定位 position: relative;

   .class {
        position: absolute;
        htight: 200px;
         100px;
        left: 50%;
        top: 50%;
        margin: -100px 0 0 -50px;
   }

(2) flex布局

    .class {
      display: flex;
      justify-content: center;
      align-items: center;
   }

(3) 使用绝对定位以及transform

   .class {
       position: absolute;
       height: 200px;
        100px;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

5.行内元素（display: inline）块级元素（display: block） 融合行内于块级（display: inline-block）　　

    display: inline -->  宽度和高度由元素的内容决定，与其他元素共占一行，
        例如<span> <i> <a> ,可以使用padding上下左右都有效，margin只有left、right有效
    
    display: block  -->  默认宽度由父容器决定，高度由内容决定，独占一行且可以设置宽高， 
        例如 <div> <p> <ul>，padding、margin无论上校左右都有效
    
    display: inline-block --> 可以是两个块级元素在同一行水平排列，padding、margin都有效，
        inline-block存在间隙问题，解决方案：父元素设置font-szie: 0px;
    
    void(空元素) <br> <link> <meta>

6.css隐藏元素的方法，以及区别　　

1. visibility: hidden; 文档流中的位置依然存在，只是被隐藏掉
2. display: none;      文档流中的位置不存在
3. opacity: 0;         使元素的透明度变为透明，文档流中的位置依然存在
4. position: absolute; margin-top: -9999px; margin-left: -9999px;      
    使用绝对定位使元素被推离出可视区，达到隐藏元素的目的

7.css中link和@import的区别

1. link使html的标签元素，而@import是css提供的
2. 在页面加载时，link是同时加载的，而@import引用的css是当页面加载完成以后，才会加载
3. 兼容问题：link无兼容问题，而@import不兼容IE5一下的版本

8.position的absolute和fixed之间的共同点与区别

1. 共同点：（1）都会把元素设置为display：inline-block
            (2) 让元素脱离文档流，不占据空间
            (3) 默认会覆盖非定位元素上
2. 不同点： (1) absolute的“根元素”是可以设置的，是离他最近的已定位的元素；而fixed的“根元素”不可设置，
    永远都是浏览器窗口，当浏览器滚动的时候，使用了fixed布局的不会随着浏览器滚动而改变位置

9.css3有哪些新特性

1. 圆角：border-radius  阴影：box-shadow
2. 文字特效：text-shadow, 线性渐变：gradient 旋转：transform
3. 旋转：transform: rotate(90deg)  scale(0.85, 0.90)  translate(0px,-30px)  skew(-9deg,0deg); 
    // 旋转； 缩放； 偏移； 倾斜
4. 多背景：rgba
5. 在CSS3中唯一引入的伪类是 ::selection.
6. 媒体查询，多栏布局
7. border-image 

10.css初始化样式---选择淘宝初始化样式

11.HTML与XHTML有什么区别

1. XHTML元素必须被正确的嵌套
2. XHTML元素必须被关闭
3. 标签名必须用小写字母
4. XHTML必须含有根元素

12.多行文本的省略号问题

overflow: hidden;
text-overflow: elipsis;
display: -webkit-box;
-webkir-line-camp: 3;
-webkit-box-orient: vertical;

13.使用css画出一个三角形

<div class="text"></div>
.text {
    content: '';
    border- 10px 0 10px 20px;
    broder-style: solid;
    border-color: transpaent transpaent transpaent #f5f5f5;
}

JS篇

1.JavaScript数据类型， null 和 undefined，原始数据类型，引用数据类型

数据类型： null number string boolean function object
null 指的是用来表示尚未存在的对象  
（1）作为函数的参数，表示函数的参数不是一个对象 
（2）用来表示原型链的终点
原始数据类型：null number string boolean symbol  引用数据类型：Object(array function date)
1表示我定义的number类型,而number(1)则表示我定义的一个函数（方法）

2.讲一下 prototype 是什么东西，原型链的理解，什么时候用 prototype

prototype是函数对象上预设的对象属性
（1）js中所有的东西都是对象，每个对象都有一个prototype属性，这个属性是一个对象（object）
（2）JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype
原型: 指的是一个对象上面的原型，这个原型通常是它的构造器的prototype属性
什么时候用 prototype
使用prototype的好处是不会额外产生内存，所有实例化后的对象都会从原型上继承这个方法。
也就是需要一个子类拥有父类的某些特性（同种特性可以覆盖），又可以添加自己的特性，而不会影响父类时候使用prototype。　　

3.函数里的this什么含义，什么情况下，怎么用。箭头函数呢

普通函数：随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this
    指的是，调用函数的那个对象。
箭头函数：this的作用域指的是定义的时候的对象　　

4.apply和 call 什么含义，什么区别?什么时候用

add.call(o,5,7);    //1+3+5+7=16
//call 传参的时候是扁平的把每个参数传进去
add.apply(o,[10,20]);   //1+3+10+20=34
//apply 传参的时候是把参数作为一个数组传进去

5.怎样避免全局变量污染?ES5严格模式的作用，ES6箭头函数和ES5普通函数一样吗?

尽量使用let来定义变量，防治全局变量污染， 
es6中的箭头函数的 this 指的是定义时的对象，是固定的， 
而普通函数的this的指向时调用函数时的对象，是可以改变的
复制代码　　

6.描叙一下事件流

事件流分为两种，一种是捕获事件流，一种是冒泡事件流
捕获：是从根节点开始执行，一直往子节点查找执行，知道查找到执行节点
冒泡：是从目标节点开始执行，一直往父节点冒泡查找，知道查到根节点，
        用e.stopPropagation() 可以阻止事件冒泡　　

7.简单实现双向绑定mvvm

<input id="input" />

//    const data = {}
//    const input = document.getElementById('input')
//    Object.defineProperty(data, 'text', {
//      set(value) {
//        input.value = value
//        this.value = value
//      }
//    })
//    input.onchange = function(e) {
//      data.text = e.target.value
//    }  　

8.理解闭包吗?请讲一讲闭包在实际开发中的作用;闭包建议频繁使用吗?

闭包就是在函数中的局部变量，在函数返回的时候不会被释放掉，依然暴露在外面可以被其他函数调用
当在一个函数内定义另外一个函数就会产生闭包　　

9. ajax 跨域有哪些方法，jsonp 的原理是什么，如果页面编码和被请求的资源编码不一致如何处理?

ajax指的是： 异步的javascrupt adn XML,可以实现异步的数据交互，实现局部刷新；
json指的是： 轻量级的数据交互格式，本质是字符串； 优点：轻量级，易于人的编写和阅读，便于js解析，支持复合数据类型
ajax跨域的交互流程：
（1）创建ajax对象 xhr = new XMLHttpRequest
(2) 规定请求地址 xhr.open(method, url, async)
(3) 等待服务器响应 xhr.onload()
(4) 发送请求 xhr.send()
ajax 中的readyState
readyState用来存放XMLHttpRequest的状态，监听从0-4发生不同的变化
0 -- 请求未初始化（此时还没有调用open）
1 -- 链接已建立，正在监听发送请求
2 -- 完成请求，并拿到返回数据
3 -- 请求处理中，解析服务器响应内容
4 -- 请求已完成，且响应就绪　

10.javascript的同源策略

这是javascript的一种安全协议，为了方式某个脚本从不同的源装载,同源指的是：同端口号、同协议、同域名，这样子才能相互发送ajax请求　　

11.如何解决跨域问题？

跨域指的是  不同的端口号、不同的域名、不同的协议

（1）使用 jsonp（json + padding）把数据内填充起来，来解决跨域的问题

（2）使用 cors（跨域资源共享），可以在后端上配置可跨域

（3）使用服务器代理来实现跨域　　

12.jsonp 实现跨域的原理

ajax受同源策略的影响，不允许使用跨域请求，但是javascript中的 <script>标签中的src属性是可以用来访问异域的js脚本的,利用这个特性，服务端不再返回json格式的数据，而是返回了调用了某个函数的js代码，这样子就实现了跨域

13.reduce对象去重

let temp = {}
data = data.reduce((prev, curv) => {
    if(temp[curv.name]) {
        
    } else {
        temp[curv.name] = true
        prev.push(curv)
    }
    return prev
})

14.提取url中携带的参数

var url = 'https://juejin.im/search?query=%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%
        98&type=all';
function splitUrl () {
    let url1 = url.split('?')[1] //获取url中问号后面的数据
    let url2 = url1.spliy('&') // 以&来分割数组
    let url3 = []
    url2.forEach(item => {
        url3.push(item.split('=')[1])
    })
    return url3
}

15.防抖函数debounce(在固定时间内只执行一次，若在固定时间内再次触发，则重新计算时间)

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
*/
function debounce(func, wait, immediate) {
    let timeout;
    return function () {
        let context = this
        let args = arguments
        if (immediate) {
            var callNow = !timeout
            timeout = setTimeout(() => {
                timeout = null
            }, wait)
            if (callNow) {
                func.apply(context, wait)
            }
        } else {
            timeout = setTimeout(() => {
                func.apply(context. args)
            }, wait)
        }
    }
}

16.节流函数(在固定时间内无论触发多少次，只执行一次)

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
*/
function throttle(func, wait) {
    let timeout;
    return function () {
        let context = this
        let args = arguments
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null
                func.apply(context, args)
            }, wait)
        }
    }
}

17.js中DOM操作

1. 创建新节点
  (1) createDocumentFragment() //创建一个DOM片段
  (2) createElement() // 创建一个具体的元素
  (3) createTextNode() // 创建一个文本节点

2. 添加、移除、替换、插入
  (1) appendChild() // 创建一个节点
  (2) removeChild() // 移除一个节点
  (3) replaceChild() // 替换一个节点
  (4) insertBefore() // 在已有的节点前增加一个节点

3. 查找
  (1) document.getElementsByTagName() // 通过标签名称查找
  (2) document.getElementsByName() // 通过元素的name属性的值
  (3) document.getElementById() // 通过元素Id,唯一性

18.如何实现浏览器内多个标签页之间的通信?

(1)localStorage // 本地存储 (2)sessionStorage // 会话存储
共同点：
    (1) localStorage和sessionStorage的存储数据大小一般都是：5MB
    (2) localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信
不同点：
    (1) localStorage不会随着浏览器关闭而消失，而sessionStorage会随着浏览器关闭而消失
复制代码

19.document.write和innerHTML的区别

document.write会重绘整个页面， 而innerHTML只会更新页面的一部分

20. var let const

var 定义的是一个全局作用域的变量
let 定义的是局部作用域的变量，在相同作用域下不可重复定义同名变量
const 定义的是一个常量. 注意：当使用const定义一个对象的时候，对象内的值是可以修改的，因为该对象的内存地址并未发生改变，所以改变对象内的值的时候就不会报错

作者：上学威龙
链接：https://juejin.im/post/5dda0026518825732c76495d