35、数组

一、数组

数组：通过一个变量存储多个数据，并且这个数据是有顺序的
        数组的作用：一次性存储多个数据
        定义数组的方法：
            1.var 数组名 = new Array() 构造函数定义数组
            2.var 数组名 = [] 常用的定义数组的方法
        字面形式上定义的数组，只要看到[]，百分之九十九是个数组，还有百分之一的可能是伪数组
        伪数组：看起来像数组，但是没有数组的方法(函数的arguments)

        前后端交互：通常后端给前端的数据都是放到一个数组里面，然后前端将拿到的数据显示到页面上。

<script type="text/javascript">
  // 定义了一个空数组 长度为0
  var arr1 = new Array();
  console.log(arr1, arr1.length);

  // 定义了一个长度为4 内容为空的数组
  var arr2 = new Array(4);
  console.log(arr2, arr2.length);

  // 定义了一个有具体值的数组
  var arr3 = new Array(12, "5", true);
  console.log(arr3, arr3.length);

  // 建议使用[]的方法定义数组
  // 定义一个空数组
  var arr4 = [];
  // console.log(arr4,arr4.length)
  var arr5 = [2, "4", "hello", false];
  console.log(arr5, arr5.length);
  // 数组是通过下标取值的 数组的下标是从0开始的
  console.log(arr5[2]);

  var dataList = [
    "false",
    {
      userName: "张三",
      age: 20,
    },
    {
      userName: "李四",
      age: 13,
    },
    true,
    1,
  ];
  console.log(dataList);
  // 对象的取值 对象.属性  对象['属性']
  console.log(dataList[1].age);
  console.log(dataList[1]["userName"]);
</script>

二、数组的属性及取值

数组名.length 代表数组的长度
        数组里面每一项的内容叫做数组的元素
        访问数组的元素，其实就是访问数组里某项的内容
            数组是通过下标/索引取值
            数组的下标从0开始

<script type="text/javascript">
  var arr = [1, "234", "false", true, { name: "张三" }];
  console.log(arr);
  // arr[下标] 可以取值 也可以重新赋值
  console.log(arr[3]);
  arr[3] = false;
  console.log(arr);
  arr[5] = "888";
  console.log(arr);

  arr[8] = 9;
  console.log(arr[6], arr[7]); // undefined
</script>

三、数组的遍历

数组与循环是天生一对，循环遍历数组可以取数组里面每一项的值

        数组的遍历：循环获取数组中每一项的内容

        数组的遍历方式：for循环 for in  for of forEach

<script type="text/javascript">
  var arr = [99, "你好", true, false];
  // 1.for循环
  // for(var i = 0; i < arr.length; i++){
  // 	console.log(arr[i],'我是数组的第' + i + '项')
  // }

  // 2、for in循环   得到的i是索引
  // 语法： for(var 变量名 in 数组名){}
  // for(var i in arr){
  // 	console.log(arr[i])
  // }

  // 3. for of循环 默认得到的i是数组的内容
  // 语法：for(var 变量名 of 数组名){}
  // for(var i of arr){
  // 	console.log(i)
  // }
  /*
		扩展：	
			keys()获取的是下标
			values()获取的是内容
			entries()获取到的是下标和内容
	 */
  // for(var i of arr.entries()){
  // 	// console.log(i)
  // 	console.log(i[0])
  // 	// console.log(arr[i[0]])
  // }

  // 4. forEach循环
  // 语法： 数组名.forEach(function(数组的每一项的值,数组的下标,原数组){})
  arr.forEach(function (element, index, array) {
    console.log(element, index, array, "forEach");
  });

  /*
		for与forEach的区别
			forEach不能使用break和continue来终止或跳出当前循环
			forEach没有返回值 return返回的是undefined
	 */
</script>

四、数组练习1

<script type="text/javascript">
  // 分别用for for in for of forEach求数组各项之和以及平均值
  var arr = [10, 0.5, 30.4, 40.3, 50, 11, 60];
  var sum = 0;
  var avg = 0;
  // 1. for循环
  // for(var i = 0; i < arr.length; i++){
  // 	sum += arr[i]
  // }
  // avg = sum / arr.length

  // 2. for in
  // for( var i in arr){
  // 	sum += arr[i]
  // }

  // 3. for of
  /*for(var i of arr.keys()){
		sum += arr[i]
	}*/
  // for(var i of arr{
  // 	sum += i
  // }

  // 4. forEach
  arr.forEach(function (element, index) {
    // sum += element
    sum += arr[index];
  });
  avg = (sum / arr.length).toFixed(2);
  console.log(avg);
</script>

五、数组的方法

<script type="text/javascript">
  // 1. push() 将元素添加到数组的结尾，添加多个元素用逗号隔开
  // 语法：数组.push(元素1,元素2)
  var arr1 = ["张三", "李四", "王五", "麻六"];
  console.log("添加元素前的数组", arr1);
  arr1.push("王", "张");
  /*var str = '张鑫'
	arr1.push(str)*/
  console.log("添加元素之后的数组", arr1);

  // 2.unshift() 将元素添加到数组的开头
  // 语法： 数组.unshift(元素1,元素2)
  var arr2 = ["郑"];
  arr2.unshift(250);
  console.log(arr2);

  // 3.splice() 用于添加、删除或者替换数组中的元素
  // 语法： 数组.splice(开始修改元素的位置/索引值,删除的长度,添加、删除、替换的元素)
  var arr3 = ["a", "b", "c", "d"];
  // 删除
  // 从上数组的第三项开始删除 删除的长度是1
  // arr3.splice(2,1)
  // 替换
  // 从数组第二项开始删除 删除的长度是1 在删除的位置添加元素
  // arr3.splice(1,1,'e')
  // console.log(arr3)
  // 添加
  arr3.splice(4, 0, "dd");
  console.log(arr3);

  // 4.shift()删除数组的第一个元素
  // 语法：数组.shift()
  var arr4 = [1, 2, 3, 4];
  arr4.shift();
  console.log(arr4);

  // 5.pop() 删除数组中的最后一项
  // 语法：数组.pop()
  var arr5 = ["后羿", "鲁班", "狄仁杰"];
  arr5.pop();
  console.log(arr5);

  // 6.concat() 合并数组返回一个新数组
  // 语法：数组.concat(数组1,数组2)
  var arr6 = ["三国演义", "西游记"];
  var arr7 = ["红楼梦", "水浒传"];
  var arr8 = ["四大名著"];
  console.log(arr8.concat(arr6, arr7));

  // 7.sort()对数组进行排序
  // var arr9 = [12,5,90,32,97]
  // 会把里面的数字当做字符串 按个字符进行比较
  // arr9.sort()
  // 根据ASCII码进行比较
  var arr9 = ["d", "b", "a", "g"];
  arr9.sort();
  console.log(arr9);

  // 8.reverse()对数组进行翻转 不会排序
  var arr10 = [2, 76, 34, 100, 31];
  arr10.reverse();
  console.log(arr10);

  // 9.String() toString() 转字符串
  // String(数组) 数组.toString()
  var arr11 = [1, 2, 3];
  console.log(arr11.toString()); // 1,2,3

  // 10.join() 将数组里面的元素用什么字符给拼接起来
  // 语法： 数组.join('分割符号')
  var arr12 = ["郑", "王"];
  console.log(arr12.join("----"));

  // 11.split() 将字符串分割成数组
  // 语法：字符串.split('分割符号')
  var str = "赵^钱^孙^李";
  str = str.split("^");
  console.log(str);

  // 12.indexOf() 返回某个指定值首次出现的位置 如果找到了返回对应的索引值 如果没找到 返回-1
  // 语法：数组.indexOf('查找的值')
  var arr13 = [1, 2, 3, 4, 5, 6, 3];
  console.log(arr13.indexOf(8)); // -1
  console.log(arr13.indexOf(3)); // 2
  console.log(arr13.indexOf("3")); // -1
</script>

六、数组的练习2

<script type="text/javascript">
  // 1.求数组的最大值
  var arr1 = [3, 5, 7, 9, 11, 30, 2, 100, 14];
  // 假设数组中的第一项是最大值
  var max = arr1[0];
  // 遍历数组
  for (var i = 0; i < arr1.length; i++) {
    if (max < arr1[i]) {
      max = arr1[i];
    }
  }
  console.log(max); // 100

  // 2.去掉数组中的0
  var arr2 = [5, 1, 0, 6, 7, 2, 0, 10, 0];
  // 新建一个空数组
  var arr4 = [];
  for (var i = 0; i < arr2.length; i++) {
    // 判断数组中的每一项
    if (arr2[i] != 0) {
      // 将不等于0的添加到新数组里面
      arr4.push(arr2[i]);
    }
  }
  console.log(arr4, "去掉0");

  // 3.去掉数组中重复的0
  var arr3 = [5, 1, 0, 6, 7, 2, 0, 10, 0];
  var arr5 = [];
  for (var i = 0; i < arr3.length; i++) {
    if (arr5.indexOf(arr3[i]) == -1) {
      arr5.push(arr3[i]);
    }
  }
  console.log(arr5, "去重");
</script>

七、数组的例子

<script type="text/javascript">
  // 1.选中数组中大于10的数
  var arr1 = [2, 0, 6, 1, 77, 0, 52, 25, 7];

  // 2.打印数组的奇数
  var arr2 = [1, 23, 4, 5, 86, 15, 34, 86];

  // 3.计算数组中能被3整除的偶数和
  var arr3 = [2, 6, 18, 15, 40];

  // 4.求数组中的最大值和最小值
  var arr4 = [2, 6, 1, 77, 52, 25, 7, 0, 77];
</script>

八、数组的排序

<script type="text/javascript">
  var arrs = [12, 79, 94, 67, 32, 9];
  // console.log(arrs.sort())
  arrs.sort(function (a, b) {
    // return a-b  // 升序排列
    return b - a; // 降序排列
  });
  /*
		return a-b 用作比较函数的返回值，比较函数需要返回一个数字，根据这个数字的正负来确定元素的排列顺序
		a - b 如果是负数的话， 意味着a<b，那么a排在b的前面

	 */
  // 取出数组的最后一项  arrs[arrs.length-1]
  console.log(arrs[arrs.length - 1]);
</script>

九、冒泡排序

<script type="text/javascript">
  /*
		冒泡排序：
			规则：前后两个数进行比较，如果符合某种条件，那就就交换元素的位置
			规律：每一轮比较，都会找到一个比较大的值放在最后

		一组数据： 9,8,7,6,5,4 从小到大排序
		
		5 
		 
		第一轮排序： 9,8,7,6,5,4	  5次
			8 9 7 6 5 4
			8 7 9 6 5 4
			8 7 6 9 5 4
			8 7 6 5 9 4
			8 7 6 5 4 9*

		第二轮排序： 8 7 6 5 4  4次
			7 8 6 5 4
			7 6 8 5 4
			7 6 5 8 4
			7 6 5 4 8*

		第三轮排序：7 6 5 4  3次
			6 7 5 4
			6 5 7 4
			6 5 4 7*

		第四轮排序： 6 5 4  2次
			5 6 4
			5 4 6*

		第五轮排序： 5 4   1次
			4 5*
	 */
  var arr = [9, 8, 17, 6, 5, 4];
  /*
		冒泡思想：
			从小到大排序
			两层循环
			外层循环 循环多少次
			内层循环 比较相邻两个值的大小
			如果前一个值比后一个值大，交换位置

		每一次循环都会找出最大的值放到后面，那么下一次循环就可以少循环一次
	 */
  // 外层循环多少次 数组的长度是6 但是只需循环5次即可 因为自己跟自己就不用比较了
  for (var i = 0; i < arr.length - 1; i++) {
    // 内层循环比较相邻两个数的大小 每求出一个最大值内层循环次数-1
    for (var j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        // 两两交换
        var temp = "";
        temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  console.log(arr);
</script>

十、二维数组

<script type="text/javascript">
  // 二维数组：数组里面套了一个数组
  var arr = [
    [121, 30, 0],
    [23, 90, 41],
  ];
  // 二维数组的取值
  console.log(arr[0]);
  console.log(arr[1][1]); // 90
  // 遍历二维数组
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr[i].length; j++) {
      console.log(arr[i][j]);
    }
  }
</script>

十一、三个数组合成一个二维数组

<script type="text/javascript">
  var arr1 = [1, 2, 3, 4];
  var arr2 = ["王昭君", "后羿", "鬼谷子", "李白"];
  var arr3 = ["法师", "射手", "辅助", "打野"];
  var arr = [];

  for (var i = 0; i < arr1.length; i++) {
    var N = [];
    N.push(arr1[i], arr2[i], arr3[i]);
    arr.push(N);
  }
  console.log(arr);
</script>

十二、杨辉三角

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>杨辉三角</title>
    <style type="text/css">
      body {
        text-align: center;
      }
    </style>
  </head>

  <body></body>
</html>
<script type="text/javascript">
  /*
		杨辉三角：
			每一行的首尾元素是1，其余位置的元素为上一行对应位置的元素与前一位置元素之和

				1
			   1 1
			  1 2 1
		   1 3 3 1
		   arr = [[1],[1,1],[1,2,1],[1,3,3,1]]
		   1  arr[0][0]
		   1  arr[1][0]  1  arr[1][1]
		   1  arr[2][0]  2  arr[2][1]  1  arr[2][2]
		   1  arr[3][0]  3  arr[3][1]  3  arr[3][2]  1  arr[3][3]  
	 */
  // 输出一个指定行数的杨辉三角
  var line = Number(prompt("请输入行数"));
  var arr = [];
  for (var i = 0; i < line; i++) {
    // 在arr这个数组中的第i个位置创建一个空数组
    arr[i] = []; //[[],[],[],[]....]
    for (var j = 0; j <= i; j++) {
      if (j == 0 || j == i) {
        // i是行数 j是一行元素的各个位置
        // 每一行的首尾元素是1
        arr[i][j] = 1;
      } else {
        arr[i][j] = arr[i - 1][j] + arr[i - 1][j - 1];
      }
      document.write(arr[i][j] + " ");
    }
    document.write("<br>");
  }
  console.log(arr);
</script>

十三、数组笔记

一、数组：一次性存储多个数据
	定义数组的两个方法
		1. var 数组名  new Array()
		2. var 数组名 = []

二、数组的属性
	数组名.length 数组的长度
	数组里面每一项的内容叫做数组的元素
	访问数组的元素就是访问数组里面的内容
		数组通过下标/索引来取值
		数组的下标从0开始，0代表数组的第一项

三、数组的遍历：就是循环获取数组中的每一项的内容	
	数组的遍历方法： for 、 for in 、 for of 、 forEach

	for in : i是下标
	for of : i是数组的内容
扩展：
	在数组名的后面加上一个keys() 就可以得到索引
	在数组名的后面加上一个values() 就可以得到内容
	在数组名的后面加上一个entries() 就可以得到下标和内容

	数组名.forEach(function(element,index,array){
		element: 每一项的值
		index:每一项的索引/下标
		array:原数组
	})

for与forEach区别？
	forEach没有返回值，return的结果是undefined，并且不能使用break和continue来终止或者跳出循环


四、数组的方法：
	push():将元素添加到数组的最后
	unshift():将元素添加到数组的开头
	splice():删除指定位置的元素，在删除的位置添加元素
	shift():删除数组的第一项
	pop():删除数组的最后一项
	concat():合并多个数组
	sort():数组排序  正序
	reverse():数组翻转
	String(),toString():转字符串
	join():将数组转为字符串，用什么符号拼接起来
	split():分割字符串
	indexOf():返回的是某个指定的字符首次出现的位置 找到返回索引 找不到返回-1