二、流程控制与函数方法
二、流程控制与函数方法
1. 流程控制
JavaScript中的流程控制与其他语言大同小异，主要就是顺序、选择、循环
1.1 顺序语句
顺序语句不多赘述，就是程序自上而下的执行
1.2 选择语句
选择语句无外乎if...else if...else..
var score = 78;
if (score>=90) {
console.log('优秀');
}else if (score>=80 && score<90) {
console.log('良');
}else if (score>=60 && score<80) {
console.log('及格');
}else {
console.log('不及格')
}
1.3 循环语句
-
while循环
let sum = 0; let number = 1; while (number<=100) { sum+=number; number++; } console.log(sum) -
do while循环
let sum = 0; let number = 1; do { sum+=number; number++; } while (number<=100); console.log(sum) -
for循环
见一、Hello,World与数据类型中，数组部分的示例
2. 函数
在JavaScript中函数是用function{}包裹的代码块，用来处理一种问题或实现一种功能。
2.1 无参函数
顾名思义，无参函数就是只函数不需要从外部传递值进入，直接调用即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
"use strict";
function showInfo() {
console.log('无参函数');
}
</script>
</head>
<body>
<button onclick="showInfo()">Click Here</button>
</body>
</html>
2.2 有参函数
下面的例子中，点击按钮修改h1标签中的值，在调用showInfo函数时传入x,y返回他们的和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
"use strict";
function showInfo(x, y){
document.getElementsByTagName('h1')[0].innerHTML = x+y;
}
</script>
</head>
<body>
<h1></h1>
<button onclick="showInfo(1,2)">Click Here</button>
</body>
</html>
2.3 不传递足量的参数
例如，在function定义的时候，我们的形参设置的是两个，但是我们在调用时只传入一个参数，会怎样呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
"use strict";
function showInfo(x, y){
console.log(x);
console.log(y);
document.getElementsByTagName('h1')[0].innerHTML = x+y;
}
</script>
</head>
<body>
<h1></h1>
<button onclick="showInfo(1)">Click Here</button>
</body>
</html>
在这个例子中查看console页面的输出，可以看到没有传入参数的位置，变量的值为undifined
1 --> x
undefined --> y
2.4 出入过量的参数
在调用函数时传递的参数超过形参的数量，默认会不使用超过的参数。我们可以使用arguments来获取到传递的所有参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
"use strict";
function showInfo(x, y){
console.log(arguments.length); // 3
console.log(arguments[0]); // 1
console.log(arguments[1]); // 2
console.log(arguments[2]); // 3
document.getElementsByTagName('h1')[0].innerHTML = x+y;
}
</script>
</head>
<body>
<h1></h1>
<button onclick="showInfo(1,2,3)">Click Here</button>
</body>
2.5 可变参数
与Java的使用一样，JavaScript中也使用...参数表示可变参数，下面是一个可变参数的例子，需要注意的是可变参数的值是超出部分参数的数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
"use strict";
function showInfo(x, y, ...manyMoreArgs){
console.log(x); // 1
console.log(y); // 2
console.log(manyMoreArgs); // [3]
document.getElementsByTagName('h1')[0].innerHTML = x+y;
}
</script>
</head>
<body>
<h1></h1>
<button onclick="showInfo(1,2,3)">Click Here</button>
</body>
</html>
3. 方法
在对象中的函数就是方法
<script>
"use strict";
let person = {
name: 'xiaoMing',
age: 20,
score: 75.5,
getName: function (){
return this.name;
}
}
console.log(person.getName());
</script>
4. 严格模式(use strict)
在JavaScript中建议开启严格模式，在代码的第一行添加"use strict";开启后会对下面的JS与法做严格的校验。
在严格模式下，声明变量建议使用 let，声明常量使用const。
<script>
"use strict";
let name = 'xm';
const PI = 3.1415926;
</script>
4.1 局部变量和全局变量
<script>
"use strict";
var outerName = 'Outer'; // 全局变量
function myFunction(){
var innerName = 'Inner'; // 局部变量
outerName = 'OOOuter'; // 在这里仍可以访问var声明的全局变量
}
// innerName = "IIInner"; 在函数内部声明的局部变量无法在函数外部使用
</script>
4.2 let
let声明的变量只在当前的代码块中生效；使用var声明的变量在所有的地方都可以使用，var声明的变量是属于window对象的。
下面的例子中，循环体中分别使用var和let声明变量，查看循环结束后变量的值。
<script>
"use strict";
var i = 5;
for (var i = 0; i<10; i++){
console.log(i);
}
console.log('result --> '+i);
</script>
使用var时，最后输出的i的值为10，说明在循环外声明的变量被修改了；而我们把var都替换成let时，最后输出的result仍是5，说明在循环外的变量没有被修改。
<script>
"use strict";
let i = 5;
for (let i = 0; i<10; i++){
console.log(i);
}
console.log('result --> '+i);
</script>
