本文详细介绍了JavaScript中数组的各种操作方法，包括join/split连接/拆分、push/pop/unshift/shift增删元素、reverse/sort反转/排序、concat/slice拼接/截取、splice修改数组、遍历方法（forEach/map/filter/some/every）及reduce计算等，帮助读者深入理解数组在编程中的运用。
一、数组的方法
1. join (原数组不受影响)
该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。
返回值:返回一个新的字符串
// 将数组用 - 符号连接起来
let arr = [1,2,3,4,5];
let str = arr.join('-');
console.log(str); // str = 1-2-3-4-5;
2. split (原数组不受影响)
该方法是用过指定的分隔符,将字符串分割成数组。
返回值:返回一个新的数组
let str = wqz-ttj；
let arr = str.split('-');
console.log(arr); // arr=['wqz','ttj'];
数组的增删操作(直接改变原数组)
3. push
该方法可以在数组的最后面,添加一个或者多个元素
结构: arr.push(值)
返回值:返回的是添加元素后数组的长度.
4. pop
该方法可以在数组的最后面,删除一个元素
结构: arr.pop()
返回值:返回的是刚才删除的元素.
5. unshift
该方法可以在数组的最前面,添加一个或者几个元素
结构: arr.unshift(值)
返回值: 返回的是添加元素后数组的长度
6. shift
该方法可以在数组的最前面,删除一个元素
结构: arr.shift()
返回值: 返回的是刚才删除的元素.
数组的翻转和排序(改变数组)
7. reverse 翻转数组
结构:arr.reserse()
8. sort
该方法可以对数组进行排序.
let arr = [1,3,5,2,4,23,122,34];
// 没有参数:时按照首字符的先后排序
arr.sort() // arr=[1,122,2,23,3,34,4,5];
// 有参数
arr.sort(function(a,b){
return a-b;//从小到大排序
return b-a;//从大到小排序
})
数组的拼接与截取(原数组不受影响)
9. concat
该方法可以把两个数组里的元素拼接成一个新的数组
返回值: 返回拼接后的新数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = arr1.concat(arr2); // arr = [1,2,3,4,5,6];
arr1.push(arr2); // arr1 = [1,2,3,[4,5,6]];
该方法和push的区别: push是直接把后一个元素原封不动的添加到第一个数组的后面;
10. slice 截取出来
该方法可以从数组中截取指定的字段,返回出来
返回值:返回截取出来的字段,放到新的数组中,不改变原数组
结构1：arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(0,3) // newArr = [0,1,2];
结构2：arr.slice(start) ;从start下标开始截取,一直到最后
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2); // newArr = [2，3，4，5，6，7];
结构3：arr.slice( ) ;全部截取
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(); // newArr = [0,1,2,3,4,5,6,7];
删除或增加元素(任意在任何位置,直接改变原数组,返回的是被删除元素组成的新数组或者空数组)
11. splice
结构1：arr.splice(start,deletedCount) 纯删除
从start下标开始,删除几个
结构2：arr.splice(start,deletedCount,item) 替换
从start下标开始,删除几个,并在该位置添加item
结构3：arr.splice(start,0,item) 纯添加
从start下标开始,删除0个,并在该位置添加item,start开始全部往后移动
let arr = [1,2,6,7,8];
arr.splice(2,0,3,4,5); // arr = [1,2,3,4,5,6,7,8];
查找元素在数组中出现的位置
12. indexOf
该方法用来查找元素在数组中第一次出现的位置
结构: arr.indexOf(元素)
特殊用法:
(1) arr.indexOf (ele,fromIndex),从fromIndex这个下标开始,元素第一次出现的位置
用来判断元素是否存在于数组中!
if (arr.indexOf(ele) === -1){//说明元素不存在!!
console.log('元素不存在!)
} else {
console.log(' 元素存在! ')
}
13. lastIndexOf
该方法用来查找元素最后一次在数组中出现的位置
二、ES5新增的遍历数组方法
1. forEach( )
该方法等同于for循环,没有返回值
用法:
arr.forEach(function(item,index,arr){
// 里面的function是一个回调函数,
// item: 数组中的每一项;
// index: item对应的下标索引值
// arr: 就是调用该方法的数组本身
})
2. map( )
映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等
用法:
let arr = [1,32,54,6,543];
let res = arr.map(function(item,index,arr){
// 里面的function是一个回调函数,
// item: 数组中的每一项;
// index: item 对应的下标索引值
// arr: 就是调用该方法的数组本身
return item*2;
})
3. filter( )
filter方法: 有返回值, 过滤出符合条件的元素
let arr = [1, 3, 5, 2, 4, 6];
let res3 = arr.filter(function(item, index) {
return item % 2 === 0;
});
console.log(res3);
过滤出布尔类型为true的项
let arr2 = [0, "", false, 1, 3, 4];
let res4 = arr2.filter(function(item, index) {
return item;
});
console.log(res4);
4. some
判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false
let arr3 = [
{ name: "zs", age: 18, done: "notYet" },
{ name: "ls", age: 20, done: true },
{ name: "ww", age: 22, done: true }
];
let res5 = arr3.some(function(item) {
return item.done;
});
console.log(res5);
5. every
判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false
let res6 = arr3.every(function(item) {
return item.done;
});
console.log(res6);
6. find（找到符合项，并返回该项）
找到符合条件的项,并且返回第一项
let arr4 = [
{ id: 3, name: "ls", done: false },
{ id: 1, name: "zs", done: true },
{ id: 2, name: "ww", done: true }
];
var res7 = arr4.find(function(item) {
return item.done;
});
console.log(res7);
7. findIndex（找到符合项，并返回该项的索引值）
找到符合条件的项的下标,并且返回第一个
var res8 = arr4.findIndex(function(item) {
return item.done;
});
console.log(res8);
8. reduce（函数是迭代函数，常用于计算累加等操作）
- 求和计算
var arr1 = [1,2,3,4,5] ;
var new1 = arr1.reduce(function(pre,next,index){
return pre+next ;
//pre+next=10+5=15
})
console.log(new1);
第一次：pre–>1 next–>2 index–>1
pre+next=1+2=3
第二次：pre–>3 next–>3 index–>2
pre+next=3+3=6
第三次：pre–>6 next–>4 index–>3
pre+next=6+4=10
第四次：pre–>10 next–>5 index–>4
- 扁平化数组(拼接数组)
var arr2 = [[1,2,3],[4,5],[6,7]] ;
var new2 = arr2.reduce(function(pre,next,index){
return pre.concat(next); //前数组拼接后数组 .concat()
})
console.log(new2);
- 对象数组叠加计算
var arr3 = [
{price:10,count:1},
{price:15,count:2},
{price:10,count:3}
];
var new3 = arr3.reduce(function(pre,next,index){
return pre+next.price*next.count;
},0) //在原数组第一项添加为0，不改变原数组，则可不操作第一项
console.log(new3);
应用 : 计算数组中每个元素出现的次数
投票板
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name) {
// console.log(allNames, '| ' + name);
if (name in allNames) {
allNames[name]++;
} else {
allNames[name] = 1;
}
return allNames;
}, {});
console.log(countedNames)；
扫一扫
2143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
