Help us understand the problem. What is going on with this article?

もうJavaScriptの配列操作で悩みたくない人生を生きるために

JavaScriptで配列を操作する時、覚える文法が多くて嫌になりませんか?(だよねーまじ面倒だわーという声が聞こえる・・・)
今日は1日かけて配列を復習したので、備忘録を兼ねてまとめていきます!!

配列とは

let arr1 = [1,2,3,4,5];

let arr2 = [
{name:"takashi",age:12},
{name:"kiyoshi",age:22},
];

console.log(ar1[3]); //4
console.log(ar2[0]); //{name:"takashi",age:12}

簡単にいうと、変数の塊のことを指す。
私レベルの雑魚エンジニアになると、[ ]で囲むところを、{ }で囲んで、ずっと間違いに気がつかなかったりする・・・。

空の配列を作る

let arr = new Array();
console.log(arr); //[]

空の配列に同要素を詰め込んでみる

let arr = new Array(5).fill("hoge");
console.log(arr); //[ 'hoge', 'hoge', 'hoge', 'hoge', 'hoge' ]
//new Array内で新しく作る要素の数を指定。fillはそれらを全て"hoge"に変更するおまじない。

追加したり減らしたり

let arr = [1, 2, 3, 4, 5];
arr.push(6); //一番後ろに6を追加
arr.pop(); //一番末尾を切り出し
console.log(arr); //[ 1, 2, 3, 4, 5 ]
arr.unshift(0); //一番前に0を追加
arr.shift(); //一番先頭を切り出し
console.log(arr); //[ 1, 2, 3, 4, 5 ]

配列を合体する

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

順番を変える

let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); //[ 5, 4, 3, 2, 1 ]
arr.sort();
console.log(arr); //[ 1, 2, 3, 4, 5 ]

要素の切り取り

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.slice(3);
console.log(arr2); //[ 4,5] 前から選んだ番号を含む以降を切り取り
let arr3 = [1, 2, 3, 4, 5];
let arr4 = arr3.slice(-2);
console.log(arr4); //[ 4,5 ]後ろから数えた番号を含む以降を切り取り

要素の削除や追加

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.splice(1, 4, 11, 111, 111); //2から4つ削除
console.log(arr); //[ 1, 11, 111, 111 ] //第三引数以降の数が削除された後に代入
console.log(arr2); //[ 2, 3, 4, 5 ] //切り取った値はこちらに

spliceは第一引数に変更を開始する場所、第二引数に削除する要素の個数、第三引数より後に追加する要素を指定する。

要素を見つける

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
console.log(arr.indexOf(1)); //0
console.log(arr.lastIndexOf(1)); //8
console.log(arr.lastIndexOf(10)); //-1

indexOfは前からカウント、lastIndexOfは後ろからカウント。存在しない場合は、-1が返ってくる。

要素の変換

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(e => e * 2);
console.log(arr2); //[ 2, 4, 6, 8, 10 ]

2倍するところは、アロー関数使ってます。

要素のフィルタリング

let arr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
let arr2 = arr.filter(e => e < 50);
console.log(arr2); //[ 10, 20, 30, 40 ] 50より小さい数だけを抜き出し。

ここでもアロー関数使ってます。

配列全体を操作

let arr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
let arr2 = arr.reduce((a, e) => (a += e), 0);
console.log(arr2); //550

今回は第一引数(初期値を末尾で指定、今回は0)にarrの要素が代入されたxを全て足していく処理。

配列についてまとめてみました!
今以上に使いこなして、強強エンジニアを目指していきたいと思います!!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away