Javascriptもうろおぼえなのに、ES6を学び始めました。
メモとして記録を残しておきます。
参考サイトはこちら、
http://es6-features.org
ES6勉強会パート1でございます。
定数
「一度定義したら、あとで変えられない」
っていう定数を作りたい場合、constを使います。
例はこちら
↓↓↓↓↓↓↓
const number = 1.52
ブロックスコープ変数
ブロックスコープってなんやねんっっっっっっっ
調べました。
まず、スコープについて理解する必要があるそうです。
一番わかりやすいのはこれかな？
スコープとは変数やメソッド，クラスなどが見える範囲のことです。では「見える」とはどういうことでしょうか？
「見える」とは，それらが「プログラミング上使える」ということです。変数であれば変数名を指定して値を読み書きでき，メソッドであれば呼び出して使うことができます。
引用元：第3回 スコープを意識したプログラミング―その1 スコープって何？：良いコ－ドへの道―普通のプログラマのためのステップアップガイド｜gihyo.jp … 技術評論社
次に、ブロックスコープってなんやねんて話ですが、スコープには「グローバルスコープ」「ローカルスコープ」「ブロックスコープ」があるそうです。
わかりやすいのはこのサイト
初心者のためのJavaScriptのスコープ - 大人になったら肺呼吸
このブロックスコープ変数は、「for文やwhile文の中にある変数で、その内部でしか機能しない変数」と解釈します。
ブロックスコープ変数には「let」を使います
const test = [1,2,3,4,5]
let x=0
for (let i =0; i<test.length; i++){ // このiもブロックスコープで縛られる。
let x += test[i]
}
ブロックスコープ関数
{}
この記号を使えば、その内部でしか使えない変数や関数が定義できる。
{
function test(){return 5}
console.log( test() === 5 ); // true;
{
function test(){return 8}
console.log( test() === 8 ); // true;
}
}
アロー関数
アロー関数は、無名関数を省略して記すやり方です。
const arrowFunction = (x) =>{
console.log(x);
}
thisの使い方が変わったらしいです。
調べてもわからない。。。難しいなこれ。
このサイトからコードを引用してきました。
アロー関数について[ES2015(ES6)][this][arguments][JavaScript]
const book = {
title: 'こころ',
getTitle:function(){
console.log( this.title ); //こころ
const getTitle2 = () => console.log( this.title ); //こころ
getTitle2();
}
}
こういうことらしいです。
2個目のthisはこれまで、undefinedでしたが、前のスコープを継承するため、「こころ」を取得します。
# 関数のデフォルトのパラメータ値
```js:defaultParam.js
function test(a, b =3, c=10){
return a + b + c
}
test(2) === 15
b=3とc=10は初期値として設定しているので、aの部分は自分で設定する必要がありますね。
だから、test(2)でaを2と設定して、2+3+10で15です。
レスト構文
引数を渡されただけ受け取るための仕組みです。
変数名の前に「...」をつけて表します。最後の引数にしか使えません。この「...」は次の「スプレッド構文」のやつとは違います。こっちはまとめて、あっちは展開（スプレッド）します。
───────
可変長引数の操作
可変長引数とは、特に個数が決められていない変数です。
...で表します。スプレッド演算子って呼びます。
function test (a, b, ...c) {
return (a + b) * c.length
}
test(5, 1, "test1", false, 15) === 54
この場合、aは5, bは1, cは"test1"とfalseと15を表します。
c.lengthは3になります(3個あるので)
スプレッド構文
var test1 = [ "test1", false, 15 ]
var test2 = [ 5, 1, ...test1, ...test1 ] // [ 1, 2, "test1", false, 15, "test1", false, 15 ]
var str = "yeah"
var chars = [ ...str ] // [ "y", "e", "a" "h" ]
var test3 = [1, 2, 3, 2];
var maximum = Math.max(...test3) // 3
関数の呼び出し、Arrayリテラル、オブジェクトリテラル（ECMAScript 2018）では、反復可能なオブジェクトの前に「...」を書くと、中身がそこで展開できます。
テンプレートリテラル
このサイトめっちゃわかりやすいです
JavaScript の テンプレートリテラル を極める！ - Qiita
以下のコードは引用です。こんな使い方もあるんですね！！！
引用元：http://es6-features.org/#StringInterpolation
var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
var message = `Hello ${customer.name},
want to buy ${card.amount} ${card.product} for
a total of ${card.amount * card.unitprice} bucks?`
function quux (strings, ...values) {
strings[0] === "foo\n"
strings[1] === "bar"
strings.raw[0] === "foo\\n"
strings.raw[1] === "bar"
values[0] === 42
}
quux `foo\n${ 42 }bar`
String.raw `foo\n${ 42 }bar` === "foo\\n42bar"
2進数と8進数
0b111110111 === 503
0o767 === 503
上が二進数で、
下が八進数です。
二進数は、0(ぜろ)+ b(ビー)を先頭につけます
八進数は、0(ぜろ)+ o(オー)を先頭につけます
正規表現
正規表現は、まとめるのしんどそうなので、
良さそうなサイトのリンクを貼っておきます
正規表現 - JavaScript | MDN
パート1はここで終わり
ES6の勉強会パート1はここまで！
また、勉強したら、パート2を書きます！