JS数组操作汇总
# 1.数组ES5方法
Array.isArray(arr) //判断是否为数组
arr.valueOf() //返回数组本身
arr.toString() //返回数组的字符串形式
arr.push() //数组的末端添加元素,并返回添加新元素后的数组长度(会改变原数组)
arr.pop() //删除数组的最后一个元素,并返回该元素(会改变原数组)
arr.shift() //删除数组的第一个元素,并返回该元素(会改变原数组)
arr.unshift() //在数组的第一个位置添加元素,并返回添加新元素后的数组长度(会改变原数组)
arr.join() //以指定参数作为分隔符,将所有数组成员连接为一个字符串返回
arr.concat() //多个数组的合并
arr.reverse() //颠倒排列数组元素,返回改变后的数组(会改变原数组)
arr.slice(start, end) //提取目标数组的一部分,返回一个新数组(原数组不变)
arr.splice(start, count, addElement1, addElement2, ...); //删除原数组的一部分成员,并可以在删除的位置添加新的数组成员,返回值是被删除的元素(会改变原数组)
arr.sort() //对数组成员进行排序,默认是按照字典顺序排序(会改变原数组)
arr.map((elem, index, arr)=>{ ...}) //将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回 (三个参数:当前成员、当前位置和数组本身。)
arr.forEach((elem, index, arr)=>{ ...}) //与map类似,不返回值
arr.filter((elem, index, arr)=>{ ...}) //过滤数组成员,满足条件的成员组成一个新数组返回
arr.some((elem, index, arr)=>{ ...}) //判断数组成员是否部分符合某种条件
arr.every((elem, index, arr)=>{ ...}) //判断数组成员是否全部符合某种条件
arr.reduce((a,b, index, arr)=>{ ...}) //从左到右处理数组的每个成员并累计为一个值
arr.reduceRight((a,b, index, arr)=>{ ...}) //从右到左处理数组的每个成员并累计为一个值
arr.indexOf() //返回给定元素在数组中第一次出现的位置(可第二个参数:搜索的开始位置)
arr.lastIndexOf() //返回给定元素在数组中最后一次出现的位置,没有返回-1.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 2.数组ES6扩展
Array.of(1,2,3) //将参数中所有值作为元素形成数组。输出[1,2,3]
Array.from(arrayLike[, mapFn[, thisArg]]) //将类数组对象或可迭代对象转化为数组。
arr.find(item => item > 2) //查找数组中符合条件的元素,若有多个符合条件的元素,则返回第一个元素。
arr.findIndex(item => item = 1) //查找数组中符合条件的元素索引,若有多个符合条件的元素,则返回第一个元素索引。
arr.fill(target[,startIndex,endIndex]) //将一定范围索引的数组元素内容填充为单个指定的值。
arr.copyWithin(target, start = 0, end = this.length)//将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
arr.entries() //返回一个键值对的迭代器
arr.keys() //返回一个键名的迭代器
arr.values() //返回一个键值的迭代器
arr.includes(target,start=0) //数组是否包含指定值
arr.flat(num=1) //数组扁平化,返回一个数组。默认拉平一层,参数Infinity将转为一维数组。
arr.flatMap(x => [[x * 2]) //先对数组中每个元素进行了的处理,再对数组执行 flat() 方法。
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 3.数组技巧总结
# 3.1数组遍历方法
//1.for循环
for(let i = 0; i < arr.length; i++) {/*...*/}
//2.foreach循环:无返回值,不影响原数组
arr.forEach((item,index,array)=>{ /*...*/ })
//3.map循环
arr.map((item,index,array)=>{ /*...*/return xxx })
//4.for of遍历(es6)
for (var value of myArray) { /*...*/ }
//5.filter遍历:不会改变原始数组,返回新数组
arr.filter((item, index, arr)=>{ /*...*/ })
let arr = [1,2,3,4].filter(item => item>2) // [3,4]
//6.some遍历 判断数组成员是否部分符合某种条件
arr.some((item, index, arr)=>{ /*...*/ })
let flag = [1,2,3,4].some(item => item>3) //true
//7.every遍历 判断数组成员是否全部符合某种条件
arr.every((elem, index, arr)=>{ /*...*/ })
let flag = [1,2,3,4].every(item => item>3) //false
//8.reduce 从左到右处理数组的每个成员并累计为一个值
arr.reduce((a,b, index, arr)=>{ /*...*/ })
let total = [0,1,2,3,4].reduce((a, b)=>a + b); //10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 3.2数组去重
//1、Set
Array.from(new Set(arr)) // [...new Set(arr)]
//2、for循环
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){ //第一个等同于第二个,splice方法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}
//3、利用indexOf/lastIndexOf去重
function unique(arr) {
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array.indexOf(arr[i]) === -1) {
array.push(arr[i])
}
}
return array;
}
//4、利用sort()
function unique(arr) {
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;
}
//5、filter
function unique(arr) {
return arr.filter(function(item, index, arr) {
return arr.indexOf(item, 0) === index;
});
}
//6、includes
function unique5(arr) {
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i])
}
}
return newArr
}
//7、reduce+includes
function unique(arr){
return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
//8、利用对象属性存在的特性
function unique(arr) {
var obj={}
var newArr=[]
for (let i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = 1
newArr.push(arr[i])
}
}
return newArr
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
# 3.3随机排序
let newArr = arr.sort((a, b) => Math.random() - 0.5})
1
# 3.4数组对象排序
let arr = [{ name: 'zopp', age: 10 },{ name: 'gpp', age: 18 },{ name: 'yjj', age: 8 }]
console.log(arr.sort((a, b) => { return a.age - b.age }))//升序
console.log(arr.sort((a, b) => { return b.age - a.age }))//降序
1
2
3
2
3
# 3.5数组扁平化
ary = arr.flat(Infinity) //1.es6
function flatten(arr) { //2.reduce
return arr.reduce((item, cur) => {
return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
}, [])
}
1
2
3
4
5
6
2
3
4
5
6
# 3.6交集/并集/差集
let a = [1, 2, 3], b = [2, 4, 5]
//1. includes + filter
let union = a.concat(b.filter((v) => !a.includes(v))) // 并集 // [1,2,3,4,5]
let intersection = a.filter((v) => b.includes(v)) // 交集 // [2]
let difference = a.concat(b).filter((v) => !a.includes(v) || !b.includes(v)) // 差集 // [1,3,4,5]
//2.Set
let union = [...new Set([...a, ...b])] // 并集 [1, 2, 3, 4,5]
let intersect = [...new Set(a.filter((x) => b.has(x)))] // 交集 [2]
let difference = [...new Set(a.filter((x) => !b.has(x)))] // a 相对于 b 的)差集 [1,3]
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3.7数组求和
//1.for 循环
function sum(arr) {
var s = 0
for (var i = arr.length - 1; i >= 0; i--) {
s += arr[i]
}
return s
}
//2.递归
function sum(arr) {
var len = arr.length
if (len == 0) {
return 0
} else if (len == 1) {
return arr[0]
} else {
return arr[0] + sum(arr.slice(1))
}
}
//3.reduce
let sum = arr.reduce( (prev, curr)=> prev + curr)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 3.8类数组转化
let arr = Array.prototype.slice.call(arguments) //1、Array 的 slice 方法
let arr = Array.from(arguments) //2、ES6 的 Array.from()
let arr = [...arguments] //3、扩展运算符...
1
2
3
2
3
# 3.9数组转化为树形结构
let arr = [
{ id: 1, name: '1', pid: 0, },
{ id: 2, name: '1-1', pid: 1, },
{ id: 3, name: '1-1-1', pid: 2 },
{ id: 4, name: '1-2', pid: 1},},
]
//递归实现
function toTree(data, parentId = 0) {
var itemArr = []
for (var i = 0; i < data.length; i++) {
var node = data[i]
if (node.pid === parentId) {
var newNode = {
...node,
name: node.name,
id: node.id,
children: toTree(data, node.id),
}
itemArr.push(newNode)
}
}
return itemArr
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 3.10会改变原数组的方法
pop、push、shift、unshift、fill、sort、reverse、splice
# 3.11最大值
//普通数组
Math.max(...[1, 2, 3, 4]) //4
Math.max.apply(this, [1, 2, 3, 4]) //4
[1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => {
return Math.max(prev, cur);
}, 0) //4
//取数组对象中id的最大值
const arr = [{ id: 1, name: 'jack' },{ id: 2, name: 'may' },{ id: 3, name: 'shawn' },{ id: 4, name: 'tony' }]
const arr1 = Math.max.apply(Math, arr.map(item => { return item.id })) //4
const arr2 = arr.sort((a, b) => { return b.id - a.id })[0].id //4
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3.12数组合并
arrA.concat(arrB)
[...arrA , ...arrB]
[].concat.apply(arrA, arrB)
1
2
3
2
3
# 3.13数组是否包含值
[1, 2, 3].includes(4) //false
[1, 2, 3].indexOf(4) //-1 如果存在换回索引
[1, 2, 3].find((item) => item === 3) //3 如果数组中无值返回undefined
[1, 2, 3].findIndex((item) => item === 3))//2 如果数组中无值返回-1
//对象数组
const flag = [{age:1},{age:2}].some(v=>v.age==2)
1
2
3
4
5
6
2
3
4
5
6
# 3.14对象转数组
Object.keys({ name: '张三', age: 14 }) //['name','age']
Object.values({ name: '张三', age: 14 }) //['张三',14]
Object.entries({ name: '张三', age: 14 }) //[[name,'张三'],[age,14]]
Object.fromEntries([name, '张三'], [age, 14]) //ES10的api,Chrome不支持 , firebox输出{name:'张三',age:14}
1
2
3
4
2
3
4
# 3.15数组转对象
const arrName = ['张三', '李四', '王五']
const arrAge=['20','30','40']
const arrDec = ['描述1', '描述2', '描述3']
const obj = arrName.map((item,index)=>{
return { name: item, age: arrAge[index],dec:arrDec[index]}
})
1
2
3
4
5
6
2
3
4
5
6
上次更新: 2020/09/27, 13:09:00