(1) 请谈谈对 px,em,rem,vh,wh 等单位的理解. 你还用过哪些单位.
px, 如果显示器屏幕分辨率相同则可看做是绝对单位, 如果显示器屏幕分辨率不同则相对于显示器屏幕分辨率.
em, 相对于该元素 font-size 属性值, 由于 font-size 是可继承属性, 因此如果该元素未被显式设置 font-size 属性值, 则会继承该元素的父元素的 font-size 值, 如果该元素的父元素也未显式设置 font-size 属性值... ... 最终继承自根元素 (html 元素), 如果根元素也没有被显示设置 font-size 属性值, 则使用用户代理默认的 font-size 属性值.
rem,root em, 是 CSS3 新增的一个相对单位, 与 em 的区别在于: 使用 rem 为元素设置 font-size 属性值时, 仅相对于根元素 (HTML 元素).
vh,viewpoint height, 视窗高度, 1vh 等于视窗高度的 1%.
vw,viewpoint width, 视窗宽度, 1vw 等于视窗宽度的 1%.
(2) 以下程序输出的结果是什么? 说出你的理由.
- var length = 10;
- function fn() {
- console.log(this.length);
- }
- var obj = {
- length: 5,
- method: function(fn) {
- fn();
- arguments[0]();
- }
- }
- obj.method(fn);
答案: 控制台分别输出 10 和 1.
将题目更改为:
- var length = 10;
- const fn = () => {
- console.log(this.length);
- }
- var obj = {
- length: 5,
- method: function(fn) {
- fn();
- arguments[0]();
- }
- }
- obj.method(fn);
则控制台分别输出 10 和 10.
本题共涉及 3 种情况下的 this 指向:
1, 对象调用方法时, 方法中的 this 指向调用该方法的对象.
2, 执行自由函数时, 严格模式下函数中的 this 为 undefined, 非严格模式下为宿主对象 (浏览器中的 window).
3,S6 中箭头函数中的 this 指向由词法作用域规定.
本题中, 输出 "10" 符合第 2 种情况, 输出 "1" 符合第 1 种情况.
知识延伸:
js 中的原始值, 引用值
(3) 请分别写出下方两则代码片段执行后的输出结果.
- var a = [];
- for (var i = 0; i <10; i++) {
- a[i] = function () {
- console.log(i);
- };
- }
- a[6]();
- let a = [];
- for (let i = 0; i < 10; i++) {
- a[i] = () => {
- console.log(i);
- };
- }
- a[6]();
分别输出 10 和 6.
知识延伸:
作用域, 作用域链.
ES6 块级作用域
(4) 请解释 cookie,sessionStorage 和 localStorage 三者的区别.
三者都受同源策略的制约.
客户端向服务端发送请求时和服务端向客户端发送响应时, cookie 会已请求头, 响应头的形式在客户端, 服务端流动; cookie 数据有大小限制, 不能超过 5KB;cookie 期限可配置; 常用于识别用户身份, 记录用户浏览信息等情况.
sessionStorage 和 localStorage 存储于客户端, HTML5 新标准中的 API, 不会随请求主动发往服务端, 此两者的可用存储空间在理论上未设上限, 由用户代理规定存储空间上限,.
sessionStorage 为会话存储, 理论上存储的数据有期限, 与标签页生命周期一致, 刷新不会丢失, 部分浏览器有恢复上一次关闭的标签功能, 亦会恢复会话时存储的数据.
localStorage 理论上在用户不主动清除浏览器缓存时会永久存储在本地, 理论上存储的数据无期限.
(5) 请在下方代表浏览器窗口的黑色矩形中绘制出下方 HTML/CSS 代码片段在浏览器中渲染后的样子. 并再写出至少一种常用的定位方式.
- <style>
- .box {
- width:100px;
- height:100px;
- border: 1px solid #111;
- }
- .box:first-child {
- position: relative;
- left: 50px;
- top: 50px;
- }
- .box:nth-child(3) {
- position: fixed;
- right: 0;
- top: 0;
- }
- </style>
- <div class="box"></div>
- <div class="box"></div>
- <div class="box"></div>
- <div class="box"></div>
考察:
1,relative,absolute,fixed3 种定位方式中各自的 top,right,bottom,left 属性是相对于谁定位, 它们各自是否脱离文档流.
2, 块级元素独占一行
(6) 请按顺序写出执行下方代码后控制台的输入结果.
- function fn(cb) {
- setTimeout(function () {
- cb(a);
- console.log('print:', b);
- }, 0)
- var b = a,
- a = 2;
- console.log('print:', a);
- return
- }
- var a = 3;
- var foo = function(arg){
- console.log('print:', arg);
- }
- fn(foo);
- console.log('print:', a);
控制台输出结果:
- print: 2
- print: 3
- print: 2
- print: undefined
考察:
理解变量声明表达式, 变量赋值语句, 函数声明语句.
了解 javascript 单线程, 理解事件循环队列运作机制, 了解过 Promise 类结果事件回调冲突.
作用域, 作用域链, 闭包, 高阶函数.
了解哪些情况会导致内存泄漏, 如何规避泄漏的发生.
(7) 请阅读下方未完成的 HTML/JS 代码片段:
- <body>
- <aside></aside>
- <main>
- <div>
- <a id="XUELI" href="http://www.edu2act.net/"> 雪梨教育 </a>
- </div>
- </main>
- </body>
- <script>
- var button = document.getElementById('XUELI');
- document.addEventListener('click', function () {
- console.log('雪');
- });
- document.addEventListener('click', function () {
- console.log('提升品牌影响力');
- });
- document.getElementsByTagName('main')[0].addEventListener('click', function(){
- });
- button.addEventListener('click', function(){
- });
- </script>
请补全上方 JS 代码中 10 处 (你认为有必要补全的位置). 要求用户单击 "雪梨教育" 超链接后, 控制台共输出 3 次, 每次输出内容如下:
雪 梨 教育
(8) 请谈一谈前端同源策略. 请写出你知道的解决同源策略限制的方法.
协议相同 (TCP/IP,HTTP,HTTPS,FTP 等不同协议)
域名相同 ( http://www.shuaihua.cc ,shuaihua.cc 等不同级别域名)
端口相同 (80,8080,3000,443 等不同端口号)
Cookie,LocalStorage 和 IndexDB 无法读取.
DOM 无法获得.
AJAX 请求不能发送.
1, 浏览器允许使用 document.domain 共享 Cookie.
2, 父窗口可以把信息, 写入子窗口的片段标识符 (URL 的 #号后面的部分), 子窗口可以通过 hashchange 事件读取 # 后的数据, 从而实现跨域资源共享.
3, 浏览器窗口有 window.name 属性. 这个属性的最大特点是, 无论是否同源, 只要在同一个窗口里, 前一个网页设置了这个属性, 后一个网页可以读取它.
4,HTML5 为了解决这个问题, 引入了一个全新的 API: 跨文档通信 API(Cross-document messaging), 使用 window.postMessage 方法, 允许跨窗口通信, 不论这两个窗口是否同源.
5,JSONP,websocket,CORS
(9) 请用使用 HTML 和 CSS 实现一个自适应的正方形.
代码片段字迹清晰, 易读, 使用何种背景色值.
避免使用内联样式; 了解内联样式, 内部样式, 外联样式; 对样式规则优先级了解程度.
如果元素的 padding 或 margin 值是百分比值, 那么该元素最终计算值是根据父元素的宽度来的.
伪元素及如何使用.
分得请伪类和伪元素.
垂直外边距重叠行为, 产生原因, 意义以及如何解决 (考察是否了解 BFC).
对一个问题能提出多种解决方案.
方法 1:
- <style>
- .box{
- width: 50%;
- padding-top: 50%;
- background-color: black;
- }
- </style>
- <div class="box"></div>
方法 2:
- <style>
- .box{
- width:50%;
- background-color: black;
- overflow: hidden;
- }
- .inner{
- margin-top: 100%;
- }
- </style>
- <div class="box">
- <div class="inner"></div>
- </div>
方法 3:
- <style>
- .box{
- width:50%;
- background-color: black;
- }
- .box:before{
- content: '';
- padding-top: 100%;
- display: block;
- }
- </style>
- <div class="box"></div>
方法 4: 局限性, 只能相对于视窗.
- <style>
- .box {
- width: 50%;
- height: 50vw;
- background: red;
- }
- </style>
- <div class="box"></div>
(10) 故意出一道题干本身存在问题的题目, 考察应试者是否有敢于提出质疑, 对知识有大破砂锅问到底的韧劲, 对问题有独到见解和直舒己见开门见山的直爽性格.
(11) 请用 JavaScript 实现一个函数, 其接受一个可能包含嵌套的数组, 返回一个展开的数组.
var arr = [1, [2, [3, 4]]];
方法 1: 递归
- function flatten(arr){
- var res = [];
- for(var i=0;i<arr.length;i++){
- if(Array.isArray(arr[i])){
- res = res.concat(flatten(arr[i]));
- }else{
- res.push(arr[i]);
- }
- }
- return res;
- }
方法 2:reduce
- function flatten(arr){
- return arr.reduce(function(prev,item){
- return prev.concat(Array.isArray(item)?flatten(item):item);
- },[]);
- }
来源: https://juejin.im/entry/5aeab44751882567147d36a0