一. 基础知识

1.1 JavaScript之HelloWorld

<script>console.log("hello world!!!")
</script>

script可以内联代码，也可以通过src属性来引入外部指定脚本代码

1.2 运算符

运算元：指的是运算符作用的对象

一元运算符：作用于一个运算元

二元运算符：作用于两个运算元

JavaScript中运算符主要用于连接简单表达式，组成一个复杂的表达式。常见的有算数表达式、比较表达式、逻辑表达式、赋值表达式等，也有单目运算符，指操作原始表达式。大多数运算符都由标点符号组成（+、>=、!），也有关键字表示的运算符，如typeof、delete、instanceof等。

一、算数运算符：
1、加法运算符：a + b
2、减法运算符： a - b
3、乘法运算符： a * b
4、除法运算符：a / b
5、余数运算符：a % b
6、自增运算符：++a 或者a++
7、自减运算符：–a 或者 a–
8、求负运算符：-a
9、数值运算符： +a
二、赋值运算符：
赋值运算符用于给变量赋值,最常见的赋值运算符是等号，表达式a=b表示将b赋值给a.
1、a += b // 等同于 a = a + b
2、a -= b // 等同于 a = a - b
3、a *= b // 等同于 a = a * b
4、a /= b // 等同于 a = a / b
5、a %= b // 等同于 a = a % b
6、a >>= b // 等同于 a = a >> b
7、a <<= b // 等同于 a = a << b
8、a >>>= b // 等同于 a = a >>> b
9、a &= b // 等同于 a = a & b
10、a |= b // 等同于 a = a | b
11、a ^= b // 等同于 a = a ^ b
三、比较运算符：
比较运算符比较两个值，然后返回一个布尔值，表示是否满足比较条件。JavaScript提供了8个比较运算符。
1、相等:==
2、严格相等: ===
3、不相等:!=
4、严格不相等:!==
5、小于:<
6、小于或等于:<=
7、大于:>
8、大于或等于:>=
四、三元运算符:
语法：表达式1 ? 表达式2 : 表达式3
说明：如果表达式1为true ，则整个表达式的结果就是表达式2的值，如果表达式false，则整个表达式的结果就是表达式3的值.
五、位运算符:
1、或运算：符号为|，表示两个二进制位中有一个为1，则结果为1，否则为0。
2、与运算：符号为&，表示两个二进制位都为1，则结果为1，否则为0。
3、否运算：符号为～，表示将一个二进制位变成相反值。
4、异或运算：符号为ˆ，表示两个二进制位中有且仅有一个为1时，结果为1，否则为0。
5、左移运算：符号为<<右
6、移运算：符号为>>

运算符的优先级

优先级	运算符	说明	结合性
1	`[]`、`.`、`()`	字段访问、数组索引、函数调用和表达式分组	从左向右
2	++ – -~!delete new typeof void	一元运算符、返回数据类型、对象创建、未定义的值	从右向左
3	*、/、%	相乘、相除、求余数	从左向右
4	+、-	相加、相减、字符串串联	从左向右
5	<<、>>、>>>	左位移、右位移、无符号右移	从左向右
6	<、<=、>、>=、instanceof	小于、小于或等于、大于、大于或等于、是否为特定类的实例	从左向右
7	、!=、=、!==	相等、不相等、全等，不全等	从左向右
8	&	按位“与”	从左向右
9	^	按位“异或”	从左向右
10	\|	按位“或”	从左向右
11	&&	短路与（逻辑“与”）	从左向右
12	\|\|	短路或（逻辑“或”）	从左向右
13	?:	条件运算符	从右向左
14	=、+=、-=、*=、/=、%=、&=、\|=、^=、<、<=、>、>=、>>=	混合赋值运算符	从右向左
15	,	多个计算	按优先级计算，然后从右向左

1.3 switch语句

switch 语句可以替代多个 if 判断。

switch 语句为多分支选择的情况提供了一个更具描述性的方式。

switch 语句有至少一个 case 代码块和一个可选的 default 代码块。

let a = 2 + 2;switch (a) {case 3:alert( 'Too small' );case 4:alert( 'Exactly!' );case 5:alert( 'Too big' );default:alert( "I don't know such values" );
}

任何表达式都可以成为 switch/case 的参数

let a = "1";
let b = 0;switch (+a) {case b + 1:alert("this runs, because +a is 1, exactly equals b+1");break;default:alert("this doesn't run");
}

这里 +a 返回 1，这个值跟 case 中 b + 1 相比较，然后执行对应的代码。

Case分组

共享同一段代码的几个 case 分支可以被分为一组：

比如，如果我们想让 case 3 和 case 5 执行同样的代码：

let a = 3;switch (a) {case 4:alert('Right!');break;case 3: // (*) 下面这两个 case 被分在一组case 5:alert('Wrong!');alert("Why don't you take a math class?");break;default:alert('The result is strange. Really.');
}

switch的case执行的是严格相等，因此类型必须匹配

1.4 值的比较

值的比较

我们知道，在数学中有很多用于比较大小的运算符：

大于 / 小于：a > b，a < b。
大于等于 / 小于等于：a >= b，a <= b。
检查两个值的相等：a == b（注意表达式中是两个等号 =，若写为单个等号 a = b 则表示赋值）。
检查两个值不相等，在数学中使用 ≠ 符号，而在 JavaScript 中则通过在赋值符号前加叹号表示：`a != b

比较结果为 Boolean 类型

和其他运算符一样，比较运算符也会有返回值，返回值为布尔值（Boolean）。

true —— 表示“yes（是）”，“correct（正确）”或“the truth（真相）”。
false —— 表示“no（否）”，“wrong（错误）”或“not the truth（非真相）”。

示例：

alert( 2 > 1 );  // true（正确）
alert( 2 == 1 ); // false（错误）
alert( 2 != 1 ); // true（正确）

和其他类型的值一样，比较的结果可以被赋值给任意变量：

let result = 5 > 4; // 把比较的结果赋值给 result
alert( result ); // true

字符串比较

在比较字符串的大小时，JavaScript 会使用“字典（dictionary）”或“词典（lexicographical）”顺序进行判定。

换言之，字符串是按字符（母）逐个进行比较的。

例如：

alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true

字符串的比较算法非常简单：

首先比较两个字符串的首位字符大小。
如果一方字符较大（或较小），则该字符串大于（或小于）另一个字符串。算法结束。
否则，如果两个字符串的首位字符相等，则继续取出两个字符串各自的后一位字符进行比较。
重复上述步骤进行比较，直到比较完成某字符串的所有字符为止。
如果两个字符串的字符同时用完，那么则判定它们相等，否则未结束（还有未比较的字符）的字符串更大。

在上面的例子中，'Z' > 'A' 在算法的第 1 步就得到了返回结果，而字符串 Glow 与 Glee 则继续逐个字符比较：

G 和 G 相等。
l 和 l 相等。
o 比 e 大，算法停止，第一个字符串大于第二个。

非真正的字典顺序，而是 Unicode 编码顺序

在上面的算法中，比较大小的逻辑与字典或电话簿中的排序很像，但也不完全相同。

比如说，字符串比较对字母大小写是敏感的。大写的 "A" 并不等于小写的 "a"。哪一个更大呢？实际上小写的 "a" 更大。这是因为在 JavaScript 使用的内部编码表中（Unicode），小写字母的字符索引值更大。我们会在字符串这章讨论更多关于字符串的细节。

不同类型间的比较

当对不同类型的值进行比较时，JavaScript 会首先将其转化为数字（number）再判定大小。

例如：

alert( '2' > 1 ); // true，字符串 '2' 会被转化为数字 2
alert( '01' == 1 ); // true，字符串 '01' 会被转化为数字 1

对于布尔类型值，true 会被转化为 1、false 转化为 0。

例如：

alert( true == 1 ); // true
alert( false == 0 ); // true

一个有趣的现象

有时候，以下两种情况会同时发生：

若直接比较两个值，其结果是相等的。
若把两个值转为布尔值，它们可能得出完全相反的结果，即一个是 true，一个是 false。

例如：

let a = 0;
alert( Boolean(a) ); // falselet b = "0";
alert( Boolean(b) ); // truealert(a == b); // true!

对于 JavaScript 而言，这种现象其实挺正常的。因为 JavaScript 会把待比较的值转化为数字后再做比较（因此 "0" 变成了 0）。若只是将一个变量转化为 Boolean 值，则会使用其他的类型转换规则。

严格相等

普通的相等性检查 == 存在一个问题，它不能区分出 0 和 false：

alert( 0 == false ); // true

也同样无法区分空字符串和 false：

alert( '' == false ); // true

这是因为在比较不同类型的值时，处于相等判断符号 == 两侧的值会先被转化为数字。空字符串和 false 也是如此，转化后它们都为数字 0。

如果我们需要区分 0 和 false，该怎么办？

严格相等运算符 === 在进行比较时不会做任何的类型转换。

换句话说，如果 a 和 b 属于不同的数据类型，那么 a === b 不会做任何的类型转换而立刻返回 false。

让我们试试：

alert( 0 === false ); // false，因为被比较值的数据类型不同

同样的，与“不相等”符号 != 类似，“严格不相等”表示为 !==。

严格相等的运算符虽然写起来稍微长一些，但是它能够很清楚地显示代码意图，降低你犯错的可能性。

对 null 和 undefined 进行比较

当使用 null 或 undefined 与其他值进行比较时，其返回结果常常出乎你的意料。

当使用严格相等 === 比较二者时

它们不相等，因为它们属于不同的类型。alert( null === undefined ); // false
当使用非严格相等 == 比较二者时

JavaScript 存在一个特殊的规则，会判定它们相等。他们俩就像“一对恋人”，仅仅等于对方而不等于其他任何的值（只在非严格相等下成立）。alert( null == undefined ); // true
当使用数学式或其他比较方法 < > <= >= 时：

null/undefined 会被转化为数字：null 被转化为 0，undefined 被转化为 NaN。

下面让我们看看，这些规则会带来什么有趣的现象。同时更重要的是，我们需要从中学会如何远离这些特性带来的“陷阱”。

奇怪的结果：null vs 0

通过比较 null 和 0 可得：

                               alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

是的，上面的结果完全打破了你对数学的认识。在最后一行代码显示“null 大于等于 0”的情况下，前两行代码中一定会有一个是正确的，然而事实表明它们的结果都是 false。

为什么会出现这种反常结果，这是因为相等性检查 == 和普通比较符 > < >= <= 的代码逻辑是相互独立的。进行值的比较时，null 会被转化为数字，因此它被转化为了 0。这就是为什么（3）中 null >= 0 返回值是 true，（1）中 null > 0 返回值是 false。

另一方面，undefined 和 null 在相等性检查 == 中不会进行任何的类型转换，它们有自己独立的比较规则，所以除了它们之间互等外，不会等于任何其他的值。这就解释了为什么（2）中 null == 0 会返回 false。

特立独行的 undefined

undefined 不应该被与其他值进行比较：

alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

为何它看起来如此厌恶 0？返回值都是 false！

原因如下：

(1) 和 (2) 都返回 false 是因为 undefined 在比较中被转换为了 NaN，而 NaN 是一个特殊的数值型值，它与任何值进行比较都会返回 false。
(3) 返回 false 是因为这是一个相等性检查，而 undefined 只与 null 相等，不会与其他值相等。

规避错误

我们为何要研究上述示例？我们需要时刻记得这些古怪的规则吗？不，其实不需要。虽然随着代码写得越来越多，我们对这些规则也都会烂熟于胸，但是我们需要更为可靠的方法来避免潜在的问题：

除了严格相等 === 外，其他凡是有 undefined/null 参与的比较，我们都需要额外小心。

除非你非常清楚自己在做什么，否则永远不要使用 >= > < <= 去比较一个可能为 null/undefined 的变量。对于取值可能是 null/undefined 的变量，请按需要分别检查它的取值情况。

总结

比较运算符始终返回布尔值。
字符串的比较，会按照“词典”顺序逐字符地比较大小。
当对不同类型的值进行比较时，它们会先被转化为数字（不包括严格相等检查）再进行比较。
在非严格相等 == 下，null 和 undefined 相等且各自不等于任何其他的值。
在使用 > 或 < 进行比较时，需要注意变量可能为 null/undefined 的情况。比较好的方法是单独检查变量是否等于 null/undefined。

1.5 函数Function

一、函数基本概念

为完成某一功能的程序指令(语句)的集合，称为函数。

二、JavaScript函数的分类

1、自定义函数(我们自己编写的函数)，如：function funName(){}

2、系统函数(JavaScript自带的函数)，如alert函数。

三、函数的调用方式

1、普通调用：functionName(实际参数…)

2、通过指向函数的变量去调用：

var myVar=函数名;

myVar(实际参数…);

四、函数返回值

1.当函数无明确返回值时，返回的值就是"undefined"。

2.当函数有返回值时，返回值是什么就返回什么。

五、函数的可变参数:

函数的参数列表可以是任意多个，并且数据类型可以是任意的类型，JavaScript的函数天然支持可变参数，JavaScript有一个arguments变量可以访问所有传到函数内部的参数。

范例：JavaScript使用arguments创建参数可变的函数

[](javascript:void(0)

前端追梦人JavaScript教程相关推荐

前端追梦人Cytoscape.js教程
一. Cytoscape.js简介与安装 1.1 Cytoscape.js是什么? cytoscape.js是一个做网页可视化的常用工具 .cytoscape.js包含图论模型和可选的渲染器,用于显示 ...
前端追梦人响应式网页设计
一. 响应式元素及媒介 1.1 基于宽度百分比的图像缩放 <!DOCTYPE html> <html lang="en"> <head>< ...
来CSDN第四年的第一篇博客，不谈技术，谈谈心理话（无论何时何地，我们皆是追梦人）
差不多是刚上大一的时候吧,那时候机缘巧合之下就接触了csdn这个平台了,那时候主要目的就是搜索每个学期课程的一些知识点,有时候还会找一些课设来作为学校的程序设计的大作业任务.总而言之,那时候刚接触到c ...
OceanBase 十年：一群追梦人的成长史
"如果等会出了问题,我们就从这跳下去!" 说话的人叫阳振坤,OceanBase 创始人.他指着作战会议室里一扇打开的窗,面前是时任蚂蚁金服董事长的彭蕾.这是 2014 年 11 月 ...
《“ 追梦人” 的逐梦路：探寻大学生创客群体的发展之道》
据了解,<"追梦人"的逐梦路:探寻大学生创客群体的发展之道>依托学校丰富的创业教育实践,以"大学生创客群体"为研究对象,以构筑创业梦.走近" ...
2019年，做努力奔跑的追梦人
2019,给自己一个努力的机会,给自己一个拼搏的机会,给自己一个追梦的机会. 回顾2018 2018年,是思维转变,努力求上进的一年. 在2018年年初,离开了原公司,到了新环境.bye hbjt,h ...
【数据追梦人】毕业6年自学代码，2周面试30家企业，1年376张报表，选择决定人生！
起初看到"数据追梦人"活动时候,我就在不理解数据和追梦有什么关系,数据不就是简单的从抽取.清洗.分析.报表.可视化等处理过程吗?然后我就草草关闭了页面继续了我的工作. 周末在家中 ...
用计算机弹追梦人,新学期！你好，计算机追梦人
原标题:新学期!你好,计算机追梦人料峭春风吹人醒新学期.新征程亲爱的同学们你准备好了吗? 你好,新学期看,校园里花儿悄悄迎寒绽放过了一个假期你是否感受到春的气息 2019.03.04 ...
用计算机弹追梦人,黑大 “追梦人” | 计算机前的精灵——叶健雄
原标题:黑大 "追梦人" | 计算机前的精灵--叶健雄巾帼不让须眉飘渺的网络世界里她背上行囊在无尽的荒野中探索新的绿洲人物介绍叶健雄,2016级计算机科学技术学院.软 ...

前端追梦人JavaScript教程