前言
数组(Array)和对象(Object),是前端开发中用到最多的引用数据类型,掌握他们的常用方法,能够让你开发事半功倍,下面就跟我来一起学习数组中的常用方法吧!
干货
首先我们得创建一个数组
字面量方式创建:
let arr = [1,2,3]
构造函数式创建:
let arr = new Array(1,2,3)
两种创建方式都是可以的,但是我更推荐字面量的方式,因为可以少写点代码,手动狗头!
1、转换
//join 方法将数组转成字符串,按照传入的字符串连接(默认逗号)
//join 不改变原数组
let arr = [1,2,3];
let str1 = arr.join(',');
let str2 = arr.join('&');
console.log(arr); // [1,2,3]
console.log(str1);// 1,2,3
console.log(str1);// 1&2&3
//Array.from() 方法将类数组转换成真数组 返回值是转换后的真数组
let arrayLike = {
0 : 'hello' ,
1 : 666 ,
2 : null ,
3 : {} ,
length : 4
};
let arr = Array.from(arrayLike);
console.log(arr); // ["hello", 666, null, {...}]
2、检测数组
在日常的开发中,我们通常需要检查一个变量是不是数组,ES3有一个instanceof操作符去检测一个变量是不是某种引用数据类型,在ES5中,为Array构造函数新增了一个isArray的方法:
// isArray方法会返回一个布尔值,true就是数组,false就不是数组
Array.isArray(value)
3、插入和移除
//push 方法:将参数逐个添加到数组末尾,并返回数组长度
let arr = [1,2,3];
let count = arr.push(4); //push方法可以传入多个参数,用逗号隔开
console.log(arr); //[1,2,3,4]
console.log(count); //4
//unshift 方法: 将参数逐个添加到数组前端,并返回数组长度
let arr = ['hello',null,666];
let count = arr.unshift('test',[]); //unshift 方法可以传入多个参数,用逗号隔开
console.log(arr); //['test',[],'hello',null,666]
console.log(count); //5
//pop 方法:从数组末尾移除最后一项,并返回移除的项
let arr = [1,2,3];
let item = arr.pop();
console.log(arr); // [1,2]
console.log(item); // 3
//shift 方法:移除数组的第一项,并返回移除的项
let arr = [1,2,3];
let item = arr.shift();
console.log(arr); // [2,3]
console.log(item); // 1
4、排序
//reverse 方法会反转数组
let arr = [1,2,3,4,5,6];
arr.reverse();
console.log(arr); // [ 6, 5, 4, 3, 2, 1]
//sort 方法会根据测试的结果去改变原来的顺序
let arr = [ 5, 8, 66, -1, 46]
arr.sort(function(a,b){
return a - b;//升序排序
});
console.log(arr); // [ -1, 5, 8, 46, 66 ]
//需要注意,以上两种方法都会改变原数组 ,并且都有返回值 , 返回值是经过排序的数组;
5、拼接和截取、替换
//concat 方法 可以将传入的参数和指定的数组拼接,并返回拼接后的数组
//concat 不会改变原数组
let arr = ['A', 'B', 'C'];
let arr1 = arr.concat('D','E');
console.log(arr); // ['A', 'B', 'C']
console.log(arr1);// ['A', 'B', 'C', 'D', 'E']
//slice 方法 接受一个或者两个参数(数组下标),截取并返回对应的项
//slice 不会改变原数组
let arr = ['A', 'B', 'C'];
let arr1 = arr.slice(1); //传递一个参数,则从这个下标开始一直截取到数组末尾
let arr2 = arr.slice(0,2);//传递两个参数,则从第一个下标,截取到第二个下标之前,之前,之前!!!
console.log(arr); // ['A', 'B', 'C']
console.log(arr1);// ["B", "C"]
console.log(arr2);// ["A", "B"]
//splice 方法可以说是最强大的数组方法了,它一共有3种使用方法
//splice 会改变原数组!!!
//删除:可以删除任意数量的项,接受两个参数:从哪里开始删 ,需要删除几项
//举个栗子:splice(1,8); //从数组的第一项往后删除8项
//插入:可以向指定的位置插入任意数量的项,接受3个以上参数:起始位置,0(传0是不删除),要插入的项;
//举个栗子:splice(3, 0, 'hello' , null, 666); //从数组下标3的位置插入'hello' , null, 666
//替换:从指定的位置删除指定数量的项,并插入传入的项
//举个栗子:splice(1, 2, 'test', 'haha'); //从数组下标1的位置删除2项,并插入'test', 'haha'
6、迭代方法(重点)
//forEach 为数组的每一项运行给定的函数 ,这个方法没有返回值 , 就相当于for循环,没什么好讲的;
let arr = [ 1, 2, 3, 4, 5];
arr.forEach(function(item,index,array){
// 业务逻辑
});
//map 为数组的每一项运行给定的函数,并将每次运行的结果组成数组返回
let arr = [ 1, 2, 3, 4, 5];
let arr1 = arr.map(function(item,index,array){
return item * 2
});
console.log(arr);// [1, 2, 3, 4, 5]
console.log(arr1)// [2, 4, 6, 8, 10]
//filter 为数组的每一项运行给定的函数, 并将返回值为true的项组成数组返回
let arr = [ 100, 152, 33, 54, 15,99];
let arr1 = arr.filter(function(item,index,array){
return item % 2 === 0 //筛选出2的倍数
});
console.log(arr);// [100, 152, 33, 54, 15, 99]
console.log(arr1)// [100, 152, 54]
//every 为数组的每一项运行给定的函数, 如果所以项运行结果都返回true,则该方法返回true;
let arr = [ 1, 2, 3, 4, 5];
let flag = arr.every(function(item,index,array){
return item > 0 //判断数组的每一项是不是都大于0
});
console.log(arr);// [1, 2, 3, 4, 5]
console.log(flag)// true
//some 为数组的每一项运行给定的函数, 如果有一项运行结果返回true,则该方法返回true;
let arr = [ 1, 2, 3, 4, 5];
let flag = arr.some(function(item,index,array){
return item % 2 === 0 //判断数组中有没有2的倍数
});
console.log(arr);// [1, 2, 3, 4, 5]
console.log(flag)// true
//find 为数组的每一项运行给定的函数, 返回第一个符合条件的项,并终止遍历,没有则返回undefined;
let arr = [ {id:1}, {id:2}, {id:3}, {id:4}];
let item = arr.find(function(item,index,array){
return item.id === 2 //查询有没有id为2的项
});
console.log(arr);// [ {id:1}, {id:2}, {id:3}, {id:4}];
console.log(item)// {id:2}
//findIndex 为数组的每一项运行给定的函数, 返回第一个符合条件的项的下标,并终止遍历,没有则返回-1;
let arr = [ {id:1}, {id:2}, {id:3}, {id:4}];
let index = arr.findIndex(function(item,index,array){
return item.id === 2 //查询id为2的项的下标
});
console.log(arr);// [ {id:1}, {id:2}, {id:3}, {id:4}];
console.log(index)// 1
结尾
以上就是我们日常开发中常用到数组方法 ,当然还有很多没有写到的方法 ,欢迎大家留言交流!