数组常用方法总结

前言

最近被初入前端的的朋友问到，工作中经常用到的东西都有什么，刚好也为了今后要转行到前端来的亲弟弟能够更好的翻阅学习，写下此片文章。本文个人感觉并没有什么写的价值（只是个人感觉），所有的方法和简介均来自MDN官方文档。只是多附加一些案例而已以及使用场景和个人使用心得

本文包含的数组的方法

• from()
• isArray()
• concat()
• entries()
• fill()
• filter()
• find()
• forEach()
• includes()
• indexOf()
• join()
• keys()
• values()
• map()
• pop()
• push()
• reduce()
• shift()
• unshift()
• slice()
• some()
• sort()
• splice()
• toString()
• length
• flot()

具体的使用方法、使用场景、使用心得

1、from()

• 定义 :

Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。` 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

• 语法：

如需观看，请参考官网文档from() MDN文档

• 场景和心得

场景：一般就是把一些伪数组转换为真正的数组，比如获取dom节点的时候会使用到

心得：不算是经常用到，而是偶尔用到，当遇到的时候要知道使用这个数组方法

---

2、isArray()

• 定义：

Array.isArray() 用于确定传递的值是否是一个Array

• 场景和心得：

场景：判断一个参数是否是数组，比如获取到的数据，或者函数的参数是不是数组

心得：还挺长用的，主要还是做安全判断if条件或者三元表达式，防止不是数组倒代码报错

• 官网

---

3、concat()

• 定义:

**concat()** 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

• 场景和心得

场景：将两个数组合并成一个新的数组，不改变原来的数组，现在写代码很少使用了

心得：以前都是使用这种方法将两个数组进行合并，现在都是使用es6来解决（本人是这样使用的）

const arr1 = [1,2,3,4,5,6]
const arr2 = [7,8,9]
const arr3 = [11,22,33,44]
const newArr = [...arr1,...arr2,...arr3] // [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 22, 33,44]

---

###4、entries()

• 定义：

entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对

• 场景和心得

本人几乎没有使用过，就不提什么心得了个人感觉就是配合yeid关键字使用的，讲一个数组变为一个可迭代的对象，可以通过next()方法获取每次迭代的对象

放在这里是因为看看那个大佬看到了，并理解颇深，评论区给详细讲解下使用场景

---

5、fill()

• 定义：

**fill()**方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引

• 场景和心得

没怎么使用过，很少有这方面的需求

---

6、filter()

• 定义：

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

• 场景和心得

场景：在一个数组里筛选出符合条件的项，组合成一个心得数组返回

心得：必会的啊，不会行么?(不行，哈哈)。毕竟是太太太长用了！太太太好用了！

• 简单的案例

// 案例1
const arr = [1,2,3,4,5,6,7,8,11,22,33,3,3,33]
const arr1 = arr.filter(e=>e>5) // arr1=> [6, 7, 8, 11, 22, 33, 33]

// 案例2
const objArr = [{id:1},{id:2},{id:3},{id:4}]
const newObjArr = objArr.filter(el=el.id>3) // newObjArr => [{id:4}]

这里只是列举了最简单的例子，毕竟简单才更容易看懂

• 语法：最好还是看官方文档，为太懒了! [文档](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

---

7、find()

• 定义：

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

• 使用场景和心得

场景：和findIndex()**类似，一个是返回值，一个是返回索引，所以只列举这一个说了！我一般会使用some**（下面有将）

心得：了解就好

---

8、forEach()

• 定义：

forEach() 方法对数组的每个元素执行一次给定的函数。

• 场景和心得

场景：for循环明白吧？没错，这就是那个for循环的加强版

心得：俗话说，终极大BOSS，不敢不会？

• 小小案例

// for循环
let arr = [1,2,3,4,5,6,7,8,9,10]
let count = 0
for(let i = 0;i<arr.length;i++){
    count += arr[i]
} // count => 55

// forEach 循环
let arr=[1,2,3,4,5,6,7,8,9,10]
let count = 0
arr.forEach(e=>count += e) // count => 55

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

• 文档

---

9、includes()

• 定义：

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false

• 场景和心得

场景：必须得会啊！一般出现在三元表达式和条件判断中，根据数组中是否包含某个项进行不同的操作

心得：这个方法要是不会，那能中？哈哈

• 文档

---

10、indexOf()

• 定义：

**indexOf()**方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

• 场景和心得

场景：一般不怎么使用，个人习惯使用**includes()**！嘿嘿

心得：得会吧！

---

11、join()

• 定义：

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符

• 场景和心得

场景：字符串去空，url 参数拼接等等太多了！

心得，不会是不行的呦。敢不会，头打烂（开玩笑的，别当真）

• 官网

---

12、keys()

• 定义：

keys() 方法返回一个包含数组中每个索引键的Array Iterator对象

• 场景和心得

场景：不是很清楚 哈哈。我太菜了！ 对象的这个方法倒是很常用

心得：无

---

13、values()

• 和Keys()类似，一个是key 一个是values

---

14、map()

• 定义：

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

• 场景和心得

场景：说白了，就是映射。就是你数组一开始有多少项，返回的数组就有多少项，不会多，也不会少。

心得：很常用，不会不行系列

---

15、pop()

• 定义：pop()**方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度**

---

16、push()

• 定义：

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

必会

• 小小案例

const arr = [1,2,3,4]
const arr2 = [11,22,33,44]
arr.push(...arr2) // 返回值：新的arr的长度---8。 arr的值：[1, 2, 3, 4, 11, 22, 33, 44]

必会

---

17、reduce()

• 定义：

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值

• 场景与心得

场景：很强大的一个方法，数组拍平等很多骚操作都能胜任

心得：不会也没关心，会了很多时候可以省时省力

---

18、shift()

• 定义：

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度

** 必须会**

---

19、unshift()

• 定义：

unshift() 方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度

** 必须会**

---

20、slice()

• 定义：

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变

---

21、some()

• 定义：

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值

• 场景与心得

场景：和**includes()**类似

心得：很好用呀！

---

22、sort()

• 定义：

sort()`方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

由于它取决于具体实现，因此无法保证排序的时间和空间复杂性

本人很少使用

---

23、splice()

• 定义：

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组

• 场景与心得

场景：对数组的增删改操作

心得：必须会，很强大

• 官网

---

24、length —是个属性，不要加括号哦

• 定义：

返回数组的长度 ， 总比最高项下标大一！

---

25、flot()

• 定义：

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

• 场景与心得

场景：本人只在做数组拍平的时候使用过

心得：不得不说，很强大，还是回了吧！求你了！最后一个了！压轴的啊！

• 官网

注意：案例在慢慢加

如果能够帮助到你，是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧！！！