blog

javascriptの配列

配列 1, 配列の作成 2, 配列の検出 3, スタックとキュー 4, 並べ替えメソッド, 元の配列の変更, slice() による新しい配列の作成, No...

Jun 5, 2020 · 9 min. read
シェア

javascript 

var arr = ['a','b','c']
console.log(arr.toString()) // a,b,c
console.log(arr.valueOf()) // ["a", "b", "c"]
console.log(arr) // ["a", "b", "c"]
console.log(arr.join('--')) // a--b--c
var arr2 = [undefined,'b',null] 
console.log(arr2.toString()) // ,b,

Array.isArray()は、渡された値が配列であるかどうかを判定するために使用されます。

"

配列を作成する基本的な方法は2つあります。

  1. 配列リテラルの使用 [] var arr = [2,3］

配列の「最後の項目」のインデックスは常に「長さ-1」なので、次の「新しい項目の位置は長さ」です。

"

Array.isArray() は、渡された値が配列であるかどうかを判定するために使用します。

"

二つの方法

  • Array.isArray(arr) ECMAScript5 新しいメソッド
  • Array.isArray(arr) ECMAScript5 新メソッド

両者の違いは、2つ以上のグローバル環境が存在する場合、前者は2つ以上のArrayコンストラクタを持つことです。

"

配列、スタック、キュー

"

「スタック: **後入れ先出し** LIFO

  1. スタックの挿入と削除は、スタックの最上位でのみ行われます。
  2. arr.push(value)は配列の末尾に追加し、変更後の配列の長さを返します。
  3. arr.push() 配列の末尾への追加

「キュー： **先入れ先出し** FIFO

  1. arr.push()は配列の末尾に追加します。
  2. arr.shift(value) 配列の最初の項目を削除し、その項目を返します。

「シフトとプッシュでは、キューはリストの最後に追加され、リストの前から削除されます。

  1. arr.unshift(value) は、任意の項目を配列の先頭に追加し、新しい配列の長さを返します。
  2. reverse() 配列の直接反転

「unshiftとpopは一緒に働きます。つまり、配列の先頭に追加し、末尾から削除するということです。

"

4.並び替えメソッド、元の配列の変更

"

配列は "reverse()" と "sort()"で直接ソートできます 。

  • reverse() は、配列を直接反転します。
  • sort() には比較関数を指定できます。デフォルトでこの関数が渡されない場合は、 配列の項目を文字列で比較します。
  • arr.sort("function" { return a-b}) 値は正しい昇順であることが保証され、文字列は変わりません！
"
var arr = [1,2,4,22,23,14,'a','c','b']
# localeCompare() メソッドは、文字列がソート順の前か後か、あるいは与えられた文字列と同じかを示す数値を返す。
arr.sort((a, b) => {
 if( typeof a == 'string' && typeof b == 'string'){
 return b.localeCompare(a)
 }else {
 return b - a
 }
})
console.log(arr) // [ 23, 22, 14, 4, 2, 1, 'c', 'b', 'a' ]
console.log(arr.reverse()); // [ 'a', 'b', 'c', 1, 2, 4, 14, 22, 23 ]

localeCompare()

5.ロケート方法

"
  • "indexOf(value, location)" 配列の先頭からさかのぼって検索します。
  • "lastIndexOf(value, location)" 配列の最後から検索。
  • 引数 value 探すアイテム、location 始点となる場所、indexOf デフォルトは書かれていなければ 0、lastIndexOf デフォルトは arr.lenght-1
  • 両者とも、配列の中で見つかればその位置を返し、見つからなければ -1 を返します。
"

6. オペレーション・メソッド concat (), slice () による新しい配列の作成。

"
  • 「concat()" 現在の配列に基づいて新しい配列を作成します。
  • "現在の配列の1つ以上の項目に基づいて新しい配列を作成します。
    • 引数が 1 つだけの場合は、"引数で指定した位置から現在の配列の末尾までのすべての項目を返す" となります。
    • 引数が 2 つの場合は、「開始位置と終了位置の間の項目を返しますが、 終了位置の項目は返しません」。
    • パラメータに負の数がある」場合は、「配列の長さ + 対応する位置を決定するための数」を使用します。
  • "スプライス" 「削除、挿入、置換
    • "削除"、2つのパラメータ："削除する最初のアイテムの位置"、"削除するアイテムの数"。
    • 「挿入"、3つのパラメータ："開始位置"、"削除するアイテムの数"、"挿入するアイテム"。
    • every() // 各項目が true の場合に true を返します
"
# concat()
var arr = [1,2,3]
var x = arr.concat('2') 
console.log(arr,x); // [ 1, 2, 3 ] [ 1, 2, 3, '2' ]
# slice()
var arr2 = ['a','b','c',1,3,4]
var item = arr2.slice(1)
console.log(item,arr2); // [ 'b', 'c', 1, 3, 4 ] [ 'a', 'b', 'c', 1, 3, 4 ]
var item2 = arr2.slice(0,3)
console.log(item2,arr2); // [ 'a', 'b', 'c' ] [ 'a', 'b', 'c', 1, 3, 4 ]
# splice() ** **
var arr3 = ['a','b','c']
var item3 = arr3.splice(0,2)
console.log(item3,arr3); // [ 'a', 'b' ] [ 'c' ]
# splice() ** **
var arr4 = ['a','b','c']
var item4 = arr4.splice(0,2,'zan','asd')
console.log(item4,arr4); // [ 'a', 'b' ] [ 'zan', 'asd', 'c' ]
# splice() ** **
var arr5 = ['a','b','c']
var item5 = arr5.splice(0,1,'zan','666')
console.log(item5,arr5); [ 'a' ] [ 'zan', '666', 'b', 'c' ]

配列、反復処理メソッド

"

"JavaScript標準組み込みオブジェクトArray".

  • every() // すべての項目が真なら真を返します。
  • filter() // true の項目の配列を返します。
  • forEach() // 配列の各項目に対して指定した関数を実行します。
  • some() // ある項目が真なら真を返します
  • some() // 項目のいずれかが真なら、真を返します。
"

Array.isArray()

"

  • reduce() は、配列を最初の項目から順に走査します。

  • reduceRight() は、配列の最後の項目から順に走査します。

    どちらも配列のすべての項目を繰り返し処理し、最終的な戻り値を作成します。

    reduce()

"
var total = [ 0, 1, 2, 3 ].reduce(
 ( acc, cur ) => acc + cur, 0 // acc アキュムレータは、コールバックの戻り値を、処理中の配列の要素に累積する。
);
# 二次元配列を一次元に変換する
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 ( acc, cur ) => acc.concat(cur),
 []
); // flattened is [0, 1, 2, 3, 4, 5]
# 配列内の各要素の出現回数を数える
let names = ["Lily", "Barry", "Dendi", "Boogie", "Lily"];
let nameNum = names.reduce((pre, cur) => {
 if (cur in pre) { 
 //pre におけるcur属性の存在
 pre[cur]++;
 } else {
 pre[cur] = 1; //preオブジェクトにcurプロパティを追加し、値1を代入する。
 }
 return pre;
}, {}); //reduce(), ES6配列のサブサンプション・メソッド、初期値は空のオブジェクトに設定される
console.log(nameNum); //{Barry: 1,Boogie: 1,Dendi: 1,Lily: 2 }
# オブジェクトを属性で分類する
var people = [
 { name: 'Alice', age: 21 },
 { name: 'Max', age: 20 },
 { name: 'Jane', age: 20 }
];
function groupBy(objectArray, property) {
 return objectArray.reduce(function (acc, obj) {
 var key = obj[property];
 if (!acc[key]) {
 acc[key] = [];
 }
 acc[key].push(obj);
 return acc;
 }, {});
}
var groupedPeople = groupBy(people, 'age');
// { '20': [ { name: 'Max', age: 20 }, { name: 'Jane', age: 20 } ],
// '21': [ { name: 'Alice', age: 21 } ] }
# 配列の重複排除
var myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
var myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
 if (accumulator.indexOf(currentValue) === -1) {
 accumulator.push(currentValue);
 }
 return accumulator
}, [])
console.log(myOrderedArray);

その他のよく使われる

"
  • flat() メソッドは、配列を指定した深さまで再帰的に走査し、走査した部分配列のすべての要素を新しい配列で返します。var newArray = arr.flat([depth]) Infinity を使用すると、任意の深さの入れ子配列を展開することができます。 未定義や null は削除されません。
  • includes()メソッドは、配列に指定した値が含まれているかどうかを判定し、含まれていればtrueを、そうでなければfalseを返します。"文字列と文字の比較は大文字と小文字を区別します。"
  • Array.from() メソッドは、配列のようなオブジェクトあるいはイテレート可能なオブジェクトから配列の新しいシャローコピーインスタンスを作成します。
  • Array.isArray() は、渡された値が Arrayであるかどうかを判定するために使用します。
"
# flat()
var arr = [1, 2, , undefined, null, 4, 5];
arr.flat(); // [1, 2,undefined, null, 4, 5];
// for of ループは配列のNULLを削除できない。
const forFlat = (arr = [], depth = 1) => {
 const result = [];
 (function flat(arr, depth) {
 for (let item of arr) {
 if (Array.isArray(item) && depth > 0) {
 flat(item, depth - 1)
 } else {
 // 空の要素を削除し、未定義の要素を追加する
 item !== void 0 && item !==null && result.push(item);
 }
 }
 })(arr, depth)
 return result;
}
console.log(forFlat(arr)); // [ 1, 2, 4, 5 ]
# includes()
(function() {
 console.log([].includes.call(arguments, 'a')); // true
 console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');
# Array.from()
console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]
# 配列の重複排除とマージ
function combine(){ 
 let arr = [].concat.apply([], arguments); //重複排除のない新しい配列
 return Array.from(new Set(arr));
} 
var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n)); 
# Array.isArray instanceofよりもArrayの方が優れている.isArrayiframeを検出できる.
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]
// Correctly checking for Array
Array.isArray(arr); // true
// Considered harmful, because doesn't work though iframes
arr instanceof Array; // false

記事一覧

JavaScriptの基本概念

JavaScriptのデータ型

JavaScriptの基本型と参照型

javascriptの実行環境とスコープ

javascriptによるゴミ収集メカニズム

javascriptの配列

Read next

同僚にMySQLを再帰的にクエリする方法を聞かれた。

最近、データベースの再帰的なクエリを含むビジネスシナリオを行う際に。同社はOracleを使用し、我々はすべて知っているように、Oracleは再帰クエリの機能が付属していますので、実装は特に簡単です。 だから、この記事があります。 Oracleでは、再帰的なクエリを達成するために、前の構文で接続することから始まります。 プレス...

Jun 5, 2020 · 9 min read

AVCSオンライン地図サービス

Jun 5, 2020 · 7 min read

JVM 5-ヒープとガベージ・コレクション・アルゴリズム

Jun 5, 2020 · 7 min read

Android用3D-Touch ShortcutはAlipayのようなデスクトップショートカットの設定を実装している。

Jun 4, 2020 · 5 min read

Kubernetesコンフィグ・マルチクラスター管理ツール

Jun 4, 2020 · 7 min read

コンソールの印刷がプロジェクトのコード実行時間にどのような影響を与えるか。

Jun 4, 2020 · 1 min read