一篇文章完全掌握 JavaScript 数组操作[每日前端夜话0x87]
栏目: JavaScript · 发布时间: 5年前
内容简介:作者:Bolaji Ayodeji翻译:疯狂的技术宅来源:
每日前端夜话 0x87
每日前端夜话,陪你聊前端。
每天晚上18:00准时推送。
正文共: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() 方法如何与所有四个参数一起使用。
有关 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
就是这样,非常简单,对吧?:smile:
原文:https://www.freecodecamp.org/news/manipulating-arrays-in-javascript/
图书推荐
下面夹杂一些私货:也许你和高薪之间只差这一张图
2019年京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。
愿你有个好前程,愿你月薪30K。我们是认真的 !
在公众号内回复“体系”查看高清大图
长按二维码,加大鹏老师微信好友
拉你加入前端技术交流群
唠一唠怎样才能拿高薪
往期精选
小手一抖,资料全有。长按二维码关注 前端先锋 ,阅读更多技术文章和业界动态。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- JVM和Python解释器的硬盘夜话
- Vue生命周期钩子简介[每日前端夜话0x8A]
- Node.js 究竟是什么?[每日前端夜话0x72]
- 关于 Git 的 20 个面试题[每日前端夜话0x75]
- React 的未来,与 Suspense 同行[每日前端夜话0x85]
- 一文学会Vue中间件管道[每日前端夜话0x8C]
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。