主要内容:
- 基本语法
- 各类操作符与运算规则
- 标识符与命名规则
- 语句之条件语句与循环语句
基本概念
语法
JavaScript 程序的执行单位为行(line),也就是一行一行地执行。一般情况下,每一行就是一个语句。
变量名、函数名等都区分大小写。
语句和表达式
语句(statement)是为了完成某种任务而进行的操作,比如下面就是两个赋值语句。
var a = 1;
var sum = a +b;
表达式(expression),指一个为了得到返回值的计算式。
2 + 3
a + b
区别:
- 语句主要为了进行某种操作,一般情况下不需要返回值;表达式则是为了得到返回值,一定会返回一个值。凡是 JavaScript 语言中预期为值的地方,都可以使用表达式。比如,赋值语句的等号右边,预期是一个值,因此可以放置各种表达式。
- 语句以分号结尾,一个分号就表示一个语句结束。
- 表达式不需要分号结尾。一旦在表达式后面添加分号,JavaScript 引擎就会将表达式视为语句,这样会产生一些没有任何意义的语句。
2 + 3;
注释
注释包括单行注释和块级注释(多行注释),如下。
// 单行注释
/*
*多行注释
*多行注释
*/
区块
- 使用花括号
{}
把多个相关的语句组合到一起就构成了区块。 - 可以让代码结构更清晰,便于开发者的阅读和维护。
变量
JavaScript 的变量是松散类型的,可以用来保存任何类型的数据。
变量声明
使用 var 操作符声明变量,JavaScript 的变量名区分大小写,A和a是两个不同的变量。(es6 有更多的变量声明方式)
var a;
赋值
变量声明和变量赋值是两个步骤,可以把声明和赋值写一起,如下代码。
但是,如果变量只声明未赋值的变量,则该变量的值是 undefined
,表示未定义。
var a = 2;
var b;
// undefined
变量提升
JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。
console.log(a);
var a = 1;
// undefined
上面的代码获得的结果是 undefined,因为存在变量提升,实际运行的代码如下,表示变量 a 已声明,未赋值。
var a;
console.log(a);
a = 1;
操作符
操作符用于操作数据值,包括算术操作符、位操作符、关系操作符 和相等操作符。
一元操作符
只能操作一个值的操作符叫做一元操作符。
需注意数据类型转换。
递增和递减操作符
递增操作符
递增操作符 ++
表示自动 +1
赋值操作时,把 ++
放到变量前面(前置型)和放到变量后面(后置型)的区别:
- 不管
++
放到什么位置,带有++
操作符的变量本身都会发生变化。 - 把
++
放到变量前面, 使用变量+1
的值运算,得到结果后再赋值。 - 把
++
放到变量后面,使用变量本身的值运算,得到结果再赋值。
var a = 2;
b = ++a;
console.log(b,a);
// 3 3
undefined
var c = 2;
d = c++;
console.log(d,c);
//2 3
递减操作符原理同上
一元加和减操作符
+
和 -
操作符与数学上计算规则一样,需注意数据类型转换。
布尔操作符
布尔操作符一共有3种:非、与、或。
逻辑非
用 !
表示,首先会将操作数转化为布尔值,然后求反。
可以同时使用两个逻辑非操作符 !!,表示求反,然后再求反。
var b = 1;
!b;
//false
var a = 1;
!!a;
//true
逻辑与
用 &&
表示,有两个操作数。
只有两个条件都是 true ,结果才返回 true。前面那个条件为 true 时,才会计算第二个表达式。
var result = true && false;
console.log(result);
// false
逻辑或
用 ||
表示,有两个操作数。
只要有一个条件为 true,结果就返回 true。
前面那个条件为 true 时,不会计算第二个表达式。
var result = true || false;
console.log(result);
// true
操作符之间的优先级(高到低):
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
var numa = 3;
var numb = 6;
jq = numa + 30 > 10 && numb * 3 < 2; //结果为 false
乘性操作符
乘性操作符有 3 个:乘法,除法,求模。
乘法
用 *
表示,用于两个数相乘。
var x = 10 * 5;
console.log(x);
// 50
除法
用 /
表示,用于两个数相除。
var x = 10 / 5;
console.log(x);
// 2
求模
用 %
表示,用于求余数。
var x = 10 % 5;
console.log(x);
// 0
加性操作符
包括加法和减法。
关系操作符
包括小于(<)、大于(>)、小于等于(<=)、大于等于(>=),用于值的比较
相等操作符
用于确定两个变量是否相等。
相等和不相等
==
!==
全等和不全等
===
!===
条件操作符
condition ? true : false
赋值操作符
用 =
表示,用于把右侧的值赋给左侧的变量。
逗号操作符
用 ,
表示,一个语句可以执行多个操作。
var a = 1,
b = 2,
c = 3;
标识符
标识符(identifier)指的是用来识别各种值的合法名称。也就是变量、函数、属性的名字,或者函数的参数。
命名规则
- 第一个字符,可以是任意 Unicode 字母(包括英文字母和其他语言的字母),以及美元符号($)和下划线(_)。
- 第二个字符及后面的字符,除了 Unicode 字母、美元符号和下划线,还可以用数字0-9。
- 一般采用驼峰格式命名,就是第一个字母小写,剩下的单词首字母都大写。
关键字和保留字
JavaScript 的关键字和保留字,不能用作标识符。
关键字和保留字:arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
语句(流程控制语句)
条件语句
用于满足某个条件时,输出结果。
if 语句
-
if
结构,做判断时使用
var result = true
if (result) { document.write("条件的结果是对的,所以执行 if 语句")}
//条件的结果是对的,所以用执行 if 语句
-
if...else
结构,有两种情况,需要二选一时使用
var result = false
if (result) {
document.write('条件的结果是对的,所以执行 if 语句');
} else {
document.write('条件的结果是错的,所以执行 else 语句');
}
//条件的结果是错的,所以执行 else 语句
-
if...else if...else
结构,出现多种情况,选择其中一种时使用
var result3 = true
var result = true
if ((result = !true)) {
document.write('条件的结果是对的,所以用执行 if 语句')
} else if (result3) {
document.write(
'if 条件结果是错的,else if 条件的结果是对的,所以用执行 else if 语句'
)
} else {
document.write('条件的结果是错的,所以用执行 else 语句')
}
//if 条件结果是错的,else if 条件的结果是对的,所以用执行 else if 语句
三元运算符
语法
(条件) ? 表达式1 : 表达式2
和 if...else
表示一样的意思,如果“条件”为 true,则返回“表达式 1”的值,否则返回“表达式 2”的值。
var result = false
result
? document.write('条件的结果是对的,所以返回前面的值')
: document.write('条件的结果是错的,所以返回后面的值')
//条件的结果是错的,所以返回后面的值
switch 语句
当有多种选择时,可以不用if...else if...else
结构,使用 switch 语句更为方便。
var con = 3
switch (con) {
case 1:
console.log('满足条件。输出结果为 1')
break
case 2:
console.log('满足条件。输出结果为 2')
break
case 3:
console.log('满足条件。输出结果为 3')
break
default:
console.log('条件都不满足。')
}
//满足条件。输出结果为 3
根据 switch 语句里面 con 的值,选择相应的 case,再执行相关函数。
如果所有 case 都不符合,则执行最后的 default 部分。
每个 case 代码块内部的 break 语句不能少,否则会接下去执行下一个 case 代码块,而不是跳出 switch 结构,上面的代码就变成了这样:
var con1 = 3
switch (con1) {
case 1:
console.log('满足条件。输出结果为 1')
case 2:
console.log('满足条件。输出结果为 2')
case 3:
console.log('满足条件。输出结果为 3')
default:
console.log('条件都不满足。')
}
// 满足条件。输出结果为 3
// 条件都不满足。
var con2 = 1
switch (con2) {
case 1:
console.log('满足条件。输出结果为 1')
case 2:
console.log('满足条件。输出结果为 2')
case 3:
console.log('满足条件。输出结果为 3')
default:
console.log('条件都不满足。')
}
//满足条件。输出结果为 1
//满足条件。输出结果为 2
//满足条件。输出结果为 3
//条件都不满足。
case 代码块之中没有 break 语句,导致不会跳出 switch 结构,而会从满足条件的 case 开始一直执行下去,直到末尾。
switch语句比较运行结果时,采用的是严格相等运算符(===),而不是相等运算符(==),比较时不会发生类型转换。
循环语句
循环语句用于重复执行某个操作,它有多种形式。
while 循环和 do...while 循环
while 循环
判断是否满足条件,条件满足时,重复执行一段代码,直到某个条件不再满足。
while(判断条件)
{
循环语句
}
var i = 0
while (i < 5) {
console.log('i当前的值为:' + i)
i = i + 1
}
// i当前的值为:0
// i当前的值为:1
// i当前的值为:2
// i当前的值为:3
// i当前的值为:4
// 5
上面代码把 i 循环 5 次,直到 i = 5 为止。
do...while 循环
do...while循环与while循环类似,唯一的区别就是先运行一次循环体,然后判断循环条件。也就是说不管是否满足条件,循环体都至少会执行一次。
do
{
循环语句
}
while(判断条件)
var a = 5
var b = 0
do {
console.log('b当前的值为:' + b)
b++
} while (b < a)
// b当前的值为:0
// b当前的值为:1
// b当前的值为:2
// b当前的值为:3
// b当前的值为:4
// 4
上面代码把 b 循环 5 次,直到 b = 4 ,b++ = 5 时结束,输出 b 的值为 4。
for 循环
所有for循环,都可以改写成while循环。
for(初始化表达式;循环条件表达式;循环迭代)
{
循环语句
}
- 初始化表达式(initialize):确定循环变量的初始值,只在循环开始时执行一次。
- 循环条件表达式(test):每轮循环开始时,都要执行这个条件表达式,只有值为真,才继续进行循环。
- 循环迭代:一般为递增表达式(increment),每轮循环的最后一个操作,通常用来递增循环变量。
var arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++) {
var val = arr[i]
console.log(val + '的索引为:' + i)
}
// 1的索引为:0
// 2的索引为:1
// 3的索引为:2
break 语句和 continue 语句
break 语句和 continue 语句用于在循环中精准控制代码执行,具有跳转作用,可以让代码不按既有的顺序执行。
break 语句用于跳出代码块或循环。
continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。
如果存在多重循环,不带参数的 break 语句和 continue 语句都只针对最内层循环。
for (var i = 0; i < 5; i++) {
console.log(i);
if (i === 3)
break;
}
// 0
// 1
// 2
// 3
上面代码执行到 i 等于 3,就会跳出循环。
var e = 0;
while (e < 10){
e++;
if (e % 2 === 0) continue;
console.log('e 当前为:' + e);
}
// e 当前为:1
// e 当前为:3
// e 当前为:5
// e 当前为:7
// e 当前为:9
上面代码只有在 i 为奇数时,才会输出 i 的值。如果 i 为偶数,则直接进入下一轮循环。
label 语句
标签语句,可以在代码中添加标签,如果语句的前面有标签(label),就相当于定位符,用于跳转到程序的任意位置。
label:
语句
标签(label)可以是任意的标识符,但不能是关键字和保留字,语句部分可以是任意语句。
标签通常与 break 语句和 continue 语句配合使用,跳出特定的循环。
foo: {
console.log(1);
break foo;
console.log('本行不会输出');
}
console.log(2);
// 1
// 2
参考:
http://www.w3school.com.cn
https://www.imooc.com
https://www.runoob.com
https://wangdoc.com/javascript
JavaScript 高级程序设计(第3版)