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,,,,,,,,]

注意：

入参函数的参数说明：

1. map、filter、some、every、forEach 这几个函数的参数是一样的，都是(item, index, array) 。

   • item 是当前操作的元素
   • index 是当前的索引值
   • array是操作的数组本身。

2. reduce((pre, next, index, array) => {}, defaultValue)

   • pre是当前操作的结果
   • next为下一个要操作的元素。
   • index 是当前的索引值
   • array是操作的数组本身
   • defaultValue为默认值

3. 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

注意：

是将数组中的每个元素做展开处理。

吼吼吼，终于看完了，见底了，记住，千万别死记硬背哟。（赶紧休息休息，看到这里的你，肯定脑子累的不行不行的。）