js数组获取index_通过事例重温⼀下常见的JS中15种数组操作
（备忘清单）
作者：Dmitri Pavlutin
译者：前端⼩智
来源：dmitripavlutin
最近⼏天，⽆套路抽奖现⾦ 200，参与⽅式如下：
存⽽不论是⼀种对舆论场合的改善？(每⽉⼀次抽⼤鱼)
数组是 JS 中⼴泛使⽤的数据结构。数组对象提供了⼤量有⽤的⽅法，如array. forEach()、array.map()等来操作数组。
在实战中，我经常对数组可能的操作和相应采⽤哪个更好的⽅法不知所措，所以本⽂就列出 15 种常⽤数据⽅法，让咱们重温加强记忆⼀下。
1. 数组的遍历
1.1  `f` 循环
for(const item of items)循环遍历数组项，如下所⽰遍历colors列表：
const colors = [
提⽰：
咱们可以随时使⽤break语句停⽌遍历。
1.2 `for` 循环
for(let i; i < array.length; i++)循环使⽤递增的索引变量遍历数组项。
for通常需要在每个循环中递增index 变量
const colors = [
index变量从0递增到colors.length-1。此变量⽤于按以下索引访问项：colors [index]。
提⽰
咱们可以随时使⽤break语句停⽌遍历。
1.3 `array.forEach()` ⽅法
array.forEach(callback)⽅法通过在每个数组项上调⽤callback函数来遍历数组项。
在每次遍历中，都使⽤以下参数调⽤callback(item [, index [, array]])：当前遍历项，当前遍历索引和数组本⾝。
const colors = [
提⽰：
咱们不能中断array.forEach()迭代。
2. 数组的映射
2.1 `Array.map()`⽅法
array.map(callback) ⽅法通过在每个数组项上使⽤callback调⽤结果来创建⼀个新数组。
在每个遍历中的callback(item[, index[, array]])使⽤参数调⽤：当前项、索引和数组本⾝，并应该返回新项。
如下所⽰咱们对每个数组元素都递增 1：
const numbers = [
提⽰：
array.map()创建⼀个新的映射数组，⽽不改变原始数组。
2.2 `Array.from()`⽅法
Array.from(arrayLike[, callback])⽅法通过在每个数组项上使⽤callback 调⽤结果来创建⼀个新数组。
在每个遍历中callback(item[, index[, array]])使⽤参数调⽤：当前项、索引和数组本⾝并且应该返回新项。
如下所⽰咱们对每个数组元素都递增 1：
const numbers = [
提⽰：
Array.from()创建⼀个新的映射数组，⽽不改变原始数组。
Array.from()更适合从类似数组的对象进⾏映射。
3. 数据的简化
3.1 `duce()` ⽅法
在每次遍历中的callback(accumulator, item[, index[, array]])使⽤⽤参数调⽤的：累加器，当前项，索引和数组本⾝且应该返回累加器。经典⽰例是对数字数组求和：
const numbers = [
第⼀步，将accumulator 初始化为0。然后，对每个累加数字和的数组项调⽤summary函数。
提⽰：
如果没有使⽤ initialValue 来设置初始值，则默认使⽤数组的第⼀个元素作为初始值。
4. 数据的连接
4.1 `at()` ⽅法
const heroes = [
提⽰：
concat()创建⼀个新的数组，⽽不改变原来的数组
4.2 展开操作符号
咱们将展开操作符与数组字⾯量⼀起使⽤来连接数组:[...array1, ...array2]。
'⼩智',
提⽰：
[...arr1, ...arr2, ...arrN]：咱们可以使⽤展开运算符连接所需数量的数组。
5. 获取数组的⽚段
5.1 `array.slice()`  ⽅法
array.slice([fromIndex [，toIndex]])返回数组的⼀个⽚段，该⽚段从fromIndex开始，以toIndex结尾(不包括toIndex本⾝)。fromIndex可选参数默认为0，toIndex可选参数默认为array.length。
const names = [
提⽰：
array.slice() 创建⼀个新数组，⽽不改变原始数组。
6. 数组的拷贝
6.1 展开操作符
拷贝数组的⼀种简单⽅法是使⽤展开运算符：const clone = [... array]，如下所⽰，拷贝 colors 数组：
'white',
提⽰：
sort函数 js
[...array] 创建⼀个浅拷贝。
6.2 `at()`⽅法
[].concat(array)是另⼀种拷贝数组的⽅法。
'white',
提⽰：
[].concat(array) 创建⼀个浅拷贝。
6.3 `array.slice()` ⽅法
array.slice())是另⼀种拷贝数组的⽅法。
'white',
提⽰：
colors.slice() 创建⼀个浅拷贝。
7. 查数组
7.1 `array.includes()` ⽅法
array.includes(itemToSearch [，fromIndex])返回⼀个布尔值，array 是否包含itemToSearch。可选参数fromIndex，默认为0，表⽰开始搜索的索引。如下所⽰：判断2和99是否存在于⼀组数字中：
1,
7.2  `array.find()` ⽅法
array.find(predicate) ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。否则返回 undefined。
如下所⽰，到数组中的第⼀个偶数：
const numbers = [
7.3 `array.indexOf()` ⽅法
array.indexOf(itemToSearch[, fromIndex]) 返回array中第⼀个出现的itemToSearch的索引。默认为0的可选参数fromIndex表⽰开始搜索的索引。
如下所⽰，到前端⼩智的索引：
const names = [
提⽰：
如果不到该项，则array.indexOf(itemToSearch)返回-1
array.findIndex(predicate)是使⽤predicate函数查索引的替代⽅法。
8. 查询数组
8.1 `array.every()` ⽅法
如果每个项都通过predicate 检查，则array.every(predicate)返回true。
在每个遍历predicate(item[, index[, array]])上，⽤参数调⽤predicate 函数：当前遍历项、索引和数组本⾝。
如下所⽰，确定数组是否只包含偶数：
const evens = [
8.2 `array.some()` ⽅法
如果每个项只要⼀下通过predicate 检查，则array.every(predicate)返回true。
在每个遍历predicate(item[, index[, array]])上，⽤参数调⽤predicate 函数：当前遍历项、索引和数组本⾝。
如下所⽰：确定数组是否⾄少包含⼀个偶数：
const numbers = [
9. 数组的过滤
9.1 `array.filter()` ⽅法
array.filter(predicate)⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
在每个遍历predicate(item[, index[, array]])上，⽤参数调⽤predicate 函数：当前遍历项、索引和数组本⾝。如下所⽰：将⼀个数组过滤为仅包含偶数：
const numbers = [
提⽰：
array.filter() 创建⼀个新数组，⽽不改变原始数组。
10. 数组的插⼊
10.1 `array.push()` ⽅法
array.push(item1 [...，itemN]) ⽅法将⼀个或多个项追加到数组的末尾，并返回新的长度。
如下所⽰，在names 数组的末尾添加 '⼩智'
const names = [
提⽰：
array.push() 会改变原数组
array.push(item1, item2, …, itemN) 可以添加多个元素。
10.2 `array.unshift() ` ⽅法
array.unshift(item1[..., itemN])⽅法将⼀个或多个项追加到数组的开头，返回数组的新长度
const names = [
提⽰：
array.unshift() 会改变原数组
array.unshift(item1, item2, …, itemN) 可以添加多个元素。
10.3 展开操作符
可以通过组合展开操作符和数组字⾯量以不可变的⽅式在数组中插⼊项。
在数组末尾追加⼀个项:
const names = [
在数组的开头追加⼀个项:
const names = [
在任何索引处插⼊元素：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。