乱七八糟知识点

#IIFE-立即执行函数
es6之前只有全局作用域和函数作用域，我们一般将一些需要复用的代码写在函数里面。但是由于只能通过函数来专门为一些变量等创建一个作用域，所以这些函数只会被执行一遍，由于只执行一遍，就直接写成IIFE（立即执行函数）好了，于是…
IIFE的两种比较常见的写法

(funcion foo(){
    ...//前面括起来
})();

(function foo(){
    ...//全部括起来
}())

但是有了es6可以用另一种方式代替IIFE，因为es6有了块级作用域，可以这么写

{
    ...
}

#Object.assign(目标对象，源对象)-复制对象
将源对象复制到目标对象，返回目标对象，目标对象会改变。
对象尽量一次就把属性方法写好，如果后期要加，用Object.assign()方法加。

const object1 = {
  a: 1,
  b: 2,
  c: 3
};

const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object2.d);
// expected output: 3 5

const object1 = {
  a: 1,
  b: 2,
  c: 3
};

Object.assign(object1,{c: 4, d: 5});

console.log(object1.c, object1.d);
// expected output: 4 5

#for循环在var let的不同
for (let x…)的循环在每次迭代时都为x创建新的绑定。这个改进主要是为了要解决在for语句中的闭包结构的问题。
下面的代码如果使用var，最后输出的是10。通过闭包获取内部的i=10并没有什么用，想要获取的是每一次变化的值。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。每一次循环的i其实都是一个新的变量。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

相当于

var a = [];
for (let i = 0; i < 10; i++) {
  let k=i;
  a[k] = function () {
    console.log(k);
  };
}
a[6](); // 6

JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。
#Object.freeze()-冻结对象
冻结一个对象，该对象永远不可变，返回被冻结的对象。
const定义一个常量，但是该常量是对象或者数组等的时候，还是可以增加属性或者方法等，所以可以用Object.freeze()去冻结这个对象。

const object1 = {
  property1: 42
};
//对object1 object2都是不可变的
const object2 = Object.freeze(object1);

object2.property1 = 33;
// Throws an error in strict mode

console.log(object2.property1);
// expected output: 42

注意：如果对象的属性的值是一个对象，那么该属性的值还是能够更改，因为对象和数组保存的是一个指针，所以如果要完全冻结，可以使用下面这个函数。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

#ES5和ES6中this指向不同
ES5中this指的是调用它的那个对象

{
	var factory=function(){
    	this.a='a';
        this.b='b';
        this.c={
        	a:'a+',
            b:function(){
            	return this.a
            }
        }
    }
    console.log(new factory().c.b());//a+
}

ES6中this指的是定义时的那个对象

{
	var factory=function(){
    	this.a='a';
        this.b='b';
        this.c={
        	a:'a+',
            b:()=>{
            	return this.a
            }
        }
    }
    console.log(new factory().c.b());//a
}

在ES6模块中，顶层的this指向undefined，即不应该在顶层使用this。
#SSH
SSH 为建立在应用层基础上的安全协议
#export与import
export default from ‘’;
import ‘’;

export aaa from ‘’;
import aaa from ‘’;

export {aaa,bbb};
import aaa from ‘’;
#vw、vh、vmin、vmax
vw 1vw = 视口宽度的1%
vh 1vh = 视口高度的1%
vmin 选取vw和vh中最小的那个
vmax 选取vw和vh中最大的那个
#HTML5新布局元素
##article
元素用于定义一个独立的内容区块，比如一篇文章、一篇博客、一个帖子、论坛的一段用户评论，一篇新闻消息等。article元素内可以嵌套其他元素，它可以有自己的头、尾部、主题内容。使用时要特别注意内容的独立性，一般对独立完整的内容才使用article元素，如果一段内容的话应该使用section元素
##header
用于设置一个页面的标题部分，通常会包含标题、logo、导航
##section
用来定义文章中的章节，用来定义文档中特定的区块，可视为一个区域分组元素，用来给页面上的内容分块。
##footer
通常用于设置一个页面的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式
##aside
通常用来设置侧边栏，用于定义元素之外的内容，前提是这些内容与article元素内的内容相关，同时也可作为article内部元素使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释
##nav
用来定义导航栏、目录、超链接，并非所有超链接都放在nav中，通常只把一个文档中的主导航栏放在nav中，在文章页面nav还可以用来给文字做一个目录的超链接
#用户代理
User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。
#opacity
opacity计算是根据父元素来计算的，所以尽量用rgba(0,0,0,0.09)来设置透明度。
#总结居中的方法
##水平居中
1、子元素宽度固定，父元素宽度固定。

//用margin居中
.child{
	margin-left:auto;
	margin-right:auto;
}

//用position居中，针对父元素水平居中
.parent{
	position:relative;
}
.child{
    position:absolute;
    left:50%;
    margin-left:-(width/2);
}

2、子元素宽度不确定

//利用行内元素的text-align居中。
.parent{
	text-align:center;
}
.child{
	display:inline-block;
}

##垂直居中
1、父元素高度固定

//利用line-height使得文本居中
.child{
	line-height:父元素高度；
}

//利用vertical-align使得图片居中
.child{
	line-height:父元素高度;
	vertical-align:middle;
}

//利用position居中
.parent{
	position:relative;
}
.child{
	position:absolute;
	top:50%;
	marhin-top:-width/2
}

2、父元素高度不固定

//利用table-cell
.parent{
	display:table-cell;
	vertical-align:middle;
}

三个元素同处一行，所以基线一致，所以当右边图片高度增加，文字也会改变位置。
img标签下方的空隙就是由于基线的原因产生的，其他行内元素例如span不会产生下间隙。

##水平垂直居中

#基线 顶线 底线 中线 行高的关系
参考https://www.cnblogs.com/qiangspecial/p/4126842.html
line-height是针对文本居中对于图片无效，vertical-align根据文本的基线改变位置。
设置line-height，使得文本居中，但是img会将文本的基线作为底线。
设置vertical-align则会改变对齐方式，具体看参考链接。

#空隙问题
1、右边的间隙是因为浏览器的默认行为是把行内元素间的空白字符（空格、换行、tab）渲染成一个空格。可以通过设置浮动、改变display、设置父元素font-size为0得到解决。
2、下边的间隙是因为img的默认对齐方式是文本的基线。可以通过设置父元素font-size为0（字体大小为0则没有基线一说 我猜的）、img设置浮动（浮动会打破原有基线对齐规则）、img设置display为block（不知道原因）、img设置vertical-align（改变对齐方式）。

#p标签自带margin
p标签在谷歌浏览器会自带margin:16px;
#全局作用域 函数作用域
ES5中只有全局作用域和函数作用域，没有块作用域。可以通过IIFE创造一个局部作用域。
#label标签
与break和continue联合使用。
#with语句
不推荐使用
#重载
js没有重载，因为没有函数签名（因为参数使用数组的形式传达），但是可以通过在内部做判断来模仿重载。
#值传递、引用传递

var a=0;
var b=a;
b=3；
console.log(a);
console.log(b);

假设是值传递，结果为0 3;
假设是引用传递，结果为3 3;
值传递与引用传递的区别就是，值传递之后，无论其中一个变量作了什么改变，也不会影响另一个变量，但是引用传递相反，其中一个变量改变会映射到另一个变量。
Js中都是值传递。对象传递的是内存地址，内存地址的改变不会影响原对象的内存地址，所以也是值传递。
参考链接
#确定函数内this的值
一句话，就是调用函数的那个对象。
参考资料
#标识符查找
#正则学习
#数组 字符串之间的相互转化

var arr = new Array(1,2,3,4,5);
var str = "a,b,c,d,e";
var test;
console.log(str+arr);

//数组转字符串
test = arr.join('-');
console.log(test);//1-2-3-4-5

//字符串转数组
str.split(',');
console.log(str);//[a,b,c,d,e]

#如何拷贝一个数组？
#什么是重绘、重排？
#常用的跨域的方法有哪些？（至少列出3种）
#了解javascript 的执行线程与执行队列，解释一下setTimeout里面的脚本为什么会延后执行。
#什么是事件捕获、事件冒泡（如何实现事件委托？它的好处有哪些？）
#http协议（dns查询、简单了解一下网络传输即可，若有兴趣，可了解3次握手）
#抓包、调试（charles）