前端容易忽略的小点

一、基本语法(es5)

1、语句和表达式的区别

前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。

let a = 1 + 3；// 这一整行表示一个语句 ，并且一行中可以存在多个语句，一条语句以；结束。 
// 而后面的1 + 3 是一个表达式

2、使用var等关键字定义的变量和不使用关健字定义的变量的区别

let a = 1
b = 2
// a和b的区别  从某种程度上讲 都能用  区别在于 delete 不能删除 a
// 因为delete可以删除 windows.b

3、switch 语句中的case是执行 === 判断而不是 == 所以需要注意类型

switch (x) {
  case true:
    console.log('x发生类型转换');
  default:
    console.log('x没有发生类型转换');
}
// x没有发生类型转换

二、运算

1、使用“异或运算”可以在不引入临时变量的前提下，互换两个变量的值

var a = 10;
var b = 99;

a ^= b, b ^= a, a ^= b;

a // 99
b // 10

es6中解构赋值也能快速互换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

三、对象

1、Number()和toString()转换规则

（1）Number()方法触发的对象转换
调用对象自身的valueOf方法。如果返回原始类型的值，则直接对该值使用Number函数，不再进行后续步骤。
如果valueOf方法返回的还是对象，则改为调用对象自身的toString方法。如果返回原始类型的值，则对该值使用Number函数，不再进行后续步骤。

如果toString方法返回的是对象，就报错。

if (typeof obj.valueOf() === 'object') {
  Number(obj.toString());
} else {
  Number(obj.valueOf());
}

（2）String()方法触发的对象转换
与Number方法基本相同，只是互换了valueOf方法和toString方法的执行顺序。
先调用对象自身的toString方法。如果返回原始类型的值，则对该值使用String函数，不再进行以下步骤。

如果toString方法返回的是对象，再调用valueOf方法。如果返回原始类型的值，则对该值使用String函数，不再进行以下步骤。

如果valueOf方法返回的是对象，就报错。

2、console对象少用但是很有效的方法

（1）dir:该方法对于输出DOM对象非常有用，因为会显示DOM对象的所有属性

console.dir(document.body)

(2)conut:count方法用于计数，输出它被调用了多少次。

3、包装对象

所谓“包装对象”，就是分别与数值、字符串、布尔值相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。

var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);

（1）new Boolean(false) 是等于true的

if (new Boolean(false)) {
  console.log('true');
} // true

if (new Boolean(false).valueOf()) {
  console.log('true');
} // 无输出

上面代码的第一个例子之所以得到true，是因为false对应的包装对象实例是一个对象，进行逻辑运算时，被自动转化成布尔值true（因为所有对象对应的布尔值都是true）。而实例的valueOf方法，则返回实例对应的原始值，本例为false。

4、XMLHttpRequest对象

(1).open参数

oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

/* bstrUrl
请求的URL地址，可以为绝对地址也可以为相对地址。
varAsync[可选]
布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
bstrUser[可选]
如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
bstrPassword[可选]
验证信息中的密码部分，如果用户名为空，则此值将被忽略。
*/

四、es6小计

1、let声明的变量不存在“变量提升”现象。

console.log(x); // undefined
let x = 10;

六、DOM

1、location

// 优先从服务器重新加载
document.location.reload(true)
// 优先从本地缓存重新加载（默认值）
document.location.reload(false)

2、script defer属性和async属性到底应该使用哪一个？

一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。

五、CSS&HTML

1、margin折叠

. margin 折叠元素只发生在块元素上；
. 浮动元素不与其他元素 margin 折叠
. 定义了属性overflow且值不为visible（即创建了新的块级格式化上下文）的块元素，不与它的子元素发生margin 折叠
. 绝对定位元素的 margin 不与任何 margin 发生折叠
. 特殊：根元素的 margin 不与其它任何 margin 发生折叠
. 如果常规流中的一个块元素没有 border-top、padding-top，且其第一个浮动的块级子元素没有间隙，则该元素的上外边距会与其常规流中的第一个块级子元素的上外边距折叠
. 如果一个元素的 min-height 属性为0，且没有上或下边框以及上或下内边距，且 height 为0或者 auto，且不包含行框，且其属于常规流的所有孩子的外边距都折叠了，则折叠其外边距

2、link 和@import 的区别是

.link属于HTML标签，而`@import`是CSS提供的; 
.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
.import只在IE5以上才能识别，而link是HTML标签，无兼容问题; 
.link方式的样式的权重 高于@import的权重.