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();

javaScript 基础知识汇总（三）

1、循环：while 和 for

2、 switch 语句

3、函数

4、函数表达式和箭头函数

相关推荐