javaScript 基础知识汇总(三)
1、循环:while 和 for
while 循环
1 while(condition){ 2 //代码 循环体 3 }
do ... while 循环
1 let i =0; 2 do { 3 //循环体 4 }while(condition) 5 6 let i = 0; 7 do{ 8 alert(i); 9 i++; 10 }while(i<3)
for 循环
1 for(begin;condiion;step){ 2 //循环体 3 } 4 5 for(let i = 0; i < 3; i++){ 6 alert(i); 7 }
省略语句段
for 循环 的begin语句段,如果在for循环外定义 则for循环中的 begin 语段不需要如:
1 let i = 0; 2 for(;i < 3; i++){ 3 alert(i); 4 } 5 //或者移除step 语段 6 let i = 0; 7 for(;i<3;){ 8 alert(i++); 9 } 10 11 上述写法和 下面写法等价 12 while(i<3){ 13 alert(i++); 14 } 15 for(;;) 16 {//无限循环} 17 和下面写法等级 18 while(true){ 19 //无限循环 20 } 21 注意:for循环中的for(;;) {} 的两个分号必须存在,否则会出现语法错误
跳出循环
break 关键字可以强制退出关键字
1 let sum = 0; 2 while(true){ 3 sum++; 4 if(sum>10){ 5 break; 6 } 7 } 8 //此循环本无限循环,但是通过break 关键字,可以在条件下跳出循环,不再执行循环体
继续下一次迭代
continue 关键字 是break 的轻量版;不阻止整个循环,知识停止当前的迭代,并强制开启下一次循环的判断是否执行。
1 for ( i = 0; i < 10;i++){ 2 if(i%2==0)continue; 3 alert(i); 4 } 5 //这个循环体,当i为奇数的时候输出,偶数的时候不输出,进入下次循环。
break/continue 标签
当我们需要从多个嵌套循环中跳出来的时候,break <lableName>
当我们需要从多个循环嵌套中跳出,并执行下一次迭代,则可以通过continue <lableName>
1 2 outer: for (let i = 0; i < 3; i++) { 3 4 for (let j = 0; j < 3; j++) { 5 6 let input = prompt(`Value at coords (${i},${j})`, ''); 7 8 // 如果是空字符串或已取消,则中断这两个循环。 9 if (!input) break outer; // (*) 10 11 // 用得到的值做些事…… 12 } 13 } 14 alert('Done!'); 15 16 17 18 但是标签 不能随意跳到 任何位置 19 break label; // 跳转到标签?可以。 20 21 label: for (...) 22 23 24 只有在循环内部才能调用 break/continue,并且标签必须位于指令上方的某个位置。
2、 switch 语句
语法
switch(x) {
case 'value1': // if (x === 'value1')
...
[break]
case 'value2': // if (x === 'value2')
...
[break]
default:
...
[break]
}
示例
1 let arg = prompt("Enter a value?") 2 switch (arg) { 3 case '0': 4 case '1': 5 alert( 'One or zero' ); 6 break; 7 8 case '2': 9 alert( 'Two' ); 10 break; 11 12 case 3: 13 alert( 'Never executes!' ); 14 break; 15 default: 16 alert( 'An unknown value' ) 17 } 18 19 //注意事项 : 传入的参数和case 后的条件进行比较的实收进行的是严格相等,
也就是必须类型和值完全相等。在上面的例子中输入2会alert(Two), 但是输入3 会
进入default 因为输入的数据是字符串,不能和数字相等。
case "": break; 如果case 后未跟着break 关键字,则会出现该case 之后的所有方法都会被执行。
1 let a = 2 + 2; 2 3 switch (a) { 4 case 3: 5 alert( 'Too small' ); 6 case 4: 7 alert( 'Exactly!' );//此行之后的所有alert 都会执行 8 case 5: 9 alert( 'Too big' ); 10 default: 11 alert( "I don't know such values" ); 12 }
case 可以分组
let a = 2 + 2;
switch (a) {
case 4:
alert('Right!');
break;
case 3: // (*) 下面这两个 case 被分在一组 当a等于3或者5的时候都会执行
case 5:
alert('Wrong!');
alert("Why don't you take a math class?");
break;
default:
alert('The result is strange. Really.');
}
3、函数
概念:函数是程序的主要“构建模块”,函数允许不重复地多次调用代码
函数声明
1 function name(parameters) { 2 ...body... 3 } 4 首先是function关键字,然后是函数名,其次括号之间的参数列表,
多参数用逗号隔开,最后是花括号之间的代码,即函数体。 5 //示例 与 调用 6 function showMessage(){ 7 alert('hello world'); 8 } 9 10 //调用 11 showMessage(); 12 showMessage();
局部变量
1 function showMessage() { 2 let message = "Hello, I'm JavaScript!"; // 局部变量 3 4 alert( message ); 5 } 6 7 showMessage(); // Hello, I'm JavaScript! 8 9 alert( message ); // <-- 错误!变量是函数的局部变量
外部变量
函数可以访问外部变量
1 2 let userName = 'John'; 3 4 function showMessage() { 5 let message = 'Hello, ' + userName; 6 alert(message); 7 } 8 9 showMessage(); // Hello, John
同时可以对外部变量进行修改
1 2 let userName = 'John'; 3 4 function showMessage() { 5 userName = "Bob"; // (1) 改变外部变量 6 7 let message = 'Hello, ' + userName; 8 alert(message); 9 } 10 11 alert( userName ); // John 在函数调用之前 12 13 showMessage(); 14 15 alert( userName ); // Bob, 值被函数修改
如果在函数中声明了同名变量,那么它遮蔽外部变量。例如,在如下代码中,函数使用局部的 userName
,外部部分被忽略:
let userName = 'John';
function showMessage() {
let userName = "Bob"; // 声明一个局部变量
let message = 'Hello, ' + userName; // Bob
alert(message);
}
// 函数会创建并使用它自己的 userName
showMessage();
alert( userName ); // John,未更改,函数没有访问外部变量。
全局变量
任何函数之外声明的变量,例如上述代码中的外部 userName
都称为全局。
全局变量在任意函数中都是可见的(除非被局部变量遮蔽)。
减少全局变量的使用是一种很好的做法。现代的代码有很少或没有全局变量。大多数变量存在于它们的函数中。但是有时候,全局变量能够用于存储项目级别的数据。
参数
给函数传递数据
function showMessage(from, text) { // 参数:from、text
alert(from + ': ' + text);
}
showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)
参数默认值
参数默认值可以直接用等号赋予,也可以通过函数计算获得
unction showMessage(from, text = "no text given") {
alert( from + ": " + text );
}
showMessage("Ann"); // Ann: no text given
function showMessage(from, text = getText()) {
// anotherFunction() 仅在没有给定文本时执行
// 其结果变成文本值
}
function getText(){
return 'hello world";
}
返回值 return的使用
return 可以返回函数计算的结果,字符串等
也可以当做函数的中断执行,返回undefined;没有return 对的函数返回值也为undefined
不要在return 和返回值之间添加多余的空行,因为,return行的结尾会默认加“;”如果想跨行请用()包裹起来。return相关示例代码如下
1 //多个return 2 function checkAge(age) { 3 if (age > 18) { 4 return true; 5 } else { 6 return confirm('Got a permission from the parents?'); 7 } 8 } 9 10 let age = prompt('How old are you?', 18); 11 12 if ( checkAge(age) ) { 13 alert( 'Access granted' ); 14 } else { 15 alert( 'Access denied' ); 16 } 17 18 19 //返回值为undefined 20 function doNothing() { /* 空代码 */ } 21 22 alert( doNothing() === undefined ); // true 23 24 function doNothing() { 25 return; 26 } 27 28 alert( doNothing() === undefined ); // true 29 30 //跨行返回值 31 return ( 32 some + long + expression 33 + or + 34 whatever * f(a) + f(b) 35 )
函数命名
函数是行为。所以它们的名字通常是动词。它应该简短且尽可能准确地描述函数的作用。
示例:
showMessage
(
.
.
)
// 显示信息
getAge
(
.
.
)
// 返回 age (gets it somehow)
calcSum
(
.
.
)
// 计算求和并返回结果
createForm
(
.
.
)
// 创建表格 (通常会返回它)
checkPermission
(
.
.
)
// 检查权限并返回 true/false
4、函数表达式和箭头函数
函数表达式
1 let sayHello = function(){ 2 alert('hello'); 3 } 4 //函数表达式可以理解为创建了一个函数 并放进了变量 sayHello 5 6 sayHello(); 调用该表达式 7 alert(sayHello);//如果不加“()” 则展示的是JavaScript代码
为什么函数表达式后面要加";"?
1 function sayHi() { 2 // ... 3 } 4 5 let sayHi = function() { 6 // ... 7 }; 8 在代码块的结尾是不需要 ;,像 if { ... },for { },function f { }
等语法结构后面都不用加。 9 函数表达式通常这样声明: let sayHi = ...;,作为一个变量。 而不是代码块。
不管什么值,建议在语句结尾处建议使用分号 ;。所以这里的分号与函数表达式本身没
有任何关系,它只是终止了语句。
回调函数
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
function showOk() {
alert( "You agreed." );
}
function showCancel() {
alert( "You canceled the execution." );
}
// usage: functions showOk, showCancel are passed as arguments to ask
ask("Do you agree?", showOk, showCancel);
以上代码示例,即在ask 函数中,如果你点击了确定则会执行传入的yes()函数,否则执行no()函数,在函数内部触发了某一个条件后执行的另一个方法,该方法称为回调函数
函数表达式 vs 函数声明
第一:函数表达式创建的函数在JavaScript引擎中创建时间会比函数声明晚,当执行到函数表达式才会创建并可以使用,而函数声明创建的函数,则在JavaScript初始化阶段会优先执行函数声明。示例:
1 //以下代码会正常运行 2 sayHi("John"); // Hello, John 3 4 function sayHi(name) { 5 alert( `Hello, ${name}` ); 6 } 7 8 //以下代码不会正常运行 9 sayHi("John"); // error! 10 11 let sayHi = function(name) { // (*) no magic any more 12 alert( `Hello, ${name}` ); 13 };
第二:正常情况下我们声明一个函数,首先要考虑函数声明语法,当遇到某些特殊情况下则使用函数表达式,如需执行一个函数,这个函数需要在另一个函数内根据条件声明成不同的函数,并要在函数外使用,这种情况下,函数表达式就可以很好的胜任。示例:
1 let age = prompt("What is your age?", 18); 3 let welcome; 5 if (age < 18) { 7 welcome = function() { 8 alert("Hello!"); 9 }; 11 } else { 13 welcome = function() { 14 alert("Greetings!"); 15 }; 16 17 } 18 19 welcome();
通过运算符?简化上述例子:
1 let age = prompt("What is your age?", 18); 2 3 let welcome = (age < 18) ? 4 function() { alert("Hello!"); } : 5 function() { alert("Greetings!"); }; 6 7 welcome();
箭头函数
语法:let func = (arg1,arg2,...argN) => expression
等同于 let func = func(arg1,arg2,...argN){return message;}
示例:
1 let sum = (a, b) => a + b; 2 3 /* 箭头函数更短: 4 5 let sum = function(a, b) { 6 return a + b; 7 }; 8 */ 9 10 alert( sum(1, 2) ); // 3 11 12 //如果只有一个参数 13 // same as 14 // let double = function(n) { return n * 2 } 15 let double = n => n * 2; 16 17 alert( double(3) ); // 6 18 19 20 //如果没有参数 21 let sayHi = () => alert("Hello!"); 22 23 sayHi();
箭头函数重写 welcome()
1 let age = prompt("What is your age?",18); 2 let welcome = (age <18)? 3 ()=>alert('Hello'): 4 ()=>alert('Greetings'); 5 ); 6 welcome();