個人的なメモ「js基礎」

変数

let : 上書き可能
const : 上書き不可

型	説明
Number	数値
String	文字列
Boolean	真偽値
Undefined	未定義
Null	空の値
Symbol	一意の値

変数の宣言に型を指定する必要はない。(動的型付け言語)
型の調べ方

let test = 'test'
console.log(typeof test)
>> String

関数

関数の定義1

function 関数名(引数) {
    処理
    return 戻り値
}

function sum(num1, num2) {
    result = num1 + num2
    return result
}
console.log(sum(10, 5));
>> 15

関数の定義2

const sub = function(num1, num2) {
    result = num1 - num2
    return result
}
console.log(sub(10, 5))
>> 5

メソッド・プロパティ

let first_name = 'Otani Jiro';
console.log(first_name.toUpperCase());
>> OTANI Jiro

console.log(first_name.length);
>> 10

console.log(first_name.split(' '));
>> ['OTANI', 'Jiro']

配列

const arry = [1, 2, 3, 4, 5];
console.log(arry);
>> [1, 2, 3, 4, 5]

# constで宣言しても要素の値を変えることができる
arry[0] = 100
console.log(arry)
>> [100, 2, 3, 4, 5]

# 新しく配列を作ることはできない
arry = []
>> main.js:7 Uncaught TypeError: Assignment to constant variable.

# 配列で使えるメソッド
arry.push(100)
console.log(arry)
>> [100, 2, 3, 4, 5, 100]

基本的なメソッド

メソッド	説明
push	要素を末尾に追加
unshift	要素を先頭に追加
pop	末尾の要素の削除と取得
shift	先頭の要素の削除と取得
map	mapの引数に関数を指定。指定した関数の第一引数に配列の要素、第二引数にインデックスが入る

###スプレット構文

const arr = [10, 20, 30]
console.log(arr)
>> [10, 20, 30]

// スプレット構文「...」を使うと配列が展開される
console.log(...arr)
>> 10, 20, 30

// スプレット構文を使った配列の結合、コピー
const arr1 = [1, 2, 3]
const arr2 = [10, 20, 30]
const arr4 = [...arr2, ...arr3]
console.log(arr4)
>> [1, 2, 3, 10, 20, 30]

// 配列をイコールで代入し、コピーする場合
const arr5 = arr1
arr[0] = 100
console.log('arr5: ' + arr5)
console.log('arr1: ' + arr1)
>> arr5: [100, 2, 3]
>> arr1: [100, 2, 3]
// arr1の方の値も変わる(メモリのアドレスをコピーしている)

// スプレット構文を使ったコピー
const arr6 = [...arr1]
arr6 = 100
console.log('arr6: ' + arr6)
console.log('arr1: ' + arr1)
>> arr5: [100, 2, 3]
>> arr1: [1, 2, 3]
// arr6の値だけ変更できる

# オブジェクト
~~~javascript
const car = {
    name: 'シエンンタ',
    price: 1000000,
    spec: {model: '2017/07, weight: 1300'},
    TaxIncluded: function() {
        console.log(this.price + (this.price * 0.1))
    }
};

console.log(car.name);
>> シエンタ

console.log(car.spec.model);
>> 2017/07

car.TaxInclude()
>> 1100000

繰り返し処理 for

const arry = [1, 2, 3, 4, 5]
for(let i = 0; i < arry.length; i++) {
    console.log(arry[i])
}
>> 1
>> 2
>> 3
...

# for in
for(let i in arry) {
    console.log(i);
}
>> 0
>> 1
>> 2
...


# for of
for(let v of arry) {
    console.log(v);
}
>> 1
>> 2
>> 3
...

条件分岐 if

const fruits = [
    {
        name: 'apple',
        price: 50 
    },
    {
        name: 'banana',
        price: 80
    },
    {
        name: 'orange',
        price: 30
    }
]

let money = 50

for(let fruit of fruits) {
    if(money === fruit.price) {
         console.log('ちょうど買える: ' + fruit.name)
    }
    else if(money >= fruit.price){
        console.log('買える: ' + fruit.name)
    }
    else {
        console.log('買えない: ' + fruit.name)
    }
}

>> ちょうど買える: apple
>> 買えない: banana
>> 買える: orange

条件式に==を使うと型変換が行われ比較される
if(100 == '100') => true
条件式に===を使うと型も比較の対象になる
if(100 === '100') => false

三項演算子

構文: 条件 ? trueの場合 : falseの場合

const num = 130;
const result = num > 100 ? 100以上です。 : 100以下です。
console.log(result)
>> 100以上です。
}

# アロー関数
関数を省略して書ける
~~~javascript
# 普通の関数
const hello(name) = function() {
    console.log('hello ' + name)

# アロー関数
# 引数が一つの場合
const hello = name => console.log('hello ' + name)
# 引数が複数またはデフォルト値がある場合
const hello = (name='Smith', age) = > console.log('hello ' + name)
# 処理が複数行ある場合
const hello = (name='Smith', age) => {
    console.log('hello ' + name)
    console.log('age: ' + age)
}

forEach

const arry = [1,2,3,4,5]

# for文の場合
for(let i = 0; i < arry.length; i++) {
    console.log(i, arry[i], arry)
}

# forEachの場合
arry.forEach((val, i, ary) => console.log(val, i, ary))

短く記述することができる

reduceメソッド

const arry = [1,2,3,4,5]

arry.reduce(function(accu, curr) {
    console.log(accu, curr)
    return accu + curr
})

>> 1 2
>> 3 3
>> 6 4
>> 10 5

reduceを使うと引数の渡した関数の戻り値がaccuに格納される。
分かりずらかったので自分でそれっぽいコードを書いてみた。

const arry = [1,2,3,4,5]

function reduce(arr, callback, def=0) {
    accu = def

    for(let v of arr){
        if(!accu){
            accu = v
        }
        else {
            curr = v
            accu = callback(accu, curr)
        }
    }
}

const callback = ((accu, curr) => {
    console.log(accu, curr)
    return accu * curr
})

reduce(arry, callback)

第二引数にデフォルト値を設定できる。
デフォルト値を設定する状況

# デフォルト値なし
const str = 'animation'
const strAryy = str.split('')

const result = strAryy.reduce((accu, curr) => {
    return accu + '<' + curr + '>'
})

console.log(result)
>> a<n><i><m><a><t><i><o><n>

# デフォルト値あり
const result = strAryy.reduce((accu, curr) => {
    return accu + '<' + curr + '>'
}, "")

console.log(result)
>> <a><n><i><m><a><t><i><o><n>

リストに格納した文字を一文字づつ取り出して処理をする場合、第一引数で渡した関数の処理が最初の要素には適用されない。
このような場合にデフォルト値を渡すことで最初の要素にも処理が適用される。