专栏首页京程一灯一篇文章完全掌握 JavaScript 数组操作[每日前端夜话0x87]

一篇文章完全掌握 JavaScript 数组操作[每日前端夜话0x87]

正文共:2857 字

预计阅读时间: 8 分钟

作者:Bolaji Ayodeji

翻译:疯狂的技术宅

来源:logrocket

JavaScript 中的数组是什么?

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

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

声明一个数组:

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

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

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

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

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

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


toString()

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

1let colors = ['green', 'yellow', 'blue'];
2
3console.log(colors.toString()); // green,yellow,blue

join()

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

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

1let colors = ['green', 'yellow', 'blue'];
2
3console.log(colors.join('-')); // green-yellow-blue

concat

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

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 another
3schedule.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 array
3schedule.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 array
3firstName.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 1
3fruits.indexOf(3); // returns 3
4friuts.indexOf(null); // returns -1 (not found)

lastIndexOf()

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

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

filter()

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

语法是:

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

例:通过区号检查来自 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 + value
4    , 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 array
4// 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 array
4// "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 false

some()

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

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

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

includes()

此方法检查数组是否包含某个项目。它类似于 .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/

图书推荐

下面夹杂一些私货:也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。

愿你有个好前程,愿你月薪30K。我们是认真的 !

本文分享自微信公众号 - 前端先锋(jingchengyideng),作者:疯狂的技术宅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript中的数组创建

    数组是一个包含了对象或原始类型的有序集合。很难想象一个不使用数组的程序会是什么样。

    疯狂的技术宅
  • 尝鲜 ES2019 的新功能 [每日前端夜话0x38]

    ECMAScript 每年都会发布一个新版本,其中的提案是已经正式通过的,并分发给开发者和用户。本文将讨论该语言的最新版本,以及它又具有了什么新功能。

    疯狂的技术宅
  • 深入 JavaScript 数组:进化与性能

    正式开始前需要声明,本文并不是要讲解 JavaScript 数组基础知识,也不会涉及语法和使用案例。本文讲得更多的是内存、优化、语法差异、性能、近来的演进。

    疯狂的技术宅
  • 从零开始学 Web 之 JavaScript(四)数组

    arguements 是伪数组:不能修改长短的数组。(可以修改元素,但是不能变长变短)

    Daotin
  • php常用函数分类整理

    一、数组操作的基本函数 数组的键名和值 array_values($arr);  获得数组的值 array_keys($arr);  获得数组的键名 array...

    十月梦想
  • Yii2框架踩坑记录-数组数据渲染到后台页面带分页

    不得不说Yii框架还是一个非常高效的框架,Gii扩展能生成简单的CRUD操作,问题也就出在这里,我的数据不是直接从单独的表出来的,需要连查,需要递归操作

    沈唁
  • 科幻电影看多了 碰到多维数组 请冷静一下

    说在前面的话:其实越是基础的知识,讲起来难度越大,因为越是基础,它就越偏向底层,你看得到的知识就那么多,但是你看不到的地方有大量的你暂时不需要知道的知识,所以只...

    用户5745563
  • js数组push方法使用注意

    js 数组的push方法,想必大家都知道是向数组末尾添加元素,但是有一个很关键的点需注意: 引自 MDN 返回值 当调用该方法时,新的 length 属性值将被...

    蓓蕾心晴
  • 数组

    数组是一种线性表的数据结构,它使用一组连续的内存空间,来存储一组具有相同类型的数据。

    幺鹿
  • js数组常用方法总结

    最近工作中经常用到数组操作,每次都傻傻不知道怎么用,今天有时间整理了一下,希望对大家有帮助!这些基础的知识,要熟记于心。

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券