网站首页 > 技术文章 正文
数组是Javascript最常见的概念之一,它为我们提供了处理数据的许多可能性,熟悉数组的一些常用操作是很有必要的。
1、数组去重
1.from()叠加new Set()方法
字符串或数值型数组的去重可以直接使用from方法。
var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']; var uniquePlants = Array.from(new Set(plants)); console.log(uniquePlants); // [ 'Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Mars', 'Jupiter' ]
2.spread操作符(…)
扩展运算符是ES6的一大创新,还有很多强大的功能。
var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']; var uniquePlants = [...new Set(plants)]; console.log(uniquePlants); // [ 'Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Mars', 'Jupiter' ]
2、替换数组中的特定值
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原始数组。特别需要注意插入值的位置!
// arrayObject.splice(index,howmany,item1,.....,itemX) var plants = ['Saturn', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']; var result = plants.splice(2, 1, 'www.shanzhonglei.com') console.log(plants); // ['Saturn','Uranus','www.shanzhonglei.com','Mercury','Venus','Earth','Mars','Jupiter'] console.log(result); // ['Mercury']
3、没有map()的映射数组
我们先介绍一下map方法。map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,它会按照原始数组元素顺序依次处理元素。注意: map()不会改变原始数组,也不会对空数组进行检测。
下面我们来实现一个没有map的数组映射:
// array.map(function(currentValue,index,arr), thisValue) var plants = [ { name: "Saturn" }, { name: "Uranus" }, { name: "Mercury" }, { name: "Venus" }, ] var plantsName = Array.from(plants, ({ name }) => name); console.log(plantsName); // [ 'Saturn', 'Uranus', 'Mercury', 'Venus' ]
4、空数组
如果要清空一个数组,将数组的长度设置为0即可,额,这个有点简单。
var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']; plants.length = 0; console.log(plants); // []
5、将数组转换为对象
如果要将数组转换为对象,最快的方法莫过于spread运算符(...)。
var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']; var plantsObj = {...plants } console.log(plantsObj); // {'0': 'Saturn','1': 'Earth', '2': 'Uranus','3': 'Mercury','4': 'Venus','5': 'Earth','6': 'Mars','7': 'Jupiter'}
6、用数据填充数组
如果我们需要用一些数据来填充数组,或者需要一个具有相同值的数据,我们可以用fill()方法。
var plants = new Array(8).fill('8'); console.log(plants); // ['8', '8', '8','8', '8', '8','8', '8']
7、合并数组
当然你会想到concat()方法,但是哦,spread操作符(...)也很香的,这也是扩展运算符的另一个应用。
var plants1 = ['Saturn', 'Earth', 'Uranus', 'Mercury']; var plants2 = ['Venus', 'Earth', 'Mars', 'Jupiter']; console.log([...plants1, ...plants2]); // ['Saturn', 'Earth','Uranus', 'Mercury','Venus', 'Earth','Mars', 'Jupiter']
8、两个数组的交集
要求两个数组的交集,首先确保数组不重复,然后使用filter()方法和includes()方法。
var plants1 = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']; var plants2 = ['Saturn', 'Earth', 'Uranus']; var alonePlants = [...new Set(plants1)].filter(item => plants2.includes(item)); console.log(alonePlants); // [ 'Saturn', 'Earth', 'Uranus' ]
9、删除数组中的假值
我们时常需要在处理数据的时候要去掉假值。在Javascript中,假值是false, 0, " ", null, NaN, undefined。
var plants = ['Saturn', 'Earth', null, undefined, false, "", NaN, 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']; var trueArr = plants.filter(Boolean); console.log(trueArr); // ['Saturn', 'Earth','Uranus', 'Mercury','Venus', 'Earth','Mars', 'Jupiter']
10、获取数组中的随机值
我们可以根据数组长度获得一个随机索引号。
var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']; console.log(plants[Math.floor(Math.random() * (plants.length + 1))])
11、lastIndexOf()方法
lastIndexOf()可以帮助我们查找元素最后一次出现的索引。
var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']; console.log(plants.lastIndexOf('Earth')) // 5
12、将数组中的所有值相加
reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
// array.reduce(function(total, currentValue, currentIndex, arr), initialValue) var nums = [1, 2, 3, 4, 5]; var sum = nums.reduce((x, y) => x + y); console.log(sum); // 15
转自简书:前端技术驿站
猜你喜欢
- 2024-09-08 「JavaScript 从入门到精通」10.数组
- 2024-09-08 JS——数组的方法 & 高阶函数
- 2024-09-08 Javascript中的内置对象—数组(javascript内置对象应用的)
- 2024-09-08 js数组方法笔记(js的数组)
- 2024-09-08 JavaScript 数组元素的一些操作(javascript中数组)
- 2024-09-08 Javascript数组应用及场景——创建数组的N种方式详解
- 2024-09-08 详解JS数组API方法重构(js 数组 api)
- 2024-09-08 手把手教你Javascript (6)-数组(javascript10分钟速成)
- 2024-09-08 JS核心基础数组的操作概述(js数组原理)
- 2024-09-08 JavaScript操作数组的方式都有哪些
- 1517℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 594℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 521℃MySQL service启动脚本浅析(r12笔记第59天)
- 489℃服务器异常重启,导致mysql启动失败,问题解决过程记录
- 489℃启用MySQL查询缓存(mysql8.0查询缓存)
- 477℃「赵强老师」MySQL的闪回(赵强iso是哪个大学毕业的)
- 456℃mysql服务怎么启动和关闭?(mysql服务怎么启动和关闭)
- 454℃MySQL server PID file could not be found!失败
- 最近发表
-
- PS所有滤镜的说明(六)(ps滤镜详解)
- 5款小白也能用的在线图片编辑器!电商效率飙升就靠它!
- Java变量(java变量有什么作用)
- Java面试常见问题:Java注解(java中的面试题)
- Java编程入门第一课:HelloWorld(java编程从入门到实践)
- Java基础教程:Java继承概述(java里继承的概述)
- java基础之——访问修饰符(private/default/protected/public)
- 如何规划一个合理的JAVA项目工程结构
- 将机器指令翻译成 JavaScript -- 终极目标
- Web 服务器基准测试:Go vs. Node.js vs. Nim vs. Bun
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (81)
- es6includes (73)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- js判断是否是json字符串 (67)
- checkout-b (67)
- c语言min函数头文件 (68)
- asynccallback (71)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)