如何在JavaScript中操作数组?

JavaScript 中的数组是什么?

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

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

声明一个数组:

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

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

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

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

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

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

toString()

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

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

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

join()

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

concat

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

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

push()

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

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

pop()

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

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

shift()

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

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

unshift()

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

let browsers = ['chrome', 'firefox', 'edge'];
browsers.unshift('safari');
console.log(browsers); //  ["safari", "chrome", "firefox", "edge"]
你还可以一次添加多个项目

splice()

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

语法是:

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"]

slice()

此方法与 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!"

split()

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

语法: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"]

indexOf()

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

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

lastIndexOf()

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

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

filter()

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

语法是:

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"]

map()

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

例:显示页面上的用户名。 (基本好友列表显示)

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

2.png

另一个例子:

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

reduce()

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

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

3.png

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

forEach()

此方法适用于迭代数组。

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

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"

every()

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

检查所有数字是否为正
const numbers = [1, -1, 2, 3];
let allPositive = numbers.every((value) => {
return value >= 0;
})
console.log(allPositive); // would return false

some()

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

检查至少有一个数字是否为正
const numbers = [1, -1, 2, 3];
let atLeastOnePositive = numbers.some((value) => {
return value >= 0;
})
console.log(atLeastOnePositive); // would return true

includes()

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

就是这样,非常简单,对吧?

英文原文地址:https://www.freecodecamp.org/news/manipulating-arrays-in-javascript/

为了保证的可读性,本文采用意译而非直译。

Image placeholder
前端答疑
未设置
  18人点赞

没有讨论,发表一下自己的看法吧

推荐文章
lavavel 中操作数据库查找别名

一、总结(点击显示或隐藏总结内容)一句话总结:当有表前缀的时候:DB::table('usersastable1')->select(DB::raw('table1.id'))->get();对应sq

如何在JavaWeb中用css

如何在JavaWeb中用css一、css概念:CascadingStyleSheets层叠样式表层叠:多个样式可以作用在同一个html的元素上,同时生效二.、好处:1.功能强大2.将内容展示和样式控制

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的

JavaScript中的强制类型转换

JavaScriptprimitives(原语)JavaScript建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了,比如字符串和数字:vargreet="Hello";varyear=89;

JavaScript中的Infinity(无穷)

Infinity(无穷)在JS中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道Infinity,我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看JS中的Infinity属性

可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

jquery如何判断是否是数组?

jquery如何判断是否是数组?jquery提供了isArray方法来判断一个变量是否是数组类型,返回值为Boolean类型。例子:varobj={a:1}; vararr=[1,2]; varbo

jquery如何判断是否为数组?

jquery如何判断是否为数组?$.isArray()函数用于判断指定参数是否是一个数组。只需要将需要判断的变量传入方法中即可。语法$.isArray(object)/jQuery.isArray(o

jquery怎么遍历json数组?

jquery怎么遍历json数组?jquery遍历集合可以使用$.each(集合,回调函数)方法,//这里直接使用Array来构造json数组,服务器返回的数据可以使用JSON.parse()函数进行

jquery怎么判断是否是数组?

jquery怎么判断是否是数组?jquery提供了isArray()方法来判断一个变量是否是数组类型,返回值为Boolean类型。示例:varobj={a:1}; vararr=[1,2]; var

在Jenkins中发布react 静态项目常用shell脚本

功效:服务器git永远同步,远程,本地有更改文件或文件夹会被重置掉,保持和远程仓库一致 rsync同步文件 永久链接:https://shudong.wang/10705.html获取git远程仓库

opcode 操作数 5 中不同的类型

zend_op_array.opcodes指向指令列表,具体每条指令的结构如下: struct_zend_op{//*opline*opcodes constvoid*handler;//指令执行ha

0107 spring操作数据库的3个架子

背景数据库开发是java的核心内容之一,基础就是jdbc了;然而直接使用jdbc,需要写大量的try-catch-finally模板代码;管理系统使用hibernate作为orm框架比较方便,遵循jp

react中如何使用组件

react中如何使用组件前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。1、无状态组件的使用方法组件:constApp=(props)=>

如何将echarts集成到react中

如何将echarts集成到react中在使用echarts之前需要先安装echarts,可以直接使用node命令来安装npminstallecharts--save包依赖安装完毕后,这个时候我们的EC

浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改HTML文档和交互。什么是文档对象模型?文档对象模型是在浏览器中一切的

零基础学习Swift中的数据科学

概述Swift正迅速成为数据科学中最强大、最有效的语言之一Swift与Python非常相似,所以你会发现2种语言的转换非常平滑我们将介绍Swift的基础知识,并学习如何使用该语言构建你的第一个数据科学

怎么在react中安装修饰器

怎么在react中安装修饰器在create-react-app下使用es7的@修饰器会报错''Supportfortheexperimentalsyntax'decorators-legacy'isn

怎么在react中使用weui

怎么在react中使用weui1、react没有安装的情况下:安装react和weuinpminstall--savereactreact-dom npminstall--saveweui@1.1.0

在react中怎么引用js

在react中怎么引用js推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。第一种:使用插件react-load-script如果没有安装

react中的webpack是什么?

Webpack是一个开源的前端打包工具。Webpack提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。Webpack可以从终端、或是更改webpack.config

javascript如何判断是不是整数?

方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。functionisInteger(obj){ returnobj%1===0 } isInteger(3);

如何使你的JavaScript代码简单易读

解决同一问题的方法有很多,但有些解决方法很复杂,甚至有些是荒谬的。在这篇文章中,我想谈谈解决同样问题的好方法和坏方法。让我们先从怎样删除数组中的重复项这个简单问题开始。复杂-使用forEach删除重复