JavaScript初学者必备ing

☞☞ 个人主页欢迎访问 ☜☜


大家好,我是苏日俪格,下面来介绍几个面试和做项目都会遇到的知识点:

一、递增递减操作符

ECMAScript里面有个一元操作符,所谓一元操作符就是只能操作一个值的操作符,而递增递减就是其中之一,在for循环里面经常用的i++就是这个道理,这个只是操作符后置型,还有前置型是++i,那么两者的区别是什么呢?

let num1 = 10;
let num2 = 20;
console.log(num1++);
console.log(++num2);

看到这个先别慌,先仔细分析一下,这两个表达式分别都经历了哪些过程,后置型操作符无论是++还是--都是一个道理,先赋值再运算,而后置型操作符正好相反,是先运算再赋值。栗子中的num1++就是先赋的值,所以console出来的结果就是他的本身,而后又进行+1的运算:num1 = num1 + 1;这个时候如果再从控制台打印的话才是运算之后的结果:11;++num2则是先经过运算:num2 = num2 + 1;所以直接打印出运算后的结果:21。下面再来一个小小的栗子:

let num1 = 10;
let num2 = 20;
console.log(num1++ + num2);
console.log(++num1 + num2);

我没有直接将结果展示出来,大家现在多考虑一下,如果刚才那个栗子真的懂了的话,这个细心的话也应该没问题,没有难度,只不过对于小白的话确实在第二个console的时候有一个小小的坑而已,第一个打印出来的很明确了就是30,下面的那个难道是31?因为第一个num1赋值后的运算加在了第二个num1的身上,到这里细心的人会发现,第二个num1又进行了一次运算,两次+1之后才赋的值,所以第二个打印出来的是32。

二、加性操作符

无论是加法还是减法都属于加性运算符,在进行运算操作的时候,难免会有一些数据类型的转换是我们需要特别注意的:

let num1 = 10;
let num2 = '10';
console.log(num1++ - num2);
console.log(num2-- + ++num1);

这两个运算是把一元操作符的递增递减操作和加性操作符的观念相结合,加性操作符中的‘+’即是一种运算也是一个字符串连接符,num1是一个数组类型的10,而num2是一个字符串类型的10,那么第一个打印出来的肯定是0了,这个没什么难度;重点看第二个,num2--虽然是先赋的值再运算,但是这个加性操作符‘-’是会转换类型的,也就是说num2--这一步把num2的字符串类型的10已经转换成了数字类型,所以第二个打印出来的是22。

三、相等操作符

相等操作符有两种,一个是相等(==)和不相等(!==),另一个是全等(===)和不全等(!===),默认都是返回的true。
判断相不相等的时候,操作符两侧的操作数都会进行强制转换数据类型,怎么转换?转换成哪个类型呢?有人说了难道是ASCII码?不是。。ASCII码是在玩字符比较的时候,如果两个都是字符串采用的是ASCII码的大小的比较方式;玩这个也有一套自己的规则:

  • 只需要记住不管比较谁都是先转换成数字类型的数值;
  • 如果操作数含有布尔类型:true就是1,false就是0;
  • 含有对象的:都是对象就比较两个对象的指针是不是指向同一个对象,如果是就是true,否则就是false;有一个是对象就调用对象身上的valueOf方法,使其得到基本数据类型在进行下面的操作;
  • null和undefined是相等的;
  • null和undefined都不能转换成其他类型;
  • 按照规则NaN不等于任何类型的值包括自己,如果不等于则返回true;

全等和不全等的就很简单了,不需要考虑是怎么转换的,数据类型和值都必须相等,也就是长得一模一样的呗

四、break & continue

break语句会立即退出循环强制执行循环后面的语句
continue语句是立即退出循环后接着从循环的顶部继续执行

let num = 0;
for (let i=1; i<10; i++) {
    if (i % 5 == 0) {
        break;
    }
    num++;
}
console.log(num);

如果i的值模上5余数是0的时候,就执行break语句,跳出循环,与此同时num也就停止进行运算,所以打印出的结果是4。

let num = 0;
for (let i=1; i<10; i++) {
    if (i % 5 == 0) {
        continue;
    }
    num++;
}
console.log(num);

同样的栗子,换成了continue语句,那么此时的结果必然改变,由于中间i为5的时候跳出了一次循环,等于10的时候又跳出了一次循环,所以打印出的是8。
上面只是简单的一个循环语句,下面嵌套两个循环看看结果如何:

let num = 0;
Iterator:
for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        if (i == 5 && j == 5) {
            break Iterator;
        }
        num++;
    }
}
console.log(num);

当i刚刚等于5的时候,循环体已经执行50次了,再到j等于5的时候又循环了5次,然后跳出循环,因此打印出的结果是55。
同样的把break语句换成continue,循环55次之后,由于跳出了整个大的迭代器,所以少循环了5次,结果就是95。

五、async & defer

既然题目中含有defer,因此这个async并不是异步函数,而是H5的一个异步脚本属性;而defer是一个延迟脚本属性。

先来看看这两个属性的相同点:都是为了处理脚本的行为而存在,都只适用于外部脚本文件;不同点在于他们执行脚本的时机不同。

async:通知浏览器立即下载文件并执行,由于这个是异步脚本,如果有多个异步脚本的话,就没办法保证他们之间的加载顺序,这一过程很有可能会造成页面阻塞,DOM构建和解析的问题,页面渲染不完整,用户体验度会大打折扣,async虽然权重较低,但也在onload事件之前执行,却不能保证和DOMContentLoaded事件的执行先后顺序,所以不建议大家使用
栗子:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="1.js" type="text/javascript" charset="utf-8" async></script>
    <script src="2.js" type="text/javascript" charset="utf-8" async></script>
    <script src="3.js" type="text/javascript" charset="utf-8" async></script>
</head>

<body>
</body>

</html>

控制台:

defer:稳定得多,即使存在多个延迟脚本,依然会按顺序执行,并且在onload和DOMContentLoaded之前执行

至于具体的浏览器的加载、解析和对DOM的构建、渲染机制和读取事件的执行时机请看浏览器的执行机制

本文的所有内容均是一字一句敲上去的,希望大家阅读完本文可以有所收获,因为能力有限,掌握的知识也是不够全面,欢迎大家提出来一起分享!谢谢O(∩_∩)O~

欢迎访问我的GitHub,喜欢的可以star,项目随意fork,支持转载但要下标注;
欢迎光临个人主页

等一下( •́ .̫ •̀ ),我还有最后一句话:
我爱你,
喜欢你的人很多,
不缺我一个,
我喜欢的人很少,
除了你就没了,
再见...
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342