[TIL 04]JavaScript基本メソッド

1.Arrayメソッド
1. pop, push

pop,pushの処理速度はunshift,shiftより速い.

pop
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

pop()メソッドは、最後の配列要素を除去し、その要素を返します.

空の配列でpop()が呼び出されると、未定義が返されます.

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

push
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push

push()メソッドは、配列の最後に1つ以上の要素を追加し、配列の新しい長さを返します.

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

2. shift, unshift

shift,unshiftの処理速度はpush,popより遅い.

shift
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

shift()メソッドは、配列から最初の要素を削除し、削除した要素を返します.

の空の配列の場合、定義されていない値が返されます.

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

unshift
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

unshift()メソッドは、新しい要素を配列の一番前に追加し、要素を追加した配列の全長を返します.

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

3. splice, slice

パッチは配列自体を変更しますが、sliceは配列自体を変更せず、希望する部分だけを返します.

splice
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

接合()メソッドは、配列内の既存の要素を削除、置換するか、新しい要素を追加することによって、配列の内容を変更します.

const numbers = [“1”, “2”, “3”, “4”];

console.log(numbers.splice(1)); // 1번째 인덱스부터 뒷요소 모두 삭제
// [“1”]
console.log(numbers.splice(1, 1)); // 1번째 인덱스부터 1개만 삭제
// [“1”, “3”, “4”]
console.log(numbers.splice(1, 2, “5”)); // 1번째 인덱스부터 2개 삭제 후 “5” 추가
// [“1”, “5”, “4”];

slice
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

slice()メソッドは、ある配列の開始から終了(終了を含まない)までの浅いコピーを新しい配列オブジェクトに返します.元の配列は変更されません.

slice(begin,end)、end-1に戻ります.

console.log(numbers.slice()); // 0번째 인덱스부터 모두 반환(전체 복사)
// [“1”, “2”, “3”, “4”]
console.log(numbers.slice(2)); // 2번째 인덱스부터 뒷요소 모두 반환
// [“3”, “4”]
console.log(numbers.slice(1,3)); // 1번째 인덱스부터 2번째 인덱스까지 반환
// [“2”, “3”]

4. split, join

は文字列->配列に分割され、joinは配列->文字列

に分割されます.
Split(Stringメソッド)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split

split()メソッドは、指定した区切り記号を使用してStringオブジェクトを複数の文字列に分割します.

つまり、

文字列を並べて返します.

const s = “abcd”;
console.log(s.split()); // [“abcd”]
console.log(s.split(‘’)); // [“a”, ”b”, ”c”, ”d”]

join
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

join()メソッドは、配列内のすべての要素を接続し、文字列を形成します.

joinは配列を文字列として返します.

const arr = [“a”, ”b”, ”c”, ”d”];
console.log(arr.join()); // “a,b,c,d”
console.log(arr.join(‘’)); // “abcd”

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

5. reverse
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
配列順序

を反転し、配列自体を変更して返す.

最初の要素は最後の要素になり、最後の要素は最初の要素になります.

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]

6. concat
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

concat()メソッドは、与えられた配列または値をパラメータとして既存の配列にマージすることによって、新しい配列を返します.既存のレイアウトは変更されません.

パラメータが渡された文字列を呼び出しメソッドの文字列に貼り付け、新しい文字列を返します.

const year = “2021”;
const month = “07”;
const day = “09”;

const result = year.concat(“/”, month, “/”, day);
console.log(result); // 2021/07/09

の既存のアレイ要素を使用して新しいアレイを作成するか、既存のアレイに要素を追加します.

// 예시 1
let arr = [1, 2];
console.log(arr.concat([3, 4])); // [1, 2, 3, 4]
console.log(arr.concat([3, 4], [5, 6, 7])); // [1, 2, 3, 4, 5, 6, 7]
console.log(arr.concat([3, 4], 5, 9, 11)); // [1, 2, 3, 4, 5, 9, 11]

7.インデックスOf(String、Array)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
与えられた値(要素)に一致する

文字列または配列の最初のインデックスを返します.

一致値(要素)

が存在しない場合は、-1を返します.

lastIndexOf()は0で始まる.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

8. includes
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

配列に特定の要素が含まれているかどうかを決定し、含まれているかどうかに基づいてtrue/falseを返します.

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

includeでは、ナビゲーションを開始する場所、インデックスを指定できます.

の開始インデックスが配列長以上である場合、falseが返されます.

開始インデックスは-1*arrayです.length以下の場合、配列全体が検索されます.

const arr = ['a', 'b', 'c'];

arr.includes('c', 3);   // false
arr.includes('c', 100); // false
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
arr.includes('a', -2); // false(-1 * arr.length 인 -3 보다 크므로)

9. sort
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
参考)https://hianna.tistory.com/409[昨日今日明日]

sort()メソッドは、配列内の要素を適切な位置に並べ替え、配列を返します.

デフォルトのソート順は、文字列のUnicode値に基づいています.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

arr.sort((a,b)=>a-b); // 오름차순 정렬

sort()には、ソート順序を定義する関数を追加できます.

関数がa,bの2つの要素をパラメータとして入力した場合、関数の戻り値が0未満の場合はaがbより先に、0より大きい場合はbがaより先に並べ替えられる.

0を返すと、aおよびbの順序は変更されません.

10. reduce
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

reduce()メソッドは、アレイ内の各要素に対して所与のreducer関数を実行し、結果値を返します.

で設定された初期値から、すべての配列にわたって値が巡回されます.

還元権利()は、末尾から回転する.

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

李杜塞関数には4つの因子がある.
計算機(acc)、現在値(cur)、現在インデックス(idx)、ソース配列(src)

11. map
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
arr.map(callback(currentValue[, index[, array]])[, thisArg])

currentValue:処理する現在の要素.
index:処理する現在の要素のインデックス.
array:map()呼び出しの配列.
thisArg:callbackを実行するときにこの値として使用します.

map()メソッドは、アレイ内の各要素に対して所与の関数を呼び出す結果を収集し、新しいアレイを返す.

配列の要素を所望の形状に変換して返します.

12. filter
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
arr.filter(callback(element[, index[, array]])[, thisArg])

要素:処理する現在の要素.
index:処理する現在の要素のインデックス.
array:filter()の配列を呼び出します.
thisArg:callbackを実行するときにこの値として使用します.

の条件を満たす要素を収集し、新しい配列に戻ります.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

13. forEach
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

で指定された配列の各要素に対して実行される.

forEach文ではcontinueは使用できません.でも見返りとしていいです.

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

2.String方法
1. repeat
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/repeat

string.repeat(count)を使用すると、countとして繰り返し貼り付けられる新しい文字列が返されます.

'abc'.repeat(-1);   // 범위 에러(반복 횟수는 무한대보다 작아야 하며, 최대 문자열 크기를 넘어선 안됨.)
'abc'.repeat(0);    // ''
'abc'.repeat(1);    // 'abc'
'abc'.repeat(2);    // 'abcabc'
'abc'.repeat(3.5);  // 'abcabcabc' (반복 횟수는 양의 정수여야 함. 정수 단위로 반복함.)
'abc'.repeat(1/0);  // 범위 에러

({ toString: () => 'abc', repeat: String.prototype.repeat }).repeat(2);
// 'abcabc' (repeat() is a generic method)

2. split
(文字列は配列-Arrayメソッドで説明)
3.インデックスOf(String、Array)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
与えられた値(要素)に一致する

文字列または配列の最初のインデックスを返します.

一致値(要素)

が存在しない場合は、-1を返します.

lastIndexOf()は0で始まる.

const str = "pineapple is sweet";
str.indexOf("apple"); // 4

4. replace
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replace

replace()メソッドは、あるモードに一致する部分またはすべての置換された新しい文字列を返します.

そのモードは、文字列または正規表現であってもよく、置換文字列は、文字列またはすべての一致する関数であってもよい.

モードが文字列の場合、最初の文字列のみが置き換えられ、元の文字列は変更されません.

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

console.log(p.replace('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"

const regex = /Dog/i;
console.log(p.replace(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?"

5. replaceAll
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

は、一致するすべてのアイテムが置換された新しい文字列を返します.

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

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

console.log(p.replaceAll('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?"

// global flag required when calling replaceAll with regex
const regex = /Dog/ig;
console.log(p.replaceAll(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"

3.その他
1. Math.floor
指定した数値と同じまたは小さい整数の最大数を返します.(整数!)2. Math.pow

Math.pow(base,指数)はbase^指数を返します.

// 제곱한 수를 나타내기
Math.floor(2**5); // 32
Math.pow(2, 5); // 32