天天研究困难点多了，头昏眼花的，今天来点经典面试题，这些题都是比较基础的，但是里面的做法，思想确是很深刻的。

第一题 css类：

如何用css画出圆形

.circle{
  width: 60px;
  height: 60px;
  background: green;
  border-radius: 50%;
}

这里不多解释，只要长宽相同将border-radius属性设置在50%以上就行。

如何用css画出椭圆

.circle{
  width: 100px;
  height: 60px;
  background: green;
  border-radius: 50%;
}

做圆的基础上，将长宽设置不相同将border-radius属性设置在50%以上就行。

三角形

.triangle{
  border: 100px solid transparent;
  width: 0px;
  height: 0px;
  border-bottom: 100px solid green;
}

这里三角形细讲一下：面试官问你为什么三角形是这样做的？原理是什么？

你就需要告诉她：因为盒子模型中盒子的大小包括了盒子的长宽，padding,border和margin，当我们将盒子的从长宽属性设置为0时，给的border属性的宽设置为目标三角形的长，然后需要三角形底部在哪个方向的，就将该方向的border单独添加颜色属性。因为border的每条边相互作用的效果，使得他们在重叠处会挤压出一个三角形。需要的三角形样式不同，只需要调整每条边的宽度就可以了。

梯形

.tranpezoid{
  width: 70px;
  height: 0;
  border: 100px solid transparent;
  border-bottom: 100px solid green;
}

梯形与三角形的做法相似不过你需要将三角形width的值改为，你要的梯形上底的长度。因为height属性仍然是0,border属性仍然是在单边的距离100px进行压缩了，这时候的梯形底部长应该为100+100+70=270px

扇形

.sector{
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-bottom-color: green;
  border-radius: 50%;
  transform: rotate(30deg);
}

同样的扇形的制作也是用到border属性，这里也是对相应边的border添加不同的颜色属性将它显示出来。如果你想让它改变方向，使用transform: rotate()属性让它对着中心的做顺时针旋转就好了。

第二题 js类：

定义常量

都知道在现在使用const来定义常量，但是这是因为在es6版本的JS中引入的const和let两个声明变量的关键字，拿在之前的变量声明值什么样子的呢？

var PI=3.14159216;

早期没有const常量关键字，因此早期的代码常常使用大写变量名作为相互默认的const常量标识，可以说是发展成为了一种编程习惯，因此对于在公司修改原来代码的实习生们，千万别将大写声明的变量改值，那是常量！！！虽然现在有了const常量声明关键字，但是大部分程序员仍然会将const的常量用大写表示。

定义常量的第二第三种方式（不使用const,let,var，不用闭包）

想不到除了这样定义常量还有其他方法定义常量吧？为什么要加上不用闭包呢，因为闭包主要用于封装功能和携带状态，而不是作为存储数据的主要方式。

Object.defineProperty()

这里我们使用Object.defineProperty()在mdn中我们找到Object.defineProperty()的描述

这里我们试验一下

var myObj={}
Object.defineProperty(myObj, "PI",{
value:3.1415926,
writable:false,//不可修改
configurable:false,//不可配置
})
myObj.PI=123
console.log(myObj.PI)

得到结果：

可以看到，这里再对Obj.PI修改值，它不会报错，但是也修改不成功。

Object.freeze()

接下来我们介绍另一种设置常量方式Object.freeze(在mdn中我们找到Object.freeze()的描述)

这里有一个知识点：

const obj = {
  prop: 42,
};
Object.freeze(obj);
obj.prop = 33;
console.log(obj.prop)；

这里输出的是42，因为值被冻结，无法进行修改。而当我们设置为"use strict"严格模式时：

ERROR:类型错误:无法给对象#< object >的只读属性prop赋值,所以我们看到Object.freeze()是将对象改为只可读取的方式来进行冻结。

简单题不简单的思想，当我们讲出对于这些简单题之外自己的认识，面试官内心十有八九已经在为你鼓掌了。谢谢阅读，欢迎点赞鼓励。

前端经典简单题——简单题不简单的思想，拿下面试官的初印象