JavaScript的数组与函数介绍

一。数组

    1.数组的定义:使用主要前面两种

一,隐式创建

            var arr = [值1,值2,值3];

湾直接实例化

            var arr = new Array(值1,值2,值3);

角创建数组并指定长度

            var array = new Array(size);

 

求数组长度有方法:数组名。长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数组</title>
		<script type="text/javascript">
			
			
			/*三种定义方式*/
			// 字面量的方式
			var arr1 = [1, true, 'abc'];
			// 使用Array的构造方法, 给定每个元素
			var arr2 = new Array(1, true, 'abc');
			// 使用Array的构造方法, 给定长度而已
			var arr3 = new Array(3);
			arr3[0] = 1;
			arr3[1] = true;
			arr3[2] = 'abc';
			
			console.log(arr1.length + "      arr1");
			console.log(arr2.length + "      arr2");
			console.log(arr3.length + "      arr3");
			
			arr1.length = 5;
			
			console.log(arr1.length + "      arr1");
			arr3[3] = 123;
			console.log(arr3.length + "      arr3");
			
			console.log(arr2[100]);
			arr2[100] = undefined;
			console.log(arr2[100]); // aaa
			console.log(arr2.length + "      arr2"); // 101
			
			
			
			console.log("======================")
			var arr1 = new Array(10);
			console.log(arr1.length);
			arr1[-3] = 100;
			console.log(arr1[-3]);
			console.log(arr1.length);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

   2.数组的遍历

       a。普通for遍循遍历:不遍历属性

       b.for ... in:不遍历索引中的undefined

       c.forEach:不遍历属性和索引中的undefined

注意事项:数组在使用的时候建议大家规矩来用。在存放数据时,从下标0开始顺序的存放数组元素。如果下标:

                     1.为非负整数包括整数字符串:自动从0开始,不存在添加未定义

                     2.为负数,小数,非数字符串这些内容不计算在长度内,当成“属性”处理,相当于自定义属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr1=[1,2,34,"hello",'world',"your",true];
			arr1[21]=999;
			arr1[-3]=-666;
			arr1[33]=undefined;
			var arr2=new Array(1,2,3,4,5,6,7)
			var arr3=new Array(5)
			console.log(arr1.length + "------<"+"arr1的长度");
			console.log("========普通for循环===不遍历属性===========")
  			for(var i=0; i<arr1.length;++i) {
  				console.log(arr1[i]);
  			}
  			
  			console.log("==========for in===不遍历索引中的 undefined=================")
  			for( var idx   in arr1) {
  				console.log(arr1[idx])
  			}
  			
  			console.log("===========forEach===不遍历属性和索引中的undefined===================")
  			arr1.forEach(function (j,k) {
  				console.log(k + "---->" + j);
  			});
  			
  			console.log("================没啥子啦=========================")
 			arr1.forEach(function(m,n){
 				console.log(m + "---->" +n);
 			});
 			console.log("====================================================")
 			arr1.push('拉拉阿里');
 			for( var idx   in arr1) {
  				console.log(arr1[idx])
  			}
 			console.log("=========================================================")
           
		</script>
	</body>
</html>

     3.数组常见的操作方法

  •              推添加元素到最后

  •              unshift添加元素到最前

  •              pop删除最后一项

  •              shift删除第一项

  •              反数组翻转

  •              加入数组转成字符串

  •              indexOf数组元素索引

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

  •              splice剪接数组,原数组变化,

  •              concat可以实现前后删除效果数组合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数组常用方法</title>
		<script type="text/javascript">
			
			var arr = ['1','a',5,'3'];
			console.log(arr);
			arr.push(10);
			console.log(arr);
			arr.unshift(100);
			console.log(arr);
			arr.pop();
			console.log(arr);
			arr.shift()
			console.log(arr);
			arr.reverse();
			console.log(arr);
			var str = arr.join(' ');
			console.log(str);
			var idx = arr.indexOf(15);
			console.log(idx)
			
			var tempArr = arr.slice(1,3);  // 第二个参数是  结束位置  [  )
			console.log(tempArr);
			console.log("=====================")
			console.log(arr);
		//	arr.splice(2,1);  // 第二个参数是  长度
			arr.splice(2,1,100,200);  // 第二个参数是  长度,第三参数及其以后是新添加的元素(在删除的地方进行添加)
			console.log(arr);
			
			
			console.log("=====================")
			var arr1 = [1,2,3];
			var arr2 = [4,5,6];
			var arr = arr2.concat(arr1);
			console.log(arr);
			console.log(arr1);
			console.log(arr2);
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

二。函数

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

    1.函数的定义(主要使用前两种)

一个函数声明语句:该种方式定义的函数具有声明提升的效果

function 函数名([参数列表]){}
例如:
function foo(){ 
    console.log(1);
}
foo();

b函数定义表达式:以表达式方式定义的函数,函数的名称是可以不需要

foo();  

function foo(){
    console.log(1);
}
// 变量声明提升 console.log( a ); 
var a = 2;

c.Function构造函数函数声明语句

                 函数构造函数接收任意数量的参数,但最后一个参数始终都被看成是函数体,而前面的参数则列举出了新函数的参数。

var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {return (x + y);} add()

注意:

     1,js中的函数没有重载,同名的函数,会被后面的函数覆盖

     2,js中允许有不定数目的参数,后面介绍arguments对象

举个栗子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数的定义</title>
		<script type="text/javascript">
			/*3种*/
			// 1、函数声明语句
			function fun1(a,b){
				console.log("七夕快乐===" + (a+b));
			}
			fun1(1,1);
			// 2、函数定义表达式
			var fun2 = function (a, b){
				console.log("用区块链来记录你们幸福的瞬间==" + (a+b));
			}
			
			fun2(1,1);
			
			// 3、Function 构造函数
			var fun3 = new Function('a','b','console.log("好大的雨!==" + (a+b))');
			fun3(1,1);
			
		</script>
	</head>
	<body>
	</body>
</html>

    2.函数名的提升

一个。JavaScript引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。所以,下面的代码不会报错

f();//先调用
function f() {}//后声明

b。表面上,上面代码好像在声明之前就调用了函数f。但是实际上,由于变量提升,函数名f被提升到了代码头部,也就是在调用之前已经声明了。但是,如果采用赋值语句定义函数,JavaScript就会报错

f();
var f = function (){};

// TypeError: undefined is not a function

    3.函数的参数,调用和return语句

   一,参数

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

  1. 实参可以省略,那么对应形参为为undefined
  2.            若函数形参同名(一般不会这么干):在使用时以最后一个值为准。
  3.            可以给参数默认值:当参数为特殊值时,可以赋予默认值。
  4.            参数为值传递,传递副本;引用传递时传递地址,操作的是同一个对象。
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>函数</title>
		<script type="text/javascript">
			function fun1(a) {
				a = 10;
			}
			var num = 100;
			fun1(num);

			console.log(num);

			function fun2(obj) {
				//obj.name = 'zs';
				obj = {
					"name": "zs"
				};
			}

			var o = {
				"name": "lisi"
			};
			fun2(o);

			console.log(o.name);

			function fun3(a, b) {
				console.log(a + "+" + b + "=" + (a + b));
			}

			fun3(1);

			var n1 = 10;
			var n2 = 100;

			function fun4(a, b) {
				var temp = a;
				a = b;
				b = temp;
			}
			fun4(n1, n2);
			console.log(n1); // 10 
			console.log(n2); // 100

			var obj2 = [1, 2, 3];

			function paramter2(o) {
				o[1] = 3;
				o = [2, 3, 4];
			}
			paramter2(obj2);
			console.log(obj2);
			
			// 计算两个数的和
			function fun5(a, b){
				var res =  a+b;
			}
			
			var res = fun5(3,5);
			console.log(res);				
		
		</script>
	</head>

	<body>
	</body>

</html>

          湾函数的调用

                     常用调用方式:函数名([ 实参]) ; 存在返回值可以变量接收,若接收无返回值函数则为undefined。

         c.return语句

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

作用:在没有返回值的方法中,用来结束方法有返回值的方法中,一个是用来结束方法,一个是将值带给调用者。

           d.arguments对象和函数的方法及属性

arguments 对象中存放了调用该函数时传递的实际参数。由于JavaScript允许函数有不定数目的参数,所以我们需要一种机制,可以在函数体内部读取所有参数,这就是参数对象的由来。函数中可以使用arguments对象来获取实参

           e。函数的作用域(全局(全局变量)和局部(局部变量))

                    1)全局变量与局部变量同名问题

var box =1; //全局变量
function display(box){
var box=3; //此处 box 与全局变量 box 没有关系,这里的 box 为传递的参数,相当于新声明的局部变量
var b = 2; //局部变量 console.log("box-->"+box);
}
display();
//b 不能访问
console.log("b-->"+b);

         (2)在函数中定义变量时,若没有加var关键字,使用之后自动变为全局变量

function fun(){ 
    a = 100;
}
fun();

                    (3)变量作用域提升

function foo(x) { if (x > 100) {
    var tmp = x - 100;
  }
}
//等同于
function foo(x) {
    var tmp;

if (x > 100) {
    tmp = x - 100;
};

举个栗子:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>作用域问题</title>
		<script type="text/javascript">
			var a = 10;

			function test1(a) {

				//var a = 100;
				var a;
				console.log(a);
			}
			console.log(a); // 10

			test1(100);

			var box = 1;

			function test2() {
				var b = 100;
				console.log(box);
				var box = 10;
			}

			/*var c = 100;
			
			function test3(){
				c = 10;
			}
			test3();
			console.log(c);
			*/

			function foo(x) {
				if(x > 100) {
					var temp = x - 100;
				}
				console.log(temp);
			}
			
			foo(101);
			
			
			
			
		</script>
	</head>

	<body>
	</body>

</html>

         F。闭包

出于种种原因,我们有时候需要得到函数内的局部变量。但是,正常情况下,这是办不到的,只有通过变通方法才能实现。那就是在函数的内部,再定义一个函数。

闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。以及还可以避免变量名冲突的问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>闭包</title>
		<script type="text/javascript">
			function test(){
				var str = "hhahah";
				return function(){
					console.log(str);
				}
			}
			
			var inner = test();
			inner();
			
			
			function test1(){
				
				
				function test2(){
					console.log("test");
				}
				test2();
			}
			//test2();
			
			
			function outter(){
				var a = 10;
				function inner(){
					console.log(++a);	
				}
				return inner;
			}
			
			var innerFun = outter();
			innerFun();
			innerFun();
			innerFun();
			
			innerFun = outter();
			innerFun();
			
		</script>
	</head>
	<body>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_38982845/article/details/81806575