一篇文章完全掌握-JavaScript-数组操作

共计 7508 个字符，预计需要花费 19 分钟才能阅读完成。

作者：Bolaji Ayodeji

翻译：疯狂的技术宅

原文：https://www.freecodecamp.org/…

未经允许严禁转载

在开始之前，你需要先了解数组的真正含义。

在 JavaScript 中，数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中，供以后使用。

声明一个数组：

let myBox = [];   // JS 中的初始化数组声明

数组中可以包含多种数据类型

let myBox = ['hello', 1, 2, 3, true, 'hi'];

可以用被称为方法的多个操作来操作数组。这些方法允许我们对数组进行添加、删除、修改挤执行更多操作。

我会在本文中向你展示一其中的一部分，让我们继续：

注意：本文中使用了 箭头功能，如果你不知道这意味着什么，你应该在这里阅读。箭头功能是ES6 的功能。

toString() 方法能够将数组转换为以逗号分隔的字符串。

let colors = ['green', 'yellow', 'blue'];

console.log(colors.toString()); // green,yellow,blue

The JavaScript join() method combines all array elements into a string.
JavaScript 的 join() 方法将所有数组元素组合成一个字符串。

它类似于 toString() 方法，但在这里你可以指定分隔符而不是默认的逗号。

let colors = ['green', 'yellow', 'blue'];

console.log(colors.join('-')); // green-yellow-blue

此方法可以将两个数组组合在一起，或者向数组中添加更多的元素项，然后返回一个新数组。

let firstNumbers = [1, 2, 3];
let secondNumbers = [4, 5, 6];
let merged = firstNumbers.concat(secondNumbers);
console.log(merged); // [1, 2, 3, 4, 5, 6]

此方法将元素项添加到数组的末尾，并修改原始数组。

let browsers = ['chrome', 'firefox', 'edge'];
browsers.push('safari', 'opera mini');
console.log(browsers); 
// ["chrome", "firefox", "edge", "safari", "opera mini"]

此方法删除数组的最后一项并返回。

let browsers = ['chrome', 'firefox', 'edge'];
browsers.pop(); // "edge"
console.log(browsers); // ["chrome", "firefox"]

此方法删除数组的第一项，并将它返回。

let browsers = ['chrome', 'firefox', 'edge'];
browsers.shift(); // "chrome"
console.log(browsers); // ["firefox", "edge"]

此方法将一个项添加到数组的开头，并修改原始数组。

let browsers = ['chrome', 'firefox', 'edge'];
browsers.unshift('safari');
console.log(browsers); //  ["safari", "chrome", "firefox", "edge"]

你还可以一次添加多个项目

此方法通过添加、删除和插入元素来修改数组。

语法是：

array.splice(index[, deleteCount, element1, ..., elementN])

Index 这里是删除数组中元素的起点
deleteCount 是要从该索引中删除的元素数
element1, …, elementN 是要添加的元素

运行 splice() 后，它返回删除项目之后的数组，并且被删除的项目将其从原始数组中删除。

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(0, 3);
console.log(colors); // ["purple"]
// deletes ["green", "yellow", "blue"]

注意: deleteCount 不包括范围内的最后一个索引。

如果没有声明第二个参数，则将会从数组中删除从给定索引开始的所有元素：

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(3);
console.log(colors); // ["green", "yellow", "blue"]
// deletes ['purple']

在下一个例子中，我们将从数组中删除 3 个元素，并用更多的项去替换它们：

let schedule = ['I', 'have', 'a', 'meeting', 'tommorrow'];
// removes 4 first elements and replace them with another
schedule.splice(0, 4, 'we', 'are', 'going', 'to', 'swim');
console.log(schedule); 
// ["we", "are", "going", "to", "swim", "tommorrow"]

要添加项目，我们需要将 deleteCount 设置为零

let schedule = ['I', 'have', 'a', 'meeting', 'with'];
// adds 3 new elements to the array
schedule.splice(5, 0, 'some', 'clients', 'tommorrow');
console.log(schedule); 
// ["I", "have", "a", "meeting", "with", "some", "clients", "tommorrow"]

此方法与 splice() 有点像，但是有很大不同。它返回子数组而不是子字符串。

此方法复制数组的给定部分，并将复制的部分作为新数组返回。它不会改变原始数组。

语法是：

array.slice(start, end)

这是一个简单的例子：

let numbers = [1, 2, 3, 4]
numbers.slice(0, 3)
// returns [1, 2, 3]
console.log(numbers) // 返回原始数组

使用 slice() 的最好方式是将它分配给一个新变量。

let message = 'congratulations'
const abbrv = message.slice(0, 7) + 's!'; 
console.log(abbrv) // 返回 "congrats!"

此方法用于 字符串。它将一个字符串分成子串并将它们作为数组返回。

语法：string.split(separator, limit);

这里的 separator 定义了如何分割字符串。
决定了要分割成几份

let firstName = 'Bolaji';
// return the string as an array
firstName.split() // ["Bolaji"]

另一个例子：

let firstName = 'hello, my name is bolaji, I am a dev.';
firstName.split(',', 2); // ["hello", "my name is bolaji"]

注意：如果我们声明一个空数组，比如 firstName.split('');，那么字符串中的每个项目将都会被分割为子字符串：

let firstName = 'Bolaji';
firstName.split('') // ["B","o","l","a","j","i"]

此方法在数组中查找项目，如果它被找到就返回索引，否则返回 -1

let fruits = ['apple', 'orange', false, 3]
fruits.indexOf('orange'); // returns 1
fruits.indexOf(3); // returns 3
friuts.indexOf(null); // returns -1 (not found)

这种方法的工作方式与 indexOf() 相同，只是它从右到左工作。它返回找到的最后一个索引

let fruits = ['apple', 'orange', false, 3, 'apple']
fruits.lastIndexOf('apple'); // returns 4

如果数组的项目符合某个条件，则此方法将会创建一个新数组。

语法是：

let results = array.filter(function(item, index, array) {// returns true if the item passes the filter});

例：通过区号检查来自 Nigeria 的用户

const countryCode = ['+234', '+144', '+233', '+234'];
const nigerian = countryCode.filter(code => code === '+234');
console.log(nigerian); // ["+234", "+234"]

此方法通过操作数组中的值来创建新数组。

例：显示页面上的用户名。（基本好友列表显示）

const userNames = ['tina', 'danny', 'mark', 'bolaji'];
const display = userNames.map(item => {return '<li>' + item + '</li>';})
const render = '<ul>' + display.join('') +'</ul>';
document.write(render);

另一个例子：

// 将美元符号添加到数字前面
const numbers = [10, 3, 4, 6];
const dollars = numbers.map(number => '$' + number);
console.log(dollars);
// ['$10', '$3', '$4', '$6'];

此方法适用于计算总计的值。

reduce() 用于计算数组中的单个值。

let value = array.reduce(function(previousValue, item, index, array) {// ...}, initial);

例：

要遍历数组并对数组中的所有数字求和，可以使用 for 循环。

const numbers = [100, 300, 500, 70];
let sum = 0;
for (let n of numbers) {sum += n;}
console.log(sum);

以下是用 reduce() 实现相同 g 功能的方法

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) =>
    accummulator + value
    , 0);
console.log(sum); // 970

如果省略初始值，默认情况下总数将从数组中的第一项开始计算。

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) => accummulator + value);
console.log(sum); // still returns 970

下面的代码段显示了 reduce() 方法如何与所有四个参数一起使用。

来源：MDN Docs

有关 reduce() 的各种用法的更多说明可以在这里和这里找到。

此方法适用于迭代数组。

它把函数作用于数组中的所有项

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item, index) => console.log(index, item));
// returns the index and the every item in the array
// 0 "green"
// 1 "yellow"
// 2 "blue"

迭代无需不传递索引参数即可完成

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item) => console.log(item));
// returns every item in the array
// "green"
// "yellow"
// "blue"

此方法检查数组中的所有项是否都符合指定的条件，如果符合则返回 true，否则返回 false。

检查所有数字是否为正

const numbers = [1, -1, 2, 3];
let allPositive = numbers.every((value) => {return value >= 0;})
console.log(allPositive); // would return false

此方法检查数组中的项（一个或多个）是否符合指定的条件，如果符合则返回 true，否则返回 false。

检查至少有一个数字是否为正

const numbers = [1, -1, 2, 3];
let atLeastOnePositive = numbers.some((value) => {return value >= 0;})
console.log(atLeastOnePositive); // would return true

此方法检查数组是否包含某个项目。它类似于 .some()，但它不是要查找符合的特定条件，而是检查数组是否包含特定项。

let users = ['paddy', 'zaddy', 'faddy', 'baddy'];
users.includes('baddy'); // returns true

如果找不到该项，则返回 false

关于数组方法还有有更多，这只是其中的一部分。此外，还有大量可以在数组上执行的其他操作，请通过查看 MDN 文档来获得更深入的信息。

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，其中删除了空格，字符变为小写，标题中的每个单词都用连字符分隔。

这是一个基本功能，可以用我们刚才学到的一些方法来做到这一点。

const url = 'https://bolajiayodeji.com/'
const urlSlug = (postTitle) => {let postUrl = postTitle.toLowerCase().split(' ');
let postSlug = `${url}` + postUrl.join('-');
return postSlug;
}
let postTitle = 'Introduction to Chrome Lighthouse'
console.log(urlSlug(postTitle));
// https://bolajiayodeji.com/introduction-to-chrome-lighthouse

在 postUrl 中，我们先将字符串转换为小写，然后用 split() 方法将字符串转换为子字符串并将其返回到数组中

["introduction", "to", "chrome", "lighthouse"]

在 post slug 中，用连字符连接返回的数组，然后将它与类别字符串和主 url 连接到一起。

let postSlug = `${url}` + postUrl.join('-');
postUrl.join('-') // introduction-to-chrome-lighthouse

就是这样，非常简单，对吧？????

深入理解 Shadow DOM v1
一步步教你用 WebVR 实现虚拟现实游戏
13 个帮你提高开发效率的现代 CSS 框架
快速上手 BootstrapVue
JavaScript 引擎是如何工作的？从调用栈到 Promise 你需要知道的一切
WebSocket 实战：在 Node 和 React 之间进行实时通信
关于 Git 的 20 个面试题
深入解析 Node.js 的 console.log
Node.js 究竟是什么？
30 分钟用 Node.js 构建一个 API 服务器
Javascript 的对象拷贝
程序员 30 岁前月薪达不到 30K，该何去何从
14 个最好的 JavaScript 数据可视化库
8 个给前端的顶级 VS Code 扩展插件
Node.js 多线程完全指南
把 HTML 转成 PDF 的 4 个方案及实现

更多文章 …

JavaScript 中的数组是什么？

toString()

join()

concat

push()

pop()

shift()

unshift()

splice()

删除项目

添加项目

slice()

split()

indexOf()

lastIndexOf()

filter()

map()

reduce()

forEach()

every()

some()

includes()

总结

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

Just My Socks（注册教程内含优惠码）

一篇文章完全掌握-JavaScript-数组操作

JavaScript 中的数组是什么？

toString()

join()

concat

push()

pop()

shift()

unshift()

splice()

删除项目

添加项目

slice()

split()

indexOf()

lastIndexOf()

filter()

map()

reduce()

forEach()

every()

some()

includes()

总结

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）