数组是对象数据类型的,它是特殊的对象
let ary = [12,23,45];
console.log(typeof ary); ==> "object"
数字作为索引(key属性名)
length 代表长度
ary[0] 根据索引获取指定项的内容
ary.length 获取数组的长度
ary.length-1 最后一项的索引
1、实现数组增删改的方法(都会修改原有的数组):
push:向数组末尾增加内容(ary[ary.length] = "val");
参数:多个任意类型
返回值:新增后数组的长度
unshift:向数组开始位置增加内容
参数:多个任意类型
返回值:新增后数组的长度
--> 基于原生ES6展开运算符,把原有的ary克隆一份,在新的数组中创建第一项,其余的内容使用原始ary中的信息即可,也算实现了向开始追加的效果
let ary = [10,20];
ary = [100,...ary];
console.log(ary); // [100, 10, 20]
shift:删除数组中的第一项
参数:无
返回值:删除的那一项
--> 基于原生JS中的delete,把数组当作普通的对象,确实可以删除掉某一项内容,但是不会影响数组本身的结构特点(length长度不会跟着修改),真实项目中杜绝这样的删除使用
let ary = [10,20,30,40];
delete ary[0];
console.log(ary); // [empty, 20, 30, 40]
pop:删除数组中的最后一项
参数:无
返回值:删除的那一项
--> 基于原生JS让数组长度去掉一位,默认去掉的就是最后一项
let ary = [10,20,30,40];
ary.length--; //==> ary.length = ary.length-1;
console.log(ary); // [10, 20, 30]
splice:实现数组的增加、删除、修改
splice(m,n)
splice(m,n)从索引M开始,删除N个
splice(m),从m开始,删除后面所有
splice(m,n,z)从m开始,删除n个,用z替代
splice(m,0,n)把n项添加到m的前面+
【删除】
参数:n,m 都是数字 从索引n开始删除m个元素(m不写,是删除到末尾)
返回值:把删除的部分用新数组存储起来返回
let ary = [10,20,30,40,50,60];
let res = ary.splice(2,4);
console.log(res); // [30, 40, 50, 60]
console.log(ary); // [10, 20]
res = ary.splice(0);//基于这种方法可以清空一个数组,把原始数组中的内容以新数组存储起来(有点类似数组的克隆:把原来数组克隆一份一模一样的给新数组)
console.log(res); // [10, 20]
console.log(ary); // []
--> 删除数组的最后一项:ary.splice(ary.length-1);
--> 删除数组的第一项:ary.splice(0,1);
【增加、修改】
参数:n,m,x 从索引n开始删除m个元素,用x占用删除的部分
n,0,x 从索引n开始,一个都不删,把x放到索引n的前面
返回值:把删除的部分用新数组存储起来返回
--> 向数组末尾追加:ary.splice(ary.length,0,'AAA');
--> 向数组开始追加:ary.splice(0,0,'BBB');
2、数组的查询和拼接:
slice:实现数组的查询
slice(m,n)从索引m开始,截取到索引n,不包括n。
slice(m)从索引m开始,截取到数组的末尾,m》n,空数组;
slice(m,n),如果n<0,则slice(m,length+n),如果m,n都为0(length+m,length+n)
参数:n,m 都是数字 从索引n开始,找到索引为m的地方(不包含m这一项)
返回值:把找到的内容以一个新数组的形式返回,不改变原数组
let ary = [10,20,30,40,50];
let res = ary.slice(1,3);
console.log(res); // [20,30]
//m不写是找到末尾
res = ary.slice(1);
console.log(res); // [20,30,40,50]
//数组的克隆,参数为0或者不写也可以
res = ary.slice(0);
console.log(res); // [10,20,30,40,50]
concat:实现数组拼接
参数:多个任意类型值
返回值:拼接后的新数组(原来数组不变)
3、把数组转换为字符串(原有数组不变)
toString:把数组转换为字符串
参数:无
返回值:转换后的字符串,每一项用逗号分隔(原来数组不变)
join:把数组转换为字符串
参数:指定的分隔符(字符串格式)
返回值:转换后的字符串(原来数组不变)
let ary = [10,20,30];
let res = ary.join('');
console.log(res); // “102030”
res = ary.join(' ');
console.log(res); // “10 20 30”
res = ary.join();
console.log(res); // "10,20,30"
res = ary.join('|');
console.log(res); // "10|20|30"
res = ary.join('+');
console.log(res); // "10+20+30"
console.log(eval(res)); // 60(数字格式的) eval把字符串变为JS表达式执行
4、检测数组中的是否包含某一项
indexOf/lastIndexOf:检测当前项在数组中第一次或者最后一次出现位置的索引值(在IE6~8中不兼容)
参数:要检索的这一项的内容
返回值:这一项出现的位置索引值(数字),如果数组中没有这一项,返回的结果是-1(原来数组不变)
**includes()是否包含某一项 **
包含返回true,不包含返回false**
5、数组的排序或者排列
reverse:把数组倒过来排列(反转数组/数组的反转)
参数:无
返回值:排列后的新数组(原来数组改变)
sort:实现数组的排序
参数:可以没有,也可以是个函数(sort方法中如果不传递参数,是无法处理10以上数字排序的(它默认按照每一项第一个字符来排,不是我们想要的结果)
返回值:排序后的新数组(原来数组改变)
// 想要实现多位数正常排序,需要给sort传递一个函数,函数中返回a-b实现升序,返回b-a 实现降序
let ary = [12,15,9,28,10,22];
//普通函数的方式
ary.sort(function(a,b){
return a-b;
});
console.log(ary); //[9, 10, 12, 15, 22, 28]
//箭头函数的方式
ary.sort((a,b) => a-b);
console.log(ary); //[9, 10, 12, 15, 22, 28]
6、遍历数组中每一项的方法(forEach/map/filter/find/reduce/some/every/...)
forEach:遍历数组中的每一项内容
参数:回调函数
返回值:原来数组不变
let ary = [1,5,17,23,9,55];
ary.forEach((item,index) => {
//数组中有多少项,函数就会被默认执行多少次
//每一次执行函数,item是数组中当前要操作的这一项,index是当前项的索引
console.log('索引:'+index+'内容:'+ item);
})
// forEach:遍历数组,没有返回值
// let ary = [1,2,3,4,5];
// ary.forEach(function(item,index){
// // 数组有多少项,次函数就会执行多少次
// // item是数组的每一项
// // index是数组每一项的做引
// console.log(item,index)
// })
map:遍历数组,映射数组
let ary = [1,2,3,4,5];
console.log(ary.map(function(item,index){
console.log(item,index)
return item+1
}))
示例:向数组末尾追加一个数为100的值:
- ary.push(100)
- ary[ary.length] = 100 (普通对象键值对的操作)
- ary.splice(ary.length,0,100)
总结:
push、unshift、pop、shift、splice、sort、reverse //会改变原数组
slice、concat、join、indexOf、lastIndexOf、includes、forEach、map