这是学习 JavaScript 的笔记。此为课程第一周的内容。
1. JavaScript的简介
1.1 JavaScript的历史
1995年由 Brendan Eich(布兰登·艾奇)发明,前身是 LiveScript.
1.2 ECMAScript 是 JavaScript 的标准
1997年,欧洲计算机制造商协会(ECMA) 设置了JavaScript的标准,命名为 ECMAScript
。
ECMAScript 规范了 JavaScript,同样 JavaScript 实现了 ECMAScript。
1.3 JavaScript 体系
完整的 JavaScript
包含:
- 语言核心(ECMAScript5,6,7,8,9)
- DOM
- BOM
1.4 JavaScript 的语言风格和特性
- 类 C 语言的风格,简单好学。
- 弱类型,易编写。
2. JavaScript 的基础使用
2.1 JavaScript 的书写位置
- 在
<body>
中的<script>
标签内部书写 JavaScript 代码。 - 将代码单独储存为
.js
格式文件,然后在 HTML 文件中使用<script src=""></script>
这样的形式将js
文件引入。
在 HTML4 中使用 <script>
标签时,会有type
属性: <script type="text/javascript"></script>
但在 HTML5 中可以忽略这种写法。
2.2 认识输出语句
alert()
–弹出警告框。console.log()
–控制台输出。
2.3 处理报错信息
常见的报错信息有:
- Uncaught SyntaxError: Invalid or unexpected token 未捕获的语法错误:不合法或错误的符号
- Uncaught ReferenceError: a is not defined 未捕获的引用错误:a 没有被定义.
2.4 REPL 环境
控制台也是一个 REPL 环境,可以使用它临时测试表达式的值。
- read 读
- eval 执行
- print 打印
- loop 循环
3. 变量
变量是计算机语言中能储存计算结果或能表示值抽象概念。变量不是数值本身,它们仅仅是一个用于存储数值的容器3.1 定义变量
要想使用变量,第一件事就是声明它,并给它赋值:var a = 5;
,使用var
关键字定义变量,等号表示赋值。
当变量被赋值后,就可以使用了:console.log(a);
3.2 改变变量的值
变量的值是可以被改变的,这个时候不需要使用 var
1 | var a = 10; // 定义变量a 并赋初始值为10 |
3.3 变量的合法命名
标识符的命名规则,函数,类名,对象的属性等也要遵守这个规则:
- 只能是数字,字母,下划线,$ 组成,并且不能以数字开头。
- 不能是关键字或者保留字
- 变量名大小写敏感,a 和 A 两个是不同的变量。
3.4 变量的常见错误
不用 var
定义,而直接将值赋予它,虽不会引发错误,但会产生作用域问题
1 | console.log(a); // 不会输出 10,只会输出 undefined |
3.5 同时输出多个变量
使用逗号同时声明和初始化两个变量: var a = 0, b= 0;
3.6 变量声明提升
变量声明的提升: 你可以提前使用一个稍后才声明的变量,而不会引发异常。在执行所有代码前, JS 有预解析阶段,会预先解读所有的变量。
1 | // 变量声明提升只提升定义,不提升值。 |
注意:
- 变量声明的提升是JavaScript的特性, 所以经常出面试题。
- 在实际开发时,不要刻意使用变量声明提升特性。一定要先定义并给变量赋初值,然后再使用变量。
4. 基本数据类型
课程简介:
- 数据类型简介和检测
基本数据类型
- 数字类型
- 字符串类型
- 布尔类型
- undefined类型
- null
数据类型的转换
4.1 JavaScript 中两大数据类型
- 基本数据类型
- 复杂数据类型
4.2 typeof
运算符
使用 typeof
运算符可以检测值或者变量的类型
1 | typeof 5; // number |
5钟基本数据类型的 typeof
检测结果
类型名 | typeof 检测结果 | 值举例 |
---|---|---|
数字类型 | number | 3 |
字符串类型 | string | “java” |
布尔类型 | boolean | true |
undefined类型 | undefined | undefined |
null类型 | Object | null |
4.3 Number
(数字)类型
所有的数字不分大小,不分整浮,不分正负,都是数字类型。
1 | typeof 925; // number |
4.4 小数中0
可以忽略
1 | .5; // 0.5 |
4.5 科学计数法
较大数或者较小数(绝对值较小)可以写成科学计数法
1 | 3e8; //300000000 |
4.6 不同进制的数字
二进制数值以 0b 开头
1
20b10 //2
0b1111 // 15八进制数值以0开头
1
017 //15
十六进制数字以0x开头
1
0xf //15
4.7 一个特殊的数字类型 NaN
- NaN是英语“not a number” 的意思,即“不是一个数”,但它是一个数字类型的值
typeof NaN;//number
0除以0的结果就是NaN,事实上,在数学运算中,如若结果不能得到数字,其结果往往都是 NaN。
1
2'我' - '你'; //NaN
'我' * '你'; //NaNNaN有一个奇怪的性质:不自等。
5. String(字符串) 类型
字符串就是“人类的自然语言”,字符串要用引号包裹,双引号或者单引号均可。
1 | typeof '好好学习'; // string |
5.1 字符串的拼接
加号可以用来拼接多个字符串
1 | 'imo'+'oc'; // 'imooc' |
5.2 字符串和变量的拼接
将一个变量的值“插入”到字符串中:
1 | var year = 2020; |
5.3 空字符串
一些时候需要使用空字符串,直接书写闭合的引号对即可:var str = '';
5.4 字符串的length
属性
字符串的 length 属性表示字符串的长度
1 | '学习JS'.length; // 4 |
5.5 字符串的常用方法
“方法”就是能够通过打点调用的函数,字符串有丰富的方法。
方法 | 功能 |
---|---|
charAt() | 得到指定位置字符 |
substring() | 提取子串 |
substr() | 提取子串 |
slice() | 提取子串 |
toUpperCase() | 将字符串变为大写 |
toLowerCase() | 将字符串变为小写 |
indexOf() | 检索字符串 |
1 | // charAt() 方法 |
5.6 对比总结
substring(), substr(), slice() 对比总结
- substring(a,b) 和 slice(a,b) 功能基本一致,都是从a开始到b结束(不包括b)的子串,区别:
- substring() 可以自动交换两个参数位置,而 slice() 不行
- slice() 的参数a 可以是负数,而 substring() 不行
- substr(a,b) 中参数 b 是子串长度,而不是位置编号。
5.7 toUpperCase() 和 toLowerCase()
- toUpperCase() 转为大写
- toLowerCase() 转为小写
1 | 'i love you'.toUpperCase(); //I LOVE YOU |
5.8 indexOf()
indexOf()
方法返回某个指定的字符串在字符串中首次出现的位置,如果要检索的字符串值没有出现,则该返回 -1
1 | var str111 = 'abcdef'; |
6. 布尔类型
布尔(Boole·George)英国19世纪数学家及逻辑学家。人们为了纪念他,以他的名字命名布尔值。
布尔值只有两个: true
和 false
.分别表示真和假。
1 | typeof true; // boolean |
7. undefined
类型
一个没有被赋值的变量的默认值是 undefined
,而 undefined
的类型也是 undefined
。即:undefined 又是值,又是一种数据类型,这种数据类型只有它自己。typeof undefined; //undefined
8. null
类型
null
代表空,它是“空对象”。当我们需要将对象销毁,数组销毁或者删除事件监听时,通常将它们设置为 null
1 | box.onclick = null |
8.1 用 typeof
检测 null
结果是 object
1 | typeof null; // object |
9. 类型转换
9.1 Number()
1 | // 字符串 -> 数字 |
9.2 parseInt()
1 | // parseInt() 函数 |
9.3 parseFloat()
1 | // parseFloat() 函数 |
9.4 String()
1 | // 使用 String() 函数 |
9.4 Boolean()
1 | // Boolean() |
10. 表达式与操作符
10.1 表达式和操作符
1 | 5 + 3 // 表达式 |
10.2 表达式种类
- 算术
- 关系
- 逻辑
- 赋值
- 综合
10.3 算术运算符
意义 | 运算符 |
---|---|
加 | + |
减 | - |
乘 | * |
除 | / |
取余 | % |
10.3.1 加减乘除
加减的符号和数学一致,乘法是 *
号,除法是 /
。默认情况下,乘除法的优先级要高于加法和减法;必要时可以使用圆括号来改变运算的顺序。
1 | 1 + 2 * 3; //7 |
10.3.2 加号的两种作用
加号有 加法 和 连字符 两种作用。如果加号两边的操作数都是数字,则为 加法 ,否则为 连字符
1 | 1 + 2 // 3 |
10.3.3 取余运算
取余运算也叫做“”求模运算“,用百分号 ”%” 表示。a % b
表示求 a
除以 b
的余数,它不关心整数部分,只关心余数。
1 | 11 % 4; // 3 |
10.4 隐式类型转换
如果参与数学运算的某操作数不是数字型,那么 JavaScript 会自动 将此操作数转为数字型。
1 | 2 * '3' //6 |
隐式类型转换的本质是内部调用 Number()
函数
1 | true + true //2 |
10.5 有关 IEEE754
在 JavaScript 中,有些小数的数学运算不是很精准。JavaScript 使用了 IEEE754 二进制浮点数算术标准,这会使一些个别的小数运算产生“丢失精度”问题。
1 | 0.1 + 0.2 // 0.30000000000000004 |
解决办法:在进行小数运算的时候,调用数字的 toFixed()
方法保留指定的小数位数
1 | 0.30000000000000004.toFixed(2) |
10.6 幂和开根号
JavaScript 中没有提供幂计算,开根号的运算符。需要使用Math 对象的相关方法进行计算。
1 | Math.pow(2,3) // 8 |
10.7 向上取整和向下取整
Math.ceil()
向上取整;Math.floor()
向下取整
1 | Math.ceil(2.4) // 3 |
10.8 关系运算符
意义 | 运算符 |
---|---|
大于 | > |
小于 | < |
大于或等于 | >= |
小于或等于 | <= |
等于 | == |
不等于 | != |
全等于 | === |
不全等于 | !== |
10.8.1 大于和小于
大于 >
, 小于 <
两个符号和数学相同。”大于等于”运算符是>=
, “小于等于x”运算符是 <=
1 | 8 > 5 //true |
10.8.2 判断是否全等
如果想比较两个值是否全等,此时应该使用 ==
运算符。JavaScript 中等号 =
表示赋值,而不是相等。判断相等应该使用 ==
运算符。
1 | 3 == 3 // true |
10.8.3 相等和全等
两个等号
==
运算符 不比较值的类型,它会进行隐式转换后比较值是否相等。三个等号
===
运算符,不仅仅比较值是否相同,也比较类型是否相同。
1 | 5 == '5' //true |
10.8.4 NaN 不自等
NaN 作为一个特殊的数字类型值,它在用 ==
比较的时候也有特殊的结果
1 | NaN == NaN // false |
10.8.5 如何判断某变量值为 NaN
isNaN()
函数可以用来判断变量值是否为 NaN
1 | isNaN(NaN) // true |
但 isNaN()
也不好用,它的机理是:只要该变量传入 Number()
的执行结果是 NaN
, 则 isNaN()
函数都会得到 true
1 | isNaN(undefined) // true |
10.8.6 不相等和不全等
!=
表示不相等,!==
表示不全等
1 | 5 != 6 //true |
10.9 逻辑表达式
逻辑运算符
意义 | 运算符 |
---|---|
非 | ! |
与 | && |
或 | || |
10.9.1 非运算
!
表示 “非”,也可以称为 “置反运算”。!
是一个 “单目运算符”,只要一个操作数,置反运算的结果一定是布尔值。
1 | !true //false |
10.9.2 与运算
&&
表示 并且,称为“与运算”,口诀:都真才真
1 | true && true //true |
10.9.3 或运算
||
表示“或者”,称为 “或运算”,口诀:有真就真。
1 | true || true // true |
10.9.4 短路计算
1 | a && b //都真才真 |
a && b
运算符中 :a 真,表达式值为 b; a假,表达式为a。
1 | 3 && 6 //6 |
1 | a || b // 有真就真 |
a || b
运算符中 :a 真,表达式值为 a; a假,表达式为b。
1 | 3 || 6 //3 |
10.9.5 逻辑运算顺序
逻辑运算的优先级是:非 -> 与->或
1 | ! true || true //true |
10.9.6 赋值运算符
意义 | 运算符 |
---|---|
赋值 | = |
快捷赋值 | += -= *= /= %= |
自增运算 | ++ |
自减运算 | – |
JS 中,
=
表示赋值,==
判断是否相等(不判断类型),===
判断是否全等。赋值运算符会将等号右边的数值,赋予等号左边的变量。
var a = 5;
赋值运算也产生值,等号后面的值将作为**”赋值运算的值”**
1 | var a; |
这就意味着,可以连续使用赋值运算符
1 | var a,b,c; |
10.9.7 快捷赋值
快捷赋值运算符表示在原数值基础上进一步进行运算
1 | var a = 3; |
10.9.8 自增/自减运算符
++
和 --
是自增/自减运算符,表示在在自身基础上加1或减1.
1 | var a = 3; |
10.9.9 a++ 和 ++a 的区别
a++
先用再加;++a
先加再用
1 | var a = 3; |
11. 综合表达式
综合运算的运算顺序
运算顺序:非运算-> 数学运算-> 关系运算 -> 逻辑运算
1 | 5 < 3 +3 //true |
11.1 变量的范围表示
验证变量 a
是否介于 5 到 12 之间
1 | a >= 5 && a <= 12 |
11.2 闰年判断
闰年的计算公式:满足下面之间的一个即可
- 能被 4 整除并且不能被 100 整除。
- 能被 100 整除并且能被 400 整除。
1 | var year = prompt('请输入年份'); |