# 八.数据分类[Array]
前言
按照四个维度去探讨数组
- 方法的作用
- 需要传那些参数
- 是否有返回值，返回值时什么
- 通过此方法是否对原来的数组产生了改变
# 1.数组遍历
# 1.1 map
var newArry = ary.map(
(item) => item * 10 /* 原来的数组不变，返回的新数组会变 */
)
1
2
3
2
3
# 1.2 forEach
- 无法 break,可以用 try/catch 中 throw new Error 来停止
ary.forEach(function (item, index) {
console.log(item, index) //数组中有几项函数就执行几次，原来的数组不变
})
1
2
3
2
3
# 2.数组筛选
# 2.1 filter
过滤
# 3.数组判断
# 3.1 some
有一项返回 true，则整体为 true
# 3.2 every
有一项返回 false，则整体为 false
# 4.数组转换
# 4.1 toString
把数组转换为字符串
//->toString()加参数没有作用
var ary = [1, 3, 5]
var res = ary.toString()
console.log(ary, res)
1
2
3
4
2
3
4
# 4.2 join
按照每一个分隔符，把数组中的每一个项拼接成一个字符串，原来的数组不变
var res = ary.join("+")
console.log(res) //“1+3+5”
//-->扩展：eval->js 中把字符串变为 js 表达式执行的一个方法
eval(ary.join("+"))
1
2
3
4
2
3
4
# 4.3 flatMap
一维数组转二维数组
[10, 21, 22, 2, 17, 11].flatMap((value, i, arr) => i % 2 ? [] : [arr.slice(i, i + 2)])
// [
// [
// 10,
// 21
// ],
// [
// 22,
// 2
// ],
// [
// 17,
// 11
// ]
// ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 5.元素操作
# 5.1 push
var pushAry = [12, 23, 34]
var pushRes = pushAry.push(100) // 原来的数据已经发生了改变,返回新增加后数组的长度
pushAry.push(...[1, 2, 3, 4]) // 向末尾增加多项
console.log("push", pushAry, pushRes)
1
2
3
4
2
3
4
扩展
不想使用 push,也想向数组的末尾增加内容
ary[ary.length] = 10
1
# 5.2 pop
- 删除数组最后一项的内容
- 参数：没有
- 返回:被删除的那一项内容
- 原有的数组也发生了改变
var res = ary.pop()
console.log(res, ary)
1
2
2
扩展
不用 pop 想删除最后一项的内容
ary.length--
ary.length -= 1
ary.length = ary.length - 1
1
2
3
2
3
# 5.3 unshift
向数组的开头增加一项
var res = ary.unshift(100)
console.log(res, ary)
1
2
2
# 5.4 shift
删除数组中的第一项
var res = ary.shift()
console.log(res, ary)
1
2
2
- sort(fn)/reverse 排序与反转，改变原数组
# 5.5 concat
作用：数组合并，浅拷贝
参数：空 | 数组
返回值：新数组
原数组改变：否
1.数组合并
ary1.concat(ary2) // 把 ary2 和 ary1 拼接 ary2 在后面
1
- 2.浅拷贝
ary1.concat() // 把 ary1 克隆一份一模一样的数组
1
# 5.6 slice(start,end)
关于数组的截取和拼接
实现数组的截取，在原来的数组中截取某一部分
slice(n, m) // 从索引 n 开始，找到索引为 m 出(不包含 m)，将找到的部分已一个新的数组返回，原来的数组不变
slice(n) // 从索引 n 开始一直找到数组的末尾
slice(0) // 克隆一份一模一样的数组原来的数组不变
slice(-n)
slice(n, -m)
slice(n, m) // n 大于 m
slice(-n, -m)
slice(n, m) // n 大于 arr.length
slice(n, m) // m 大于 arr.length
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 5.7 splice(start,number,value...)
返回删除元素组成的数组，value 为插入项，改变原数组
它既能实现删除，也能实现增加，还能实现修改
var ary = [1, 3, 6, 8]
//删除
ary.splice(n, m) //从索引 n 开始，删除 m 个元素，把删除的内容以一个新的数组的方式返回，原来的数组改变
var res = ary.splice(1, 3)
console.log(res, ary)
ary, splice(n) //从索引 n 开始，删除到数组的末尾
ary.splice(0) //把原来的数组中的每一项都删除，把之前的删除的每一项的值以一个新的数组返回（把之前的数组克隆了一份，并且清空了原来的数组）
ary.splice() //返回空数组
ary.splice(ary.length - 1, 0)
//修改
splice(n, m, x) //从索引 n 开始，删除 m 个，用 x 替代删除的部分
var res = ary.splice(2, 4, 1000)
//增加
splice(n, 0, x) // 从索引 n 开始，一个都不删除，把 x 增加到 n 的前面，原来的数组改变
splice(ary.length, 0, x)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- indexOf/lastIndexOf(value,fromIndex) 查找数组项，返回对应的下标
# 6.整体操作
# 6.1 reduce
reduceRight(fn(pre,cur),defaultPrev)同理
两两执行，prev 为上次化简函数的 return 值，cur 为当前值（从第二项开始）
# 二维数组转一维数组
- 方式一
arr.map(i => i.children).reduce((pre, next) => pre.concat(next), [])
1
- 方式二
let a = [1, 2, [4, 5], 6, 7, [8,[12,34,[333,44]]]]
new Function(`return [${a}]`)() // [1, 2, 4, 5, 6, 7, 8, 12, 34, 333, 44]
1
2
3
2
3
# 6.2 reverse
把数组倒过来排列原数组也改变
var ary = [2, 4, 523, 6, 7, 766, 23, 34]
var res = ary.reverse()
console.log(res, ary)
1
2
3
2
3
# 6.3 sort
- 给数组进行排序，原有的数组会改变()
sort()只能处理 10 以内的数组，因为他是按照 unicode 编码的值排列的
var ary = [2, 4, 7, 6, 7, 3, 1, 8]
var res = ary.sort() // [1, 2, 3, 4, 6, 7, 7, 8]
1
2
2
sort( (a, b) => a-b)处理10以上的数组
var ary = [2, 4, 523, 6, 7, 766, 23, 34]
var res = ary.sort( (a, b) => a-b) // [2, 4, 6, 7, 23, 34, 523, 766]
1
2
2
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
var res = arr.sort( () =>Math.random()-0.5)
1
2
2
提示
更多的数组方法
console.dir(Array.prototype)
1