第六次网页前端培训笔记(数组、函数、运算符和控制语句)

一.数组

数组是按次序排列的一组数据,每个值的位置都有编号(从0开始),整个数组用方括号表示。

1.数组的定义

(1)隐式定义

         var 数组名 = [ ];//空数组

         var 数组名 = [ 值1,值2,值3...];

(2)直接实例化

        var 数组名 = new Array(值1,值2,值3...);

(3)定义数组并设置长度

       var 数组名 = new Array(size);

2.数组的操作

数组的下标从0开始

获取数组的值: 数组名 [ 下标 ];(如果下标不存在,则undefined)

设置数组的值: 数组名 [ 下标 ] = 值;(如果下标不存在,则自动扩容)

获取数组的长度:数组名.length;

设置数组的长度:数组名.length = 值;

了解:

如果设置非整数型的下标,则会成为数组的属性,不计入数组的长度

设置属性

数组名.属性名 = 值;

数组名[ "属性名" ] = 值;

获取属性

数组名.属性名;

数组名[ "属性名" ];

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组</title>
	</head>
	<body>
		<script type="text/javascript">
		/*数组的定义*/
		//隐式定义
		var a1 = [];
		console.log(a1);
		var a2 = [1,2,"a",true];
		console.log(a2);
		//直接实例化
		var a3 = new Array(1,2,3);
		console.log(a3);
		//定义数组并设置长度
		var a4= new Array(5);
		console.log(a4);
		
		console.log("---------");
		/*数组的操作*/
		//获取指定下标的值
		console.log(a2[1]);//2
		//如果下标不存在
		console.log(a2[6]);//undefined
		//设置指定下标的值
 		a2[1] = 12;
		console.log(a2);
		//如果下标不存在
		a2[6]= 100;
		console.log(a2[6]);//100
		//获取数组的长度
		console.log(a2.length);//7
		//设置数组的长度
		a3.length = 5;
		console.log(a3);
		</script>
	</body>
</html>

3.数组的遍历

数组的遍历即依次访问数组的每一个元素,JS提供三种遍历数组的方式:

(1)for循环遍历

for(var index = 0;index < 数组长度;index ++){

}

相当于Java中:

for(int  index = 0;index < 数组长度;index ++){

}

(2)for ...  in 循环

for(var 下标名 in 数组){

}

(3)forEach循环

数组.forEach(function(element,index){

        // element:元素

       //  index :下标

});

注:* for ----》  不遍历属性

       * forEach -----》不遍历属性和索引中的undefined

       *  for   in  -----》  不遍历索引中的undefined

			/*数组的遍历*/
			console.log(a3);
			console.log("for 循环遍历");
			//for循环遍历
			for (var i = 0; i < a3.length; i++) {
				console.log("下标:" + i + " ,值:" + a3[i]);
			}
			//for in
			console.log("for   in");
			for (var i in a3) {
				console.log("下标:" + i + " ,值:" + a3[i]);
			}
			//forEach
			console.log(" forEach ");
			a3.forEach(function(element, index) {
				console.log("下标:" + index + " ,值:" + element);
			})

 

4.数组提供的方法

    push            添加元素到最后

    indexof        数组元素索引

    join              数组转换成字符串

    split             字符串方法:将字符串转换成数组

    unshift         添加元素到最前

    pop              删除最后一项

    shift             删除第一项

    reverse        数组翻转

    slice             截取(切片)数组,原数组不发生变化

    splice           剪接数组,原数组变化,可以实现前后删除效果

    concat          数组合并


			/*数组提供的方法*/
			var a5 = ["a", "b", "c"];
			//push    添加元素到最后
			a5[a5.length] = "d";
			a5.push("e");
			console.log(a5);
			//indexof    数组元素索引
			console.log(a5.indexOf("a")); //0
			console.log(a5.indexOf("v")); //-1,找不到所以返回-1
			//join       数组转换成字符串
			console.log(a5.join("-"));
			//split    字符串方法,将字符串转换成数组
			var str = "1,2,3,4,5";
			console.log(str.split(","));

二.函数

       函数,即方法。就是一段预先设置的功能代码块,可以反复调用,根据输入参数的不同,返回不同的值。函数也是对象。

1.函数的定义

(1)函数声明语句

        function   函数名([ 参数列表]){

}

(2)函数定义表达式

var  变量名/函数名 = function([ 参数列表]){

}

(3)Function 构造函数

var 函数名 = new Function([ 参数列表],函数体);

2.函数的参数

       函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数,定义时的参数称为形参,调用时的参数称为实参。

(1)实参可以省略,那么对应形参为undefined

(2)若函数形参同名,在使用时以最后一个为准

(3)可以给参数默认值:当参数为特殊值时,可以赋予默认值

(4)参数为值传递,传递副本;引用传递时传递地址,操作的是同一个对象

	        /*函数的参数*/
			//1.实参可以省略,那么对应形参为undefined
			function t1(x, y) {
				console.log(x + y);
			}
			//调用函数
			//未设置实参
			t1(); //NaN
			t1(1); //NaN
			t1(1, 2); //3
			//2.若函数形参同名,在使用时以最后一个为准
			function t2(x, x) {
				console.log(x);
			}
			t2(10, 20); //20
			//3.可以给参数默认值:当参数为特殊值时,可以赋予默认值
			function t3(x) {
				//如果形参x有值,则值为x传递的值;否则为"x"
				x = x || "x"
				console.log(x);
			}
			t3(12); //12
			t3(); //x
			function t4(x) {
				(x != null && x != undefined) ? x = x: x = "x"
				console.log(x);
			}
			t4(); //x
			t4("hello world"); //hello world
			//4.参数为值传递,传递副本;引用传递时传递地址,操作的是同一个对象
			var num = 12;

			function t5(num) {
				num = 20;
			}
			//调用函数
			t5(num);
			console.log(num); //12
			//引用传递
			var obj = {
				name: "zhangsan"
			};
			console.log(obj);

			function t6(o) {
				o.name = 'wangwu';
			}
			t6(obj);
			console.log(obj);

3.函数的调用

(1)常用调用模式

         函数名( [参数列表] );

(2)函数调用模式(函数有返回值)

        var 变量名 = 函数名( [参数列表] );

(3)方法调用模式

       对象.函数名();

			/*函数的调用*/
			//常用调用模式
			function v1() {
				console.log("常用调用模式...");
			}
			v1();
			//函数调用模式(函数有返回值)
			var v2 = function(a) {
				console.log("函数调用模式...");
				return a;
			}
			var zz = v2(1);
			console.log(zz); //1

4.return(函数返回值)

         函数的执行可能会有返回值,需要使用 return 语句将结果返回。return语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回 undefined。

作用:

     (1)在没有返回值的方法中,用来结束方法

     (2)有返回值的方法中,一个是用来结束方法,一个是将值带给调用者

5.函数的作用域

在 JS 中,只有在函数中才有作用域。

    (1)在函数中,存在局部变量和全局变量

    (2)在函数中,如果声明变量时未使用 var 修饰符,则该变量是全局变量

三.运算符和控制语句

1.运算符

       运算符用于执行程序代码运算,会针对一个极其以上操作数来进行运算。

(1)算术运算符

(2) 赋值和扩展运算符 

(3)比较运算符

(4) 逻辑运算符

(5)三目运算符

 2.控制语句 

流程控制语句一共有三种:

(1)流程执行:从上到下,从左至右

(2)选择执行:分支选择(if条件句、Switch语句)

(3)循环选择:重复执行(while、do   while 、for、死循环)

break 和 continue:

break:停止本层循环

continue:暂停本次循环,继续下一次 

猜你喜欢

转载自blog.csdn.net/weixin_64416967/article/details/122839118