for循环是编程语言中一种循环语句,而循环语句由循环体及循环的判定条件两部分组成,其表达式为:for(单次表达式;条件表达式;末尾循环体){中间循环体;}。 [1-2]
一、for循环的语句格式
1、循环语句的组成
(1)初始化语句:一条或者多条语句,这些语句完成一些初始化操作
(2)判断条件语句:这是一个boolean 表达式,这个表达式能决定是否执行循环体
(3)循环体语句:这个部分是循环体语句,也就是我们要多次做的事情
(4)控制条件语句:这个部分在一次循环体结束后,下一次循环判断条件执行前执行。通过用于控制循 环条件中的变量,使得循环在合适的时候结束
2、循环语句的格式
for(初始化语句;判断条件语句;控制条件语句){
循环体语句;
}
二、for循环执行流程
1、for循环执行顺势:
A:执行初始化语句
B:执行判断条件语句,看其结果是true还是false
如果是false,循环结束。
如果是true,继续执行。
C:执行循环体语句
D:执行控制条件语句
E:回到B继续
1
2
3
4
5
6
7
2、循环执行流程图:
一丶函数的声明
函数声明有两种方式:自定义函数和函数表达式。
1.1、自定义函数
语法格式:
function 函数名称(参数列表) {
函数体
[return 值]
}
注意:
(1)function 是声明函数的关键字必须小写;
(2)function 关键字后必须跟函数名,函数名一般使用动词,需要符合命名规则;
(3)函数名后跟一对小括号,小括号后跟一对大括号,大括号内是函数体。
1.函数表达式(匿名函数)
语法格式:
var 函数引用名称 = function(参数列表) {
函数体
[return 值]
}
注意:
(1)函数表达式方式声明函数仍然需要使用 function 关键字;
(2)function关键字后紧跟一对小括号,小括号后跟一对大括号,大括号内是函数体;
(3)由于这种定义的函数没有名字,因此需要把函数赋值给一个变量 。
二.函数的调用
根据函数的声明方式不同调用函数的方式也略有不同。
2.1、自定义函数调用
使用函数名称来调用
// 声明函数
function myFunction() {
}
// 调用函数
myFunction();
2.2、函数表达式调用
需要通过函数变量名来调用
// 声明函数
var myFunction = function() {
}
// 调用函数
myFunction();
2.3、自定义函数调用与函数表达式调用区别
<script>
fn1();
function fn1() {
console.log('fn1');
}
fn2();//报错
var fn2 = function() {
console.log('fn2');
};
</script>
区别:
(1)如果是自定义函数来声明的函数,在声明函数语句的前后都可以调用;如果是函数表达式来声明的函数,只能在声明语句之后调用,不能在声明语句之前调用。
(2)对于自定义函数方式来声明的函数,使用函数名称来调用;而对于函数表达式方式声明的函数,需要通过函数变量名来调用。
三、函数参数
由于函数内部某些值是不固定的,我们需要根据调用时传递的不同值得到不同的结果,这时就需
要使用参数。而参数可分为形参和实参两种。
形参 :在声明函数时用于接收调用时传入的值,形参不需要使用 var 关键字声明。
实参 :在调用函数时传递给函数小括号内的真实数据。
语法格式:
function 函数名称(形参列表){
函数体
}
函数名称(实参列表);
示例:
<script>
function add(a, b) {
console.log(a, b);
return a + b;
}
var result = add(2, 3); //2 3
console.log(result); //5
result = add(4, 6, 9); // 4 6
console.log(result); //10
result = add(5); //5 undefined
console.log(result); //5+undefined=NaN
</script>
运行结果:
注意:
(1)形参不需要var声明变量,否则会报错;
(2)函数声明可带参数也可不带参数;
(3)声明函数时括号内是形参,形参的默认值为 undefined;
(4)调用函数时括号内是实参 ;
(5)多个参数之间用英文逗号分隔;
(6)当实参与形参个数不匹配时结果不可预计,因此尽量要匹配 。
四、返回值
对于某些函数来说,执行完后会返回执行结果给调用函数处。这时就需要在函数体内通过 return
语句来将数据返回。
语法格式:
function 函数名(形参列表) {
函数体;
return 语句
}
示例:
<script>
function sub(a, b) {
return a - b;
}
var result = sub(3, 1);
console.log(result); //2
function fn(s) {
console.log(s);
return;
}
result = fn('hello'); //hello
result = fn(); // undefined
</script>
注意:
(1)当函数执行到 return 语句时,会结束函数执行并返回指定的值 ;
(2)如果函数无须返回值,也可以有 return 语句,但 return 后不能跟别的值 ;
(3)如果函数没有 return 语句,返回的值是 undefined。
五、函数的内部属性
5.1、arguments
在 JavaScript 的函数中 arguments 属性封装了函数的实参。
arguments说明:
(1)arguments是一个伪数组对象,它不是数组类型,可用 instanceof 运算符查看;
(2)当调用函数时,所传递的实参都保存在 arguments 中 ;
(3)可通过 arguments 对象的 length 属性来获取实参个数 ;
(4)arguments[0] 表示第一个实参,arguments[1] 表示第二个实参,以此类推;
(5)arguments 中有一个 callee 属性,它是一个函数对象,指向当前所使用的函数;
(6)只有函数才有arguments 对象,而且每个函数都内置好了这个arguments。
伪数组说明:伪数组并不是真正意义上的数组
(1)伪数组具有数组的lenght属性;
(2)伪数组可以按照索引方式进行存储;
(3)伪数组没有真正数组的一些方法pop()、push()等。
示例:
<script>
function add(a, b) {
// console.log(arguments);//里面存储了所有传递过来的实参
// console.log(typeof arguments);//object
// console.log(arguments instanceof Array); // false
// console.log(arguments instanceof Object);// true
// console.log(arguments.length);//8
// console.log(arguments[5]);//7
// 实现简单加法
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
// console.log(arguments[i]);
sum = sum + arguments[i];
}
console.log(sum);//44
}
add(2, 3, 4, 5, 6, 7, 8, 9);
</script>
5.2、this
this 本身是 JavaScript 中的一个关键字,被称为 this 的事物指的是 “ 拥有 ” 当前代码的对象。在函
数调用中,根据函数的调用方式不同, this 指向的对象也不同。
示例:
<button>按钮</button>
<script>
// this 指向问题 一般情况下this的最终指向的是那个调用它的对象
// 1、全局作用域或者普通函数中的this指向全局对象window(注意定时器里面的this指向window)
console.log(this); //window
function fn() {
console.log(this); //window
}
fn();
window.setTimeout(function() {
console.log(this); //window
}, 1000)
// 2、方法调用中谁调用this指向谁
var obj = {
say: function() {
console.log(this); //obj
}
}
obj.say();
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
console.log(this); //btn
})
// 3、构造函数中this指向函数的实例
function Fun() {
console.log(this); //this指向的是fun实例对象
}
var fun = new Fun();
</script>
注意:
(1)全局作用域或者普通函数中的this指向全局对象window(注意定时器里面的this指向window);
(2)方法调用中谁调用this指向谁;
(3)构造函数中this指向函数的实例。
六、函数的方法
6.1、call()
使用 call() 方法,您可以编写能够在不同对象上使用的方法,没有返回值。
语法格式:
函数名称.call();
示例:
<script>
window.color = 'red';
var obj = {
color: 'blue'
}
function show() {
console.log(this.color);
}
show(); // red
show.call(this); // red
show.call(window); // red
show.call(obj); // blue
function add(a, b) {
return a + b;
}
//console.log(window)
var result = add(2, 3);
console.log(result);
// 通过 call() 方法来调用函数
result = add.call(this, 1, 8);
console.log(result); //9
result = add.call(window, 2, 5);
console.log(result); //7
result = add.call(add, 3, 4);
console.log(result); //7
</script>
注意:当使用函数的 call() 方法调用时,方法的第一个参数是函数对象,如果有参数,则从 第二个位置开始依次提供。
6.2、apply()
通过 apply() 方法,您能够编写用于不同对象的方法,没有返回值。
语法如下:
函数名.apply();
示例:
<script>
window.color = 'red';
var obj = {
color: 'blue'
}
function show() {
console.log(this.color);
}
show(); // red
show.apply(this); // red
show.apply(window); // red
show.apply(obj); // blue
console.log('------------------');
function add(a, b) {
return a + b;
}
var result = add(2, 3);
console.log(result);
result = add.apply(this, [1, 3]);
console.log(result);
result = add.apply(window, [4, 5]);
console.log(result);
result = add.apply(add, [4, 6]);
console.log(result);
console.log('----------------');
var color = 'green';
</script>
注意:
(1)apply() 方法在这点的应用和 call() 方法没有区别,都是可以通过第一个参数来改变引用象。
(2)apply() 方法需要将实参封装到一个数组中统一传递。第一个参数是函数对象,第二个参数是数组,里面封装了参数。
<script>
function print() {
'use strict'; // 指定严格模式
console.log(this);
console.log(this.color);
}
// print.call(null);
//print.apply(undefined);
</script>
注意:
(1)在严格模式下,函数的指向始终是指定的值;
(2)在非严格模式下,如果使用call()或者apply()方法,传入null或者undefined会转换成一个全局的window对象。