JS基础语法与表达式
JavaScript简介
前端三剑客
- HTML
- CSS
- JavaScript
| 语言 | 功能 | |
|---|---|---|
| 结构层 | HTML | 搭建结构、放置部件、描述语义 |
| 样式层 | CSS | 美化页面、实现布局 |
| 行为层 | JavaScript | 实现交互效果、数据收发、表单验证等 |
JavaScript历史
- NetScape公司的Brendan Eich于1995年发明JavaScript，前身是LiveScript
- 浏览器脚本还有VBScript、JScript但都被淘汰了
JavaScript体系
- Javascript
- 语言核心
- ECMAScript5
- ECMAScript6、7、8、9
- DOM
- BOM
- 语言核心
JavaScript语法与变量
JavaScript的书写位置
- 在
<body>中<script>标签，在内部书写JavaScript代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// code here
</script>
</body>
</html>
- 将代码单独保存为.js格式文件，然后在HTML文件中引入它
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
认识输出语句
- alert()语句 - 弹出警告框
- console.log()语句 - 控制台输出
学会处理报错
- alert(慕课网); 忘记用引号包裹
- Uncaught ReferenceError: 慕课网 is not defined未捕获的引用错误：慕课网没有被定义
- alret(慕课网); 错误拼写alert
- Uncaught ReferenceError: alret is not defined 未捕获的引用错误：alret没有被定义
REPL环境
- 控制台也是一个REPL环境，可以使用它临时测试表达式的值
变量
变量是什么
- 变量是在内存中存储值的符号
- 变量不是数值本身，它们仅仅是一个用于存储数值的容器
定义变量
- 要想使用变量，第一步就是声明它，并给它赋值
变量的使用
- 当变量被赋值后，就可以使用它了
变量的默认值
- 一个变量只定义，但没有赋初值，默认值是undefined
- 一个变量只有被var定义，并赋初值之后，才算正式初始化完成
var a = 10;
console.log(a); // undefined
a = 10;
console.log(a); // 10
变量的常见错误
- 不用var定义，而直接将值赋予它，虽不引发报错，但会产生作用域问题。
a = 10;
console.log(a); // 10 ×定义变量时必须要写var
- 尝试使用一个既没有被var定义过，也没有赋过值的字符，就会产生引用错误。
console.log(b); // Reference Error
变量的合法命名
- 只能由字母、数字、下划线、$组成，但不能以数字开头
- 不能是关键字或保留字
- 大小写敏感，a和A两个不同的变量
- 以上是标识符的命名规则，同时函数、类名、对象的属性等也都要遵守这个命名规则
变量的合/非法命名
- 合法命名举例
- immoc、aBc_123、
$2$o0_0o$$
- immoc、aBc_123、
- 非法命名举例
- 8m、aBc#123、 ¥2、 true
优秀的变量命名法
- 驼峰命名法：mathTestScore 不建议的命名：mathtestscore
- c风格: math_test_score
- 匈牙利命名法：iMathTestScore [这里的i是提示变量类型]
变量的值
- 变量的值可以被改变
var a = 10;
a = 18; //改变变量的值，不需要再次书写var
console.log(a); // 18
- JS中的等号表示赋值
var a = 10;
a = a + 1;
console.log(a);
- 使用逗号同时声明和初始化两个变量
var a=0,b=0,c=0;
变量声明提升
- 变量声明的提升：你可以提前使用一个稍后才声明的变量，而不会引发异常
- 变量声明提升时，只提升变量的定义，不会提升它的值
注意：
- 变量声明的提升是JavaScript的特性，所以经常出面试题
- 在实际开发时，一定要先定义并给变量赋初值，然后再使用变量
JavaScript基本数据类型
数据类型简介和检测
typeof运算符
- 使用typeof运算符可以检测值或者变量的类型
typeof 5; // number
typeof '慕课网'; // string
var a = 12;
var b = '慕课网';
console.log(typeof a); // number
console.log(typeof b); // string
5种基本数据类型的typeof检测结果
typeof NaN; //"number"
Number（数字）类型
- 所有数字不分大小、不分整浮、不分正负，都是数字类型
typeof 925; //number
typeof 3.13; //number
typeof -6; //number
.5; //0.5 介于0和1之间的小数，可以不书写0
typeof .5; //number
科学计数法
- 较大数或较小数（绝对值较小）可以写成科学计数法
3e8; //300000000
typeof 3e8; //number
3e-4; //0.0003
typeof 3e-8; //number
不同进制的数字
-
二进制数值以0b开头
0b10 //2
0b1111 //15
-
八进制数值以0开头
017 //15
-
十六进制数字以0x开头
0xf //15
一个特殊的数字型值NaN
-
NaN是英语“not a number”的意思，即“不是一个数”，但它是一个数字类型的值
typeof NaN; //number -
0除以0的结果是NaN，事实上，在数学运算中，若结果不能得到数字，其结果往往都是NaN
-
NaN有一个“奇怪”的性质：不自等。
String（字符串）类型
-
字符串就是“人类的自然语言”
-
字符串要用引号包裹，双引号或者单引号均可
typeof "慕课网"; // string typeof '慕课网'; // string -
数字11和字符串’11’在语义上是不同的，前者表达一个数量，后者是一个文本
typeof 11; //number typeof '11'; //string
字符串的拼接
-
加号可以用来拼接多个字符串
'imo' + 'oc' // 'imooc' -
要将一个变量的值“插入”到字符串中，要“斩断链接”。
-
新版ES中增加了反引号表示法，可以更方便进行变量插值。
-
一些时候需要使用空字符串，直接书写闭合的引号对即可
var str = '';
字符串的length属性
-
字符串的length 属性表示字符串的长度
'我喜欢JS'.length // 5 '我喜欢JS，我也喜欢HTML'.length // 14 ''.length // 0
字符串的常用方法
- “方法”就是能够打点调用的函数，字符串有丰富的方法
charAt()方法
- charAt()方法可以得到指定位置的字符
'我喜欢JS，我也喜欢HTML'.charAt(0) // '我'
'我喜欢JS，我也喜欢HTML'.charAt(11) // 'T'
'我喜欢JS，我也喜欢HTML'.charAt(74) // ''
substring()、substr()和slice()方法
- substring(a, b) 方法得到从a开始到b结束（不包括b处）的子串
'我喜欢JS，我也喜欢HTML'.substring(3, 5) // 'JS'
'我喜欢JS，我也喜欢HTML'.substring(10, 14) // 'HTML'
- substring(a, b) 方法如果省略第二个参数，返回的子串会一直到字符串的结尾
'我喜欢JS，我也喜欢HTML'.substring(6) // '我也喜欢HTML'
- substring(a, b) 中，a可以大于b，数字顺序将自动调整为小数在前
'我喜欢JS，我也喜欢HTML'.substring(5, 3) // 'JS'
- substr (a, b)中，将得到从a开始的长度为b的子串
'我喜欢JS，我也喜欢HTML'.substr(3, 2) // 'JS'
- substr(a, b)中，b可以省略，表示到字符串结尾
'我喜欢JS，我也喜欢HTML'.substr(3) // 'JS，我也喜欢HTML'
- substr (a, b)中，a可以是负数，表示倒数位置
'我喜欢JS，我也喜欢HTML'.substr(-4, 2) // 'HT'
- slice(a, b)方法得到从a开始到b结束（不包括b处）的子串
'我喜欢JS，我也喜欢HTML'.slice(3, 5) // 'JS'
- slice(a, b)的参数a可以是负数
'我喜欢JS，我也喜欢HTML'.slice(-4, -1) // 'HTM'
- slice(a, b)中，参数a必须小于参数b
'我喜欢JS，我也喜欢HTML'.slice(5, 2) // ''
- 对比总结
- substring(a, b)和slice(a, b)功能基本一致，都是得到从a开始到b
结束（不包括b）的子串，区别：- ① substring()可以自动交换两个参数位置，而slice()不行；
- ②slice()的参数a可以是负数，而substring()不行。
- substr(a, b)中参数b是子串长度，而不是位置编号
- substring(a, b)和slice(a, b)功能基本一致，都是得到从a开始到b
toUpperCase()和toLowerCase()
- toUpperCase() 转为大写
- toLowerCase() 转为小写
'i love you'.toUpperCase(); // 'I LOVE YOU'
'IMOOC'.toLowerCase(); // 'imooc'
indexOf()
- indexOf()方法返回某个指定的字符串值在字符串中首次出现的位置
- 如果要检索的字符串值没有出现，则该返回 -1
'abcdeb'.indexOf('b') // 1
'abcdeb'.indexOf('de') // 3
'abcdeb'.indexOf('m') // -1
Boolean（布尔）类型
- 布尔（Boole·George）英国19世纪数学家及逻辑学家。
- 布尔型值只有两个：true和false，分别表示真和假.
typeof true; //boolean
typeof false; //boolean
Undefined类型
- 一个没有被赋值的变量的默认值是undefined，而undefined的类型也是undefined
- 即：undefined又是值，又是一种类型，这种类型只有它自己一个值
typeof undefined //undefined
- 在变量声明提升时，变量的值也是undefined。
console.log(a); //undefined
console.log(typeof a); //undefined
var a = 10;
null类型
- null表示“空”，它是“空对象”
- 当我们需要将对象销毁、数组销毁或者删除事件监听时，通常将它们设置为null。
box.onclick = null;
- 使用typeof检测null值，结果是object，这点尤其要注意
typeof null; //object
- 类型和typeof检测结果并不总是一一对应，比如数组用typeof检测结果也是object
- JavaScript可能看起来“千疮百孔”，一定需要刻意记忆。这些点往往也是面试常考的。
数据类型的转换
其他值 -> 数字
使用Number() 函数
parseInt()函数的功能是将字符串转为整数
parseFloat()函数的功能是将字符串转为浮点数
其他值 -> 字符串
使用String()函数
使用toString()方法
- 几乎所有值都有toString()方法，功能是将值转为字符串
var a = 1;
a.toString(); //"1"
(1).toString(); //"1" 单独使用数字时需要加括号
其他值 -> 布尔值
使用Boolean ()函数
小案例：小小计算机
var a = Number(prompt("请输入a的值"));
var b = Number(prompt("请输入b的值"));
alert(a+b);
复杂数据类型
-
除基本类型值外，JS的世界中还有复杂数据类型。
[1,2,3]、{a:1,b:2}、function(){}
-
复杂数据类型都是“引用类型”。
表达式和运算符
- 表达式种类有算术、关系、逻辑、赋值、综合
算数表达式
算数运算符
- 加、减、乘、除、取余
加减乘除
- 加减的符号和数学一致，乘法是*号，除法是/号
- 默认情况，乘除法的优先级要高于加法和减法；必要时可以使用圆括号来改变运算的顺序
加号的两种作用
- 加号有“加法”和“连字符”两种作用
- 如果加号两边的操作数都是数字，则为“加法”，否则为连字符
1+2; //3
1+'2' //'12'
'1'+'2' //'12'
取余运算
- 取余运算也叫作“求模运算”，用百分号“%”表示
- a % b表示求a除以b的余数，它不关心整数部分，只关心余数
隐式类型转换
- 如果参与数学运算的某操作数不是数字型，那么JavaScript会自动将此操作数转换为数字型
3*'4'; //12
6/'2'; //3
6-'2' //4
4+'2' //42
5*'ab' //NaN
- 隐式转换的本质是内部调用Number()函数
true + true //2
false + 2 //2
3 * '2天' //NaN
有关IEEE754
- 在JavaScript中，有些小数的数学运算不是很精准
- JavaScript使用了IEEE754二进制浮点数算术标准，这会使一些个别的小数运算产生“丢失精度”问题
- 解决办法：在进行小数运算时，要调用数字的toFixed()方法保留指定的小数位数
0.1 + 0.2 // 0.30000000000000004
(0.1+0.2).toFixed(2) //0.30
幂和开根号
- JavaScript中没有提供幂计算、开根号的运算符。需要使用Math对象的相关方法进行计算。
Math.pow(2, 3) // 8 2^3
Math.pow(3, 2) // 9 3^2
Math.sqrt(81) // 9
Math.sqrt(-81) // NaN
向上取整和向下取整
- Math.ceil() 向上取整； Math.floor()向下取整
Math.ceil(2.4) // 3
Math.floor(2.4) // 2
Math.ceil(-2.4) // -2
Math.floor(-2.4) // -3
Math.ceil(2) // 2
Math.floor(2) // 2
关系表达式
大于和小于
- 大于>、小于<两个符号和数学相同
- “大于等于”运算符是>=，“小于等于”运算符是<=
判断是否相等
- 如果想比较两个值是否相等，此时应该使用==运算符
- JavaScript中等号=表示赋值，而并不是相等。判断相等应该使用==运算符
3 == 3 // true
3 === 3 // true
3 = 3 // 错误语句
null == undefined // true
null == 0 // false
NaN == NaN // false
相等和全等
- 两个等号==运算符不比较值的类型，它会进行隐式转换后比较值是否相等
- 三个等号===运算符，不仅比较值是否相同，也比较类型是否相同
5 == '5'; // true
5 === '5'; // false
1 == true // true
1 === true // false
0 == false // true
0 === false // false
0 == undefined // false
0 === undefined // false
undefined == null // true
undefined === null // false
NaN不自等
- NaN作为一个特殊的数字类型值，它在用==比较的时候也有特殊的结果
NaN == NaN //false;
NaN === NaN //false;
如何判断某变量值为NaN
- isNaN()函数可以用来判断变量值是否为NaN
isNaN(NaN) // true
isNaN(5) // false
- 但isNaN()也不好用，它的机理是：只要该变量传入Number()的执行结果是NaN，则isNaN()函数都会得到true
isNaN(undefined) // true
isNaN('3天') // true
isNaN(null) // false
不相等和不全等
- !=表示不相等，!==表示不全等
- JS中没有连比
5 != 6 // true
5 !== 6 // true
5 != '5' // false
5 !== '5' //true
逻辑表达式
逻辑运算符
| 意义 | 运算符 |
|---|---|
| 非 | ! (单目运算符) |
| 与 | && |
| 或 | || |
非运算
- !表示“非”，也可以称为“置反运算”
- !是一个“单目运算符”，只需要一个操作数
- 置反运算的结果一定是布尔值
!true // false
!false // true
!!true // true
!0 // true
!undefined // true
!'' // true
!'imooc' // false
!!0 // false
!!'' // false
!!'imooc' // true
与、或运算
- &&表示“并且”，称为“与运算”，口诀：都真才真
true && true // true
true && false // false
false && true // false
false && false // false
- ||表示“或者”，称为“或运算”，口诀：有真就真
true || true //true
true || false //true
false || true //true
false || false //false
短路计算
- a && b运算中：a真，表达式值为b；a假，表达式值为a
- a || b运算中：a真，表达式值为a；a假，表达式值为b
- 不需要背诵和记忆规律，遇见题目只需要“现场分析”即可
- 短路计算在工作编程中很有用，在后续课程讲解
3 && 6 // 6
undefined && 15 // undefined
15 && undefined // undefined
null && 2 // null
'' && 16 // ''
NaN && undefined // NaN
3 || 6 // 3
0 || 6 // 6
null || undefined // undefined
'a' || 'b' // 'a'
NaN || null // null
逻辑运算顺序
- 逻辑运算的优先级是：
- 非 → 与 → 或!true
!true || true // true
3 && 4 || 5 && 6 // 4
赋值表达式
- JS中，=表示赋值，
==判断是否相等（不判断类型），===判断是否全等 - 赋值运算符会将等号右边的数值，赋予等号左边的变量
赋值运算也产生值
- 赋值运算也产生值，等号后面的值将作为“赋值运算的值”
var a;
console.log(a=4); //4
- 这就意味着，可以连续使用赋值运算符
var a, b, c;
a = b = c = 15;
console.log(a); // 15
console.log(b); // 15
console.log(c); // 15
快捷赋值
- 快捷赋值运算符表示在原数值基础上进一步进行运算
var a = 3;
a += 5; // 等价于a = a + 5
console.log(a); // 8
var b = 14;
b /= 2; // 等价于b = b / 2
console.log(b); // 7
var c = 16;
c %= 3; // 等价于c = c % 3
console.log(c); // 1
自增/自减运算符
- a++ 先用再加； ++a 先加再用
综合表达式
- 运算顺序： 非运算 → 算术运算 → 关系运算 → 逻辑运算
- 验证变量a是否介于5到12之间
641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
