Array,重新认识一下
本文的内容api
方法较多,千万,千万,千万,千万,千万,别死记硬背。没有任何作用,反而加重你学习的负担,碰到有合适的场景可以查api
来使用。
又是一篇基础文章,为什么要这么强调基础呢?在之前的面试中,发现好多面试者将精力放到了框架、类库上。对于基础的东西浅尝辄止。殊不知这样学习如同南辕北辙。学不好基础怎么能将更高级的东西了解透彻呢。
文章意为让大家提高对基础知识的认知,更好的学习,更快的学习。很多时候你会发现一个问题,编程的知识都是互通的,一通则百通。所以呢?还是底层,还是基础。地基之深厚,方能使知识的大厦屹立不倒。
一不小心废话又多了,请相信我,基础写完之后,一定会有进阶知识点。怎么样,期待不。😸
闲言少叙,今天咱们来认识一下数组这个东西。
every body,开始我们的表演……
1.常规操作
数组是在内存中连续存储数据的容器,形如你看到的酒店房间、火车、教室……都是连续的。
数组的特点是增加、删除慢,更新快。为什么这么说呢?
因为在数组中添加和删除元素,会将后面的元素依次后移或者前移。
小栗子上场
const arr = [1,2,3,4]
// 添加元素
arr.push(0) // 会将4,3,2,1分别向后移动一位,给0这个新元素腾出位置
// 删除元素
arr.shift() // 删除后,由于第一位空出,所以会将后面的元素依次前移。
// 更新元素
arr[0] = 10 // 只修改第一个元素,不影响其他
总结:
- 每次增加和删除元素都会同时操作后面的元素
- 更新不会影响其他元素,只会影响当前元素
下面这个表格详细的描述了每一个常用方法的功能和使用。敬请查阅。
1.1 小文档:
作用 | 方法 | 返回值 | 是否影响原数组 |
---|---|---|---|
增加(后) | push |
添加后的数组长度 | 是 |
删除(后) | pop |
删除的元素 | 是 |
增加(前) | unshift |
添加后的数组长度 | 是 |
删除(前) | shift |
删除的元素 | 是 |
修改 | 索引修改 | 无 | 是 |
查询 | 索引查询 | 查询到的元素 | 否 |
拼接 | concat |
返回拼接后的数组 | 否 |
裁剪 | slice |
裁剪到的数组 | 否 |
排序 | sort |
排序后的数组 | 是 |
转换 | 转为字符串 join | 转换后的字符串 | 否 |
万能方法 | splice |
操作的数据 | 是 |
1.2 小示例:
像 pop、unshift、shift、索引修改、索引查询
这几种方法都是常用方法,不必太过多说。
其他方法使用时的注意点:
1. push
let arr = [1,2,3]
// 增加单个元素
arr.push(4) // [1,2,3,4]
// 添加多个元素
arr.push(5,6) // [1,2,3,4,5,6]
// 增加数组
arr.push([7,8]) // [1,2,3,4,5,6,[7,8]]
说明:push
添加数组时,会将数组作为一个元素添加到原数组中,最终得到一个多维数组
2. concat
let arr = [1,2,3]
// 拼接一个元素
arr.concat(4) // [1,2,3,4]
// 拼接多个元素
arr.concat(5,6) // [1,2,3,4,5,6]
// 拼接数组
arr.concat([7,8]) // [1,2,3,4,5,6,7,8]
说明:concat
拼接数组时,会将数组里的每一项单独添加到原数组中。
3. slice
let arr = [1,2,3]
// 只传一个参数,从当前位置一直裁剪到数组末尾
arr.slice(0) // [1,2,3]
// 传两个参数,从第一个的位置裁剪到最后一个的位置,包含起始位置,不包含结束位置
arr.slice(0,1) // [1]
// 若第二个参数大于第一个参数。截取为空
arr.slice(1,0) // []
说明:slice
的两个参数都可以接收负数,负数的意义为从后向前查找,所起的作用和代码中相同。
4. sort
let arr = [1,2,3]
// 正序排列
arr.sort((a,b) => a - b)
// 倒序排列
arr.sort((a,b) => b - a)
说明:sort
可接收一个排序函数作为参数,正序为参数1 - 参数2
,倒序为参数2 - 参数1
5. join
let arr = [1,2,3]
// 元素之间可使用指定的连接符连接
arr.join('-') // 1-2-3
arr.join('=') // 1=2=3
……
6. splice
let arr = [1,2,3]
// 任意位置新增
arr.splice(0,0,'11') // ['11',1,2,3]
// 任意位置删除
arr.splice(0,1) // [1,2,3]
// 任意位置替换任意个数的元素
arr.splice(1,2,4,5,6) // [1,4,5,6]
说明:splice(索引位置,修改个数,新数据1,新数据2,新数据3,……)
- 修改个数为0,表示新增
- 新数据个数为0,表示删除
- 其他情况为,从索引位置开始,向后查找
修改个数
个元素,修改为后边所有的新数据。
2.骚操作 (进阶操作)
说完了基础,怎么能不进阶呢。就像你吃腻了粗茶淡饭,怎么也得来点儿大鱼大肉吧。
接下来,就是满汉全席的时刻~~~
1.使用 from
创建数组
const arr = [1,2,3];
// 通过arr创建新数组。
const arr1 = Array.from(arr);
// 创建新数组,并且单独处理每一项
const arr2 = Array.from(arr, item => item * 2)
// 创建定长数组并使用0填充
const arr3 = Array.from({length: 10}, () => 0)
注意:
from
可接收第二个参数,可以将每一项经过运算,并返回处理后的数组。
2.扁平化数组 flat
[[1,2]].flat()
[[1,2]].flat(1)
[[[[[[1,2]]]]]].flat(Infinity)
注意:
-
flat
可接收一个参数,为扁平化的层级 -
如果传入
Infinity
则表明,不管数组有多少层。它都能给扒光。
3.去重处理new Set()
let arr = [1,1,2,2,3,3,4,4,5,5,6,6]
arr = [...new Set(arr)] // [1,2,3,4,5,6]
注意:
set
是一种不包含重复元素的集合。可以通过数组创建- 利用
set
的去重特性,过滤一遍数组,得到的就是不包含重复元素的数组
4.数组排序sort -- 数组乱序 - 0.5
[3,2,1].sort((a,b) => a - b) // 正序
[3,2,1].sort((a,b) => b - a) // 倒序
// 创建一个乱序的数组
[1,2,3,4,5,6,7,8,9,10].sort(() => Math.random() - 0.5)
注意:
sort
接收一个函数作为排序函数。函数返回 正数 为正序,负数 为倒序,0 为相等- 使用随机数,可以不确定的返回正数、负数和0。也就会得到一个乱序的数组
5.最大和最小值 Max和Min
Math.max(...[1,2,3,4,5]) // 5
Math.min(...[1,2,3,4,5]) // 1
注意:
max
和min
函数只接收参数,不能接受数组。所以要将数组中的元素展开传入。
6.数组处理高阶函数reduce、map、filter、some、every、forEach、fill
(这可是个大活儿。)
// reduce 聚合
[1,2,3,4].reduce((pre, next, index, array) => pre + next)
[1,2,3,4].reduce((pre, next, index, array) => pre + next, 0) // 第二个参数为默认值
// map 遍历处理
[1,2,3,4].map((item, index, array) => item * 2) // [2,4,6,8]
// filter 过滤
[1,2,3,4].filter((item, index, array) => item > 2) // [3,4]
// some 部分符合条件
[1,2,3,4].some((item, index, array) => item === 1) // true
[1,2,3,4].some((item, index, array) => item === 5) // false
// every 全部符合条件
[1,2,3,4].every((item, index, array) => item === 1) // false
[1,1,1].every((item, index, array) => item === 1) // true
// forEach 遍历
[1,1,1].forEach((item, index, array) => console.log(item))
// fill 填充
new Array(10).fill(value, start, end)
new Array(10).fill(1, 0, 2) // [1,1,,,,,,,,]
注意:
入参函数的参数说明:
-
map、filter、some、every、forEach
这几个函数的参数是一样的,都是(item, index, array)
。item
是当前操作的元素index
是当前的索引值array
是操作的数组本身。
-
reduce((pre, next, index, array) => {}, defaultValue)
pre
是当前操作的结果next
为下一个要操作的元素。index
是当前的索引值array
是操作的数组本身defaultValue
为默认值
-
fill(value, start, end)
value
为填充的值start
为开始位置(包含)end
为结束位置(不包含)
7.includes、indexOf、lastIndexOf、find、findIndex
// 是否包含 includes
[1,2,3,4].includes(4) // true
[1,2,3,4].includes(5) // false
// 查找首次出现的位置 indexOf
[1,2,3,4].indexOf(3) // 2
// 查找最后一次出现的位置 lastIndexOf
[1,2,3,4].lastIndexOf(3) // 2
// 查找元素 find
[1,2,3,4].find(item => item === 3) // 3
// 查找元素的索引
[1,2,3,4].findIndex(item => item === 3) // 2
注意:
这几个方法没什么可注意的,会使用就ok了。😂😂😂
8.Array.isArray
// 判断是不是数组
const arr = 1
Array.isArray(arr) // false
Array.isArray([]) // true
9.数组解构
const arr = [1,2,3,4,5,6]
const [a,,b,...c] = arr // 将 0 赋值给 a。将3赋值给b。将 4,5,6 作为一个数组赋值给c
// 小技巧:
// 通过解构交换两个值
let a = 1
let b = 2
[a, b] = [b, a]
console.log(a, b) // 2, 1
10.展开操作符
const arr = [1,2,3]
console.log(arr) // [1,2,3]
console.log(...arr) // 1,2,3
注意:
是将数组中的每个元素做展开处理。
吼吼吼,终于看完了,见底了,记住,千万别死记硬背哟。(赶紧休息休息,看到这里的你,肯定脑子累的不行不行的。)