前端！！数组和函数的学习

系列文章目录

爆肝JS！！数组和函数的学习

---

一、1.数组

数组，如何定义所有的学生名字呢，一个一个var吗？？？！！不！！
直接这样用数组写到一起，
概念：数组是存储一系列值的变量集合，可以存储多个值；

1.数组构成=[中括号,逗号,元素]

数组元素=索引下标+值
索引下标：，默认是从0开始依次递增
值：元素 的内容，可以是任意类型的数据；

2.创建数组
两种方式：
直接使用“[]”的方式，

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

实例化Array对象的方式

var arr= new Array('a','b','c')

注意：直接使用【】可以有空存储位置的数组，但Array不能创建空存储位置的数组

3.数组长度
每个数组都有一个 length 属性，length 属性值代表数组中元素的个数；
修改数组长度

var arr1 = [];
arr1.length = 5;
console.log(arr1);      // 输出结果：(5) [empty × 5]
var arr2 = [1, 2, 3];
arr2.length = 4; 
console.log(arr2);      // 输出结果：(4) [1, 2, 3, empty]
//小于数组长度
var arr4 = ['hehe', 'xixi', 'gugu', 'jiujiu'];
arr4.length = 3; 
console.log(arr4);      // 输出结果：(3) ["hehe", "xixi", "gugu"]

4.数组遍历数组
使用 for 循环遍历数组

var heroes = ['周杰伦', '张学友', '林俊杰', '薛之谦','毛不易'];

var len = heroes.length;

for (var i = 0; i < len; i++) {

	console.log(heroes[i])

}

5.二维数组
意思：数组里面套数组，套娃！

// 使用“[]”创建数组
var num = [[1, 3], [2, 4]];
var empty = [[], []];		            // 空二维数组
// 使用Array对象创建数组
var info = new Array(new Array('Tom', 13, 155), new Array('Lucy', 11, 152));
var arr = new Array(new Array, new Array);// 空二维数组

二维数组遍历
二维数组只需在遍历数组后，再次遍历数组的元素即可。

var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9, 0]];
// 遍历外层
for (var i = 0; i < arr.length; i++) {
    // console.log(arr[i]);
    // 遍历里层
    for (var j = 0; j < arr[i].length; j++) {
        console.log(arr[i][j]);
    }
}

6.数组排序
最大值和最小值

 if (arr[i] > max) {    // 当前元素比最大值max大，则修改最大值
      max = arr[i];
    }
    if (arr[i] < min) {    // 当前元素比最小值min小，则修改最小值
      min = arr[i];
    }

冒泡排序（经典）

1.比较相邻的元素。如果第一个比第二个大，就交换他们两个。
2.对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。
3.针对所有的元素重复以上的步骤，除了最后一个。
4.持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。

var arr = [10, 2, 5, 27, 98, 31];
  console.log('待排序数组：' + arr);
  for (var i = 0; i < arr.length-1; i++) {          // 控制需要比较的轮数
    for (var j = 0; j < arr.length - i-1; j++) {    // 控制参与比较的元素
      if (arr[j] > arr[j + 1]) { // 比较相邻的两个元素
         // var temp =arr[j];
          //arr[j]=arr[j+1];
          //arr[j+1]=temp;
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];//解构交换
      }
    }
  }
  console.log('排序后的数组：' + arr);

2.数组方法

改变原数组方法
arr.push()	将一个或多个元素添加到数组的末尾。
arr.pop()	从数组的末尾删除一个元素。
arr.unshift()	将一个或多个元素添加到数组的开头。
arr.shift()	从数组的开头删除一个元素。
arr.splice()	通过删除或者替换现有元素或者原地添加新的元素来修改数组。
arr.reverse()	数组中元素的位置颠倒，并返回该数组。

不改变原数组方法
arr.includes()	用于确定数组中是否含有某个元素。
arr.indexOf()	检测当前值在数组中第一次出现的位置索引。
arr.join()	将数组的所有元素连接到一个字符串中。
arr.toString()	返回包含所有数组值的字符串，以逗号分隔。
arr.slice()	复制原数组的部分内容。
arr.concat()	用于连接两个或多个数组。

二、函数

函数是一种数据类型

function fn() {}
console.log(typeof fn);//返回值是function

1.用函数来解决代码重用的问题。
函数其实就是封装

1.定义函数的四种方式

使用字面量的形式定义函数

 function sum(num1, num2) {
	var num3 = num1 + num2;
     console.log(num3);
 }

使用函数表达式声明函数（匿名函数）

var fun= function( ) {
}
fun();//匿名函数也是需要调用的 

使用Function构造函数声明函数

var getSum = new Function('a','b','return a+b');

自执行函数(自己调用自己)

(function(a){
 	console.log(a);
})("abc")

2.函数的返回值return

function sum(num1, num2) {
 	var num3 = num1 + num2;
   	return num3;
}
//接受函数执行的返回值
var result = sum(5, 10); //15

注意点:

• 函数在执行完return语句之后停止并立即退出。因此，位于return语句后面的任何代码永远都不会执行。

• 一个函数中可以有多个return语句。

• return语句也可以不带任何返回值。

3.arguments对象

arguments 是一个对应于传递给函数的参数的类数组对象。

function func1(a, b, c) {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}

func1(1, 2, 3);

作用域

作用域：指一个变量的作用范围
目前的学习中,在Javascript将作用域分为 全局作用域 和 函数作用域(局部作用域)。

1.全局作用域

代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。

2.函数作用域(局部作用域)

在固定的代码片段才能被访问

全局变量和局部变量

变量的作用域范围可分为全局变量和局部变量。
**全局变量：**在最外层声明的变量叫全局变量。
在函数体内部，没有使用var关键字声明的变量也是全局变量。(不推荐)
局部变量：
在函数体内部，使用var关键字声明的变量叫作局部变量

3.作用域规则

• 函数允许访问函数外的数据。

• 整个代码结构中只有函数可以限定作用域。

• 作用域规则首先使用提升规则分析。

• 如果当前作用规则中有名字了, 就不考虑外面的名字。
  **注意：**局部变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁。

作用域链

在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。 采取就近原则的方式来查找变量最终的值

预解析（变量、函数提升）

JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程。

预解析过程：

1. 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
2. 把函数的声明提升到当前作用域的最前面，函数声明代表函数整体，所以函数提升后，函数名代表整个函数。
3. 先提升var，再提升function。
4. 预解析会把变量和函数的声明在代码执行之前执行完成。

变量预解析

预解析也叫做变量、函数提升。
变量提升（变量预解析）： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

函数预解析

函数提升： 函数的声明会被提升到当前作用域的最上面，函数声明代表函数整体，所以函数提升后，函数名代表整个函数。

总结

提示：这里对文章进行总结：

我发现我学了很多新的东西，比如什么是arguments,什么是作用域链等等；