JavaScript数组和函数的基本用法

目录

一、数组

1.数组的概念

2.数组的创建

3.数组的获取

4.数组的遍历

5.数组添加元素

二、函数

1.函数的调用

2.函数的参数

3.函数的返回值

4.arguments的使用

扫描二维码关注公众号,回复: 15621783 查看本文章

一、数组

1.数组的概念

- 数组是一种特殊的变量,它能够一次存放一个以上的值。

- 在数组中可以存放任意类型的元素。

2.数组的创建

- 通过 new 关键词创建数组

var 数组名 = new Array() ;

var arr = new Array();   // 创建一个新的空数组 “A”为大写。

var arr = new Array(‘汽车’,’卡车’);

- 通过数组文本直接创建数组。

var array-name = [item1, item2, ...];

var arr = [‘汽车’,’卡车’];

注意:在数组种可以存放任意数据类型。如:['小明',12,true,28.9]

3.数组的获取

数组可以通过索引(下标)来访问、设置、修改对应的数组元素,可以通过“数组名[索引]”的形式来获取数组中的元素,数组的下标是从0开始。

// 定义数组

var arr= [1,2,3];

// 获取数组中的第2个元素。

alert(arr[0]); //1 

alert(arr[1]); //2

alert(arr[2]); //3

alert(arr[3]); //undefined

注意:如果访问时数组没有和索引值对应的元素,则得到的值是undefined

4.数组的遍历

把数组中的每个元素都访问一次,可以通过for循环遍历数组。

var arr = ['小明','小红', '大胖'];

for(var i = 0; i < arr.length; i++){

    console.log(arr [i]);

}

-  length的长度是为数组的个数,非下标。

- 当我们数组里面的元素个数发生了变化,这个 length 属性跟着一起变化。

- 数组的length属性可以被修改:

- 如果设置的length属性值大于数组的元素个数,则会在数组末尾出现空元素,访问空元素时显示undefined;

- 如果设置的length属性值小于数组的元素个数,则会把超过该值的数组元素删除。

//js

 var arr = ['小明', '小红', '小兰', '大胖'];

  arr.length = 3;

console.log(arr.length);

console.log(arr);

5.数组添加元素

```js

  数组[ 数组.length ] = 新数据;

```

举例:

var arr = ['小明', '小红', '小兰', '大胖'];

    arr[1]  = '小帅';// 重新赋值

    arr[arr.length] = '小帅';//末尾新增一个值

console.log(arr);

二、函数

函数:就是**封装了一段可被重复调用执行的代码块**。通过此代码块可以**实现大量代码的重复使用**。

// 声明函数

function 函数名(){

    return  需要返回的值;

}

//举例

function sayHello(){

  console.log(“hello”);

}

- function 是声明函数的关键字,必须小写

- 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum;

- 函数需要调用后才执行,不调用里面代码块不执行。

1.函数的调用

  // 声明函数 计算1-100之间的和

  function getSum(){

    var sumNum = 0;// 准备一个变量,保存数字和

    for (var i = 1; i <= 100; i++) {

      sumNum += i;// 把每个数值 都累加 到变量中

    }

    alert(sumNum);

  }

 getSum(); //函数调用。


2.函数的参数

- 形参:函数定义时设置接收调用时传入。

- 实参:函数调用时传入小括号内的真实数据。

参数的作用 : 在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。

function say(mylanguage){

  console.log(“请说” + mylanguage);

}

say(“中文”);

  ```js

  // 带参数的函数声明。

  function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔。

    // 函数体

  }

  // 带参数的函数调用

  函数名(实参1, 实参2, 实参3...);

  ```

  1. 调用的时候实参值是传递给形参的。

  2. 形参简单理解为:不用声明的变量。

  3. 实参和形参的多个参数之间用逗号(,)分隔。

 function getSum(sum1,sum2,sum3){

 console.log(sum1);

  console.log(sum2);

   console.log(sum3);

}

 getSum(sum1,sum2,sum3);

总结:

- 声明函数的时候可以不带参数;

- 实参多于形参时,形参只读取形参的个数;

- 实参少于形参时,形参未赋值undefined,为了确保不可避免错误,传参需一致。

3.函数的返回值

返回值:函数调用整体代表的数据;函数执行完成后可以通过return语句将指定数据返回。

// 声明函数

function 函数名(){

    ...

    return  需要返回的值;

}

//举例

function getName(){

return “小二班的:张三”;

}

var myname = getName();

console.log(myname);

-  在使用 return 语句时,函数会停止执行,并返回指定的值。

-  如果函数没有 return ,返回的值是 undefined

-  return只返回一个值,如return 1,2。//返回2

break ,continue ,return

- break :结束当前的循环体(如 for、while)

- continue :跳出本次循环,继续执行下次循环(如 for、while)

- return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码 。

4.arguments的使用

当不确定有多少个参数传递的时候,可以用 arguments 来获取。JavaScript 中,

arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象,

arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组,

因此可以进行遍历。伪数组具有以下特点:

- 具有 length 属性。

- 按索引方式储存数据。

- 不具有数组的 push , pop 等方法。

    function fn() {

            // 我们可以按照数组的方式遍历arguments

            for (var i = 0; i < arguments.length; i++) {

                console.log(arguments[i]);

            }

     }

    fn(1, 2, 3);

    fn(1, 2, 3, 4, 5);

注意:在函数内部使用该对象,用此对象获取函数调用时传的实参。

- 伪数组 并不是真正意义上的数组。

  - 具有数组的 length 属性。

- 按照索引的方式进行存储的。

  - 它没有真正数组的一些方法 pop()  push() 等等。

练习题

1.封装一个函数,判断某个值是否存在某个数组里面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var arr = ['a','s','d','f','8'];
			console.info(isInArray(arr,'8'));//循环的方式
			function isInArray(arr,value){
			    for(var i = 0; i < arr.length; i++){
			    if(value === arr[i]){
			      return "在这个数组中";
			        }
			    }
			    return "不在这个数组中";
			}
		</script>
	</body>
</html>

实现效果

2.传递一个数组,实现数组翻转的函数。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function overturn(){
			var arr = ["a","b","c","d","e"];
			  var newarr = [];
			  for (var i=arr.length-1;i>=0;i--){
			  	newarr[newarr.length]=arr[i];
			  }
			  return newarr;
			  }
			  var newarr = overturn();
			console.log(newarr);
			
		</script>
	</body>
</html>

实现效果

 3.数组筛选,把分数及格(60分)的同学放入一个新数组。

var score = [90,20,49,10,80,65,44,70,60];

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var score = [90,20,49,10,80,65,44,70,60];
			var newscore = [];
			for (var i=0;i<score.length;i++) {
				if(score[i]>=60){
				newscore[newscore.length]=score[i];
			  }
			}
			console.log(newscore);
		</script>
	</body>
</html>

实现效果

猜你喜欢

转载自blog.csdn.net/qq_65715980/article/details/125546247
今日推荐