五，JavaScript数组·上

一，数组的概念

object数据类型（又叫 对象类型）有3种变现形式：
 	null 	-	空
	{ }		-	对象：一个大的内存空间存储多个小空间，是由键值对组成
	[ ]		-	也是使用一个大的内存空间来存放多个小的内存空间，大空间中的小空间之间是有顺序的

{ }定义的对象和[ ]定义的数据有什么区别：

• { }对象中，数据是由多个键值对组成的。多个键值对之间没有顺序的
• [ ]里面的数据，是有顺序的
• 两者的都是大空间放很多小空间，
  • { }描述的时候是无序的，只看小空间的名称；
  • [ ]描述的时候，是按照空间的顺序来描述的

二，数组的定义 - 数组：Array

(一)，语法

	var arr =	[ ]
	var arr =	new	Array()		-----	这是系统提供的一种构造函数专门创建数组的

(二)，细节

1.数组中存放的数据，类型是没有限制的，可以存放任意类型的数据
2.数组中小空间的编号，永远都是从0开始，一次向后递增的，数组中第一个小空间的编号，永远是0
3.数组中最后一个小空间的编号，永远都是数组的个数-1
4.获取数组中数据的个数，数据.length 获取 - 数组长度
5.当使用【】定义数据时，

• 如果【】中只有一个数字，此时代表大空间只有一个小空间，小空间的数据是这个数字；
• 如果使用new Array()定义数据时，如果()中只有一个数字，表示大空间中有数字个空的小空间

三，数组的操作

		小空间编号	又称为	下标

（一），获取数组数据

	// 数字【小空间编号】
	var arr = [
	'李四', 5, true, null, undefined,
	function() {console.log('我是函数');},
	 {
	 name: '张三',
     age: 12}
     ];
     // 获取到 李四 这个字符串
	console.log( arr[0] ) 

（二），设置数据

	数组【下标】=	值

1.添加

如果要添加的下标大于最大的下标，中间一定会创建多个空的小空间；当设置的下标大于最大下标，就是添加

2.修改

如果设置的下标在0~最大下标（数组.length-1）之间，修改其中的值

（三），删除数据

1.delect 数组[下标]	-	只能删除小空间中对应的数据，但是小空间还存在
2.可以利用数组的长度来删除数组

	arr.length	=	5		//	超出指定长度的数据都被删除掉了
	arr.length	=	10		//	如果赋的值超过原本的长度，就会在后面创建多个空的小空间
	

四，数组的遍历

(一)，可以使用循环处理重复 – 利用循环遍历数组

	for（var i = 0 ;i < 6; i++）{
		for( var i = 0; i<arr.length; i++){
			console.log(arr[i]);
		}
	}

(二)，可以使用 for in 这种语法遍历数组

	for （var a in arr）{
		console.log（arr【a】）；
		console.log（a）；// 这个是遍历每个元素对应的下标	-	将下标转出字符串类型
	}

(三)，for in遍历和for i遍历的区别

	1.for in 遍历出来的下标是字符串，for i=0 遍历出来的是数字
	2.for in 只遍历有值的空间，for i=0 的方式，会将空的小空间中的值也会遍历出来
	3.for in 会遍历原型中的数据，for i=0只能遍历单前空间中的数据

	可以将数组理解成是由键值对组成的数据，键是数字
	可以将对象理解成是有编号的很多小空间组成，下标是字符串

五，数组的嵌套

数组中数据的类型是没有要求的，所以数组中可以嵌套数组
获取值：数组【下标】【下标】

	var arr = [
    	[
        	123,
        	[
            	'张三',
            	'李四'
        	]
    	],
    	'asdf'
	]

六，数组的练习

（一），数组求和

	var arr=[5,6,7,3,4,7,8,9]
	// 让所有数字加起来
	① 先将所有数字输出来
	② 定义容器，接收所有数字的和
	var sum=0
	
	// 遍历数组，将所有元素都输出
	for （var i=0;i=arr.length;i++）{
        sum += arr[i]
	}
	console.log(sum);		

（二），将一段代码输出

var arr = [
    "越南被曝咖啡造假：咖啡粉里掺加电池芯",
    "抗日神剧被当教材：机密文件居然有女优名字",
    "王俊凯任联合国大使：系最年轻的联合国大使",
    "行人闯红灯遭水喷 目前还在测试阶段",
    "68条鱼估价超600万 什么鱼要这么贵？"
]
for (var i=0;i<arr.length;i++){
    document.write('<li>')
    	document.write('arr[i]')
    document.write('</li>')
    
    // 或者：document.write('<li>'+arr[I]+'/li'>
    }

（三），求数组的最大值

	var arr=[5,9,3,7,4,2,6]
		思路：定义一个变量max ，这个变量中为了存放最大值
			假设第一个是最大的，
			如果第一个不是最大的，谁比他大，谁就更有资格进入max容器
	var max=arr[0]
	for (i=1,i<=arr.length;i++){	// 遍历为了验证我们的假设是否成立
			//	判断每个数字跟max比较的结果
		//【方法一】
		if(max<=arr[i]){	
				//max 是我们假设的最大值，是否是最大的，需要跟气体数字比较
				//max跟其他所有数字比较，max 比较运算符 其他数字
				//其他数字	===		arr[i] 每个数字
			max=arr[i]
			}
			
		// [方法二]	
		if(max > arr[i]){
			//如果最大值大 就什么也不做
		}else{
			//max的含义就是为了存放最大值，
			//如果有其他数字比max更大,最大值就应该是其他数字
			max =	arr[i]
		}
	}

(四)，把1-100这个100个数字存放到数组中

	// 定义空的数组
	var arr = []

	// 循环遍历
	for(var 1=0;i<100;i++){
		arr[i] = i + 1	
	}

	console.log(arr);

(五)，根据数组渲染商品列表

		新建一个数组 导入从网页中获取的值
	var arr=[
		{
        goodsImg: 'https://img30.360buyimg.com/seckillcms/s280x280_jfs/t1/126365/21/24434/63006/622af7b6E6808ac6d/ce21176f2d23014b.jpg.webp',
        goodsName: '多莱米（Doremi） 无线蓝牙耳机半入耳超薄迷你隐形健身运动音乐游戏适用于oppo华为vivo苹果 黑色 轻薄贴耳 睡躺可戴',
        goodsPrice: '83.00'
    	},
    	{
        goodsImg: 'https://img12.360buyimg.com/seckillcms/s280x280_jfs/t1/209493/25/10274/137859/619c90e6Ea0593ce4/6ceaab5d094f4008.jpg.webp',
        goodsName: '朵唯（DOOV）D13 Pro 4G老人手机 移动联通电信全网通 大图标大字老年机 百元学生手机 32GB拍照手机 青空蓝',
        goodsPrice: '479.00'
    	},
    	{
        goodsImg: 'https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/214381/37/14975/192879/622dc5d9E21737376/d4ef53fed054372d.jpg.webp',
        goodsName: '【男童鞋】安踏儿童运动鞋男童跑鞋网面透气中大童男鞋2022年春季新品官网旗舰休闲鞋青少年学生童鞋 【透气网面】深藏青/阳光橙/安踏白 36码/内长23cm',
        goodsPrice: '129.00'
    	}
	]

		遍历数组 编写结构
	for (var i=0;i<arr.length;i++){
		document.write('<li>');
				// arr【0】 获取到数组中的第一个对象
			var goods =	arr[i]
				// 对象中获取图片路径
				// 使用goods.goodsImg获取
				// 获取到的图片路径赋值给imgPath变量
			var imgPath = goods.goodsImg

			document.write(' <img src=" '+ imgPath + ' "/> ')
			document.write(' <p> ' + goods.goodsName + ' </p> ')
			document.write(' <span> ' + goods.goodsPrice + ' </span> ') 
		document.write(' </li> ')
	}

		给网页结构，添加一些样式
	<style>
		li{
        list-style-type: none;
        padding: 0;
        margin: 0;
        width: 200px;
        height: 260px;
        border: 1px solid #000;
        text-align: center;
        float:left;
        margin: 10px;
    	}
    	li img{
        width: 140px;
        height: 140px;
    	}
    	li p{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        width: 150px;
        margin:0 auto;
    	}
	</style>