TIL 69|アレイ4(アレイ方法3)

メソッドパラメータとしてコールバック関数を受信する配列高次関数について

高次関数の整列❗

高次関数:関数をパラメータとして渡したり(コールバック)関数を返したりする関数

を指す.

Array.prototype.sort

sortメソッドは、配列内の要素を昇順に並べ替えます.ソースアレイを直接変更して、整列したアレイを返します.(例1)

要素を降順にソートするために.sort()メソッドを使用して昇順にソートします.reverse()メソッドを使用して要素を逆順に配列する(例1)

.sort()メソッドのデフォルトのソート順序はUnicodeコードポイントの順序に従います.配列内の要素が数値タイプであっても、配列内の要素を一時的に文字列に変換し、Unicode点の順序に従ってソートできます.

"10"のUnicode点の順序(U+0031 U+0030)が"2"のUnicode点(U+0032)よりも先であるため、実際に昇順でソートできない場合(例2)(例3)

が発生する.

デジタル要素をソートする場合は、ソート順序を定義する比較関数を引数としてsortメソッドに渡す必要があります.

比較関数の戻り値が0未満の場合は、比較関数の第1パラメータを優先順位付け、0の場合は並べ替えず、0より大きい場合は第2パラメータを優先順位付け(例4,5)

.

-예시1-
  
const fruits = ['Banana', 'Orange', 'Apple']

fruits.sort();
console.log(fruits) // ["Apple", "Banana", "Orange"]

fruits.reverse() 
console.log(fruits) // ["Orange", "Banana", "Apple"]


-예시2-
const points = [40, 100, 1, 5, 25, 10]

const ab = points.sort()
console.log(ab) // [1, 10, 100, 25, 40, 5]

-예시3-
const points = [40, 100, 1, 5, 25, 10]

const ab = points.sort()
console.log(ab) // [1, 10, 100, 25, 40, 5]


-예시4- 오름차순 정렬 : 비교함수의 반환값이 0보다 작으면 a를 우선하여 정렬한다
const points = [40, 100, 1, 5, 25, 10]
const abc = points.sort((a, b) => a - b)

console.log(abc)  // [1, 10, 100, 25, 40, 5] 

-예시5- 내림차순 정렬 : 비교함수의 반환값이 0보다 작으면 b를 우선하여 정렬한다
const points1 = [40, 100, 1, 5, 25, 10]
const abcd = points1.sort((a, b) => b - a)

console.log(abcd) // [100, 40, 25, 10, 5, 1]

Array.prototype.forEach

に従ってデータ中の項目数を並べ、特定のコールバック関数を繰り返し実行する方法.3つのファクタを使用できます.(element(=item)、index(オプション)、array(オプション)

array:foreach()の配列データ(果物).Arrayこのパラメータは

をほとんど必要としません

動作の原理(例1):3項あるので3回反復する

コールバックの最初の実行:“apple”は果物の最初の要素に現れます.だからコンソールはApple、(index)0、果物の配列のすべての内容を出力します.

コールバックの2回目の実行:果物の2番目の要素に「Banna」が表示されるため、コンソールはBanna、(index)1、および果物全体の配列を出力します.

コールバックの3回目の実行:果物の2番目の要素に「Cherry」が表示されるため、コンソールはCherry、(index)2と果物全体の配列を出力します.

インデックスと配列を省略すると(例2)、

引数要素の代わりにitemを使用してもよいし、意味をitemで伝達する他の変数を使用してもよい.Indexをi(例3)

と略す

.forEach()の実行時に値が返されないため、console.log(a)の出力値未定義(例4)

-예시1-
  
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banna', 'Cherry']

fruits.forEach(function(element, index, array) {
console.log(element, index, array)
}) 

<출력>
"Apple"
0
["Apple", "Banna", "Cherry"]
"Banna"
1
["Apple", "Banna", "Cherry"]
"Cherry"
2
["Apple", "Banna", "Cherry"]

-예시2- push 메서드가 원본을 직접 변경하기 때문에, 순회해서 빈 배열에 요소를 추가했을 때, 하나의 배열이 된다
const numbers1 = [1, 2, 3];
const pows = [];

numbers1.forEach(item => pows.push(item **2));
console.log(pows) // [1, 4, 9]

-예시3-
const fruits = ['Apple', 'Banna', 'Cherry']

fruits.forEach(function(f, i) {
console.log(f, i)
})

-출력
"Apple"
0
"Banna"
1
"Cherry"
2

-예시4-
const fruits = ['Apple', 'Banna', 'Cherry']

const a = fruits.forEach((fruit, i) => `[${fruit}-${i}]`)

console.log(a) // undefined

Array.prototype.map

コールバックのパラメータ部分は.foreach()と同じ

しかありません.map()は、コールバックの戻り値からなる新しい配列を作成して返します.変数に割り当てて確認できます.(例1)

オブジェクト

実行文(例2)

を作成することもできる.
比較演算子が

文で使用される場合、true、false(例3)

が返されます.

元の配列は変更されません.

-예시1-
const fruits = ['Apple', 'Banna', 'Cherry']

const b = fruits.map(function(fruit, index) {
return `${fruit}-${index}`
})

console.log(b) // ["Apple-0", "Banna-1", "Cherry-2"]
console.log(fruits) // ["Apple", "Banna", "Cherry"]

-예시2-
const fruits = ['Apple', 'Banna', 'Cherry'] 

const c = fruits.map(function(fruit, index) {
return {
   id: index,
   name: fruit
}
})

console.log(c) 

<출력>
  (3) [{…}, {…}, {…}]
0: {id: 0 name: "Apple"}
1: {id: 1 name: "Banna"}
2: {id: 2 name: "Cherry"}

-예시3-
const numbers = [1, 2, 3, 4]

const d = numbers.map(number => number < 3)

console.log(d) // [true, true, false, false]
console.log(numbers) // [1, 2, 3, 4]  
  

Array.prototype.filter

フィルタリング方法は、その配列内のすべての要素を呼び出し、パラメータとして渡されるコールバック関数を繰り返し呼び出す.

コールバック関数は、戻り値trueの要素のみを用いてフィルタリングし、新しい配列を生成し、

を返す.

ソースアレイは、

のままである.

const numbers = [1, 2, 3, 4]

const e = numbers.filter(number => number < 3)
console.log(e) // [1, 2]
console.log(numbers) // [1, 2, 3, 4]

Array.prototype.find

find()メソッドは、所与の判別関数を満たす最初の要素の値を返す.

は、配列内の要素を呼び出すときに引数に渡されるコールバック関数を呼び出すことによって、trueの値を返す要素を返す.(例1)これらの要素がない場合はundefinedを返す.(例2)

オブジェクトが

配列の要素である場合、方法(例3)

を使用することができる.

正規表現とともに使用できる(例4)

/^B/意味:Bで始まる(^)文字データを表す

/^B/.test(fruit)の意味:fruitというパラメータを使用してtestを記述し、正規表現の内容がfruitの内容と一致する場合はtrueまたはfalse

-예시1-
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);

console.log(found) // 12

-예시2-
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element < 5);

console.log(found) // undefined

-예시3-

const users = [
  {id:1, name: 'Lee'},
  {id:2, name: 'Kim'}, 
  {id:2, name: 'Choi'},
  {id:3, name: 'Park'}
  ]

const found1 = users.find(user => user.id === 2)

console.log(found1) // {id:2, name: 'Kim'}

-예시4-
const fruits = ['Apple', 'Banna', 'Cherry']

const ab = fruits.find(fruit => {
     return /^B/.test(fruit)
})

console.log(ab) // "Banana"

Array.prototype.findIndex

finIndexメソッドは、自分の配列の要素を呼び出すと、引数に渡されるコールバック関数を呼び出し、戻り値がtrueの場合、最初の要素のインデックスを返します.(例1)

コールバック関数の戻り値trueの要素が存在しない場合は、-1を返します.(例2)

-예시1-
const fruits = ['Apple', 'Banna', 'Cherry']

const cd = fruits.findIndex(fruit => {
     return /^C/.test(fruit)
})
console.log(cd); // 2


-예시2-
const fruits = ['Apple', 'Banna', 'Cherry']

const cde = fruits.findIndex(fruit => {
     return /^D/.test(fruit)
})
console.log(cde); // -1