关于javascript:Array重新认识一下

本文的内容 api 办法较多，千万，千万，千万，千万，千万，别死记硬背。没有任何作用，反而减轻你学习的累赘，碰到有适合的场景能够查 api 来应用。

又是一篇根底文章，为什么要这么强调根底呢？在之前的面试中，发现好多面试者将精力放到了框架、类库上。对于根底的货色浅尝辄止。殊不知这样学习如同背道而驰。学不好根底怎么能将更高级的货色理解透彻呢。

文章意为让大家进步对基础知识的认知，更好的学习，更快的学习。很多时候你会发现一个问题，编程的常识都是互通的，一通则百通。所以呢？还是底层，还是根底。地基之深厚，方能使常识的大厦耸立不倒。

一不小心废话又多了，请置信我，根底写完之后，肯定会有进阶知识点。怎么样，期待不。????

闲言少叙，明天咱们来认识一下数组这个货色。

every body，开始咱们的表演……

数组是在内存中 间断存储数据 的容器，形如你看到的酒店房间、火车、教室……都是间断的。

数组的特点是 减少、删除慢，更新快。为什么这么说呢？

因为在数组中增加和删除元素，会将前面的元素顺次后移或者前移。

小栗子上场

const arr = [1,2,3,4]

// 增加元素
arr.push(0) // 会将 4，3，2，1 别离向后挪动一位，给 0 这个新元素腾出地位

// 删除元素
arr.shift() // 删除后，因为第一位空出，所以会将前面的元素顺次前移。// 更新元素
arr[0] = 10 // 只批改第一个元素，不影响其余

总结：

每次减少和删除元素都会同时操作前面的元素
更新不会影响其余元素，只会影响以后元素

上面这个表格具体的形容了每一个罕用办法的性能和应用。敬请查阅。

作用	办法	返回值	是否影响原数组
减少(后)	`push`	增加后的数组长度	是
删除(后)	`pop`	删除的元素	是
减少(前)	`unshift`	增加后的数组长度	是
删除(前)	`shift`	删除的元素	是
批改	索引批改	无	是
查问	索引查问	查问到的元素	否
拼接	`concat`	返回拼接后的数组	否
裁剪	`slice`	裁剪到的数组	否
排序	`sort`	排序后的数组	是
转换	转为字符串 join	转换后的字符串	否
万能办法	`splice`	操作的数据	是

像 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，示意删除
其余状况为，从索引地位开始，向后查找 批改个数 个元素，批改为后边所有的新数据。

说完了根底，怎么能不进阶呢。就像你吃腻了家常便饭，怎么也得来点儿大鱼大肉吧。

接下来，就是满汉全席的时刻~~~

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

留神：

是将数组中的每个元素做开展解决。

吼吼吼，终于看完了，见底了，记住，千万别死记硬背哟。（连忙劳动劳动，看到这里的你，必定脑子累的不行不行的。）

关于javascript:Array重新认识一下

1. 惯例操作

1.1 小文档：

1.2 小示例：

1. push

2. concat

3. slice

4. sort

5. join

6. splice

2. 骚操作（进阶操作）

1. 应用 `from` 创立数组

2. 扁平化数组 flat

3. 去重解决 new Set()

4. 数组排序 sort — 数组乱序 – 0.5

5. 最大和最小值 Max 和 Min

6. 数组解决高阶函数 reduce、map、filter、some、every、forEach、fill

7.includes、indexOf、lastIndexOf、find、findIndex

8.Array.isArray

9. 数组解构

10. 开展操作符

1. 惯例操作

1.1 小文档：

1.2 小示例：

1. push

2. concat

3. slice

4. sort

5. join

6. splice

2. 骚操作（进阶操作）

1. 应用 from 创立数组

2. 扁平化数组 flat

3. 去重解决 new Set()

4. 数组排序 sort — 数组乱序 – 0.5

5. 最大和最小值 Max 和 Min

6. 数组解决高阶函数 reduce、map、filter、some、every、forEach、fill

7.includes、indexOf、lastIndexOf、find、findIndex

8.Array.isArray

9. 数组解构

10. 开展操作符

1. 应用 `from` 创立数组