前端轻易疏忽的小点

2024年5月3日 125次阅读 来源: spademan

一、基础语法(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的权重.
    原文作者：spademan
    原文地址: https://segmentfault.com/a/1190000007871809
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞