前端初级面试题可能会问到的该问题主要想了解面试者的思维是否有局限性，实现该布局是一个比较常见并且方法很多的一种布局方式，

内容大部分转载自作者：sunshine小小倩

CSS：

怎么实现三列布局（左侧和右侧宽度固定，中间自适应）

该问题主要想了解面试者的思维是否有局限性，实现该布局是一个比较常见并且方法很多的一种布局方式，并且可以引导面试者一步一步回答 CSS 相关的基础问题。

1.绝对定位 + 中间板块不给宽度

2.两侧浮动 + 中间自动撑开（使用calc动态计算宽度，设置对应宽度的margin）

3.flex，左右设置flex-basis，中间设置flex-grow

Q1-1，设置为flex属性之后，子元素的哪些属性会失效

float，clear和vertical-align

Q1-2

移动端开发rem布局的原理（rem单位换算）

事实上 rem.js 是把屏幕等分成 20 份，每份为 1rem ， 1rem 对应的大小就是 rem基准值 ，rem.js 做的就是把 rem基准值 给<html>的 font-size ，所以如果设备的 物理像素 宽为 640px ，那么 1rem=640px/20=32px , <html>的 font-size为32px

在我们实际切图的时候，对于视觉稿上的元素尺寸换算，只需要元素的 原始的px值(即你量的大小) 除以 rem基准值 即可。例如设计稿的大小为640px， rem基准值 = 640px/20 = 32px ，有个元素的大小你量出来是 140px*286px ，那么换算过来就是：

140px = 140/32 = 4.375rem
286px = 286/32 = 8.9375rem
在实际生产当中，如果每一次计算 px 转换 rem，会非常麻烦，所以我们要用由手淘团队 @正霖开发的 px值转rem值的Sublime Text3自动完成插件 CSSREM

Q1-3：有没有自己写过组件？

可以写防抖函数，用vue立的函数式组件来实现防抖

function debounce(func,delay){

return ()=>{

if(timer!==null)cleartimeout(timer)

timer = settimerout()=>{

func},(delay)

}

Q1-4 怎么实现样式的继承和复用

可以把CSS打包成一个组件导出，在需要的地方映入

Q1-5 你平时都是怎样管理自己的css

base.css common.css page.css(对应都存放哪些内容)

Q 1-5: 你平时都是使用 sass/lass/styles 的哪些功能，sass 的计算属性对页面性能有影响吗？

参考：ecomfe.github.io/blog/revisi…

Q1-6

如何在页面上画一个圆

SVG
CANVAS
css border-radius
background
map + area
直接放一张圆形图片

Q1-6: 如果圆边界模糊，有什么办法去锯齿

这几个问题基本上可以了解到面试者平时都是怎么使用 CSS 的了，对于 CSS，我觉得够用就好，因为我们现在基本急太处理兼容性问题（有 babel 并且我们的项目不要求兼容 ie6 等古老的浏览器）
JS
Q:1-1 JS 数据类型有哪些，其中基本数据类型有哪些
Boolean
Null
Undefined
Number
String
Symbol (ECMAScript 6 新定义,表示独一无二的值)
Object

Q1-2原始数据类型和引用类型的区别

在内存中的储存方式不同，原始数据类型在内存中是栈储存，引用类型是堆储存

，栈（stack）会自动分配内存空间，它由系统自动释放；而堆（heap）则是

动态分配的内存，大小不定，也不会自动释放

Q1-3深拷贝和浅拷贝

Q: 1-4 怎么实现浅拷贝

ES6：object.assign()
展开运算符…
自己封装函数实现

Q: 1-5 怎么实现一个深拷贝

JSON.parse() (但是如果里面有 function 和 undefined 不可用)
lodash
自己封装

Q: 1-6 null和undefined的差异

相同点:

在 if判断语句中,值都默认为 false
大体上两者都是代表无,具体看差异差异:
null转为数字类型值为0,而undefined转为数字类型为 NaN(Not a Number)
undefined是代表调用一个值而该值却没有赋值,这时候默认则为undefined
null是一个很特殊的对象,最为常见的一个用法就是作为参数传入(说明该参数不是对象)
设置为null的变量或者对象会被内存收集器回收

Q3: 面向对象三大要素

封装，继承，多态

Q3-1:能够简单的说明面向对象和面向过程的区别吗

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个个依次调用就可以了。

面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描述某个事物在整个解决问题的步骤中的行为

面向对象：狗.吃(屎)
面向过程：吃.(狗,屎)

Q3-4: 怎么实现封装和继承

1. 封装封装就是把抽象出来的数据和对数据的操作封装在一起，数据被保护在内部，程序的其它部分只有通过被授权的操作(成员方法)，才能对数据进行操作。创建对象实现封装可以通过4种方式：

1. 对象字面量 {key:value,key:value…} 只能创建一次对象，复用性较差，如果要创建多个对象，代码冗余度太高

2. 内置构造函数 var obj = new Object();obj.name = “csxiaoyao”;

3. 简单工厂函数 function createObj(name,company){var obj =new Object();obj.name = name;return obj;}

4. 自定构造函数

Q3-5：什么是闭包

闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包

developer.mozilla.org/zh-CN/docs/…

一句话概述：一个持有外部环境变量的函数就是闭包

Q4: 一句话概述什么是 promise

The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn't completed yet, but is expected in the future.