超实用的JavaScript数组操作技巧
引自公众号文章:https://mp.weixin.qq.com/s/PBX_7JnclRui6I_MEcheww
1. 数组去重
这里只展示两种可行的方法, 一种是实用.from()
方法, 第二种是实用扩展运算符...
let fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]
// 第一种方法
let uniqueFruits = Array.from(new Set(fruits))
//第二种方法
let uniqueFruits2 = [...new Set(fruits)]
2 .替换数组中的特定值
我们可用使用.splice(start, value to remove, valueToAdd)
,并在其中传递三个参数,这些参数指定了要在哪里开始修改,要更改多少个值以及新增加的值。
let fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]
fruits.splice(0, 2, "potato", "tomato")
console.log(fruits) // returns ["potato", "tomato", "orange", "watermelon", "apple", "orange", "grape", "apple"]
3. 不使用.map()映射数组
也许每个人都知道数组的.map()
方法,但是可以使用另一种方案来获得相似的效果,并且代码非常简洁。这里我们可用.from()
方法。
let friends = [{ name: 'John', age: 22 },{ name: 'Peter', age: 23 },{ name: 'Mark', age: 24 },{ name: 'Maria', age: 22 },{ name: 'Monica', age: 21 },{ name: 'Martha', age: 19 },
]let friendsNames = Array.from(friends, ({name}) => name)console.log(friendsNames) //returns ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]
https://mdnice.com/#
4. 清空数组
您是否有一个包含所有元素的数组,但出于任何目的都需要对其进行清理,并且不想一个一个地删除元素?只需一行代码即可完成。要清空数组,您需要将数组的长度设置为0,仅此而已!
let fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"];fruits.length = 0;
console.log(fruits); // returns []
5. 数组转对象
碰巧我们有一个数组,但是出于某种目的,我们需要一个具有此数据的对象,而将数组转换为对象的最快方法是使用众所周知的扩展运算符...
。
let fruits = ["banana", "apple", "orange", "watermelon"];let fruitsObj = {...fruits};console.log(fruitsObj) // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}
6. 用数据填充数组
在某些情况下,当我们创建一个数组时,我们想用一些数据填充它,或者我们需要一个具有相同值的数组,在这种情况下,.fill()
方法提供了一种简单而干净的解决方案。
let newArray = new Array(10).fill('1')
console.log(newArray) // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]
7. 合并数组
除了使用.concat()
方法,我们也可以使用扩展运算符...
。
var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]
求数组的交集
这也是您在任何Javascript面试中面临的最普遍的挑战之一,因为它展示了你是否可以使用数组方法以及你的逻辑是什么。
var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = [...new Set(numOne)].filter(item=> numTwo.includes(item))
console.log(duplicatedValues); // returns [2, 4, 6]
9. 从数组中删除虚值
首先,让我们定义虚值。在Javascript中,虚值有false, 0, „”, null, NaN, undefined
。现在,我们可以找到如何从数组中删除此类值。为此,我们将使用.filter()方法。
var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]
10. 从数组中获取随机值
有时我们需要从数组中随机选择一个值。为了以简单,快速和简短的方式创建它并保持我们的代码整洁,我们可以根据数组长度获取随机索引号。让我们看一下代码:
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];var randomColor = colors[(Math.floor(Math.random() * (color.length)))]
11. 反转数组
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]
12. .lastIndexOf()方法
在Javascript中,有一个有趣的方法,它允许查找给定元素的最后一次出现的索引。例如,如果我们的数组有重复的值,我们可以找到它最后一次出现的位置。让我们看一下代码示例:
var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9
13. 对数组中的所有值求和
var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14
超实用的JavaScript数组操作技巧相关推荐
- 13 个JavaScript 数组小技巧,让你更像技术专家
来源 | https://javascript.plainenglish.io/13-neat-tricks-to-manipulate-arrays-like-an-expert-b0bb19f0c ...
- Javascript数组操作(转)
1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...
- Javascript数组操作
使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...
- javaScript数组操作--有道笔记整理
javascript之数组操作 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一 ...
- JavaScript 数组操作大全
1. pop() pop() 方法从数组中删除最后一个元素: 实例 var fruits = ["Banana", "Orange", "Apple& ...
- JavaScript数组操作 [Z]
函数join(delimiter): 把数组中各个元素使用分隔符(delimiter)拼成字符串 concat(array1, array2, ...): 合并数组,对原数组不影响,只是返回合并后的新 ...
- jq 组装数组_Jquery数组操作
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的 ...
- W ndows10如何清理使用痕迹,Windows10操作技巧系列——删除最常用,最常访问,快速访问记录...
Win10除了有传统意义上的,网络历史记录外,还包含了两种本地文件浏览记录,分别是资源管理器中的"快速访问"记录,和开始菜单以及任务栏中的"最常用"" ...
- javascript之数组操作
1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...
最新文章
- 涨知识!参加过将近三十届广交会的老鸟总结!
- SqlServer 2014 还原数据库时提示:操作系统返回了错误5,,拒绝访问
- 739. Daily Temperatures - LeetCode
- Spring—集成Junit
- mysql管理员就业_MySQL管理员必备的十大工具盘点
- linux查找命令、find、grep总结
- pictureselector 压缩_Android 多图选择器PictureSelector 使用
- Delphi 3D Glscene安装
- 帝都搬砖四年,我决定回老家考公务员
- matlab画全连接网络,无标度网络及MATLAB建模.pdf
- 分布式渲染运行时3D引擎架构在Web端的应用: 秒开3D Web APP
- java音乐播放器代码_java 音乐播放器 示例源码(亲测可用)
- USACO-Fractions to Decimals
- 记一次企业微信回调解密报错
- 赢在互联网的起跑线上
- 密码学-02完美保密
- 教你一个快速掌握知识的学习方法
- 无人机航模电池上面有20C 30C,这是放电倍率
- 个人购买得笔记本电脑都需要做哪些安全防御措施
- python xls 转化 xlsx