DAY 28
2
Modern Web

map()

``````// javascript

const ary = [1, 2, 3, 4, 5]

const result = ary.map((a, b, c) => {
console.log(`
a: \${a}
b: \${b}
c: \${c}
`)
})

// > a: 1
// > b: 0
// > c: 1,2,3,4,5

// > a: 2
// > b: 1
// > c: 1,2,3,4,5

// > a: 3
// > b: 2
// > c: 1,2,3,4,5

// > a: 4
// > b: 3
// > c: 1,2,3,4,5

// > a: 5
// > b: 4
// > c: 1,2,3,4,5
``````
``````// javascript

const ary = [1, 2, 3, 4, 5]

const result = ary.map((item) => item)
console.log(result)
// > [1, 2, 3, 4, 5]

console.log(result === ary)
// > false
``````

``````// javascript

const ary = [1, 2, 3, 4, 5]

const resultA = ary.map((item) => item * item)
console.log(resultA)
// >  [1, 4, 9, 16, 25]

console.log(ary)
// > [1, 2, 3, 4, 5]

const bry = [1, 2, 3, 4, 5]

const resultB = bry.map((item, i) => {
bry[i] = item * item
return bry[i]
})
console.log(resultB)
// > [1, 4, 9, 16, 25]

console.log(bry)
// > [1, 4, 9, 16, 25]
``````

`map()` 的篩選範圍，在方法執行的當下就已經確定，所以後續增加的內容將不會被運行：

``````// javascript

const ary = [1, 2, 3, 4, 5]

const result = ary.map((item, i) => {
ary.push(ary.length + 1)

return item
})

console.log(result)
// > [1, 2, 3, 4, 5]

console.log(ary)
// > [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
``````

``````// javascript

const ary = [1, 2, 3, 4, 5]

const result = ary.map((item, i) => {
ary[i + 1] = ary[i + 1] + i
console.log(ary)

return item / 2
})
// > [1, 2, 3, 4, 5]
// > [1, 2, 4, 4, 5]
// > [1, 2, 4, 6, 5]
// > [1, 2, 4, 6, 8]
// > [1, 2, 4, 6, 8, NaN]

console.log(result)
// > [0.5, 1, 2, 3, 4]

console.log(ary)
// > [1, 2, 4, 6, 8, NaN]
``````
``````// javascript

const ary = [1, 2, 3, 4, 5]

const result = ary.map((item, i) => {
ary[i] = ary[i] + i
console.log(ary)

return item / 2
})
// > [1, 2, 3, 4, 5]
// > [1, 3, 3, 4, 5]
// > [1, 3, 5, 4, 5]
// > [1, 3, 5, 7, 5]
// > [1, 3, 5, 7, 9]

console.log(result)
// > [0.5, 1, 1.5, 2, 2.5]

console.log(ary)
// > [1, 3, 5, 7, 9]
``````

array_map()

PHP 的 `array_map()` 比較別的地方在，它可以同時傳入多個陣列。

``````// php

<?
\$ary = [1, 2, 3, 4, 5];

\$result = array_map(function(\$item) {
return \$item;
}, \$ary);
print_r(\$result);
// > Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 [4] => 5 )
?>
``````

``````// php

<?
\$ary = [
'A' => 1,
'10' => 2,
'J' => 3,
'E' => 4,
'5' => 5
];

\$result = array_map(function(\$item) {
return \$item;
}, \$ary);
print_r(\$result);
// > Array ( [A] => 1 [10] => 2 [J] => 3 [E] => 4 [5] => 5 )
?>
``````

``````// php

<?
\$ary = [
'A' => 1,
'10' => 2,
'J' => 3,
'E' => 4,
'5' => 5
];
\$bry = [
'A' => 6,
'10' => 7,
'J' => 8,
'E' => 9,
'5' => 10
];

\$result = array_map(function(\$a, \$b) {
return [\$a, \$b];
}, \$ary, \$bry);
print_r(\$result);
// > Array (
// >    [0] => Array ( [0] => 1 [1] => 6 ) ,
// >    [1] => Array ( [0] => 2 [1] => 7 ) ,
// >    [2] => Array ( [0] => 3 [1] => 8 ) ,
// >    [3] => Array ( [0] => 4 [1] => 9 ) ,
// >    [4] => Array ( [0] => 5 [1] => 10 ) ,
// > )
?>
``````

``````// php

<?
\$ary = [
'A' => 1,
'10' => 2,
'J' => 3,
'E' => 4,
'5' => 5
];
\$bry = [
'A' => 6,
'10' => 7,
];

\$result = array_map(function(\$a, \$b) {
return [\$a, \$b];
}, \$ary, \$bry);
print_r(\$result);
// > Array (
// > [0] => Array ( [0] => 1 [1] => 6 ),
// > [1] => Array ( [0] => 2 [1] => 7 ),
// > [2] => Array ( [0] => 3 [1] => ),
// > [3] => Array ( [0] => 4 [1] => ),
// > [4] => Array ( [0] => 5 [1] => )
// > )
?>
``````

``````// php

<?
\$ary = [
'A' => 1,
'10' => 2,
'J' => 3,
'E' => 4,
'5' => 5
];
\$bry = [
'A' => 6,
'10' => 7,
'J' => 8,
'E' => 9,
'5' => 10
];

\$result = array_map(NULL, \$ary, \$bry);
print_r(\$result);
// > Array (
// >    [0] => Array ( [0] => 1 [1] => 6 ) ,
// >    [1] => Array ( [0] => 2 [1] => 7 ) ,
// >    [2] => Array ( [0] => 3 [1] => 8 ) ,
// >    [3] => Array ( [0] => 4 [1] => 9 ) ,
// >    [4] => Array ( [0] => 5 [1] => 10 ) ,
// > )
?>
``````

比較

callback 參數 值、索引、陣列 value 值，數量與傳入陣列數相同

大手夥伴們的專欄

CSScoke - 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎
King Tzeng - IoT沒那麼難！新手用JavaScript入門做自己的玩具～

Clarence - LINE bot 好好玩 30 天玩轉 LINE API

Vita Ora - 好 Js 不學嗎 !? JavaScript 入門中的入門。

1 則留言

0
Clarence
iT邦新手 5 級 ‧ 2019-10-14 11:59:32