WEB前端第二十六课——js数组
1.数组基础
① 数组概念
array是按照一定顺序排列的一组值，每个值都拥有一个编号，编号从0开始从左向右依次增加
数组中的元素可以是任何类型的数据，元素之间用逗号分隔，整个数组由方括号（[…]）包裹
② 数组本质
本质上，数组是对象类型的一种特殊表现形式，
因此，可以使用 new方式创建数组
示例：var namelist=new Array（'Jim','John','Bater'）； // ['Jim','John','Bater']
③ 数组长度
JavaScript中的数组元素可以是任何类型的数据，而在计算机内存中不同类型的数据是分区存储的，因此，JavaScript中的数组元素在内存中的存储位置是不连续的
无法按照内存地址访问数组元素，所以计算数组长度的时候只需要计算数组元素的个数即可，JavaScript通过使用下标的方式对数组元素进行标记，数组的下标则是连续的
通过 .length属性计算数组长度，语法：arr . length;
length是可写属性，如果设置length长度小于数组本身长度，那么多余元素会被舍弃
如果设置length长度大于数组本身长度，那么缺少元素用空位补齐
如果设置length长度不是合法数值，那么会报错“invalid array length”
示例：var arr=[a,b,c,d];
arr.length=3;
console.log(arr.length); //3
console.log(arr); // [a,b,c]
console.log(arr[4]); // undefined
arr.length=-1;
console.log(arr.length); //Uncaught RangeError: invalid array length(…)
④ 数组遍历
可以使用 for in快速访问数组中的每一个元素
示例：var nameArr = ['John','Anna','Hauk'];
for (var index in nameArr){
console.log(nameArr[index]);
}
返回结果：John Anna Hauk
for in循环遍历数组的时候，index表示数组中元素的下标，是自定义变量
⑤ 数组空位
当数组某个位置是空元素，即两个逗号之间没有任何值，则该数组存在空位（hole）
var arr = ['John','','Sami']，示例中间引号所代表的的元素不属于空位，空位没有任何值（表现为undefined），但空位占据数组length长度
⑥ 数组删除
delete命令可以删除数组中元素的值，从而形成空位，但delete命令并不会影响 length的属性
delete命令在使用过程中，是根据数组的下标来锁定元素进行删除的
语法：delete 变量名[下标]；
2.数组调用
数组调用指的是数组元素的调用，通过 “数组名[下标]” 的方式对数组元素进行访问
数组元素每次只能访问一个，如果要调用多个元素，可以通过循环语句进行连续调用
示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array</title>
<style>
input{
outline: none;
}
</style>
</head>
<body>
<span>名称</span>
<input type="text" id="nameInput">
<button id="submitButton">提交</button>
<script>
var nameInput=document.getElementById("nameInput");
var submitButton=document.getElementById("submitButton");
submitButton.onclick=function () {
var nameStr=nameInput.value;
var nameArr=nameStr.split(",");
for (var i in nameArr){
console.log(nameArr[i]);
}
}
</script>
</body>
</html>
3.数组方法
① isArray，判断变量是否为数组
如果是数组返回 true，否则返回 false，使用对象Array调用该方法
语法：Array. isArray(变量名);
② valueOf()，返回数组本身
该方法归属于Object对象类型，作用是返回指定对象的原始值，在数组中的作用是返回数组本身 （很少使用）
语法：数组名 .valueOf()；
JavaScript中许多内置对象都重写了该函数，以便更适合自身的功能需要，因此，不同类型对象的 valueOf方法的返回值和返回值类型均有可能不同
③ toString()，将数组以字串的形式返回
不仅能够将数组转换成字符串，布尔值也可以转换，返回值之间默认逗号分隔
语法：数组名.toString();
④ push，向数组末尾追加数据，返回当前数组的长度
可以向数组末尾添加一个或多个元素，返回值为追加元素后数组的长度length
语法：数组名 .push('item1', 'item2',…);
★ push方法会改变原数组内容
⑤ pop，删除数组最后一个元素
返回值为删除的这个元素
语法：数组名 .pop();
★ pop方法会改变原数组内容
⑥ join，将数组转换为字符串，默认用逗号隔开
以给定的参数做为分隔符，将数组转换为字符串，如果不设置参数，则默认使用逗号分隔
语法：数组名 .join(' 分隔符 ');
⑦ shift()，删除数组的第一个元素
返回值未删除的这个元素
语法：数组名 .shift();
★ shift方法也会对原数组造成影响
⑧ unshift()，向数组前端添加元素
可以向数组最前端添加一个或多个元素，返回值为添加元素后数组的长度length
语法：数组名 .unshift('item1','item2',…);
★ unshift方法也会对原数组造成影响
⑨ reverse，数组反转
将数组中元素的顺序反向排列
语法：数组名 .reverse(); //括号内不需要任何参数
★ reverse方法也会改变原数组的结构
⑩ slice，数组截取
slice方法能够根据指定的开始和结束下标，对数组进行截取，并生成一个新的数组
新数组的内容包括开始下标对应的元素到结束下标对应的前一个元素，即不包含结束下标所对应的元素本身 ★
语法：数组名 .slice(index1,index2); //返回值未生成的数组
slice方法的参数可以是负数，-1代表最后一个元素，-2代表倒数第二个元素，以此类推
如果只写一个参数，则表示对从当前下标对应的元素一直到最后一个元素进行截取
该方法不更改原数组！
⑪ splice，数组截取，并且可以插入新的元素（改变原数组）
splice方法是根据指定的下标和长度数，对数组进行一定长度的截取，同时可以根据增加参数向数组中插入一些新元素
返回值为截取元素所构成的数组
语法：数组名 .splice(index, removeCount, addItem1, addItem2,…);
★ splice方法会改变原数组的内容
方法中插入新元素的参数不是必须设置，前两个参数为必须
⑫ sort，数组排序
语法：数组名 .sort(sortby);
排序顺序可以按编码或数字，并按升序或降序
默认按照数组中元素的编码进行排序，此时括号内不需要设置参数
也可以设置sortby函数定义按数字排序，参数sortby必须是函数，通过函数指定升序或降序
★ sort方法会改变原数组的内容
⑬ indexOf，对数组进行索引
在数组中从前向后检索指定元素，返回值为元素在数组中第一次出现的下标，如果没有检索到则返回 -1
indexOf方法的第二个参数表示从第几个元素开始检索，是可选参数
语法：数组名 .indexOf(item, beginIndex);
第二个参数可以设置负数，-1表示从最后一个（倒数第一个）元素开始向后查找
⑭ lastIndexOf，反序索引
在数组中从后向前检索指定元素，返回值为元素在数组中最后一次出现的下标，如果没有检索到则返回-1
lastIndexOf方法的第二个参数表示从第几个元素开始检索，是可选参数
语法：数组名 .lastIndexOf(item, beginIndex);
第二个参数可以为负数，-1表示从最后一个元素开始向前查找
⑮ concat，用于连接两个或多个数组
语法：array1 .concat(array2,array3,...);
★ 该方法不会改变原数组，而仅仅返回连接数组的一个副本（新数组）
<script>
var arrOne=[100,200,300,400];
var arrTwo=[500,600,700,800];
var arrTogether=arrOne.concat(arrTwo);
arrTogether.push(10);
arrTogether.unshift(1);
console.log(arrTogether);
</script>
4.二维数组
如果数组的元素还是数组，那么外层数组就称为二维数组
语法：var arr=[[array1], [array2], [array3]];
二维数组有两个下标，第一个下标表示外层数组的下标，第二个下标表示内层数组的下标，如 arr[1][0];
二维数组是数组的一种特殊形式，数组的方法对二维数组任然生效
5.push、unshift练习
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array</title>
</head>
<body>
<script>
var arrOne=[100,200,300,400];
var arrTwo=[500,600,700,800];
for (var i in arrTwo){
arrOne.push(arrTwo[i]);
}
arrOne.push(10);
arrOne.unshift(1);
console.log(arrOne);
</script>
</body>
</html>
6.push、pop练习
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array_push&pop</title>
<style>
input{
outline: none;
}
</style>
</head>
<body>
<span>仓库</span>
<input type="text" id="storage">
<button id="putIn">入库</button>
<button id="takeOut">出库</button>
<script>
var storage=document.getElementById("storage");
var goods=[];
storage.value=goods.length;
var putIn=document.getElementById("putIn")
putIn.onclick=function () {
if (storage.value==5){
alert("仓库已满！");
}else{
goods.push('货物');
storage.value=goods.length;
}
}
var takeOut=document.getElementById("takeOut");
takeOut.onclick=function () {
if (storage.value==0){
alert('仓库已空！');
}else{
goods.pop();
storage.value=goods.length;
}
}
</script>
</body>
</html>