Web前端-JavaScript(js数组和函数)

发布时间:2023年12月21日

1.数组

1.1 数组的概念

  • 数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。
  • 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素

1.2 创建数组

JS 中创建数组有两种方式:

  • 利用 new 创建数组
var arr = new Array();   // 创建一个新的空数组
  • 利用数组字面量创建数组

    //1. 使用数组字面量方式创建空的数组
    var  数组名 = []//2. 使用数组字面量方式创建带初始值的数组
    var  数组名 = ['小白','小黑','大黄','瑞奇'];
    
  • 数组元素的类型

    数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。

    var arr = ['小白',12,true,28.9];
    

1.3 获取数组中的元素

  • 索引 (下标) :用来访问数组元素的序号

  • 数组下标从 0 开始

  • 数组元素可以通过索引来访问、设置、修改对应的数组元素.

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);    

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

1.4 数组中新增元素

数组中可以通过以下方式在数组的末尾插入新元素:

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

1.5 遍历数组

  • 数组遍历

    var arr = ['red','green', 'blue'];
    for(var i = 0; i < 3; i++){
        console.log(arr[i]);
    }
    
  • 数组的长度

var arr = [1,2,3];
alert(arr.length);


- 注意:

- 此处数组的长度是数组元素的个数, length - 1 是最大的索引数
  -  当我们数组里面的元素个数发生了变化,这个 length 属性跟着一起变化

  - 如果设置的length属性值大于数组的元素个数,则数组其余元素为undefined;
  
  - 如果设置的length属性值小于数组的元素个数,则会把超过该值的数组元素删除


案例练习:

1. 在数组中存放1 - 10
2. 冒泡排序

```js
var arr1 = [];
for (var i = 0; i <10; i++) {
   arr1[i] = i+1   
}
console.log(arr1)
var array = [4, 3, 1, 5, 2];
for (var i = 0; i < array.length - 1; i++) {
     for (var j = 0; j < array.length - 1 - i; j++) {
         if (array[j] > array[j + 1]) {
             var temp = array[j];
             array[j] = array[j + 1];
             array[j + 1] = temp;
         }
     }
}
console.log(array);

2.函数

2.1 函数的概念

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

2.2 函数的使用

函数声明
function 函数名() {
    //函数体
}
  • function 是声明函数的关键字,必须小写

  • 由于函数一般是为了实现某个功能才定义的

调用函数
函数名();
  • 调用的时候千万不要忘记添加小括号

  • 函数不调用,自己不执行

函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口

例子:封装计算1-100累加和

function getSum(){
  var sum = 0;// 准备一个变量,保存数字和
  for (var i = 1; i <= 100; i++) {
    sum += i;// 把每个数值 都累加 到变量中
  }
  alert(sumNum);
}

// 调用函数
getSum();

2.3 函数的参数

函数参数语法
  • 形参:函数定义时设置接收调用时传入
    • 形式上的参数 函数定义的时候 传递的参数 当时并不知道是什么
  • 实参:函数调用时传入小括号内的真实数据
    • 实际上的参数 函数调用的时候 传递的参数 实参是传递给形参的

案例:利用函数求任意两个数之间的和

 function getSum(a, b) {
    console.log(a + b)
 }
getSum(1, 2)
函数形参和实参数量不匹配时
参数个数说明
实参个数等于形参个数输出正确结果
实参个数多于形参个数只取到形参个数
实参个数小于形参个数多的形参定义为undefined

注意:在JavaScript中,形参的默认值是undefined。

2.4 函数的返回值

function 函数名(){
    //其它代码
    return  需要返回的值;
}

var result = 函数名();

注意:

  • 在使用 return 语句时,函数会停止执行,并返回指定的值
  • 如果函数没有 return ,返回的值是 undefined
  • return之后的代码不会被执行
  • return返回值只能有一个,不可以有多个
2.4.1 案例练习

利用函数返回值求2个数的最大值

function getSum(a, b) {
  return a > b ? a : b;
}
var res = getSum(3, 2)
console.log(res);

2.5 arguments的使用

当不确定有多少个参数传递的时候,可以用 arguments 来获取。arguments展示形式是一个伪数组,因此可以进行遍历。

function max() {
   console.log(arguments);
   for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
      }
}

max(1, 2, 3)

伪数组具有以下特点:

  • 具有 length 属性
  • 按索引方式储存数据
  • 不具有数组的 push , pop 等方法

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

2.6 函数的两种声明方式

  • 命名函数

    function fn() 
    {
      
    }
    
    fn();  
    
    • 因为有名字,所以也被称为命名函数
    • 调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面
  • 匿名函数

var fn = function()
{

}

fn();


- 因为函数没有名字,所以也被称为匿名函数
- 这个fn 里面存储的是一个函数  
- 函数调用的代码必须写到函数体后面

文章来源:https://blog.csdn.net/apple_73204060/article/details/135077254
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。