データ処理（配列、JSON）

配列の操作

1. 配列の長さ(lengthメソッドの操作)
2. for文で配列を回す
3. forEachメソッドで配列を回す
4. 多次元配列
5. 配列はオブジェクト。
6. 配列のプロパティ（enumerable属性）
7. 配列オブジェクトと配列の違い
8. 配列のイディオム

配列の長さ(lengthメソッドの操作)

js

const arr = [1, 2, 10];

//1.lengthメソッド
console.log(arr.length); //3

//length値の自動増分
arr[arr.length] = 20;
console.log(arr); //[1, 2, 10, 20]
console.log(arr.length); //4 自動でlengthの長さが増える
arr[100] = 100;
console.log(arr.length); //101

2. for文で配列を回す

js

const arr = [1, 2, 10];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
} 
//1 2 10

3. forEachメソッドで配列を回す

引数を3つ持ち、element、index値、aは配列オブジェクトを返す。

js

const arr = [1, 2, 10];

arr.forEach(function(element, index, a) {
  console.log(element, index, a);
});
//1 0 [1, 2, 10]
//2 1 [1, 2, 10]
//10 2 [1, 2, 10]

4.多次元配列

配列の中に配列をもつもの。

js

const arr = [1, [1, 10, 20]];

arr[1][2];
//20

5.配列はオブジェクト

Arrayオブジェクトで生成可能

js

//引数1つで数字だと、数字分の要素を持った配列になる
const arr = new Array(3);
console.log(arr); //[undefined, undefined, undefined]

//引数２つ以上だと、要素指定になる。
const arr2 = new Array(3, 5, 'foo');
console.log(arr); //[3, 5, 'foo'];

//オブジェクトのメソッド、配列の連結
let one = arr2.join('_');
console.log(one); //'3_5_foo'

6. 配列のプロパティ列挙（enumerable属性）

for in文で回す方法と、Object.getOwnPropatyNames();を使う場合

js

const arr = [1, 2, 10];

//forin文
for(let key in arr){
  console.log(key);
}
//"0" "1" "2"

//Object.keys 
let keys = Object.keys(arr);
console.log(keys);
//["0", "1", "2"]

//enumerable属性無視で列挙
keys = Object.getOwnPropertyNames(arr);
console.log(keys);
//["0", "1", "2", "length"]

7. 連想配列と配列の違い

連想配列のキーに、添字のように数値を割り当てると、これは配列になるのか？
結論は、連想配列は配列ではない

1.　Arrayクラスのメソッドがつかえない
2.　lengthがenumerabe属性ではない
3.　lengthの自動増分がない

js

const arr = ['zero', 'one', 'two'];
const fake_arr = {0:'zero', 1:'one', 2:'two', length:3};
arr[0]; //'zero'
fake_arr[0];  //'zero'

//1.Arrayクラスのメソッド
fake_arr.join('_'); //"fake_arr.join is not a function"

8. 配列のイディオム

js

//ソート
const arr = [1, 10, 2, 40, 7];
arr.sort(function(a, b) {
  return a - b;
});

//配列を使う文字列生成
let arr = [];
arr.push('<div>');
arr.push(Date());
arr.push('</div>');
const str = arr.join('');
"<div>Mon Sep 03 2018 21:22:36 GMT+0900 (日本標準時)</div>"

//joinの反対はstringクラスのsplit
str.split('');
//["<div>Mon", "Sep", "03", "2018", "21:25:23", "GMT+0900", "(日本標準時)</div>"]


//配列のコピー1(参照先が見えている)
const arr = [1, 5, 10];
const arr2 = arr;

arr2[0] = 123;
console.log(arr); //123 5 10;

//配列のコピー2（shollowコピー）
const arr = [1, 5, 10];
const arr2 = [].concat(arr);

arr2[0] = 123;
console.log(arr); //1 5 10;

//配列のコピー3（shallowコピー）
const arr = [1, 5, 10];
const arr2 = arr.slice(0,arr.length);

arr2[0] = 123;
console.log(arr); //1 5 10;

//フィルタ処理
const arr = ['zero', 'one', 'two', 'three', 'four'];

//文字を文字数に変換
const strNum = arr.map(function(e){ return e.length;});
console.log(strNUm); //[4, 3, 3, 5, 4]

//フィルターを通して条件に合うものだけを返す
const num = strNum.filter(function(e){ return e % 2 == 0; });
console.log(num);
//[4, 4]

イテレータ、ジェネレータ

詳しくはこちら
JavaScript の イテレータ を極める！

イテレータとは

「順番にイテレータリザルトを取り出すことのできるオブジェクト」

.next() メソッドを持つ こと
.next() を実行すると イテレータリザルトを返す こと

js

var iterator = {}; // イテレータ
iterator.next = function(){
    var iteratorResult = { value: 42, done: false }; // イテレータリザルト
    return iteratorResult;
};

.value プロパティ は、イテレータから取り出した 値（アイテム）
.done プロパティ は、イテレータから値を順番に取り出し終えたかどうかの 真偽値。取り出し終えたらtrueにする。

ES6では、配列はイテラブルなオブジェクトである。

js

//配列を列挙
var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
for(var e of obj) console.log(e);
//"A"
//"B"
//"C"

//keys()でキーを列挙
var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
for(var v of obj.keys()) console.log(v);
/*
  0
  1
  2
*/

//entries()で配列とキーのセット
var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
for(var v of obj.entries()) console.log(v);
/*
  [0, "A"]
  [1, "B"]
  [2, "C"]
*/

//strで文字列を列挙する
var str = "あいう";
for(var v of str) console.log(v);
/*
  "あ"
  "い"
  "う"
*/

ジェネレータ

ジェネレータとは、イテレータ を強力にサポートするもの。

ジェネレータ を作って .next() を実行すると、最初の yield が出てくるまで関数が実行されます。

js

function* gfn(){
    var a = yield 0;
    yield* [1, a, 5];
}

var g = gfn(); // ジェネレータを作った。この時点ではまだ関数の中身は実行されない

// g.next() を実行すると、関数の中身が順番に実行される
console.log( g.next() ); //  { value: 0, done: false }
console.log( g.next(3) ); // { value: 1, done: false }
console.log( g.next() ); //  { value: 3, done: false }
console.log( g.next() ); //  { value: 5, done: false }
console.log( g.next() ); //  { value: undefined, done: true }

JSON

JSONとは、Javascriptのリテラル表記をベースにしたデータ・フォーマット形式。
オブジェクトはJavascriptオオブジェクトと同じだと考えて良い。

現実のプログラミングで多い操作は、JSON文字列とJavaScriptオブジェクトの相互互換。

js

var s = '{"x":1, "y":2, "val":"footbar"}'; //JSON文字列
var obj = JSON.parse(s);
console.log(obj.x);
//1

const b = JSON.stringify({x:1, y:2, val:'footbar'}); //オブジェクト
//"{'x':1,'y':2,'val':'footbar'}"