技术标签: JS高阶篇 react.js vue.js javascript 开发语言 ecmascript
博主:小猫娃来啦
文章核心:js数组高阶函数——map()方法
map() 方法是数组原型的一个函数,该函数用于对数组中的每个元素进行处理,将其转换为另一个值,最终返回一个新的数组,该数组包含了经过处理后的每个元素。
以下是 map() 方法的基本语法:
array.map(callback(currentValue[, index[, array]])[, thisArg])
其中:
callback
:表示对数组中的每个元素要执行的函数。该函数包含三个参数:
currentValue
:表示正在处理的当前元素。index
:可选参数,表示正在处理的当前元素的索引。array
:可选参数,表示正在处理的当前数组。thisArg
:可选参数,表示执行 callback
函数时的 this
值。
使用 map()
方法将数组中的数字乘以 2 并返回新的数组:
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled); // 输出 [2, 4, 6, 8]
首先我们定义了一个名为 numbers
的数组,其中包含四个数字。我们使用 map()
方法对该数组中的每个元素执行了一次函数,该函数将每个数字乘以 2 并返回新的数组 doubled
将字符串数组转换为数字数组:
let strings = ['1', '2', '3'];
let numbers = strings.map(function(str) {
return parseInt(str, 10);
});
console.log(numbers); // 输出 [1, 2, 3]
我们声明了一个名为 strings
的数组。我们使用 map()
方法对该数组中的每个元素使用了一次函数,该函数将每个字符串转换为数字并返回新的数组 numbers
。
将对象数组转换为属性值数组:
let objects = [{
name: 'apple', color: 'red' }, {
name: 'banana', color: 'yellow' }, {
name: 'orange', color: 'orange' }];
let colors = objects.map(function(obj) {
return obj.color;
});
console.log(colors); // 输出 ["red", "yellow", "orange"]
将一个数组中的对象转换为另一个数组,只保留对象中的某些属性:
const users = [
{
name: 'Alice', age: 25},
{
name: 'Bob', age: 30},
{
name: 'Charlie', age: 35},
];
const names = users.map(function(user) {
return user.name;
});
console.log(names); // ['Alice', 'Bob', 'Charlie']
将一个数组中的字符串转换为另一个数组,只保留长度大于等于5的字符串:
const words = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
const longWords = words.map(function(word) {
if (word.length >= 5) {
return word;
}
});
console.log(longWords); // ['apple', 'banana', 'cherry', undefined, 'elderberry']
需要注意的是,在使用 map()
方法时,我们可以选择传递可选参数 thisArg
来设置回调函数的 this
值。如果不传递 thisArg
参数,则默认情况下,回调函数的 this
值为undefined
。
举个例子:
let numbers = [1, 2, 3];
let obj = {
multiplier: 2 };
let doubled = numbers.map(function(num) {
return num * this.multiplier;
}, obj);
console.log(doubled); // 输出 [2, 4, 6]
上面的例子中,我们定义了一个名为 numbers
的数组,其中包含三个数字。我们还定义了一个名为 obj
的对象,其中包含一个名为 multiplier
的属性,该属性的值为 2。我们在回调函数中使用 this.multiplier
,其中 this
值为 obj
,来将数组中的每个元素乘以 2。
优点:
缺点:
数据小的时候,用map()循环非常的爽,不是很消耗性能。但数据大的情况下,用map()会很耗性能,因为map()会对数组中的每个元素执行一次callback方法。建议数据大的时候,用for循环。虽然多次for循环嵌套看着恶心,但是性能好,是底层的东西。而所谓的map(),set(),for in,for of 都是在for循环的基础上再封装。单从性能角度考虑,远不如for循环优秀。
一般情况下,去重一个数组,有这么几种方法。
//先定义一个数组
var arr=[1,2,2,3,4,4,5]
//双重for循环
for(i = 0;i < arr.length; i++){
for(j = i+1;j < arr.length; j++){
//如果数组中有两个数相等,这里用三位运算符
if(arr[i] === arr[j]){
//在第j个元素开始删除,删除1个元素。splice方法,还可以对多个对象中的某个或某几个对象删除
arr.splice(j,1);
j--;
}
}
}
console.log(arr)
const arr = [1, 2, 2, 3, 4, 4, 5];
const newArr = Array.from(new Map(arr.map(item => [item, item])).values());
console.log(newArr); // [1, 2, 3, 4, 5]
这段代码的原理是,先使用map
方法将数组元素映射为键值对的数组。然后使用Map
构造函数将键值对数组转换为Map
对象,其中键和值均为数组的元素。由于Map
对象中键是唯一的,这样就自动去除了数组中的重复项。最后,通过Array.from()
方法将去重后的Map
对象的值转换为新的数组。
以下是使用Set
数据结构进行数组去重的例子:
let arr = [1, 2, 2, 3, 4, 4, 5];
let newArr = [...new Set(arr)];
console.log(newArr); // [1, 2, 3, 4, 5]
这里使用了ES6中的Set
数据结构来创建一个去重后的新数组newArr
。
let arr = [1, 2, 2, 3, 4, 4, 5];
let newArr = arr.filter((value, index, self) => {
return self.indexOf(value) === index;
});
console.log(newArr); // [1, 2, 3, 4, 5]
filter()
函数遍历数组中的每个元素,并通过比较当前元素在数组中的索引位置来判断是否保留。只有第一次出现的元素会被保留下来,从而实现了去重的效果
文章浏览阅读341次。spring-cloud-hystrix之spring-cloud-1.3.4(Dalston.SR3)-boot(1.5.6) 学习笔记概述hystrix可单独使用,也可与feign搭配使用,详见HystrixTargeter参考 https://fangjian0423.github.io/2017/02/19/springcloud-hystrix/http://blog.csdn.n_springcloud dalston.sr3怎么引用
文章浏览阅读991次。前言:在程序员的日常开发工作中,会遇到这样的情况,我们需要用自己本地的工作笔记本连接到大的服务器进行开发,因为大服务器的硬件性能强悍,有很多软件环境。我们在自己的笔记本进行开发需要用到这些软硬件环境,尤其在深度学习项目开发过程中,需要非常好的显卡,而显卡资源一般都部署在大服务器上。下面讲具体步骤:ssh和vscode的安装不再赘述,网上有很多教程。1,打开vscode编辑器,进入"扩展:商店":在搜索框里搜索Remote-SSH,下载好这个插件。2,点击左下角绿色部分"打开远程窗口",出现下图内容_ubuntu 通过 ssh 连接到远程服务器方便编辑代码的工具
文章浏览阅读3.2k次,点赞4次,收藏13次。概述GPU(Graphics Processing Unit) 图形处理单元,又称图形处理器,是我们所周知的显卡的核心部件,是显卡的“心脏”。按照字面意..._前台应用加速核心
文章浏览阅读4.3k次,点赞5次,收藏18次。本文详细介绍如何将串口通信将数据进行本次存储,主要介绍常用的csv、txt格式文件,由多年实战经验总结,绝对干货!_读取并保存串口发送来的数据
文章浏览阅读229次。对象锁:同步方法锁住的是对象A.一个对象+有多个synchronized方法:某一时刻内,只要有一个线程去调用其中一个synchronized 方法,其他的线程都要等待。B.一个对象中+synchronized方法+非synchronized方法:某个线程访问同步方法不影响其他线程访问非同步方法C.多个对象+多个同步方法:访问不同的对象的同步方法不会相互影响全局锁:静态同步方法锁的是当前的..._如果为put方法加synchronized锁,锁住的是什么?是一个put还是所有put方法?
文章浏览阅读2.5k次。最近有用户反馈在mac下通过airmail、outlook这样的邮件客户端查看系统发出邮件的标题显示为乱码,但是windows下正常。通过邮件客户端保存为eml,用sublime text 2打开,可以发现展示为以下效果:Date: Wed, 01 Jul 2015 19:54:57 +0800From: To: "=?GBK?B?zt6+zA==?=" Subject: [MTLÑз¢Ö§³Å..._outlook 2013 转发邮件 乱码
文章浏览阅读619次。python自定义复杂排序的使用(含案例)_python 自定义复合排序
文章浏览阅读2.8k次,点赞86次,收藏44次。在这一小节中,重点要理解的就是组件的编程思想。组件表示页面中的部分功能(包含自己的逻辑与样式),可以组合多个组件实现完整的页面功能。问题是,如何确定页面中哪些内容划分到一个组件中呢?你可以将组件当作一种函数或者是对象来考虑(函数的功能是单一的),根据[单一功能原则]来判定组件的范围。也就是说,一个组件原则上只能负责一个功能。如果它需要负责更多的功能,这时候就应该考虑将它拆分成更小的组件。定义:组件是可复用的Vue实例,准确讲它是的实例,继承自Vue分类:有状态组件(有data属性),
文章浏览阅读7.1k次。Springer期刊 latex投稿经验分享_投期刊要求latex
文章浏览阅读192次。1制造业数字化工艺目标1) 通过PLM项目的实施能够理顺企...
文章浏览阅读3.7k次,点赞5次,收藏17次。文件包含漏洞详解_ctf 文件包含
文章浏览阅读970次。文章目录java占位符具体使用搭配转换符的标志java占位符拼接字符串显示十分麻烦,因此java中存在大量占位符用来规范输出诸如:String.format("0.5(-%d)+", i),类似c语言的printf方法,比“0.5(-”+…更加简洁易懂String类的format()方法具体使用format(String format, Object… args) 新字符串使用本地语言环境,制定字符串格式和参数生成格式化的新字符串。format(Locale locale, String fo_%x java