js数组高阶函数 |
您所在的位置:网站首页 › js将数组转为对象 › js数组高阶函数 |
js数组高阶函数——map方法
map()语法map()的基本使用map()的优缺点map()的使用场景去重双重for循环配合splie去重map循环配合Array.from去重set()去重filter()去重
map()语法
⭐map() 方法是数组原型的一个函数,该函数用于对数组中的每个元素进行处理,将其转换为另一个值,最终返回一个新的数组,该数组包含了经过处理后的每个元素。 以下是 map() 方法的基本语法: array.map(callback(currentValue[, index[, array]])[, thisArg])其中: callback :表示对数组中的每个元素要执行的函数。该函数包含三个参数: currentValue:表示正在处理的当前元素。index:可选参数,表示正在处理的当前元素的索引。array:可选参数,表示正在处理的当前数组。thisArg:可选参数,表示执行 callback 函数时的 this 值。 map()的基本使用⭐使用 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()默认会有返回值,一般返回一个数组。这里要强调一下,函数默认没有返回值。如果函数内部没有明确使用return语句返回一个值,那么该函数执行完毕后会自动返回undefined。所以这个也是map()的一个特色可以方便地对数组中的每个元素进行操作,并生成一个新的数组;不会改变原始数组。缺点: 无法使用break,continue,return等关键字控制循环,必须全部遍历完毕才能停止;对于大型数据集合而言,可能会导致性能问题。数据小的时候,用map()循环非常的爽,不是很消耗性能。但数据大的情况下,用map()会很耗性能,因为map()会对数组中的每个元素执行一次callback方法。建议数据大的时候,用for循环。虽然多次for循环嵌套看着恶心,但是性能好,是底层的东西。而所谓的map(),set(),for in,for of 都是在for循环的基础上再封装。单从性能角度考虑,远不如for循环优秀。 map()的使用场景 将一组数据转换为另一种形式或格式;对一组数据进行过滤、去重等操作;对一组DOM元素进行修改等操作; 去重一般情况下,去重一个数组,有这么几种方法。 双重for循环配合splie去重 //先定义一个数组 var arr=[1,2,2,3,4,4,5] //双重for循环 for(i = 0;i //如果数组中有两个数相等,这里用三位运算符 if(arr[i] === arr[j]){ //在第j个元素开始删除,删除1个元素。splice方法,还可以对多个对象中的某个或某几个对象删除 arr.splice(j,1); j--; } } } console.log(arr)这段代码的原理是,先使用map方法将数组元素映射为键值对的数组。然后使用Map构造函数将键值对数组转换为Map对象,其中键和值均为数组的元素。由于Map对象中键是唯一的,这样就自动去除了数组中的重复项。最后,通过Array.from()方法将去重后的Map对象的值转换为新的数组。 set()去重以下是使用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。 filter()去重 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()函数遍历数组中的每个元素,并通过比较当前元素在数组中的索引位置来判断是否保留。只有第一次出现的元素会被保留下来,从而实现了去重的效果 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |