js多层对象数组 合并_13个你必须知道的JS数组技巧
在Javascript中,数组是一个重要且常见的知识点,我们经常将数据存储在数组中。作为一名Javascript工程师,数组必须要运用自如。这篇文章,向大家展示了在日常开发中,数组有哪些奇淫技巧值得关注和学习,让我们开始吧!
1、去重
这也是一道常见的面试题,怎么对JS的数组去重。在ES6的时代,有个非常快速且简单的方法,使用new Set()以及Array.from()或者展开运算符(...)
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];// 方法一
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
// 方法二
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
2、替换
日常开发中经常需要替换或者删除一些指定的数据,遇到这种场景时一定要联想到Array.protoType.splice这个方法。传参时稍微复杂点,第一个参数是开始的索引,第二个参数是需要删除的数量,剩下的就是需要添加的值(可以是一个或者多个)。
var 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方法,其实还有一个方法也能达到一样的目的,用法比较冷门,所以我们总是忽视,那就是Array.from
var 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 },
]var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]
4、清空数组
有时我们需要清空一个数组,比如用户点击了清空购物车。可以一条一条地删除,但是很少有这么可爱的程序员,哈哈。其实一行代码就能搞定,那就是直接将之length设置成0
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];fruits.length = 0;
console.log(fruits); // returns []
5、数组转换成对象
有时候需要将数组转换成对象的形式,使用.map()一类的迭代方法能达到目的,这里还有个更快的方法,前提是你正好希望对象的key就是数组的索引
var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}
6、填充数组
创建数组的时候,你有没有遇到过需要填充上默认值的场景,你肯定首先想到的就是循环这个数组。ES6提供了更便捷的.fill方法
var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]
7、合并数组
你知道如何合并数组吗,答案就是.concat()。哈哈,但是今天的主角是ES6的展开运算符(...)
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”, “tom
8、两个数组的交集
找出两个数组的交集算是一道经典的JS面试题了,这题能很好地考察候选人的逻辑是否清晰,对数组的掌握是否熟练。这题的答案有很多,下面展示的是ES6的简洁写法
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、去除假值
首先,我们熟悉下价值(falsy values)是什么?在JS中,假值有: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、随机值
从数组中获取随机的一个值,也是一道经典的面试题哦。其实考察的核心知识是随机生成一个值x:x >= 0 并且 x < 数组的length
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]
11、倒序
怎么对数组进行倒序?只需要一行代码
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
// 或者 colors.slice().reverse();
// 两者有啥区别?
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]
12、lastIndexOf()
很多时候我们查找元素是否存在于某个数组中,经常使用indexOf方法,常常忽略lastIndexOf方法,后者会被使用的一个场景就是,某个数组中有重复的数据。
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、求和
对数组中的所有元素进行求和,哈哈,又是一道如数家珍的面试题。答案也是很多,条条大道通罗马,这里使用的是reduce,reduce方法是很值得学习的知识点,用处很多。
var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14
总结
这篇文章,向小伙伴们展示了在JS中怎么去操作数组的种种技巧,其实在日常开发中,很可能还会遇到更加复杂的业务,希望你们能一一解剖成小问题,找到入手的地方。加油小伙伴们!
作者:小华坚决上王者
链接:https://juejin.im/post/6844904067446079496
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
js多层对象数组 合并_13个你必须知道的JS数组技巧相关推荐
- 13个你必须知道的JS数组技巧
在Javascript中,数组是一个重要且常见的知识点,我们经常将数据存储在数组中.作为一名Javascript工程师,数组必须要运用自如.这篇文章,向大家展示了在日常开发中,数组有哪些奇淫技巧值得关 ...
- js数组按中文拼音排序_收藏 | JS开发必须知道的41个技巧
作者:火狼https://cloud.tencent.com/developer/article/1666138 JS是前端的核心,但有些使用技巧你还不一定知道: 本文梳理了JS的41个技巧,帮助大家 ...
- 收藏 | JS开发必须知道的41个技巧
[本文来自转载]Vue中文社区 转载来自-作者:火狼-腾讯云开发文章: 腾讯云开发文章 本博客转载源码地址: https://github.com/lanzhsh/react-vue-koa 2, O ...
- es6 数组合并_13个不low的JS数组操作,你需要知道一下
作者 | 火狼1来源 | https://juejin.im/post/5c92e385e51d450ce11df1d1 前言 本文主要从应用来讲数组api的一些骚操作:如一行代码扁平化n维数组.数组 ...
- 数组:合并同为升序或者降序的数组
数组合并是归并排序中的一个步骤,今单独就两个有序数组的合并给出代码实现.归并排序的另一个步骤就是递归,递归就是一个方法在其方法体的某个地方调用自己,这样就会将同一个逻辑不断的压栈,到达递归条件后,又一 ...
- PHP 数组合并,将二维或多维数组合并为 一维数组
1.二维合并为一维数组 mixed array_reduce ( array array,callablearray,callablearray , callable callback [, mixe ...
- [你必须知道的.NET]第十九回:对象创建始末(下)
本文将介绍以下内容: 对象的创建过程 内存分配分析 内存布局研究 接上回[第十八回:对象创建始末(上)],继续对对象创建话题的讨论>>> 2.2 托管堆的内存分配机制 引用类型的实例 ...
- [你必须知道的.NET]第十八回:对象创建始末(上)
本文将介绍以下内容: 对象的创建过程 内存分配分析 内存布局研究 1. 引言 了解.NET的内存管理机制,首先应该从内存分配开始,也就是对象的创建环节.对象的创建,是个复杂的过程,主要包括内存分配和初 ...
- android两个数组对象去重合并,JS 两个对象数组合并并去重
JS两个对象数组合并并去重 let jsonArr = [ { "ID": "", "NO": "1", "N ...
最新文章
- NoClassDefFoundError: org/springframework/core/ErrorCoded 报错
- php大商创 安装,大商创X2020最新纯净服务器安装教程
- 学完python_学完Python都可以做什么
- 什么样的计算机书才是市场需要的——2009年计算机图书选题策划方向(三) (全文完)...
- VTK:Filtering之SelectionSource
- python 创建目录_第二天:Python中目录及文件操作
- 服务器c的环境配置文件,配置linux服务器环境(jdk+tomcat+mysql+nginx+redis+svn+nexus的maven私服)...
- easyPOI基本用法详解
- ECCV 2020 论文大盘点-图像与视频分割篇
- 浅谈ARMv7-A协处理器CP15
- php socket 小程序,实例详解微信小程序如何使用Socket
- WPF窗体的生命周期
- 利用D3D抓取GPU数据
- 关于写程序时「对数据库操作」的一些总结。
- 软件测试基础知识大全(新手入门必备)
- 我卖掉北京 500 万的房子,在老家生活的这两年…
- “信用租车”来了 芝麻分满650可在飞猪免押租车
- 爬取虾米音乐flac高品质下载
- 防止软件进行微信小程序自动刷票、免费投票刷票器手机版的安全设计
- 【视频联动】编译原理:写出布尔表达式A or (B and not(C or D)) 的四元式序列。说明:按照控制语句中的布尔表达式翻译
热门文章
- SAP Cloud for Customer移动端应用SAP推荐的网络时延参数
- when click one item in table Select at least one column to perform the search
- SAP WebIDE UI5应用的几种启动方式
- dateFormat in DatePicker control Fiori - language 语言
- jQuery.sap.require
- S/4HANA key user tool创建的Extension field,点了publish后的执行原理
- Object address check - Jurisdiction code
- SAP Fiori Launchpad launchpad Designer组件和configuration组件的重要存储表一览
- SAP成都研究院DevOps那些事
- 再论SAP云平台上CloudFoundry编程环境的connectivity