map() 方法

2020年10月18日 阅读数:6
这篇文章主要向大家介绍map() 方法,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

做用:

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

语法:

array.map(function(currentValue,index,arr), thisValue)
  • currentValue,必填,当前元素的值
  • index,可选,当前元素在数组中的索引值
  • arr可选,当前元素属于的数组对象
  • thisValue,可选,对象做为该执行回调时使用,传递给函数,用做 "this" 的值。若是省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。

注意:map() 不会对空数组进行检测。
注意:map() 不会改变原始数组。数组

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
elements.map(function(element) { 
  return element.length; 
}); // 返回数组:[8, 6, 7, 9]

// 上面的普通函数能够改写成以下的箭头函数
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数只有一个参数时,能够省略参数的圆括号
elements.map(element => {
 return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数的函数体只有一个 `return` 语句时,能够省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]

// 在这个例子中,由于咱们只须要 `length` 属性,因此能够使用参数解构
// 须要注意的是字符串 `"length"` 是咱们想要得到的属性的名称,而 `lengthFooBArX` 则只是个变量名,
// 能够替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]