一篇文章完全掌握 JavaScript 数组操作[每日前端夜话0x87]
JavaScript 中的数组是什么？
在开始之前，你需要先了解数组的真正含义。
在 JavaScript 中，数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中，供以后使用。声明一个数组：
1let myBox = []; // JS中的初始化数组声明数组中可以包含多种数据类型
1let myBox = ['hello', 1, 2, 3, true, 'hi'];可以用被称为方法的多个操作来操作数组。这些方法允许我们对数组进行添加、删除、修改挤执行更多操作。
我会在本文中向你展示一其中的一部分，让我们继续：
注意：本文中使用了箭头功能，如果你不知道这意味着什么，你应该在这里阅读。箭头功能是ES6的功能。toString()
toString() 方法能够将数组转换为以逗号分隔的字符串。
1let colors = ['green', 'yellow', 'blue'];23console.log(colors.toString()); // green,yellow,bluejoin()
The JavaScript join() method combines all array elements into a string.
JavaScript 的 join() 方法将所有数组元素组合成一个字符串。
它类似于 toString() 方法，但在这里你可以指定分隔符而不是默认的逗号。
1let colors = ['green', 'yellow', 'blue'];23console.log(colors.join('-')); // green-yellow-blueconcat
此方法可以将两个数组组合在一起，或者向数组中添加更多的元素项，然后返回一个新数组。
1let firstNumbers = [1, 2, 3];2let secondNumbers = [4, 5, 6];3let merged = firstNumbers.concat(secondNumbers);4console.log(merged); // [1, 2, 3, 4, 5, 6]push()
此方法将元素项添加到数组的末尾，并修改原始数组。
1let browsers = ['chrome', 'firefox', 'edge'];2browsers.push('safari', 'opera mini');3console.log(browsers); 4// ["chrome", "firefox", "edge", "safari", "opera mini"]pop()
此方法删除数组的最后一项并返回。
1let browsers = ['chrome', 'firefox', 'edge'];2browsers.pop(); // "edge"3console.log(browsers); // ["chrome", "firefox"]shift()此方法删除数组的第一项，并将它返回。
1let browsers = ['chrome', 'firefox', 'edge'];2browsers.shift(); // "chrome"3console.log(browsers); // ["firefox", "edge"]unshift()
此方法将一个项添加到数组的开头，并修改原始数组。
1let browsers = ['chrome', 'firefox', 'edge'];2browsers.unshift('safari');3console.log(browsers); // ["safari", "chrome", "firefox", "edge"]你还可以一次添加多个项目
splice()
此方法通过添加、删除和插入元素来修改数组。
语法是：
1array.splice(index[, deleteCount, element1, ..., elementN])Index这里是删除数组中元素的起点deleteCount是要从该索引中删除的元素数element1, …, elementN是要添加的元素
删除项目
运行splice()后，它返回删除项目之后的数组，并且被删除的项目将其从原始数组中删除。1let colors = ['green', 'yellow', 'blue', 'purple'];2colors.splice(0, 3);3console.log(colors); // ["purple"]4// deletes ["green", "yellow", "blue"] 注意: deleteCount 不包括范围内的最后一个索引。如果没有声明第二个参数，则将会从数组中删除从给定索引开始的所有元素：
1let colors = ['green', 'yellow', 'blue', 'purple'];2colors.splice(3);3console.log(colors); // ["green", "yellow", "blue"]4// deletes ['purple']在下一个例子中，我们将从数组中删除 3 个元素，并用更多的项去替换它们：
1let schedule = ['I', 'have', 'a', 'meeting', 'tommorrow'];2// removes 4 first elements and replace them with another3schedule.splice(0, 4, 'we', 'are', 'going', 'to', 'swim');4console.log(schedule); 5// ["we", "are", "going", "to", "swim", "tommorrow"]添加项目
要添加项目，我们需要将 deleteCount 设置为零
1let schedule = ['I', 'have', 'a', 'meeting', 'with'];2// adds 3 new elements to the array3schedule.splice(5, 0, 'some', 'clients', 'tommorrow');4console.log(schedule); 5// ["I", "have", "a", "meeting", "with", "some", "clients", "tommorrow"]slice()
此方法与 splice() 有点像，但是有很大不同。它返回子数组而不是子字符串。此方法复制数组的给定部分，并将复制的部分作为新数组返回。 它不会改变原始数组。
语法是：
1array.slice(start, end)这是一个简单的例子：
1let numbers = [1, 2, 3, 4]2numbers.slice(0, 3)3// returns [1, 2, 3]4console.log(numbers) //返回原始数组使用 slice() 的最好方式是将它分配给一个新变量。
1let message = 'congratulations'2const abbrv = message.slice(0, 7) + 's!'; 3console.log(abbrv) // 返回 "congrats!"split()
此方法用于字符串。它将一个字符串分成子串并将它们作为数组返回。
语法：string.split(separator, limit);
这里的
separator定义了如何分割字符串。- 决定了要分割成几份
1let firstName = 'Bolaji';2// return the string as an array3firstName.split() // ["Bolaji"]另一个例子：
1let firstName = 'hello, my name is bolaji, I am a dev.';2firstName.split(',', 2); // ["hello", " my name is bolaji"] 注意：如果我们声明一个空数组，比如 firstName.split('');，那么字符串中的每个项目将都会被分割为子字符串：1let firstName = 'Bolaji';2firstName.split('') // ["B", "o", "l", "a", "j", "i"]indexOf()
此方法在数组中查找项目，如果它被找到就返回索引，否则返回 -1
1let fruits = ['apple', 'orange', false, 3]2fruits.indexOf('orange'); // returns 13fruits.indexOf(3); // returns 34friuts.indexOf(null); // returns -1 (not found)lastIndexOf()
这种方法的工作方式与 indexOf() 相同，只是它从右到左工作。它返回找到的最后一个索引
1let fruits = ['apple', 'orange', false, 3, 'apple']2fruits.lastIndexOf('apple'); // returns 4filter()
如果数组的项目符合某个条件，则此方法将会创建一个新数组。
语法是：
1let results = array.filter(function(item, index, array) {2 // returns true if the item passes the filter3});例：通过区号检查来自 Nigeria 的用户
1const countryCode = ['+234', '+144', '+233', '+234'];2const nigerian = countryCode.filter( code => code === '+234');3console.log(nigerian); // ["+234", "+234"]map()
此方法通过操作数组中的值来创建新数组。
例：显示页面上的用户名。 （基本好友列表显示）
1const userNames = ['tina', 'danny', 'mark', 'bolaji'];2const display = userNames.map(item => {3 return '<li>' + item + '</li>';4})5const render = '<ul>' + display.join('') + '</ul>';6document.write(render);另一个例子：
1// 将美元符号添加到数字前面2const numbers = [10, 3, 4, 6];3const dollars = numbers.map( number => '$' + number);4console.log(dollars);5// ['$10', '$3', '$4', '$6'];reduce()
此方法适用于计算总计的值。
reduce() 用于计算数组中的单个值。
1let value = array.reduce(function(previousValue, item, index, array) {2 // ...3}, initial);例：
要遍历数组并对数组中的所有数字求和，可以使用 for 循环。1const numbers = [100, 300, 500, 70];2let sum = 0;3for (let n of numbers) {4 sum += n;5}6console.log(sum);以下是用 reduce() 实现相同g功能的方法
1const numbers = [100, 300, 500, 70];2const sum = numbers.reduce( (accummulator, value) =>3 accummulator + value4 , 0);5console.log(sum); // 970 如果省略初始值，默认情况下总数将从数组中的第一项开始计算。1const numbers = [100, 300, 500, 70];2const sum = numbers.reduce((accummulator, value) => accummulator + value);3console.log(sum); // still returns 970下面的代码段显示了 reduce() 方法如何与所有四个参数一起使用。
来源：MDN Docs
有关 reduce() 的各种用法的更多说明可以在【https://medium.freecodecamp.org/reduce-f47a7da511a9】和【https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce】找到。
forEach()
此方法适用于迭代数组。
它把函数作用于数组中的所有项
1const colors = ['green', 'yellow', 'blue'];2colors.forEach((item, index) => console.log(index, item));3// returns the index and the every item in the array4// 0 "green"5// 1 "yellow"6// 2 "blue"迭代无需不传递索引参数即可完成
1const colors = ['green', 'yellow', 'blue'];2colors.forEach((item) => console.log(item));3// returns every item in the array4// "green"5// "yellow"6// "blue"every()
此方法检查数组中的所有项是否都符合指定的条件，如果符合则返回 true，否则返回 false。
检查所有数字是否为正1const numbers = [1, -1, 2, 3];2let allPositive = numbers.every((value) => {3return value >= 0;4})5console.log(allPositive); // would return falsesome()
此方法检查数组中的项（一个或多个）是否符合指定的条件，如果符合则返回true，否则返回false。
检查至少有一个数字是否为正1const numbers = [1, -1, 2, 3];2let atLeastOnePositive = numbers.some((value) => {3return value >= 0;4})5console.log(atLeastOnePositive); // would return trueincludes()
此方法检查数组是否包含某个项目。它类似于 .some()，但它不是要查找符合的特定条件，而是检查数组是否包含特定项。
1let users = ['paddy', 'zaddy', 'faddy', 'baddy'];2users.includes('baddy'); // returns true如果找不到该项，则返回 false
关于数组方法还有有更多，这只是其中的一部分。此外，还有大量可以在数组上执行的其他操作，请通过查看 MDN 文档 【https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/】来获得更深入的信息。
总结
toString() - 将数组转换为以逗号分隔的字符串。
join() - 将所有数组元素组合成一个字符串。
concat - 将两个数组组合在一起，或者将更多项添加到数组中，然后返回一个新数组。
push() - 将项目添加到数组的末尾，改变原始数组。
pop() - 删除数组的最后一项并返回
shift() - 删除数组的第一项并返回
unshift() - 将一个项添加到数组的开头，改变原始数组。
splice() - 通过添加，删除和插入元素修改一个数组。
slice() - 复制数组的给定部分，并将复制的部分作为新数组返回。 它不会改变原始数组。
split() - 将一个字符串分成子串并将它们作为数组返回。
indexOf() - 查找数组中的项目并返回其索引，如果没找到则返回-1
lastIndexOf() - 从右到左查找项目并返回找到的最后一个索引。
filter() - 如果数组的项目符合某个条件，则创建一个新数组。
map() - 通过操纵数组中的值来创建一个新数组。
reduce() - 根据数组中的单个值进行计算。
forEach() - 遍历数组，将函数作用于数组中的所有项
every() - 检查数组中的所有项是否都符合指定的条件，如果符合则返回 true，否则返回 false。
some() - 检查数组中的项（一个或多个）是否符合指定的条件，如果符合则返回 true，否则返回 false。
- includes() - 检查数组是否包含某个项目。
数组是强大的，通过相关的方法可以编写实用的算法。
让我们写一个小函数，一个将文章标题转换为 urlSlug 的函数。
URL slug是你网站上特定网页或文章的确切地址。当你在 Freecodecamp News 或任何其他博客平台上撰写文章时，你的文章标题会自动转换为一个 slug，其中删除了空格，字符变为小写，标题中的每个单词都用连字符分隔。
这是一个基本功能，可以用我们刚才学到的一些方法来做到这一点。
1const url = 'https://bolajiayodeji.com/'2const urlSlug = (postTitle) => {3let postUrl = postTitle.toLowerCase().split(' ');4let postSlug = `${url}` + postUrl.join('-');5return postSlug;6}7let postTitle = 'Introduction to Chrome Lighthouse'8console.log(urlSlug(postTitle));9// https://bolajiayodeji.com/introduction-to-chrome-lighthouse在 postUrl 中，我们先将字符串转换为小写，然后用 split() 方法将字符串转换为子字符串并将其返回到数组中
1["introduction", "to", "chrome", "lighthouse"]在 post slug 中，用连字符连接返回的数组，然后将它与类别字符串和主 url 连接到一起。
1let postSlug = `${url}` + postUrl.join('-');2postUrl.join('-') // introduction-to-chrome-lighthouse就是这样，非常简单，对吧？
原文：https://www.freecodecamp.org/news/manipulating-arrays-in-javascript/
©著作权归作者所有：来自51CTO博客作者mb5ff980b461ced的原创作品，如需转载，请注明出处，否则将追究法律责任更多相关文章
- DoDAF2.0方法论探究
- http协议请求方法都有哪些？网络安全学习提升
- 【前端词典】8 个提高 JS 性能的方法
- AngularJS 日期时间选择组件（附详细使用方法）
- 5 种方法教你用Python玩转histogram直方图
- JavaScript算法题：查找数字在数组中的索引[每日前端夜话0x69]
- IDEA Debug 无法进入断点的解决方法
- libp2p-rs kad 使用及调试方法
- 只会爬虫不会反爬虫？动图详解利用 User-Agent 进行反爬虫的原理和