JavaScript(三)：数组与函数

一、数组

1.简介

数组就是用来存储一组数据的

• 声明一个变量就是在内存空间划出一块合适的空间
• 声明一个数组就是在内存空间划出一串连续的空间

​ 数组的三要素：

• 数组名称：用于区分不同的数组
• 数组元素：向数组中存放的数据
• 元素下标：数组元素的编号，也称为索引，从0开始，通过下标来访问数组元素

2.基本用法

​ 步骤：

1. 创建数组

   var 数组名=new Array();

2. 为数组元素赋值

   数组名[索引]=元素值;

3. 获取元素值

   数组名[索引]

3.定义数组的方式

• 使用new Array()

var array=new Array();	// 创建一个空数组，长度为0
var array=new Array(4);	// 创建一个长度为4的数组（只填一个数字）
var array=new Array("apple", "orange", "peach", "bananer");　// 创建一个包含初始元素的数组

• 使用数组字面量[]

var names=[ ]; // 创建一个空数组
var names= ["apple", "orange", "peach", "bananer"]; // 创建一个包含初始元素的数组

4.数组的常用方法

方法名	含义
reverse()	将数组元素倒序排列
indexOf()	返回指定元素在数组中第一次出现的位置
lastIndexOf()	返回指定元素在数组中最后一次出现的位置
join()	将数组拼接为string
concat()	将多个数组拼接成一个数组
push()	向数组末尾添加一个或多个元素，并返回新的长度
pop()	删除并返回数组的最后一个元素
unshift()	向数组开头添加一个或多个元素，并返回新的长度
shift()	删除并返回数组的第一个元素
slice()	返回数组中指定范围内的元素
splice()	删除元素，并在删除位置添加新的元素，然后返回被删除的元素
toString()	将数组转换为字符串
valueOf()	返回数组对象本身，一般会自动调用
sort()	排序，默认按字符编码的顺序排列，非string类型会自动转换为string，也可以自定义比较规则
forEach()	遍历数组中的每个元素

5.数组使用示例

• 创建数组并赋值

  // 1.定义数组
  var array = new Array(); 
  // 2.向数组中添加元素 
  array[0] = 'tom';
  array[1] = 'jack';
  array[2] = '倩倩';
  array[3] = 12; // 可以添加任意类型的数据
  array[4] = 180.5;
  array[5] = true;
  console.log(array);
  

• 循环数组

  // 循环数组
  for(var i=0;i<array.length;i++){
     console.log(i,array[i]);
  }  
  
  for(var index in array){
      console.log(index,array[index]);
  } 
  
  for(var item of array){
      console.log(item);
  } 
  

• 使用字面量声明数组

  var scores = [99,100,88,65];
  console.log(scores);
  

• reverse()：反转数组元素

  var names=['tom','jack','alice','mike','james','lucy']; 
  names.reverse();
  console.log(names);
  // 输出
  //["lucy", "james", "mike", "alice", "jack", "tom"]
  

• indexOf()：查询指定元素第一次出现的位置

  console.log(names.indexOf('jack'));
  // 存在返回索引指定下标，不存在返回-1
  

• lastIndexOf()： 查询指定元素最后一次出现的位置

  console.log(names.lastIndexOf('jack'));
  // 返回1
  

• join()：拼接为字符串

  console.log(names.join('-'));
  // "tom-jack-alice-mike-james-lucy"
  

• concat() 将多个数组拼接成一个数组

  var names=['tom','jack','alice','mike','james','lucy']; 
  var hobbies=['eat','sleep','doudou'];
  names=names.concat(hobbies);
  console.log(names);
  // ["tom", "jack", "alice", "mike", "james", "lucy", "eat", "sleep", "doudou"]
  

• push() 向数组末尾添加新的元素，返回新的数组

  var names=['tom','jack','alice','mike','james','lucy']; 
  var length=names.push('aaa','bbb','ccc'); 
  console.log(names);
  console.log(length);
  // ["tom", "jack", "alice", "mike", "james", "lucy", "aaa", "bbb", "ccc"]
  // 9
  

• pop() 删除并返回数组末尾的元素

  console.log(names.pop());
  //  "lucy"
  

• unshift() 向数组开头添加新的元素，返回新的数组

  var names=['tom','jack','alice','mike','james','lucy']; 
  names.unshift('aaa','bbb','ccc');
  console.log(names);
  // ["aaa", "bbb", "ccc", "tom", "jack", "alice", "mike", "james", "lucy"]
  

• shift() 删除并返回数组开头的元素

  console.log(names.shift());
  // "tom"
  

• slice() 获取指定索引范围内的元素

  console.log(names.slice(2,4)); // 获取索引为[2,4)之间的元素，左闭右开
  console.log(names.slice(2)); // 如果省略第二个参数，表示获取到数组末尾
  // ["alice", "mike"]
  // ["alice", "mike", "james", "lucy"]
  

• splice() 从指定索引位置删除指定个数的元素，并在此位置添加新的元素

  var array=names.splice(2,3); // 从索引为2的位置开始删除，删除3个
  console.log(names);
  //  ["tom", "jack", "lucy"]
  

  names.splice(2,3,'aaa','bbb'); // 在删除的位置添加元素
  // ["tom", "jack", "aaa", "bbb", "lucy"]
  

• toString() 将数组转换为字符串

  var str=names.toString(); // 等价于names.join()，与没有参数的join()方法相同
  console.log(str);
  // "tom,jack,alice,mike,james,lucy"
  

• valueOf() 返回数组本身，会自动调用

  console.log(names.valueOf());
  console.log(names); // 自动调用valueOf()
  // ["tom", "jack", "alice", "mike", "james", "lucy"]
  // ["tom", "jack", "alice", "mike", "james", "lucy"]
  

• sort() 排序，默认按字符编码ASCII的顺序排列

  names.sort();
  console.log(names);
  // ["alice", "jack", "james", "lucy", "mike", "tom"]
  

  var nums=[12,24,21,65,3,27,77]; 
  nums.sort(); // 默认会将数字转换为字符串，然后根据字符编码进行排序
  // [12, 21, 24, 27, 3, 65, 77]
  

• forEach() 遍历数组

  var names=['tom','jack','alice','mike','james','lucy']; 
  names.forEach(function(value,index){ // value表示数组元素值，index表示元素索引
      console.log(value,index);
  });
  /** 
  > "tom" 0
  > "jack" 1
  > "alice" 2
  > "mike" 3
  > "james" 4
  > "lucy" 5
  */
  

二、函数

1.简介

​ 函数是用来完成特定功能的代码块，可以被调用执行多次，实现复用

​ 分类：

• 内置函数
• 自定义函数

2. 内置函数

函数名	含义
typeof()	判断变量的类型
isNaN()	判断参数是否为NaN
parseInt()	将数据转换为整数
parseFloat()	将数据转换为小数
eval()	计算字符串表达式的值，并执行其中的JavaScript代码
encodeURI()	使用ISO8859-1对字符串进行编码，每个UTF-8的汉字编码成3个16进制字节，如下： %字节1%字节2%字节3
decodeURI()	使用ISO8859-1对字符串进行解码
escape()	使用Unicode对字符串进行编码，每个UTF-8的汉字被编码成一个双字节16进制转义字符%uXXXX，中文范围%u4e00—%u9fa5
unescape()	使用Unicode对字符串进行解码

3. 自定义函数

​ 语法：

// 1.定义函数
function 函数名(参数1,参数2...){　// 形参
  // 函数体
}

// 2.调用函数
函数名(参数1,参数2...); // 实参

​ 函数的参数：

• 定义函数时指定的参数，称为形参，没有实际的值，占位置
• 调用函数时指定的参数，称为实参，有实际的值
• 实参个数和形参个数可以不同，未指定参数时其默认值为undefined

​ 函数的返回值：

• 函数执行后可以返回一个结果，称为函数的返回值
• 使用return关键字来返回函数执行后的结果值
• 如果函数中没有使用return返回值，则默认返回undefined

4. 变量作用域

​ 变量的作用域：

• 局部作用域

  在函数中声明的变量，只能在该函数内访问，函数运行结束后变量自动销毁

• 全局作用域

  在函数外声明的变量，或者在函数内未定义而直接赋值的变量，在任何位置都可以访问，将所在页面关闭后销毁

• 块级作用域

  使用let关键字声明的变量，只能在声明它的代码块内访问（使用var声明的变量没有块级作用域的概念）

​ 注意：

• 如果局部变量和全局变量同名，默认访问的是局部变量
• 如果想访问全局变量，必须使用window前缀，在一定条件下也可以使用this前缀

5. 变量提升

​ 解析器执行JavaScript代码的过程：

1. 首先预解析（全局作用域）

   将变量var和函数function的声明提前到作用域的最上面，需要注意的是变量的赋值操作不会提前

2. 然后执从上往下，一行一行执行代码

3. 当执行函数时会进入函数内部，再次预解析 （局部作用域）

4. 然后从上往下，一行一行执行代码

6. 定义函数的方式

​ 两种方式：

• 函数声明

  function 函数名(参数){ 
  		函数体
  }
  

• 函数表达式

  var 变量名 = function(参数) // 等号右边的函数没有名字，称为匿名函数
  { 
  		函数体
  

};

调用函数：变量名(参数);

​    两种方式的区别：

- 函数声明在编写时可以先调用，再声明
- 函数表达式必须先定义，再调用

##### 7. 回调函数

​	不立即执行的函数调用，满足一定条件时才会执行或者由别的代码调用执行，称为回调函数 `callback`

​	调用时只写函数名，不能写小括号()和参数

​	应用：

- 作为事件绑定的函数，即当事件触发时要执行的函数
- 作为另一个函数的参数，即将函数作为参数传给另一个函数（函数也是一种数据类型）

##### 8. 匿名函数

​	没有名字的函数，称为匿名函数，一般用于回调	

​	应用场景：

- 用于事件的回调

  ```js
  window.onclick=function(){ // 匿名函数，用于回调
  	console.log("点击了页面！");
  };
  ```

- 用于一次性执行的函数，会自动执行，称为自执行函数

  ```js
  (function(){
  	console.log("此函数只执行一次！");
  })();
  ```

- 将匿名函数作为另一个函数的参数

  ```js
  /**
   *  将匿名函数作为另一个函数的参数
   */    
  var nums = [12,4,324,6,56];
  
  nums.sort(function(a,b){
      return a-b;
  });
  ```