1. 条件判断语句
1.1 if-else
if () {
...
} else if () {
...
} else {
...
}
判断中,如果结果不是布尔值,那么会自动使用 Boolean 方法转换为布尔值
只有 0 / NaN / '' / null /undefined
是 false
,其余为 true
BAT 面试题:
var num = parseInt('width: 35.5px');
if (num == 35.5) {
alert(0);
} else if (num == 35) {
alert(1);
} else if (num == NaN) {
alert(2);
} else if (typeof num == 'number') {
alert(3);
} else {
alert(4);
}
//=> '3'
typeof
在 JS 中用来检测数据类型的四种方式;
typeof
instanceof
constructor
Object.prototype.toString.call()
// 语法:typeof [value]
typeof 12 // 'number'
typeof NaN // 'number'
typeof 'aa' // 'string'
typeof true // 'boolean'
typeof null // 'object' 因为 null 代表空对象指针(没有指向任何内存空间)
typeof {} // 'object'
typeof [] // 'object'
typeof undefined // 'undefined'
typeof Object // 'function'
// 返回值:检测结果是一个字符串,字符串中包含着对应的数据类型,如:'number'/'string'/'object'/'boolean'/'undefined'/'function'
typeof 检测数组/正则/对象,都是返回 'object',也就是无法细分对象
面试题
console.log(typeof typeof []); //=> 'string'
1.2 三元运算符
语法:条件 ? 成立执行 : 不成立执行
相当于最简单的 if/else 判断
var num = 12;
if (num > 10) {
num++;
} else {
num--;
}
//=> 改写成三元运算符
num > 10 ? num++ : num--
特殊情况
//=> 如果三元运算符中的某一部分不需要任何处理,我们使用 null / undefined / void 0 /... 占位即可
var num = 12;
num > 10 ? num++ : ; //=>报错
num > 10 ? num++ : null;
//=> 如果需要执行多项任务,我们把其用小括号包裹起来,每条操作语句用逗号隔开
num > 10 ? (num++, num*=10) : null;
思考题:
var num = 12;
if (num > 0) {
if (num < 10) {
num++;
} else {
num--;
}
} else {
if (num == 0) {
num++;
num /= 10;
}
}
//=> 改为三元运算符
num > 0 ? (num < 10 ? num++ : num--) : (num==0 ? (num++, num/=10) : null);
1.3 switch case
switch 语句中,每个 case 的值可以使用任何数据类型,而且不一定是常量,可以是变量,甚至是表达式。
switch (expression) {
case value1: statement1
break;
case value2: statement2
break;
case value3: statement3
break;
default: statement4
}
switch
语句中的每一种情况 case
的含义是:如果表达式 expression
等于这个值 value
,则执行后面的语句 statement
。
break
关键字作用是使代码执行流跳出 switch
语句,如果没有 break
,就会在执行完当前 case
后,继续执行下一个 case
default
关键字则用于在表达式不匹配前面的任何一种情况的时候,执行机动代码,default
后面语句执行完不需要再加上 break
了,因为语句已经结束了。default
不是必须的,但是建议使用
switch case 应用于变量(或表达式等)在不同值情况下的不同操作。每一种 case 操作后都要加 break(结束整个判断),除非要合并两种情况。
注意:
switch
语句在比较expression
和value
的值时使用的是全等操作符,所以不会发生类型转换
'10' == 10 //=> true 相等比较,如果等号两边的类型不一样,首先转换为一样的数据类型,然后再比较
'10' === 10 //=> false 严格相等,只有当类型和值都一样时,结果才是 true
在真实项目中,为了保证代码的严谨性,应该更多的使用严格相等。
表达式 case
在做比较之前,都会先计算每个 case 的值
switch (true) {
case num < 0:
alert("Less than 0");
break;
case num >= 0 && num <= 10:
alert("between 0 and 10");
break;
default:
alert("More than 10");
}
合并 case
通过在每个 case
后面都添加一个 break
,就可以避免同时执行多个 case
代码,一般都会使用 break
。
而在需要混合多种情况的时候,就可以省略 case
后面的 break
,但是要记得添加注释,说明有意省略 break
switch (i) {
case 25:
/* 合并两种情况 */
case 35:
alert("45");
break;
case 45:
alert("45");
break;
default:
alert("Other");
}
需要注意的是
合并的情况应该靠在一起,因为只能与相邻的
case
合并前面的情况没有任何语句,只有注释,而且应该有注释
在合并的最后一种情况的语句结束后,都应该添加
break
关键字来跳出switch
2. 循环语句
2.1 for
for 循环属于前测试循环结构,条件成立才会执行循环体内代码。
for 循环的语法组成:
定义初始值
设定循环成立的条件(条件成立循环继续,不成立循环结束)
条件成立会执行循环体中的内容
执行步长累加操作
遍历数组
// webstrom 快捷键 itar[Tab],直接生成数组遍历
// 正序遍历
for ( var i = 0; i < arr.length; i++) {
...
}
// 倒序遍历
for ( var i = arr.length - 1; i >= 0; i--) {
...
}
// 取奇数项
for ( var i = 0; i < arr.length; i++) {
// 索引为偶数,代表奇数项
if (i % 2 === 0) {
...
}
}
// 另一种更简单的方法:
for ( var i = 0; i < arr.length; i += 2) {
...
}
在 for 循环中出现的两个常用的关键字,也属于语句:
continue:结束本次循环,开始下一次循环
break:中断或者结束整个
for (var i = 0; i < 10; i++) {
if (i < 5) {
i++;
continue; //=> 结束本轮循环(后面的代码将不再执行),进行累加之后,继续执行下一轮循环
}
if (i > 7) {
i += 2;
break; //=> 强制结束整个循环,不执行后面代码,也不进行累加,开始3执行循环之后的代码
}
i += 1;
}
i //=> 10
2.2 while 和 do-while
while 语句属于前测试循环语句,只有前置条件成立之后,才会执行循环体内代码。也就是说,循环体可能永远不会被执行
do-while 语句属于后测试循环语句,是先执行循环体的代码,然后再判断条件是否成立。也就是说,循环体至少执行一次
// 后测试循环
do {
statement
} while (expression)
// 前测试循环
while (expression) {
statement
}
2.3 for-in
for-in 语句是一种精准的迭代语句,可以用来枚举对象的属性。
for (var property in obj) {
statement
}
由于对象的属性没有顺序,因此,通过 for-in 循环中输出的属性名的顺序是不可预测的,返回的先后次序可能会因浏览器而异。
如果要迭代的对象的变量值是 null
或 undefined
,for-in 语句在 ES5 之前会报错,ES5 之后更正了这一行为,不再报错,只是不执行循环体。为了保证最大限度的兼容性,建议在使用 for-in 循环之前,先检测确认该对象的值不是 null
或 undefined
2.4 label
使用 label
语句可以在代码中添加自定义标签,以便后面使用。
label: statement;
注意,标签只能标记一条语句或者一个整块语句
加标签的语句一般都会与 for 语句等循环语句配合使用:
start:
for (var i=0; i < count; i++) {
alert(i);
}
添加的标签可以在将来由 break
或 continue
语句引用,从而返回代码中的特定位置
var num = 0;
outermost:
for (var i=0; i < 10; i++) {
for (var j=0; j < 10; i++) {
if (i == 5 && j == 5) {
break outermost;
}
num++;
}
}
num; //=> 55
注意两者之间的区别
var num = 0;
outermost:
for (var i=0; i < 10; i++) {
for (var j=0; j < 10; i++) {
if (i == 5 && j == 5) {
continue outermost;
}
num++;
}
}
num //=> 95