arrayについて

17486 ワード
基礎 JavaScript JavaScript テキストリンク

よく使うarrayですが、改めて勉強します。

array(配列)

arrayとはデータ（プリミティブまたはオブジェクトのどちらか）が順序付けされて集まったものです。

const testArray = [1, 2, 3, 4, 5];

要素を取り出す

配列の先頭の値

配列の末尾の値

const lastNum = testArray.length - 1; 
console.log(testArray[lastNum]); //配列の最後の値

値を追加する(push,unshift)

  • 末尾に値を追加する
testArray.push(6);

  • 先頭に追加する
testArray.unshift(0);

値を消す(shift,splice,pop)

  • 先頭の値を消す
console.shift(testArray);

  • 特定の値を消したい場合
array.splice(2, 1); //配列の2番目の値を1つ削除する

  • 末尾の値を消す
testArray.pop();

map(要素ひとつひとつを取り出す)

arrayのオブジェクトはmap関数を持っています。

const testArray = [1, 2, 3, 4, 5];
testArray.map((elem ,index) => elem);
// [1, 2, 3, 4, 5]

↑要素ひとつひとつを取り出して、最後はarrayを返してくれます。

確認

arrayで返す時に文字列を追加することもできる

[1,2,3].map((elem, index) => {
    const key = `property${elem}`; //一度keyという名前で文字列を追加しから
    return {[key]: elem} //arrayに返す！
});

確認

注意
一度変数に入れずにarrayに追加しようとするとerrorになりました。

some(true / falseを返す)

some()は、配列のいずれかの要素が指定した条件を満たしているか否かをtrue / false で返すメソッドです。
1つでも条件を満たしている要素があれば、trueを返します。
任意の値が含まれていたら即座に処理が終わります。

[1,2,3,4,3].some(elem => elem === 3)  // ３がきたらtrueを返し、即処理終了

// もっと基礎的に書くと...
const test = [1,2,3,4,5];
const exists =test.includes(3); //3がtestの配列の中にあればtrue!
console.log(exists); // => true

↑これで実行するとtrueが返ってくる

やってみた

どの値にも一致しなかった場合は、最後まで比較したあと、falseを返します。

これのメリットは、左から数えて1番最初の3が来た時にすぐに処理が終わることです。

パフォーマンスを意識したいときなどによく使います。

includes(true / falseを返す)

includesは特定の要素が配列に含まれているかどうかをtrue / false で返します。

const test = [1,2,3,4,5];

test.includes(5); // ture
test.includes(10); //false

やってみた

slice(指定した部分の配列の一部をコピーして、新しい配列を返す )

slice() メソッドは begin から end まで選択された配列の一部をシャローコピーして、新しい配列オブジェクトを返します (end は含まれません)。元の配列は変更されません。

const test = ['a', 'b', 'c', 'd', 'e'];

const sliceArr = test.slice(0, 1); // ['a']
const sliceArr_2 = test.slice(0, 2); // ['a', 'b']
const sliceArr_3 = test.slice(2, 3); // ['c']

やってみた

fillter(条件に一致した値のみを抽出する)

配列からある特定の条件下で条件に一致した値のみを抽出して、配列を返します。
一致しなかったものは配列には含まれません。


const test = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const filterArr =test.filter(elem => elem > 1);
console.log(filterArr ); //[2, 3, 4, 5, 6, 7, 8, 9, 10]

// もっと基礎的に書くと...
const fillterArr_2 = test.filter(function( value ) {
    return value < 5; //5よりも小さい数値だけを抽出
});
console.log(fillterArr_2 ); //[1, 2, 3, 4,]

やってみた

連想配列の配列の要素を条件にする場合

const arr2 = [
    { id: 1, name: 'test', height: 160},
    { id: 2, name: 'testさん', height: 170},
    { id: 3, name: 'test君', height: 180},
    { id: 4, name: 'testちゃん', height: 190}
];

// heightが１８０以上を抽出したい場合
const filterArr2 = arr2.filter(elem => elem.height >= 180); // id: 3、４が取れるはず

やってみた