Javascript 配列とオブジェクト

Pythonはこちら。
Python 配列（List, Tupple, Dictionary, Set）と要素へのアクセス

1. 配列の宣言
①配列コンストラクタの例
　var array1 = new Array('Tuna', 'Chair', 'Ant');
②配列リテラルの例 ||　<- 通常は、こちらの定義の仕方
var array1 = ['Tuna', 'Chair', 'Ant'];　

配列を操作してみる。
//配列では、forEach(),filter(),map(),reduce()などが使える。Objectでは使えない。

◆要素の表示・取得
　 <script type="text/javascript">
　 var array = ['Tuna', 'Chair', 'Ant'];
　 var data = [　
    　["Tuna", " Fish", "You Can eat!"],
      ["Chair", "Furniture", "Can't eat!" ],
      ["Ant", "Insect", ""],
      ];
function display(){
document.getElementById("001").innerHTML = array[1]; // 表示： Chair

document.getElementById("002").innerHTML = data[1]; // 表示： Chair,Furniture,Can't eat!
document.getElementById("003").innerHTML = data[1][2]; // 表示：Can't eat!
document.getElementById("004").innerHTML = data[1,2]; // 表示： Ant,Insect,(想定外の結果?)
document.getElementById("005").innerHTML = data[2][1];// 表示： Insect
document.getElementById("006").innerHTML = data[2,1]; // 表示： Chair,Furniture,Can't eat!,(想定外の結果?)
    }
display();
</script>

◆要素の追加
1. 先頭に追加 - unshift
var array = ['b', 'c'];
array.unshift('a');

2. 末尾に追加 - push　// Pyrhonのappend()に相当
var array = ['a', 'b'];
array.push('c');

3. 指定した位置に一つ以上追加 - splice
var array = ['a', 'b', 'c'];
array.splice(1, 0, 'A'); // 二番目に挿入
console.log(array); // ['a', 'A', 'b', 'c']

var array = ['a', 'b', 'c'];
array.splice(2, 0, 'A', 'B'); // 三番目に複数挿入

要素の削除
配列の先頭を削除して詰める。

var array = ['a', 'b', 'c'];
array.shift();
console.log(array); // ['b', 'c']

配列の先頭にundefinedを代入して、先頭を削除して詰めません。
var array = ['a', 'b', 'c'];

array[0] = void 0; // void 0 によりundefinedを代入できます。
console.log(array); // [undefined, 'b', 'c']

末尾を削除する - pop
var array = ['a', 'b', 'c'];
　array.pop();
console.log(array); // ['a', 'b']

指定した位置から一つ以上の値を削除 - splice
var array = ['a', 'b', 'c'];
array.splice(1, 1); // 二番目から一つ削除
console.log(array); // ['a', 'c']

var array = ['a', 'b', 'c'];
array.splice(1, 2); // 二番目から二つ削除
console.log(array); // ['a']

例）

--2次元配列 (Multidimensional Array)

--連想配列

数字の要素番号（インデックス）の代わりに文字列をキーとして指定できる配列
　（一般に辞書と呼ばれるものと同じ）

①連想配列のサンプル

　var array = { apple:10, banana:20, melon:30, grape:40}

　｛｝で括る。 valueは、数値はそのまま、文字列は " " で括る。

let keys = Object.keys(array)
console.log(keys)
#output:["apple", "banana", "melon", "grape"]

let vals = Object.values(array)
console.log(vals)
#output: [10, 20, 30, 40]

let entries = Object.entries(array)
console.log(entries)
#output:
[["apple", 10],["banana", 20],["melon", 30],["grape", 40]]
#Object.メソッドの結果は配列として返ってくるとことがミソ。
なので、返り値には配列の要領で各要素にアクセスできる。
console.log(entries[0]) //["apple", 10]
console.log(entries[0][0]) // apple
console.log(entries[0][1]) // 10

②多次元連想配列の長さ（=要素数=キー数)
Object.keys(office).length;で取得。

======================================
let office ={employee: 3,
location: "Tokyo",
rent : 300}
let test = Object.keys(office).length;
-------------------------------------------------------------------------
console.log(test) // output : 3

======================================
let office ={asia:{employee: 3,
　　　　　location: "Tokyo",
　　　　　　　　　rent : 300
　　　　　　　　　}
　}
let test = Object.keys(office).length;
-------------------------------------------------------------------------
console.log(office)//output : asia:{employee: 3, location: "Tokyo", rent: 300}
console.log(office.asia.employee)//output : 3
console.log(test)//output : 1

③多次元連想配列へのアクセス

//output :

キー：2020-01-22T00:00:00Z
値：5
キー：2020-01-23T00:00:00Z
値：6
:
キー：2020-01-29T00:00:00Z
値：7

*こうやってLoopして、リストに入れて順番で取り出すという形になる。

var date = {"timeline": {
"2020-01-22T00:00:00Z": 1,
"2020-01-23T00:00:00Z": 2,
"2020-01-24T00:00:00Z": 3,
}}

var number=[]
for( var item in date["timeline"] ) {
number.push(date["timeline"][item]);
}
console.log("number.length is " + number.length)
last_num = Object.keys(date["timeline"]).length;
console.log("Last num is" + last_num)

//Output

number.length is 3
Last num is3

★★全てのvalueをとって、操作する。

(sample)Object.values()で値を一気に配列で取得して、新しい配列を操作するのがミソ

let sample_obj ={
0:{a:"1",b:"2",c:"3",d:"4"},
1:{z:"10",y:"20",x:"30",w:"40", v:"50"},
};

console.log( Object.keys(sample_obj).length) //output:2

all_values=[]

for( let i=0; i< Object.keys(sample_obj).length; i++){
console.log(Object.values(sample_obj[i]));
#Output
valueを配列の形で一気に取得できます。
　　　

Array(4)

0: "1"
1: "2"
2: "3"
3: "4"

all_values.push(Object.values(sample_obj[i]))
}

console.log(all_values)
　
＃output:
0: (4) ["1", "2", "3", "4"]

1: (5) ["10", "20", "30", "40", "50"]

var latest_num_sum = 0
for(let i =0; i < all_values.length; i++){
console.log(all_values[i].length);　//Output: 4と5です。
latest_len = all_values[i].length-1
　　 // 最期のvalueを取得して合算します。
latest_num_sum +＝ parseInt(all_values[i][latest_len])
console.log(latest_num_sum)
};
console.log(latest_num_sum)// output: 54

★★配列同士の足し算。

let array =[
[0,1,2,3,4,5],
[1,2,3,4,5,2],
[2,3,4,5,3,3],
[3,4,5,6,5,5],
];

x_values=[]
x=0
array_value_len = array[0].length

for (let i=0; i<array_value_len; i++){
for (let k=0; k<array.length; k++){
console.log('--k loop is--'+ k)
console.log('--i loop is--'+ i)
x += array[k][i]
console.log(x)
}
x_values.push(x)
x=0
}

console.log(x_values)

Output:
0: 6
1: 10
2: 14
3: 18
4: 17
5: 15

☆オブジェクト

複数のpropertyとmethodがまとまったもの。

Property例： url, documentElement

Method例：write, appendChild, createElement

定義の仕方

例）

var traffic_light = {

blue: "go",

yellow: "slow down",

red: "stop"

}

console.log(traffic_light.blue);

//変数traffic_lightに入っているオブジェクト内のプロパティblue:の値　“go”　を呼び出し

</script>

let zoo ={
mammals:["horse","whale","bison","lion",],
amphibians:["salamander","frog","toad"],
reptiles:["turtle","crocodile","snake","lion"],
fish:["shark","trout","seahorse","eel","tuna"]
};

console.log(zoo.fish); //output:(5) ["shark", "trout", "seahorse", "eel", "tuna"]

◆keyの一覧表示

for (let item in zoo){
console.log(item)
}

//output:

mammals

amphibians

reptiles

fish

◆要素の取得

for (let item in zoo){
for(let k=0; k <zoo[item].length; k++){
console.log(zoo[item][k]);

}}

//output:
horse
whale
bison
lion.....

参考）

いい記事書いてますね。
①　配列とオブジェクトでデータをまとめる
http://www.atmarkit.co.jp/ait/articles/1011/29/news109.html

②2次元配列について
http://javascript.pc-users.net/foundation/array.html

プログラムを独学する時のメモページ

☆☆ 新着記事 ☆☆

2018年9月12日水曜日