数组是引用数据类型中的对象数据类型（特殊对象）
创建一个数组，开辟一个堆内存，堆内存中存储数组对象中的键值对
let arr = [10,20,30];
0 ：10
1 : 20
2 : 30
length ： 3
解析：
数组中我们看到的每一项都是属性值，默认的属性名是数字，数字从零开始递增，数字代表当前是第几项，把代表位置的数字属性名称称为“索引”;
数组是以数字作为索引，索引从零开始递增的结构。
数组中默认存在一个length属性，代表数组的长度（有多少项）
数组中存在的每一项都可以是任何数据类型：let arr1 = [10,'AA',true,null,undefined,Symbol(1)];
let arrs = [10,20,30];
let arrs1 = [10,'AA',true,null,undefined,Symbol(1)];
console.log(arrs1);
/* 一维数组（只有一级结构） */
let arr_1 = [10,20,30];
/* 二维数组（有两级结构）/多维数组（多级结构） */
let arr_2 =[
{
name:'小李',
age:18
},{
name:'小小里',
age:16
}
];
真实项目中，从服务器获取到的数据，一般都是对象或者数组（JSON格式），而且结构层级一般是多级结构，
所以学会数组、对象的相关操作，能够根据需求把获取的数据进行有效的解析和处理。
数组必须掌握的知识点：
1.掌握基础操纵;
2.掌握数组中常用的内置方法（浏览器天生给数组提供的方法）；
+ 关于数组的增删改
+ push
+ pop
+ shift
+ unshift
+ splice
+ 关于数组查询和拼接
+ slice
+ concat
+ 转换为字符串
+ toString
+ join
+ 验证是否包含某一项的
+ indexOf / lastIndexOf
+ includes
+ 关于排序的
+ reverse
+ sort
+ 关于数组迭代的方法
+ forEach
+ map
3.掌握数组排序和去重（算法）
4.学习方法：
+ 方法的意义和作用
+ 参数（执行方法的时候传递的内容）
+ 返回值（执行完方法返回的结果）
+ 原始数组是否改变
获取数组中的每一项值：数组名[索引]
let arr = [10,20,30];
console.log(arr[0],arr[1],arr[2]); // => 10,20,30
获取数组中的最后一项,数组中自带了一个属性length,这个属性表示该数组中的长度，由于数组索引是从0开始的，所以数组中最后一项可以使用数组名[数组名.length-1]的方式获取
console.log(arr[arr.length-1]);
对数组的增加操作：
向数组末尾追加一个新项：数组名[数组名.length] = xxx;
push：向数组末尾追加元素 arr.push('追加'); 追加多个arr.push('追加',1,2,3);
+ 参数：参数个数不固定，类型也不固定，都是向数组末尾依次追加的内容
+ 返回值：新增后数组的长度
+ 是否发生改变：原始数组发生改变
unshift:向数组开始位置新增内容
+ 参数：参数个数不固定，类型也不固定，都是向数组开始依次追加的内容
+ 返回值：新增后数组的长度
+ 是否发生改变：原始数组发生改变
arr = [10,20,30];
let res = null;//占个位，保存操作结果
arr[arr.length] = 'xxx';
console.log(arr); // =>[10,20,30,'xxx']
res = arr.push('追加'); // =>arr:[10,20,30,'xxx',追加]; res:4;
res = arr.push('追加',1,2,3); // =>arr:[10,20,30,'xxx',追加,'追加',1,2,3]; res:9;
console.log(res,arr);
res = arr.unshift('追加1'); // =>arr:['追加1',10,20,30,'xxx',追加,'追加',1,2,3]; res:10;
res = arr.unshift('追加1',1,2,3); // =>arr:['追加1',1,2,3,'追加1',10,20,30,'xxx',追加,'追加',1,2,3]; res:14;
console.log(res,arr);
对数组的删除操作：
基于arr.lenght--可以实现删除数组中的最后一项
基于Delete删除数组中的某一项（把数组当做普通对象操作），键值对可以删掉，但是length并会跟着改变，一般数组删除不会基于delete操作
pop: 删除数组最后一项
+ 参数：无
+ 返回值：删除的那一项内容
+ 是否发生改变：原始数组发生改变
shift:删除数组第一项
+ 参数：无
+ 返回值：删除的那一项内容
+ 是否发生改变：原始数组发生改变
arr.length--; // 删除数组中的最后一项
console.log(arr);// =>arr:['追加1',1,2,3,'追加1',10,20,30,'xxx',追加,'追加',1,2];
res = arr.pop();// =>arr:['追加1',1,2,3,'追加1',10,20,30,'xxx',追加,'追加',1]; res:2;
console.log(res,arr);
res = arr.shift();// =>arr:[1,2,3,'追加1',10,20,30,'xxx',追加,'追加',1]; res:'追加1';
console.log(res,arr);
splice:实现数组的增删改操作
+ arr.splice(n,m);从数组索引n开始，删除m个元素，返回结果是以新数组的方式，把删除的内容进行存储
+ 原始数组发生改变
+ arr.splice(n,m,x);从索引n开始，删除m个元素，用x替换删除的内容，返回结果是一个数组，存储删除的内容
+ arr.splice(n,0,'xxx','xxx','xxx');从索引2开始，一个都不删除（返回结果是空数组）,把'xxx','xxx'从索引2开始依次往后增加
res = arr.splice(2,3);//从索引2开始，删除3个元素，返回结果是一个新数组，该新数组的成员是被删除的内容组成的
console.log(res,arr);// =>arr:[1,2,20,30,'xxx',追加,'追加',1]; res:[3,'追加1',10];
res = arr.splice(2,3,'小小里','xxx','iii'); // =>arr:[1,2,'小小里','xxx','iii',追加,'追加',1]; res:[20,30,'xxx'];
console.log(res,arr);
res = arr.splice(2,0,'小小里','iii'); // =>[1,2,'小小里','iii','小小里','xxx','iii',追加,'追加',1]; res:[];
console.log(res,arr);
res = arr.splice(0);// 从索引0开始，删除到末尾（清空原来数组，把原来数组中的每一项都存放到新数组res中）
console.log(res,arr); // =>arr:[]; res:[1,2,'小小里','iii','小小里','xxx','iii',追加,'追加',1];
slice:实现数组的查询
+ arr.slice(n,m); 从数组索引n开始，查找到索引为m处（不包含m）,把查找的内容以新数组的方式返回，原始数组不变
+ arr.slice(n); 第二个参数不写,是从索引为n处开始,直接查找到数组末尾,并将查找的内容以新数组的方式返回，原数组不变
+ arr.slice(0); 从索引为0处开，直接查找到数组末尾,并将查找的内容以新数组的方式返回，原数组不变，实现出“数组克隆”：得到的新数组和原始数组是两个不同的数组（两个不同的堆），但是堆中的内容一致，浅克隆
arr = [10,20,30,40,50,60,70,80];
res = arr.slice(2,5); // =>arr:[10,20,30,40,50,60,70,80]; res:[30,40,50];
console.log(res,arr);
res = arr.slice(2); // =>arr:[10,20,30,40,50,60,70,80];res:[30,40,50,60,70,80];
console.log(res,arr);
res = arr.slice(0); // =>arr:[10,20,30,40,50,60,70,80];res:[10,20,30,40,50,60,70,80];
console.log(res,arr);
concat:实现数组的拼接，把多个数组（或者多个值）最后拼接为一个数组，原始数组都不会变，返回结果是拼接后的新数组
arr = [10,20,30];
res = [100,200,300];
let arr_concat = arr.concat(res);// =>arr_concat:[10, 20, 30, 100, 200, 300]; arr:[10,20,30]; res = [100,200,300];
console.log(arr_concat,arr,res);
let arr1_concat = arr.concat('xiaoxiao',res);// => arr1_concat:[10, 20, 30,'xiaoxiao',100, 200, 300]; arr:[10,20,30]; res = [100,200,300];
console.log(arr1_concat,arr,res);
把数组转化为字符串：
+ toString():把数组中的每一项按照“逗号分隔”，拼接成对应的字符串
+ join([char]):指定分隔符,不传参数，默认以“逗号分隔”
原始数组都不会改变
arr = [10,20,30];
res = arr.toString();// =>res:'10,20,30';arr:[10,20,30]
console.log(res,arr);
res = arr.join();// =>res:'10,20,30'; arr:[10,20,30]
console.log(res,arr);
res = arr.join('-');// =>res:'10-20-30'; arr:[10,20,30]
console.log(res,arr);
res = arr.join('+');// =>res:'10+20+30'; arr:[10,20,30]
res = eval(res);// =>res:60; eval可以把JS字符串变为表达式,如果遇到非有效数字则最后结果是NaN
console.log(res);
获取数组中指定项的索引
+ indexOf([item]):获取当前项在数组中第一次出现位置的索引
+ lastIndexOf([item]):获取当前项在数组中最后一次出现位置的索引
+ 如果数组中不包含这一项，则返回-1;可以基于arr.indexOf([item] === -1)，来验证数组中是否包含某一项
+ arr.includes([item]):验证数组中是否包含这一项，返回true/false
arr = [10,20,30,40,50,20,70,80];
res = arr.indexOf(20);
console.log(res); // => res:1
res = arr.lastIndexOf(20);
console.log(res); // => res:5
res = arr.includes(50);
console.log(res); //=> res:true
reverse:把原始数组倒过来排列，返回的结果是排列后的原始数组，原始数组改变
sort:把原始数组按照规则进行排序，原始数组会改变（返回结果也是改变后的原始数组）,默认按照由小到大的顺序排列
sort默认不是按照每一项的数值大小排序，而是按照每一项的每一个字符编码来进行比较排序的，所以导致直接写sort，不能处理两位及两位以上的内容排序
sort支持传递回调函数，基于自定义的排序规则，进行排序的（后面看到回调再细写）
arr.sort(function(a,b){
return a-b; //=>升序排列
return b-a; //=>降序排列
});
使用箭头函数简写：
升序： arr.sort((a,b)=>a-b);
降序： arr.sort((a,b)=>b-a);
arr = [10,20,30,40,50,20,70,80];
res = arr.reverse(); // =>可以不接收返回值，因为原始数组发生改变
console.log(res===arr); // => true
console.log(res,arr); // => res:[80, 70, 20, 50, 40, 30, 20, 10]; arr:[80, 70, 20, 50, 40, 30, 20, 10];
arr = [60,50,30,70,80,10,20,40];
res = arr.sort(); // =>可以不接收返回值，因为原始数组发生改变
console.log(res===arr); // => true
console.log(res,arr); // =>res:[10, 20, 30, 40, 50, 60, 70, 80]; arr:[10, 20, 30, 40, 50, 60, 70, 80];
arr = [160,150,230,1,21,270,2,180,210,120,240];
res = arr.sort(); // =>可以不接收返回值，因为原始数组发生改变
console.log(res===arr); // => true
console.log(res,arr); //res:[1, 120, 150, 160, 180, 2, 21, 210, 230, 240, 270]; arr:[1, 120, 150, 160, 180, 2, 21, 210, 230, 240, 270];
arr = [160,150,230,1,21,270,2,180,210,120,240];
res = arr.sort((a,b)=>a-b);
console.log(res); // => res:[1, 2, 21, 120, 150, 160, 180, 210, 230, 240, 270];
res = arr.sort((a,b)=>b-a);
console.log(res); // => res:[270, 240, 230, 210, 180, 160, 150, 120, 21, 2, 1];
数组迭代（遍历数组中的每一项）
for(let i = 0; i < arr.length; i++){
let item = arr[i];
console.log(`当前遍历的是数组中索引为${i},数组为${item}的这一项！`);
}
作为普通对象，基于for in遍历数组中的所有的键值对
for(let k in arr){
console.log(k,arr[k]);
}
forEach(函数):遍历数组中的每一项（数组中有多少项，函数就相继被执行多少次）,每一次执行函数，都可以在函数中获取到当前遍历的这一项和对应的索引
arr = [10,20,30,40];
arr.forEach(function(item,index){
// item:当前遍历这一项的内容
// index:当前项的索引
console.log(item,index);//item:10 index:0; item:20 index:1; item:30 index:2; item:40 index:3
});
let total = 0;
// 求和
arr.forEach(function(item,index){
item = Number(item);
if(isNaN(item) === false){
total += item;
}
});
console.log(total); // => total:100
map: 与forEach方法功能差不多，只不过map支持返回值，但是不会改变原来的数组，执行完的返回结果是修改后的新数组
arr = [10,20,30,40];
res = arr.map(function(item,index){
// 数组中有4项，此函数被执行4次
// item:当前遍历这一项的内容
// index:当前项的索引
// 函数中返回啥，都是把数组中当前项替换成啥
return '@@';
});
console.log(res,arr);// => res:["@@", "@@", "@@", "@@"];arr:[10, 20, 30, 40]
网友评论