1.4 数组和函数基础 —— JS

快来打我* 2023-09-29 10:48 20阅读 0赞

**目录**

1.数组基础

1.1 数组的概念

1.2 创建方式

1.2.1 new

1.2.2 字面量

1.3 获取数组元素

1.4 遍历数组

1.5 数组中的新增元素

1.5.1 修改length长度

1.5.2 修改数组索引号

2.函数的使用

2.1 声明函数

2.2 调用函数

2.3 函数封装

3.函数参数和返回值

3.1 函数的概念

3.2 形参和实参

3.3 函数返回值

3.4 break,contiune,return 的区别

4.函数表达式

--------------------

## 1.数组基础 ##

### 1.1 数组的概念 ###

> 可以把一组相关的数据一起存放，并提供方便的访问方式
> 
> 数组就是一组数据的集合，每个数据叫元素，可以存放任意类型的元素，数组是一种，将一组数据存储在单个变量名下的方式

### 1.2 创建方式 ###

> JS中有两种创建方式
> 
> 1）利用new创建数组
> 
> 2）利用数组字面量创建数组

#### 1.2.1 new ####

var arr = new Array();
    //创建了一个空的数组

#### 1.2.2 字面量 ####

var arr=[];
    var 数组名 = ['小白'，'小黑']

### 1.3 获取数组元素 ###

> 数组的索引
> 
> 索引(下标)：用来访问数组元素的序号（数组下标从0开始）
> 
> var arr = \['小白','小黑','大黄','瑞奇'\]
> 
> 索引号 0 1 2 3
> 
> **数组可以提供索引来访问，设置，修改对应的数组元素，我们可以通过“数组名\[索引\]”的形式来获取数组中的元素**
> 
> 这里的访问就是获取得到的意思

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

### 1.4 遍历数组 ###

> **如何将数组里面的所有元素取出来 答案就是 循环**
> 
> 遍历：就是把数组中的每个元素从头到尾都访问一次
> 
> **计算数组长度(就是元素个数) （数组名.length）**

var arr=['小黑','小白','大黄']；
    for(var i=0;i<3;i++)
    {
       console.log(arr[i]);
       console.log(arr.length);
    //全部遍历，必须从0开始
    }

### 1.5 数组中的新增元素 ###

#### 1.5.1 修改length长度 ####

var arr=['小白','小黑','大黄']；
    console.log(arr.length);
    arr.length=5;
    //手动修改为5  修改后  后面2个空间是undefined

#### 1.5.2 修改数组索引号 ####

var arr1=['小白','小黑','大黄']；
    arr1[3]='pink';
    console.log(arr1.length);

## 2.函数的使用 ##

**函数在使用时分为两步：声明函数和调用函数**

### 2.1 声明函数 ###

### 2.2 调用函数 ###

//1.声明函数
    function 函数名(){
         //函数体
    }
    function sayHi(){
        console.log("haha");
    }
    //(1) function 声明函数的关键字 全部小写
    //(2) 函数是做某件事情，函数名一般是动词  sayHi
    //(3) 函数不调用自己不执行
    //2.函数调用
    函数名();
    sayHi();

### 2.3 函数封装 ###

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

## 3.函数参数和返回值 ##

### 3.1 函数的概念 ###

封装了一块可执行的代码块

function getsum(num1,num2){
    }

### 3.2 形参和实参 ###

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <th>形参</th> 
   <td>形式上的参数</td> 
   <td>函数定义的时候传递的参数，并不知道是什么</td> 
  </tr> 
  <tr> 
   <th>实参</th> 
   <td>实际上的参数</td> 
   <td>函数调用的时候，传递的参数，实参是传递给形参的</td> 
  </tr> 
 </tbody> 
</table>

##  ##

下面来考虑一个问题，如果形参和实参个数不相等，是一种什么情况

//函数形参实参个数匹配
    function getsum(num1,num2){
       console.log(num1+num2);
    }
    //1.如果实参的个数和形参的个数一值，则正常输出结果
    getsum(1,2);
    //2.如果实参的个数多于形参个数
    getsum(1,2,3);
    //3.如果实参的个数小于形参的个数 多于形参定义为undefined 最终的结果就是 NaN
    //形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值 结果就是undefined
    getsum(1); //Nan

### 3.3 函数返回值 ###

return 终止函数

> return num1;num2;//返回最后一个值
> 
> 函数名（）；
> 
> （1）我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名（），通过return 实现的
> 
> （2）只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名()=return后面的结果

### 3.4 break,contiune,return 的区别 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>break</p> </td> 
   <td>结束当前循环体</td> 
  </tr> 
  <tr> 
   <td>continue</td> 
   <td>跳出本次循环，继续执行下次循环</td> 
  </tr> 
  <tr> 
   <td>return&nbsp;</td> 
   <td>退出循环并且返回值，同时结束当前函数体内的代码</td> 
  </tr> 
 </tbody> 
</table>

##  ##

## 4.函数表达式 ##

> 函数的两种声明方式
> 
> 1.利用函数关键字自定义函数（命名函数）
> 
> 2.函数表达式(匿名函数)

//1.命名函数
    function fn(){   
      }
    fn();
    //2.匿名函数
    var 变量名=function(){}
    
    var fun=function(){
         console.log('我是函数表达式')；
    }
    fun();

> （1）fun是变量名，不是函数名
> 
> （2）函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
> 
> （3）函数表达式也可以进行传递参数