资讯专栏INFORMATION COLUMN

前端容易忽略的小点

Cympros / 906人阅读

摘要:包装对象所谓包装对象,就是分别与数值字符串布尔值相对应的三个原生对象。是等于的无输出上面代码的第一个例子之所以得到,是因为对应的包装对象实例是一个对象,进行逻辑运算时,被自动转化成布尔值因为所有对象对应的布尔值都是。

一、基本语法(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的权重.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86593.html

相关文章

  • 简单说 chrome浏览器 必知必会小技巧

    摘要:说明这篇文章主要介绍的就是一些浏览器的小技巧,很简单,希望对大家有所帮助。颜色的,或十六进制表示。单击其中一个方块将颜色更改为该方块。在当前颜色的,和表示之间切换。 说明 这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏...

    XanaHopper 评论0 收藏0
  • 简单说 chrome浏览器 必知必会小技巧

    摘要:说明这篇文章主要介绍的就是一些浏览器的小技巧,很简单,希望对大家有所帮助。颜色的,或十六进制表示。单击其中一个方块将颜色更改为该方块。在当前颜色的,和表示之间切换。 说明 这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏...

    imtianx 评论0 收藏0
  • 简单说 chrome浏览器 必知必会小技巧

    摘要:说明这篇文章主要介绍的就是一些浏览器的小技巧,很简单,希望对大家有所帮助。颜色的,或十六进制表示。单击其中一个方块将颜色更改为该方块。在当前颜色的,和表示之间切换。 说明 这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏...

    Travis 评论0 收藏0
  • JavasScript重难点知识

    摘要:忍者级别的函数操作对于什么是匿名函数,这里就不做过多介绍了。我们需要知道的是,对于而言,匿名函数是一个很重要且具有逻辑性的特性。通常,匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果...

    forsigner 评论0 收藏0

发表评论

0条评论

Cympros

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<