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

[JavaScript]配列を操るメソッドたち(基礎編)

背景

JavaScriptを扱うことが多いので、配列を扱うメソッドの備忘録として

追加する

.unshift()

配列の先頭に要素を追加する。

example.js
var array = ['red', 'green', 'blue'];

array.unshift('yellow');

console.log(array); //['yellow', 'red', 'green', 'blue'] 

.push()

配列の最後に要素を追加する。

example.js
var array = ['red', 'green', 'blue'];

array.push('yellow');

console.log(array); //['red', 'green', 'blue', 'yellow'] 

削除する

.shift()

配列の先頭の要素を削除する

example.js
var array = ['red', 'green', 'blue'];

array.shift();

console.log(array); //['green', 'blue'] 

.pop()

配列の最後の要素を削除する

example.js
var array = ['red', 'green', 'blue'];

array.pop();

console.log(array); //['red', 'green'] 

結合する

.concat()

複数の配列を一つに結合させる。

example.js
var array1 = ['red', 'green', 'blue'];
var array2 = ['yellow', 'magenta', 'purple'];
var array3 = array1.concat(array2);

console.log(array3); 
//['red', 'green', 'blue', 'yellow', 'magenta', 'purple']; 

[...]スプレッド演算子

スプレッド演算子を使って、配列を展開するして合体させる

example.js
var array1 = ['red', 'green', 'blue'];
var array2 = ['yellow', 'magenta', 'purple'];
var array3 = [...array1, ...array2];

console.log(array3); 
//['red', 'green', 'blue', 'yellow', 'magenta', 'purple']

.join()

引数で指定した文字で要素が結合される。引数を省略した場合はコンマ「 , 」で結合される。

example.js
var array1 = ['2020', '01', '23'];
var today = array1.join('/');
console.log(today); //'2020/01/23'

var strArray = ['a', 'b', 'c'];
var str = num.join();
console.log(str); //'abc'

検索する

.indexOf()

引数に「探したい要素」を指定すると、その要素のインデックスが返ってくる。同じ要素がその配列に複数存在する時は、最初のインデックスが返ってくる。

example.js
var country = ['jpn', 'usa', 'uk'];
var index = country.indexOf('jpn');
console.log(index); // 0

var country2 = ['jpn', 'usa', 'uk', 'jpn'];
var index2 = country2.indexOf('jpn');
console.log(index2); // 0

.lastIndexOf()

引数に「探したい要素」を指定すると、その要素のインデックスが返ってくる。同じ要素がその配列に複数存在する時は、最後のインデックスが返ってくる。

example.js
var country2 = ['jpn', 'usa', 'uk', 'jpn'];
var index3 = country2.lastIndexOf('jpn');
console.log(index3); // 3

.includes()

引数に「探したい要素」を指定すると、その要素が存在するか返ってくる。

example.js
var tools = ['pen', 'eraser', 'note'];
var isIncludes = tools.includes('eraser');
console.log(isIncludes); // true

順番を変える

.reverse()

配列の順番を反転させる

example.js
var words = ['hop', 'step', 'jump'];
words.reverse();
console.log(words); // ['jump', 'step', 'hop']

Fisher-Yatesのシャッフル

配列をシャッフルする 参考

example.js
var num = [0, 1, 2, 3, 4, 5];
var len = num.length;

for ( var i = len-1; i >= 0; i-- ) {
  var randIndex = Math.floor( Math.random() * (i + 1) ); 
  [num[i],num[randIndex]] = [num[randIndex],num[i]];
}

console.log(num); // [2, 0, 5, 4, 1, 3] 

まとめ

基本的なメソッドはざっとこんな感じだと思います。もう少し難しい応用的なやつはまた別記事で描こうと思います。

Why not register and get more from Qiita?
  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
No 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
ユーザーは見つかりませんでした