近日笔试小结

1，求以下代码在浏览器控制台的输出：

var foo=function(){
    var secret='secret';
    return{
        getSecret:function(){
            return secret;
        },
        newSecret:function(newval){
            secret=newval;
        }
    }
}();
console.warn(foo.getSecret());
console.warn(foo.secret);
console.warn(foo.newSecret('newSecret'));
console.warn(foo.getSecret());

这里主要不理解的是第二个输出：undefined，一开始乍一看是个RHS，在作用域找不到变量是要报ReferenceError的，但是实际上输出了undefined，因为这里是对象属性的查找，不属于作用域查找，因此就算属性不存在也不会报错，即使在严格模式下也是如此。同理，console.log(window.a);和console.log(a)也是不一样的。
然后就是控制台的字符串的输出并没有引号。
如果foo后面不加（）的话，会报TypeError的错误。

延伸问题：

《You don’t know JS》一书中有一段代码：

fun();
var a=true;
if(a){
    function fun(){
        console.log("1");
    }
}else{
    function fun(){
        console.log("2");
    }
}

按照书中的说法，这里会输出b，因为fun声明被提升到了所在作用域（作者的意思是全局作用域）的顶部；而实际上，浏览器输出的是TypeError.
这里是因为在if else语句里面的fun的“声明”其实是函数表达式，相当于var fun=function(){…}；又因为var声明会提升到当前作用域顶部，因此相当于在全局作用域顶部有一句var fun=undefined;，因此在fun()这一句执行的时候，RHS在作用域找到了变量，但是这个变量是undefined，因此报错TypeError,跟书上的结果不一样。
2，关于const：

const g={b:3};
console.log(g.b);
g.b=12;
console.log(g.b);

const一旦声明必须同时初始化；
这里会正常输出，const创建一个值的只读引用，但是不意味着它所持有的值不可变，只是变量标识符不能重新分配。因此，如果const引用的是对象，则可以改变对象的内容（比如对象的属性值，但是不能重新赋值一个对象给常量）
3，

var name='world';
(function(){
    if(typeof name==='undefined'){
        var name='shawn';
        console.log('goodbye '+name);
    }else{
        console.log('hello '+name);
    }
})();

IIFE中的函数马上执行，当时name为undefined，因此答案是goodbye shawn
4，

function func(){
    var a=b=1;
}
func();
console.log(a);
console.log(b);

这里的b是全局变量
5，

var array=[0,1,2];
var spliceArray=array.splice(0,1);
var sliceArray=array.slice(0,1);
var concatArray=array.concat("a");
console.log(array);
console.log(spliceArray);
console.log(sliceArray);
console.log(concatArray);

splice删除/添加会改变原数组长度，删除元素时返回值为删除元素组成的数组；添加元素则无返回值
slice和concat均不改变原数组，可实现数组的深拷贝；
关于深拷贝：
https://blog.youkuaiyun.com/fungleo/article/details/54931379
6，创建下拉列表

<select>
    <option>aa</option>
</select>

7，CSS选择器优先级：
class=伪类
8，HTTP

9，async function的返回值是
async返回一个Promise对象，当一个async函数没有return时，则返回：Promise.resolve(undefined);
10，

function foo(x,y,a){
    arguments[2]=0;
    alert(a);
}
foo(1,2,3);

在严格模式下：
参数的值不会随arguments对象的值的改变而变化，arguments对象会保存函数被调用时的原始参数
在正常模式下：
对arg赋值的同时会赋值给arguments[i]，反之亦然（除非没有参数或arguments[i]被删除）
因此输出为0

类似题目

function test(a,b,c){
    var a=4;
    console.log(a+b+c);
    console.log(arguments[0]+arguments[1]+arguments[2]);
}
test(1,2,3);

输出9，9
如果加了‘use strict’结果是：9，6
11，

if(!('a' in window)){
  var a=1;
}
console.log(a)

这里出现了代码提升，var a=undefined被提升到了全局作用域顶部，因此window里是有a这个属性的，只是值为undefined，if语句里面的内容就不会执行，因此a=undefined；
12，

function a(){
    alert(this);
}
a.call(null,1);

a函数的this指向全局对象，call函数并没有什么luan用，全局对象隐式转换为字符串，调用内置的toString方法，因此输出为：[object Window]
13，哪些事件不会冒泡
abort、blur/focus、error、load/unload、mouseenter/mouseleave、resize
H5 还定义了一些新事件：
media相关事件，都不冒泡
drag相关事件 dragstart 、 drag 、 dragenter 、 dragexit 、 dragleave 、 dragover 、 drop 、 dragend均冒泡
History相关事件：popstate，hashchange冒泡，pagetransition不冒泡

Event Type Bubbling phase
abort ✗
beforeinput ✔
blur ✗
click ✔
compositionstart ✔
compositionupdate ✔
compositionend ✔
dblclick ✔
error ✗
focus ✗
focusin ✔
focusout ✔
input ✔
keydown ✔
keyup ✔
load ✗
mousedown ✔
mouseenter ✗
mouseleave ✗
mousemove ✔
mouseout ✔
mouseover ✔
mouseup ✔
resize ✗
scroll ✔
select ✔
unload ✗
wheel ✔
14，哪些css属性可以被继承
不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
15，哪些是HTTP协议的请求头：
HTTP的头域包括通用头，请求头，响应头和实体头四个部分。
通用头域：请求和响应消息都支持的头域：

• 缓存头部Cache-Control、Pragma
• 信息性头部Connection、Date、Transfer-Encoding、Update、Via。

请求头域：Accept、Accept-Charset、Accept- Encoding、Accept-Language、Authorization、From、Host、If-Modified-Since、If-Match、If-None-Match、If-Range、If-Range、If-Unmodified-Since、Max-Forwards、Proxy-Authorization、Range、Referer、User-Agent。
响应头域：Age、Location、Proxy-Authenticate、Public、Retry- After、Server、Vary、Warning、WWW-Authenticate。
实体头域：关于实体的原信息包括：

• 信息性头部Allow、Location，
• 内容头部Content-Base、Content-Encoding、Content-Language、Content-Length、Content-Location、Content-MD5、Content-Range、Content-Type，

• 缓存头部Etag、Expires、Last-Modified、extension-header。
  16，哪些操作会引起回流：
  当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：

  • 添加或者删除可见的DOM元素；
  • 元素位置改变；
  • 元素尺寸改变——边距、填充、边框、宽度和高度
  • 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
  • 页面渲染初始化；
  • 浏览器窗口尺寸改变——resize事件发生时；

如何减少回流、重绘
减少回流、重绘其实就是需要减少对render tree的操作（合并多次多DOM和样式的修改），并减少对一些style信息的请求，尽量利用好浏览器的优化策略。具体方法有：

• 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）
• 让要操作的元素进行”离线处理”，处理完后一起更新
• 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
• 使用display:none技术，只引发两次回流和重绘；
• 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
• 不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存

17，跨域
https://segmentfault.com/a/1190000013977060
18，哪些元素不能设置margin-top
html元素分为内联（行内）元素、块元素、置换（替换）元素、非置换元素
内联元素：不能设置宽高，有a,b,span,strong,label
块元素：能设置宽高，有div,p,ul,ol,h123456,dl
置换元素：指用作为其他内容占位符的一个元素，有select，img，input，textarea，object
非置换元素：指内容包含在文档中的元素

外边距可以应用到行内元素，规范中是允许的，不过由于在向一个行内非替换元素应用外边距，对行高(line-height)没有任何影响。因为外边距实际上是透明的。

在一个内联非替换元素下设置margin-top/margin-bottom没有视觉效果，其原因就在于行内非替换元素的外边距不会改变一个元素的行高。而对于行内非替换元素的左右边距则不是这样，是有影响的。

而为替换元素设置的外边距会影响行高，可能会使行高增加或减少，这取决于上下外边距的值。行内替换元素的左右边距与非替换元素的左右边距的作用一样。
19，
8瓶酒一瓶有毒，用人测试。每次测试结果8小时后才会得出，而你只有8个小时的时间。问最少需要（）人测试？

本题的解题思路是二进制：
将毒酒编号为0~7，有三个人ABC根据每一个值转化的二进制：
十进制： 0 1 2 3 4 5 6 7
二进制：000 001 010 011 100 101 110 111
A和对应二进制从左往右数第一位为1的，B喝所有第二位为1的，C喝所有第三位为1的
根据ABC中毒情况还原二进制，此题得解。3人

20,

var a=1;
function f(){
  var a=2;
  eval('console.log(a)')
}
f()

eval()可以修改词法作用域，相当于在f（）内有console.log（a）。当参数是一个变量声明时，相当于在f（）内声明了该变量（在严格模式下失效）
21,javascript通过navigator.userAgent获取到的是
userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

22，css的flex属性
以前都只了解css3的display：flex，这里介绍一下：
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
父元素必须为display:flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
默认值： 0 1 auto
flex-grow为0，则存在剩余空间也不放大
flex-shrink为1，则空间不足该项目缩小
flex-basis为auto，则该项目本来的大小

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

详细请看：https://blog.youkuaiyun.com/qq_26598303/article/details/52841087
23，左边固定右边自适应
1、父元素relative，左边absolute，右边marginleft。
2、父元素overflowhidden，左边floatleft，右边marginleft。
3、父元素display:flex，左边flex：0 0 100px；（等高布局，如果不想等高就align-items：flex-start）
4、父元素display:grid,grid-template-columns:100px auto;align-item:start，左边grid-column:1，右边grid-column:2

关于grid布局详细请看：
https://segmentfault.com/a/1190000008299555#articleHeader27

24，跨域
https://segmentfault.com/a/1190000013977060

25，sort()排序

arr.sort(function(){
    return a-b;
});

26，实现核辐射警告标志（一个大圆里有6个60度角的扇形）：canvas

//html
<div id="warning">
   <canvas id="canvas" width="200" height="200"></canvas>
</div>

//css：
html,body {
  width: 100%;
  height: 100%;
}
#warning {
  position: relative;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:200px;
  height:200px;
} 
#canvas {
  position: absolute;
  display:block;
}
//script
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function paint() {
  ctx.beginPath();
  ctx.fillStyle = '#FDCD01';
  ctx.arc(100, 100, 100, 0, 2 * Math.PI, false);
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.fillStyle = '#000';
  ctx.arc(100, 100, 100,-1/6*2* Math.PI,0, false);
  ctx.arc(100, 100, 0, 1.82 * Math.PI, .18 * Math.PI, false);
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.fillStyle = '#000';
  ctx.arc(100, 100, 100, 1/6*2* Math.PI, 1/3*2* Math.PI, false);
  ctx.arc(100, 100, 0, 0.52 * Math.PI, .89 * Math.PI, false);
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.fillStyle = '#000';
  ctx.arc(100, 100, 100, Math.PI,-2/3 * Math.PI, false);
  ctx.arc(100, 100, 0, 1.18 * Math.PI, 2/3 * Math.PI, false);
  ctx.fill();
  ctx.closePath();
}
paint();