js数组获取index_通过事例重温⼀下JS中常见的15种数组操作
（备忘清单），收藏...
数组是 JS 中⼴泛使⽤的数据结构。数组对象提供了⼤量有⽤的⽅法，如array. forEach()、array.map()等来操作数组。
在实战中，我经常对数组可能的操作和相应采⽤哪个更好的⽅法不知所措，所以本⽂就列出 15 种常⽤数据⽅法，让咱们重温加强记忆⼀下。
1. 数组的遍历
1.f 循环
for(const item of items)循环遍历数组项，如下所⽰遍历colors列表：
const colors = ['blue', 'green', 'white'];for (const color of colors) { console.log(color);}// 'blue'// 'green'// 'white'
提⽰：
咱们可以随时使⽤break语句停⽌遍历。
1.2 for 循环
for(let i; i < array.length; i++)循环使⽤递增的索引变量遍历数组项。
for通常需要在每个循环中递增index 变量
const colors = ['blue', 'green', 'white'];for (let index = 0; index < colors.length; index++) { const color = colors[index]; console.log(color);}// 'blue'// 'green'// 'w index变量从0递增到colors.length-1。此变量⽤于按以下索引访问项：colors [index]。
我⾃⼰是⼀名从事了多年开发的web前端⽼程序员，⽬前辞职在做⾃⼰的web前端私⼈定制课程，今年年初我花了⼀个⽉整理了⼀份最适合2019年学习的web前端学习⼲货，各种框架都有整理，送给每⼀位前端⼩伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，
即可免费获取。
提⽰
咱们可以随时使⽤break语句停⽌遍历。
1.3 array.forEach() ⽅法
array.forEach(callback)⽅法通过在每个数组项上调⽤callback函数来遍历数组项。
在每次遍历中，都使⽤以下参数调⽤callback(item [, index [, array]])：当前遍历项，当前遍历索引和数组本⾝。
const colors = ['blue', 'green', 'white'];colors.forEach(function callback(value, index) { console.log(value, index);});// 'blue', 0// 'green', 1// 'white', 2
提⽰：
咱们不能中断array.forEach()迭代。
2. 数组的映射
2.1 Array.map()⽅法
array.map(callback) ⽅法通过在每个数组项上使⽤callback调⽤结果来创建⼀个新数组。
在每个遍历中的callback(item[, index[, array]])使⽤参数调⽤：当前项、索引和数组本⾝，并应该返回
新项。
如下所⽰咱们对每个数组元素都递增 1：
const numbers = [0, 2, 4];const newNumbers = numbers.map(function increment(number) { return number + 1;});newNumbers; // => [1, 3, 5]
提⽰：
array.map()创建⼀个新的映射数组，⽽不改变原始数组。
2.2 Array.from()⽅法
Array.from(arrayLike[, callback])⽅法通过在每个数组项上使⽤callback 调⽤结果来创建⼀个新数组。
在每个遍历中callback(item[, index[, array]])使⽤参数调⽤：当前项、索引和数组本⾝并且应该返回新项。
如下所⽰咱们对每个数组元素都递增 1：
const numbers = [0, 2, 4];const newNumbers = Array.from(numbers, function increment(number) { retfilter过滤对象数组
urn number + 1; });newNumbers; // => [1, 3, 5]
提⽰：
Array.from()创建⼀个新的映射数组，⽽不改变原始数组。
Array.from()更适合从类似数组的对象进⾏映射。
3. 数据的简化
3.duce() ⽅法
在每次遍历中的callback(accumulator, item[, index[, array]])使⽤⽤参数调⽤的：累加器，当前项，索引和数组本⾝且应该返回累加器。
经典⽰例是对数字数组求和：
const numbers = [2, 0, 4];function summarize(accumulator, number) { return accumulator + number;}const sum = duce(summarize, 0);sum; // =第⼀步，将accumulator 初始化为0。
然后，对每个累加数字和的数组项调⽤summary函数。
提⽰：
如果没有使⽤ initialValue 来设置初始值，则默认使⽤数组的第⼀个元素作为初始值。
4. 数据的连接
4.at() ⽅法
const heroes = ['⼩智', '前端⼩智'];const villains = ['⽼王', '⼩三'];const everyone = at(villains);everyone // ["⼩智", "前端⼩智", "⽼王", "⼩三"]
提⽰：
concat()创建⼀个新的数组，⽽不改变原来的数组
4.2 展开操作符号
咱们将展开操作符与数组字⾯量⼀起使⽤来连接数组:[...array1, ...array2]。
const heroes = ['⼩智', '前端⼩智'];const villains = ['⽼王', '⼩三'];const names = [...heroes, ...villains];names; // ["⼩智", "前端⼩智", "⽼王", "⼩三"]
提⽰：
[...arr1, ...arr2, ...arrN]：咱们可以使⽤展开运算符连接所需数量的数组。
获取数组的⽚段
5.1 array.slice() ⽅法
array.slice([fromIndex [，toIndex]])返回数组的⼀个⽚段，该⽚段从fromIndex开始，以toIndex结尾(不包括toIndex本⾝)。
fromIndex可选参数默认为0，toIndex可选参数默认为array.length。
const names = ["⼩智", "前端⼩智", "⽼王", "⼩三"]const heroes = names.slice(0, 2)const villains = names.splice(2)heroes // ["⼩智", "前端⼩智"]villains // ["⽼王", "⼩提⽰：
array.slice() 创建⼀个新数组，⽽不改变原始数组。
6. 数组的拷贝
6.1 展开操作符
拷贝数组的⼀种简单⽅法是使⽤展开运算符：const clone = [... array]，如下所⽰，拷贝 colors 数组：
const colors = ['white', 'black', 'gray'];const clone = [...colors];clone; // => ['white', 'black', 'gray']colors === clone; // => false
提⽰：
[...array] 创建⼀个浅拷贝。
6.at()⽅法
[].concat(array)是另⼀种拷贝数组的⽅法。
const colors = ['white', 'black', 'gray'];const clone = [].concat(colors);clone; // => ['white', 'black', 'gray']colors === clone; // => false
提⽰：
[].concat(array) 创建⼀个浅拷贝。
6.3 array.slice() ⽅法
array.slice())是另⼀种拷贝数组的⽅法。
const colors = ['white', 'black', 'gray'];const clone = colors.slice();clone; // => ['white', 'black', 'gray']colors === clone; // => false
提⽰：
colors.slice() 创建⼀个浅拷贝。
7. 查数组
7.1 array.includes() ⽅法
array.includes(itemToSearch [，fromIndex])返回⼀个布尔值，array 是否包含itemToSearch。 可选参数fromIndex，默认为0，表
⽰开始搜索的索引。如下所⽰：判断2和99是否存在于⼀组数字中：
const numbers = [1, 2, 3, 4, 5];numbers.includes(2); // => truenumbers.includes(99); // => false
7.2 array.find() ⽅法
array.find(predicate) ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。否则返回 undefined。
如下所⽰，到数组中的第⼀个偶数：
const numbers = [1, 2, 3, 4, 5];function isEven(number) { return number % 2 === 0;}const evenNumber = numbers.find(isEven);evenNumber; // => 2
7.3 array.indexOf() ⽅法
array.indexOf(itemToSearch[, fromIndex]) 返回array中第⼀个出现的itemToSearch的索引。默认为0的可选参数fromIndex表⽰开始搜索的索引。
如下所⽰，到前端⼩智的索引：
const names = ["⼩智", "前端⼩智", "⽼王", "⼩三"]const index = names.indexOf('前端⼩智')index // 1
提⽰：
如果不到该项，则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 = [0, 2, 4, 6];const numbers = [0, 1, 4, 6];function isEven(number) { return number % 2 === 0;}evens.every(isEven); // => truenumbers.every(i 8.2 array.some() ⽅法
如果每个项只要⼀个通过predicate 检查，则array.every(predicate)返回true。
在每个遍历predicate(item[, index[, array]])上，⽤参数调⽤predicate 函数：当前遍历项、索引和数组本⾝。
如下所⽰：确定数组是否⾄少包含⼀个偶数：
const numbers = [1, 5, 7, 10];const odds = [1, 3, 3, 3];function isEven(number) { return number % 2 === 0;}numbers.some(isEven); // => trueodds.some(is 9. 数组的过滤
9.1 array.filter() ⽅法
array.filter(predicate)⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
在每个遍历predicate(item[, index[, array]])上，⽤参数调⽤predicate 函数：当前遍历项、索引和数组本⾝。
如下所⽰：将⼀个数组过滤为仅包含偶数：
const numbers = [1, 5, 7, 10];function isEven(number) { return number % 2 === 0;}const evens = numbers.filter(isEven);evens; // => [10]
提⽰：
array.filter() 创建⼀个新数组，⽽不改变原始数组。
10. 数组的插⼊
10.1 array.push() ⽅法
array.push(item1 [...，itemN]) ⽅法将⼀个或多个项追加到数组的末尾，并返回新的长度。
如下所⽰，在names 数组的末尾添加 '⼩智'
const names = ['⼩智']names.push('前端⼩智')names // ["⼩智", "前端⼩智"]
提⽰：
array.push() 会改变原数组
array.push(item1, item2, ..., itemN) 可以添加多个元素。
10.2 array.unshift() ⽅法
array.unshift(item1[..., itemN])⽅法将⼀个或多个项追加到数组的开头，返回数组的新长度
const names = ['⼩智']names.unshift('前端⼩智')names // ["前端⼩智", "⼩智"]
提⽰：
array.unshift() 会改变原数组
array.unshift(item1, item2, ..., itemN) 可以添加多个元素。
10.3 展开操作符
可以通过组合展开操作符和数组字⾯量以不可变的⽅式在数组中插⼊项。
在数组末尾追加⼀个项:
const names = ['⼩智', '⼤治']const names2 = [...names, '王⼤冶']names2 // ["⼩智", "⼤治", "王⼤冶"]
在数组的开头追加⼀个项:
const names = ['⼩智', '⼤治']const names2 = [ '王⼤冶', ...names]
在任何索引处插⼊元素：
const names = ['⼩智', '⼤治']const indexToInsert = 1const names2 = [ ...names.slice(0, indexToInsert), '前端⼩智', ...names.slice(indexToInsert)]names2 // ["⼩智"
11. 删除数组元素
11.1 array.pop() ⽅法
array.pop()⽅法从数组中删除最后⼀个元素，然后返回该元素。如下所⽰，删除colors数组的最后⼀个元素：
const colors = ['blue', 'green', 'black'];const lastColor = colors.pop();lastColor; // => 'black'colors; // => ['blue', 'green']
提⽰：
array.pop() 会改变原数组。

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