JavaScript -Array.map()

Array.prototype.map()

map()メソッドは、各配列の要素が所定の関数を呼び出す新しい配列を返します.

const numbers = [1, -1, 2, 3];
const filtered = numbers.filter(n=>n>=0);
console.log(filter) // [1. 2. 3]
const item = filtered.map(n => '<li>'+n+'</li>')
console.log(item) //['<li>1</li>', '<li>2</li>', '<li>3</li>']
const html =  '<ul>' + item.join('') + '</ul>'
console.log(html) //<ul><li>1</li><li>2</li><li>3</li></ul>

const items = filtered.map(n=> {
    const obj = {value : n};
    return obj;
});

▼同じ結果、異なる解答(コードの簡略化)

const items = filtered.map(n=> ({value : n}) );

filterまたはmapの場合、それらはすべて配列に戻るので、配列を繰り返し使用する方法にリンクすることができます.

const itemts = numbers
	.filter(n => n>=0)
	.map(n => ({value : n}) )
	.filter(obj => obj.value > 1);
	.map(obj => obj.value);

🥑 Array.map():表示法1

let numbers = [4, 9, 16, 25]
let result =  numbers.map(Math.sqrt);

🥑 Array.map():表示法2

let numbers = [1, 2, 3, 4, 5]
let newNumbers = numbers.map(function(num) {
	return num * 2 ;
})

arrow func

let numbers = [1, 2, 3, 4, 5]
let newNumbers = numbers.map(num => num * 2 })

🥑 Array.map():表示法3

function형

let numbers = [1, 2, 3, 4, 5]
function multiplyTwo(num) {
	return number * 2;
}
 let newNumbers -= numbers.map(multiplyTwo);

📌 例1

 let students = [
   {id:1, name: 'James'},
   {id:2, name: 'Tim'},
   {id:3, name: 'John'},
   {id:4, name: 'Brian'}
 ];

let names = students.map(x => students.name);
console.log(names);

📌 例2

var numbers = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
var newNumbers = numbers.map(array => array.map(number => number * 2));
console.log(newNumbers);

📌 例3

配列内の数値の平方根を求めて新しい配列を作成する

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);

console.log(roots) //[1, 2, 3]
console.log(numbers) //[1, 4, 9]

map()メソッドでは、元の配列は変更されません.

📌 例4

mapを使用して配列内のオブジェクトを再編成する

var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray는 [{1:10}, {2:20}, {3:30}]

📌 例5

受信パラメータの関数を使用してデジタルアレイを再編成
パラメータが1つしかない関数を使用してmapがどのように動作するかをチェックします.

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]