数组及数组中常用的方法
数组是对象数据类型的,它属于特殊的对象
let ary = [12, 23, 34, 45]
console.log(typeof ary); //=>"object"
console.dir(ary); //详细信息
/* ary = {
0: 12,
1: 23,
2: 34,
3: 45,
length: 4
}
数字作为索引(Key属性名)
length代表长度
ary[0]根据索引获取指定项的内容
ary.length 获取数组的长度 */
数组中常用的方法
- 方法的作用和含义
- 方法的实参
- 方法的返回值
- 原来的数组是否会发生改变
1.实现数组增删改的方法
这一部分方法都会修改原有的数组
push
/*
* push : 向数组末尾增加内容
* @params
* 多个任意类型
* @return
* 新增后数组的长度
*/
let ary = [10, 20];
let res = ary.push(30, 'AA');
// 基于原生JS操作键值对的方法,也可以向末尾追加一项新的内容
ary[ary.length] = 40;
//res:return新增后数组的长度
console.log(res, ary); //=>4 [10,20,30,'AA',40]
unshift
/*
* unshift : 向数组开始位置增加内容
* @params
* 多个任意类型
* @return
* 新增后数组的长度
*/
let ary = [10, 20];
let res = ary.unshift(30, 'AA');
//res:return新增后数组的长度
console.log(res, ary); //=>4 [30,'AA',10,20,]
//基于原生ES6展开运算符,把原有的ary克隆一份,在新的数组中创建第一项,其余的内容使用原始ary中的信息即可,也算实现了向开始追加的效果
ary = [100,...ary];
console.log(ary);//=>[100,30,'AA',10,20,]
shift
/*
* shift : 删除数组中的第一项
* @params
*
* @return
* 删除的那一项
*/
let ary = [10, 20, 30, 40];
let res = ary.shift();
console.log(res, ary); //=>10 [20, 30, 40]
//基于原生JS中的delete,把数组当做普通的对象,确实可以删除某一项内容,但是不会影响数组本身的结构特点(length长度不会跟着修改),真实项目中杜绝这样的删除使用
delete ary[0];
console.log(ary); //=>{1:30,2:40,length:3}
pop
/*
* pop : 删除数组中的最后一项
* @params
*
* @return
* 删除的那一项
*/
let ary = [10, 20, 30, 40];
let res = ary.pop();
console.log(res, ary); //=>40 [10, 20, 30]
//基于原生JS让数组长度干掉一位,默认干掉的就是最后一项
ary.length--; //=>ary.length=ary.length-1;
console.log(ary);//=>[10, 20,]
splice
/*
* splice : 实现数组的增加、删除、修改
* @params
* n,m,X 都是数字 从索引n开始删除m个元素(m不写,是删除到末尾),用x占用删除的部分
* n,0,x 从索引n开始,一个都不删,把x放到索引n的前面
*
* @return
* 把删除的部分用新数组存储起来返回
*/
/* 删除 */
let ary = [10, 20, 30, 40, 50, 60, 70, 80, 90];
let res = ary.splice(2, 4);
console.log(res, ary); //=>[30, 40, 50, 60] [10, 20, 70, 80, 90]
//基于这种方法可以清空一个数组,把原始数组中的内容以新数组存储起来(有点类似数组的克隆:把原来数组克隆一份一模一样的给新数组)
res = ary.splice(0);
console.log(res, ary);//=>[10, 20, 70, 80, 90] []
//删除最后一项和第一项
ary.splice(ary.length - 1);
ary.splice(0, 1);
/* 修改 */
let ary = [10, 20, 30, 40, 50];
let res = ary.splice(1, 2, 'll', 'hh');
console.log(res, ary);//=>[20,30] [10,'ll','hh',40,50]
//实现增加
ary.splice(3, 0, 'lh');
console.log(ary);//=>[10,'ll','hh','lh',40,50]
// 向数组末尾追加
ary.splice(ary.length, 0, 'AAA');
// 向数组开始追加
ary.splice(0, 0, 'BBB');
2.实现数组的查询和拼接
此组方法中,原来数组不会改变
slice
/*
* slice : 实现数组的查询
* @params
* n,m, 都是数字 从索引n开始,找到索引为m的地方(不包含m这一项)
* @return
* 把找到的内容以一个新数组的形式返回
*/
/* 删除 */
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
/*
* concat : 实现数组的拼接
* @params
* 多个任意类型值
* @return
* 拼接后的新数组(原来数组不变)
*/
let ary1 = [10, 20, 30];
let ary2 = [40, 50, 60];
let res = ary1.concat('海',ary2);
console.log(res); //=>[10, 20, 30, "海", 40, 50, 60]
3.把数组转换为字符串
原有数组不变
toString
/*
* toString : 把数组转换为字符串
* @params
*
* @return
* 转换后的字符串,每一项用逗号分隔(原来数组不变)
*/
let ary = [10, 20, 30];
let res = ary.toString();
console.log(res); //=>"10,20,30"
console.log([].toString()); //=>""
console.log([12].toString());//=>"12"
join
/*
* join : 把数组转换为字符串
* @params
* 指定的分隔符(字符串格式)
* @return
* 转换后的字符串(原来数组不变)
*/
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"
console.log(eval(res));//=>60 eval把字符串变为JS表达式执行
4.检测数组中的是否包含某一项
indexOf/lastIndexOf
/*
* indexOf/lastIndexOf : 检测当前项在数组中第一次或者最后一次出现位置的索引值 (IE6~8中不兼容)
* @params
* 要检索的这一项内容
* @return
* 这一项出现的位置索引值(数字),如果数组中没有这一项,返回的结果是-1
* 原来数组不变
*/
let ary = [10, 20, 30, 10, 20, 30];
console.log(ary.indexOf(20));//=>1
console.log(ary.lastIndexOf(20));//=>4
//验证数组中是否包含'hh'
if (ary.indexOf('hh') === -1) {
//不包含
}
//也可以直接使用ES6新提供的includes方法判断
if(ary.includes('hh')){
//返回true为包含,false为不包含
}
5.数组的排序或者排列
reverse
/*
* reverse : 把数组倒过来排列
* @params
*
* @return
* 排列后的新数组
* 原来的数组改变
*/
let ary = [10, 20, 30];
console.log(ary.reverse());//=>[30,20,10]
sort
/*
* sort : 实现数组的排序
* @params
* 可以没有,也可以是个函数
* @return
* 排序后的新数组
* 原来数组改变
*/
let ary = [7, 8, 5, 2, 4, 6, 9];
ary.sort();
console.log(ary); //=>[2, 4, 5, 6, 7, 8, 9]
// SORT方法中如果不传递参数,是无法处理10以上数字排序的(它默认按照每一项第一个字符来排,不是我们想要的效果)
/* ary = [12, 15, 9, 28, 10, 22];
ary.sort();
console.log(ary); //=> [10, 12, 15, 22, 28, 9] */
// 想要实现多位数正常排序,需要给SORT传递一个函数,函数中返回 a-b 实现升序,返回 b-a 实现降序
ary = [12, 15, 9, 28, 10, 22];
// ary.sort(function(a,b){ return a-b; });
ary.sort((a, b) => a - b);
console.log(ary);
6.遍历数组中每一项的方法
forEach
/*
* forEach : 遍历数组中的每一项内容
* @params
* 回调函数
* @return
*
* 原来的数组不变
*/
let ary = [7, 8, 5, 3, 4, 6, 9];
//基于原生JS中的循环可以实现
// for (let i = 0; i < ary.length; i++) {
// console.log('索引' + i + '内容' + ary[i]);
// }
ary.forEach((item,index) => {
//数组中有多少项,函数就会被默认执行多少次
//每一次执行函数:item是数组中当前要操作的这一项,index是当前的索引
console.log('索引' + index + '内容' + item);
});
map
/*
* map: 遍历数组中的每一项内容
* @params
* 回调函数
* @return
* 回调函数的结果组成了新数组的每一个元素
* 原来的数组不变
*/
let ary = [7, 8, 5, 3, 4, 6, 9];
let ary2 = ary.map((item,index) => {
//数组中有多少项,函数就会被默认执行多少次
//每一次执行函数:item是数组中当前要操作的这一项,index是当前的索引
console.log('索引' + index + '内容' + item);
//跟fonEach比,map可以有返回值
return item;
});
console.log(ary2);//=>[7, 8, 5, 3, 4, 6, 9]
filter
/*
* filter: 创建一个新数组, 其包含被过滤出来的所有元素
* @params
* 回调函数
* @return
* 返回一个新的、由过滤的元素组成的数组,如果没有任何数组元素被过滤,则返回空数组。
* 原来的数组不变
*/
let ary = [7, 8, 5, 3, 4, 6, 9];
let a = ary.filter((item, index, array) => item === 7);
console.log(a);//=>[7]
find
/*
* find:找到满足条件的元素后会把值返回出来
* @params
* 回调函数
* @return
* 返回数组中满足条件的第一个元素的值,找不到则返回undefined
* 原来的数组不变
*/
let ary = [7, 8, 5, 3, 4, 6, 9];
let a = ary.find((item, index, array) => item === 7);
console.log(a);//=>7
some
/*
* some:可以递归的检测元素,如果有一个返回true
* @params
* 回调函数
* @return
* 返回true或false
* 原来的数组不变
*/
let ary = [7, 8, 5, 3, 4, 6, 9];
let a = ary.some((item, index, array) => item === 7);
console.log(a);//=>true
every
/*
* every:用于递归的检测元素,要所有元素操作都要返回真结果才为真
* @params
* 回调函数
* @return
* 返回true或false
* 原来的数组不变
*/
let ary = [7, 8, 5, 3, 4, 6, 9];
let a = ary.every((item, index, array) => item >= 1);
console.log(a);//=>true
…
Array.prototype 在控制台查看数组中所有提供的方法