配列

@serverSerrverlesskiy

順序付けられたコレクションを格納するために、配列Arrayと呼ばれる特別なデータ構造があります。

Storage

'Array'は、1番目、2番目、3番目の要素などのデータの順序付けられたコレクションです。存在する。たとえば、ユーザー、製品、サイト要素などのリストを格納する必要があります。

創作

create

空の配列を作成するには、2️⃣次の2つのオプションがあります:

let arr = new Array(5)
// new Array(5)-指定された長さの要素なしで配列を作成します（このようにアクセスすることはできません。
let arr = []

2️⃣構文の第二のバージョンは、ほとんどの場合、使用されています :

Live Editor

function learnJavaScript() {
  let fruits = ['アップル', 'オレンジ', 'プラム']

  return fruits.toString()
}

function learnJavaScript() {
  let fruits = ['アップル', 'オレンジ', 'プラム']

  return fruits.toString()
}

Result

配列要素には、ゼロから始まる番号が付けられます0️⃣。

角括弧でその番号を指定することで要素を取得できます :

Live Editor

function learnJavaScript() {
  let fruits = ['アップル', 'オレンジ', 'プラム']

  return fruits[0]
}

function learnJavaScript() {
  let fruits = ['アップル', 'オレンジ', 'プラム']

  return fruits[0]
}

Result

🖊 ️要素を置き換えることができます:

fruits[2] = '梨' // 今 ["アップル", "オレンジ", "梨"]

...または、既存の配列に新しいものを追加します :

Live Editor

function learnJavaScript() {
  let fruits = ['アップル ', 'オレンジ ', 'プラム ']
  fruits[2] = '梨 '
  fruits[3] = 'レモン ' // 今 ["アップル", "オレンジ", "梨", "レモン"]

  return fruits
}

function learnJavaScript() {
  let fruits = ['アップル ', 'オレンジ ', 'プラム ']
  fruits[2] = '梨 '
  fruits[3] = 'レモン ' // 今 ["アップル", "オレンジ", "梨", "レモン"]

  return fruits
}

Result

長さ

配列要素の総数は、その'に含まれています。length'プロパティ:

Live Editor

function learnJavaScript() {
  let fruits = ['アップル', 'オレンジ', 'プラム']

  return fruits.length
}

function learnJavaScript() {
  let fruits = ['アップル', 'オレンジ', 'プラム']

  return fruits.length
}

Result

'Length'プロパティは、配列が変更されると自動的に更新されます。正確には、これは配列要素の数ではなく、最大の数値インデックスに1を加えたものです。

Update

たとえば、大きなインデックスを持つ唯一の実数要素は、配列に可能な最大の長さを与えます :

Live Editor

function learnJavaScript() {
  let fruits = []
  fruits[155] = 'アップル'

  return fruits.length // 156
}

function learnJavaScript() {
  let fruits = []
  fruits[155] = 'アップル'

  return fruits.length // 156
}

Result

通常、この方法では配列を使用しないことに注意してください。

Lengthプロパティに関するもう一つの興味深い事実は、それが上書きされる可能性があるということです。

手動で増やすと、興味深いことは何も起こりません。しかし、それを減らすと、配列は短くなります。この例から理解できるように、このプロセスは不可逆的です :

Live Editor

function learnJavaScript() {
  let arr = [1, 2, 3, 4, 5]

  arr.length = 2 // 二つの要素に短縮
  //console.log( arr )  // [1, 2]

  arr.length = 5 // 私たちは戻ります length 
  //console.log( arr[3] )  // undefined: 値が復元されていません!

  return '実際の配列は短縮されています:' + arr
}

function learnJavaScript() {
  let arr = [1, 2, 3, 4, 5]

  arr.length = 2 // 二つの要素に短縮
  //console.log( arr )  // [1, 2]

  arr.length = 5 // 私たちは戻ります length 
  //console.log( arr[3] )  // undefined: 値が復元されていません!

  return '実際の配列は短縮されています:' + arr
}

Result

したがって、配列をクリアする最も簡単な方法は次のとおりです – arr.length = 0 .

要素のタイプ

Storage

この配列には、数値、ブール値、文字列、オブジェクト、または整数関数など、任意の型の要素を格納できます⚙️:

例えば :

Live Editor

function learnJavaScript() {
  let arr = [
    'アップル',
    { name: 'ニキータ' },
    true,
    function () {
      return 'こんにちは'
    }
  ]
  // インデックス1{object}を持つ要素を取得し、そのプロパティを読み取ります
  let x = arr[1].name // 名前ニキータ
  // インデックス3（関数）を持つ要素を取得して実行します
  let result1 = arr[3] // 関数自体
  let result2 = arr[3]() // 'こんにちは'

  return '第三のインデックスを持つ第四の要素の値: ' + result2
  // + '. 関数自体: ' + result1
}

function learnJavaScript() {
  let arr = [
    'アップル',
    { name: 'ニキータ' },
    true,
    function () {
      return 'こんにちは'
    }
  ]
  // インデックス1{object}を持つ要素を取得し、そのプロパティを読み取ります
  let x = arr[1].name // 名前ニキータ
  // インデックス3（関数）を持つ要素を取得して実行します
  let result1 = arr[3] // 関数自体
  let result2 = arr[3]() // 'こんにちは'

  return '第三のインデックスを持つ第四の要素の値: ' + result2
  // + '. 関数自体: ' + result1
}

Result

注意を払う result1 = arr[3] テキストを含む関数 ⚙️, しかし、 result2 = arr[3]() 実行された関数の結果 ⚙️ - () 私たちはそれを起動しています.

メソッド `push/pop`

binarycode

Стек - 配列をデータ構造として使用するバリアント。

それは2つのタイプの操作を支えます 2️⃣:

push 最後に➕要素を追加します.

Add

pop 最後の要素を削除します➖ .

Delete

したがって、新しい要素は常に"終わり"から追加または削除されます.

積み重ねの例は通常ピラミッドである:新しいリングは上に置かれ、上から余りに取られる。

'キュー'は、配列の最も一般的な使用法の1つです。コンピュータサイエンスの分野では、これは要素の順序付けられたコレクションの名前です。

配列の末尾を操作する方法:

push

Add to

配列の最後に要素を追加します➕ :

Live Editor

function learnJavaScript() {
  let fruits = [' アップル', ' オレンジ']

  fruits.push(' 梨')

  return '配列: ' + fruits // アップル, オレンジ, 梨
}

function learnJavaScript() {
  let fruits = [' アップル', ' オレンジ']

  fruits.push(' 梨')

  return '配列: ' + fruits // アップル, オレンジ, 梨
}

Result

pop

Delete

配列から最後の要素を削除し、それを返します➖ :

Live Editor

function learnJavaScript() {
  let fruits = [' アップル', ' オレンジ', ' 梨']

  let delFruits = fruits.pop() // "pear"を削除し、それを変数に返します delFruits

  return '要素が削除されました = ' + delFruits + '. 配列は残ります: ' + fruits // アップル, オレンジ
}

function learnJavaScript() {
  let fruits = [' アップル', ' オレンジ', ' 梨']

  let delFruits = fruits.pop() // "pear"を削除し、それを変数に返します delFruits

  return '要素が削除されました = ' + delFruits + '. 配列は残ります: ' + fruits // アップル, オレンジ
}

Result

配列の先頭を操作する方法:

start

shift

配列から最初のものを削除し、それを返します:

delete

Live Editor

function learnJavaScript() {
  let fruits = ['アップル ', 'オレンジ ', '梨 ']
  fruits.shift() // リンゴの取り外し

  return fruits
}

function learnJavaScript() {
  let fruits = ['アップル ', 'オレンジ ', '梨 ']
  fruits.shift() // リンゴの取り外し

  return fruits
}

Result

unshift

配列の先頭に要素を追加します➕:

Plus

Live Editor

function learnJavaScript() {
  let fruits = ['アップル ', 'オレンジ ', '梨 ']
  fruits.unshift('アプリコット ')

  return fruits
}

function learnJavaScript() {
  let fruits = ['アップル ', 'オレンジ ', '梨 ']
  fruits.unshift('アプリコット ')

  return fruits
}

Result

メソッド push と unshift 彼らは追加することができます ➕ 一度にいくつかの要素 :

Live Editor

function learnJavaScript() {
  let fruits = ['アップル']

  fruits.push('オレンジ', '梨')
  fruits.unshift('パイナップル', 'レモン')

  return '配列内 ' + fruits.length + ' 要素. ' + ' 配列: ' + fruits // ["パイナップル", "レモン", "アップル", "オレンジ", "梨"]
}

function learnJavaScript() {
  let fruits = ['アップル']

  fruits.push('オレンジ', '梨')
  fruits.unshift('パイナップル', 'レモン')

  return '配列内 ' + fruits.length + ' 要素. ' + ' 配列: ' + fruits // ["パイナップル", "レモン", "アップル", "オレンジ", "梨"]
}

Result

配列の内部構造

cupboard

配列はオブジェクトの特別な亜種です。プロパティへのアクセスに使用される角括弧 arr[0] – これは基本的に通常の構文ですキーアクセス, どのように obj[key], どこの役割で obj 私達は持っています arr, そして、キーとして-数値インデックス。

配列は、順序付きのデータコレクションとプロパティを操作するための特別なメソッドを提供するため、オブジェクトを拡張します length. しかし、基礎はまだオブジェクトです。

JavaScriptでは、配列はオブジェクトであるため、オブジェクトのように動作することを覚えておく必要があります。

たとえば、配列は参照によってコピーされます :

Live Editor

function learnJavaScript() {
  let fruits = [' レモン']

  let copy = fruits // 参照によってコピーされます（2つの変数は同じ配列を参照します）

  copy.push(' 梨') // 配列は、一つのコマンドで参照によって変更されます

  return '1配列: ' + fruits + ' 2配列: ' + copy // レモン, 梨 - 今、二つの要素
}

function learnJavaScript() {
  let fruits = [' レモン']

  let copy = fruits // 参照によってコピーされます（2つの変数は同じ配列を参照します）

  copy.push(' 梨') // 配列は、一つのコマンドで参照によって変更されます

  return '1配列: ' + fruits + ' 2配列: ' + copy // レモン, 梨 - 今、二つの要素
}

Result

実際に配列を特別なものにするのは、その内部表現です。 JavaScriptエンジンは、連続したメモリ領域に配列要素を次々に格納しようとします。配列を非常に高速に動作させる他の最適化方法があります。

しかし、配列を"データの順序付けられたコレクション"として扱うのをやめ、それを通常のオブジェクトとして使用し始めると、それらのすべてが有効

たとえば、技術的には次のことができます:

let fruits = [] // 空の配列の作成

fruits[99999] = 5 // 必要な配列の長さをはるかに超える冗長インデックスを持つプロパティの作成

fruits.age = 25 // 任意の名前のプロパティを作成する

これは、配列がオブジェクトに基づいているため可能です。私たちはそれに任意のプロパティを割り当てることができます。

配列の誤った使用のためのオプション！

数値以外のプロパティの追加 (インデックス test), 例えば: arr.test = 5
"穴"の作成, たとえば、次のように追加します arr[0], その後 arr[1000] (それらの間には何もありません)
配列を逆の順序で入力します。: arr[1000], arr[999] とそう.

配列は、注文されたデータを操作できる特別な構造体と見なされる必要があります。任意のキーが必要な場合は、通常のオブジェクトの方が適している可能性があります。{}.

有効性

Fast

メソッド push/pop 迅速に実行され、メソッド shift/unshift – ゆっくりと.

配列の先頭よりも配列の末尾で作業する方が速いのはなぜですか？実行中に何が起こるか見てみましょう:

fruits.shift() // 最初の要素を最初から削除する

番号0の要素を取得して削除するだけでは十分ではありません。また、残りの要素に再番号を付ける必要があります。

操作 shift 3つのアクションを実行する必要があります:

インデックス0の項目を削除する

Delete

すべての要素を左に移動し、それらに番号を付け直し、1を0に、2を1に置き換えますとそう.

Move

プロパティの更新 length

配列に含まれる要素が多いほど、それらを移動するのにかかる時間が長くなり、より多くのメモリ操作が必要になります。

そして、削除についてはどうですか pop? 彼は何も動かす必要はありません。配列の最後にある要素を削除するには、メソッド pop インデックスをクリアし、値を減らします length. 残りの要素は同じインデックスで残ります。

fruits.pop() // 最後から1つの要素を削除する

方法 pop 移動を必要としません。それが非常に迅速に実行される理由です。

この方法は同様に機能します push.

要素を反復処理する

Object

配列要素を反復処理する最も古い方法の1つはループです for( ) デジタルインデックスによる :

Live Editor

// prettier-ignore
function learnJavaScript() {
  let result = ''
  let arr = ['アップル', 'オレンジ', 'キウイ']
  
  for (let i = 0; i < arr.length; i++) // を介して要素を通過します for( )
  result += arr[i] + ' '

  return result // アップル, オレンジ, キウイ
}

// prettier-ignore
function learnJavaScript() {
  let result = ''
  let arr = ['アップル', 'オレンジ', 'キウイ']
  
  for (let i = 0; i < arr.length; i++) // を介して要素を通過します for( )
  result += arr[i] + ' '

  return result // アップル, オレンジ, キウイ
}

Result

しかし、配列の場合、別のループオプションも可能です, for..of :

Live Editor

function learnJavaScript() {
  let result = ''
  let fruits = ['アップル', 'オレンジ', 'プラム']

  for (let fruit of fruits) {
    // を介して値を渡します `for..of`
    result += fruit + ' '
  }
  return result // アップル, オレンジ, プラム
}

function learnJavaScript() {
  let result = ''
  let fruits = ['アップル', 'オレンジ', 'プラム']

  for (let fruit of fruits) {
    // を介して値を渡します `for..of`
    result += fruit + ' '
  }
  return result // アップル, オレンジ, プラム
}

Result

サイクル for..of 現在の要素の数にアクセスすることはできませんが、その値にのみアクセスできますが、ほとんどの場合、これで十分であり、また短くなります。

多次元配列

Matryoschka

配列には、配列でもある要素を含めることができます。これは、作成するために使用することができますたとえば、ストレージ用の多次元配列行列:

Live Editor

function learnJavaScript() {
  let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ]

  return matrix[1][1] // 5, 中心的な要素
}

function learnJavaScript() {
  let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ]

  return matrix[1][1] // 5, 中心的な要素
}

Result

合計

remember

配列は、順序付けされた要素のセットで動作するように設計された特別なタイプのオブジェクトです。

// 角括弧 (通常は)
let arr = [item1, item2...]

// new Array (ごくまれに)
let arr = new Array(item1, item2...)

チャレンジ new Array(number) 作成します指定された長さの配列ですが、要素はありません。

プロパティ length 配列の長さを反映します。

次の操作を使用して、配列を双方向キューとして使用できます:

push(...items) 配列➕の末尾に項目を追加します。
pop()配列の最後にある➖要素を削除し、それを返します。
shift() удаляет 配列の先頭にある➖要素を削除し、それを返します。
unshift(...items) 配列➕の先頭に項目を追加します。

配列要素を反復処理するには:

for (let i=0 i<arr.length i++) – 古いブラウザとの互換性、最速で動作します。
for (let item of arr) – 現代の構文要素値に対してのみ(インデックスへのアクセスはありません)。
for (let i in arr) – 配列には絶対に使用しないでください！

問題?

Problem

に書き込む Discord または電報 чат, そしてまた私達のを予約購読して下さい новости

質問

Question

配列はです。..

"データの順序付けられたコレクション"を持つオブジェクトの亜種
内部機能
「順序付けられていないデータのコレクション」を持つオブジェクトの亜種

空の配列が作成されています:

"データの順序付けられたコレクション"を持つオブジェクトの亜種
内部機能
「順序付けられていないデータのコレクション」を持つオブジェクトの亜種

配列の長さは、プロパティによって決定できます:

pop()
push()
length

配列は要素を格納できます:

任意のタイプ
数値
文字列

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

push()
pop()
shift()

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

pop()
shift()
unshift()

あなたがこのレッスンをどれだけ学んだかを理解するために、テストを受けてください мобильном приложении このトピックに関する私たちの学校。

Sumerian school

リンク集

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Dmitriy K.}

_{Dmitriy Vasilev}
💵

_Resoner2005
🐛 🎨 🖋

_Navernoss
🖋 🐛 🎨

創作​

長さ​

要素のタイプ​

メソッド push/pop​

配列の末尾を操作する方法:​

push​

pop​

配列の先頭を操作する方法:​

shift​

unshift​

配列の内部構造​

有効性​

要素を反復処理する​

多次元配列​

合計​

問題?​

質問​

リンク集​

Contributors ✨​

創作

長さ

要素のタイプ

メソッド `push/pop`

配列の末尾を操作する方法:

push

pop

配列の先頭を操作する方法:

shift

unshift

配列の内部構造

有効性

要素を反復処理する

多次元配列

合計

問題?

質問

リンク集

Contributors ✨