学ぶ現代のJavaScript!第1部

ES 6への簡単な導入から始めましょう.
ES 6は、Javascriptに基づいており、JSがES 6上で主要な実装として記載されているベース言語であるecmascript 6を表します.
ES 6またはECMAスクリプト2015は、現代的かつ不可欠なJavaScript機能を示すECMAの組織によって導入された.
十分な理論!ES 6を学びましょう.
第1部では、特定のトピックの説明を含んでいます.

var/let/const

私は簡単にこれらの3つのトピックを説明しているので、私はすでにそれらについて書かれている場合は、もっと知っている必要があると思うなら、私はあなたのlet/var/constについての私の記事をお勧めします.here

物

この

矢の機能

配列.map ()

var

varはJavaScriptの変数キーワードのうちの1つで、関数にスコープされています.

レット

それが定義されたブロックにVARキーワードがスコープされていなかったので、ES 6によって導入されました.したがって、LETキーワードは、変数が定義されるブロックの範囲内でスコープされるべきであるところで使用されます.

コンスト

contはletに似ていますが、const値を再表示できません.

オブジェクト

オブジェクトがキー値ペアのセットであることを知っているかもしれません.
ここでは、オブジェクトというオブジェクトを定義します.私はいくつかのキーペアを追加しました、最初のものはコースです、そして、我々はそれをストリングにセットしました、そして、第2のものは機能です.オブジェクト内の関数がある場合、その関数をメソッドと呼びます.

const myObject = 
{
course : "ES6",
learn : function() {}
};

ES 6では、オブジェクト内の関数を定義するための明確でシンプルな構文があります.私は研究と呼ばれる別の関数を定義しましたが、ここでは私はコロンや関数のキーワードを入力する必要はありません.最後に、3つのメンバー、1つのプロパティと2つのメソッドを持つオブジェクトがあります.
これらのメンバーにアクセスする方法について話し合いましょう.

const myObject = 
{
course : "ES6",
learn : function() {},
study() {}
};

おそらく、あなたは、オブジェクトの重要な値のペアにアクセスできるドット表記法に慣れています.例えばMyObject.学習する.また、括弧記法を使用してオブジェクトのメンバーにアクセスする別の方法もあります.

const myObject = 
{
course : "ES6",
learn : function() {},
study() {}
};

myObject.course;

myObject['course'] = "JavaScript";

ブラケットメソッドを使用する理由は、いくつかのプロパティやメソッドがアクセスしようとしていることを知りません.説明しましょう
イメージターゲットはフォーム内の入力フィールドであり、ユーザー値に基づいてオブジェクト内のメンバーにアクセスします.それで、我々はブラケットの中で目標を通過しなければなりません、そして、その入力フィールドが「目標値」の値を持つならば.
これは、オブジェクト内のプロパティやメソッドの動的アクセスを呼び出します.

const myObject = 
{
course : "ES6",
learn : function() {},
study() {}
};

myObject.course;

const target = "course";

myObject[target.value] = "JavaScript";

この

これはJavaScriptの特別なキーワードですが、この問題は常にJS開発者を混乱させることです.なぜなら、他のプログラミング言語でこれと同じ動作をしないからです.
ここではオブジェクトを持っています.このオブジェクトの内部の機能は学習します.これが何かを見るために、ログ(これ)?
MyObjectを呼びましょう.learn ().

const myObject = 
{
course : "ES6",
learn() {
console.log(this)
},
};

myObject.learn();

コンソール結果です!これはオブジェクトのリファレンスを返していることがわかります.

しかし、ここではJavaScriptの奇妙な点があります.私の言いたいことを見ましょう!
varキーワードを使用して学ぶ変数を定義し、myobjectに設定します.学ぶ.あなたは、私が学習の前で括弧を保っていないのを見ます.コンソールしましょう.ログインしてください.

const myObject = 
{
course : "ES6",
learn() {
console.log(this);
},
};

myObject.learn();

const learn = myObject.learn;

console.log(learn);

ここでコンソールの結果が表示されます.

今、私が学ぶ関数を呼ぶなら、私はオブジェクトの参照を得る代わりに未定義になるでしょう、これは異なってふるまいます.
この関数の値は関数を呼び出す方法に依存します.関数をオブジェクトメソッド( myobject . learn () )と呼びますと、オブジェクトの参照を常に与えますが、オブジェクト( Learn () )の外に呼び出すと、ウィンドウのグローバル変数を与えます.ウィンドウオブジェクトの代わりに、私は未定義になりました、それは、制限モードがデフォルトで有効になっているからです.
制限モードでは、JSコードを保護する方法で実行します.

どのように解決するには?
ここでは、JavaScript関数がオブジェクトであることを知っていなければなりません.ここでは、Bindメソッドを選択し、MyObjectを渡した後、これは私のオブジェクトの新しいリファレンスを返します.Bindメソッドを使用すると、永続的に値を設定できます.

const myObject = 
{
course : "ES6",
learn() {
console.log(this);
},
};

myObject.learn();

const learn = myObject.learn.bind(myObject);

console.log(learn);

矢印関数

ES 6関数を宣言するためのよりきれいで適切な方法を導入し、これらの2つの関数を比較しましょう.
矢印関数という関数で、四角形という関数を書き直します.JavaScript関数を矢印関数メソッドに変換するには、関数のキーワードを削除する必要があります.リターンがただ一つの行であるならば、あなたは復帰と巻きブレースを削除することができます.
番号としては、矢印の関数を読むことができます番号の数に行く.

// Normal function
const square = function(number){

return number * number;

}

//Arrow function
const square = number=> number * number;

配列。map ()

ES 6はマップと呼ばれる新しいメソッドを導入しました.そして、それはアイテムのリストを提出するのに用いられました.mapメソッドの使い方について説明しましょう.
ここでは、4つのアイテムを持つコースと呼ばれる配列があります.今、私は、各項目について「私は{コースを学んだ」という文が必要だと想像しましょう.
この配列のmapメソッドを呼び出し、コールバック関数を使用する必要があります.これは、配列内の各項目に対して、mapメソッドがこの関数を呼び出すことを意味します.この配列の各項目を受け取り、新しい項目を返します.そこで、関数はコースを取り、このような新しい文字列を返します.このメソッドは新しい配列を返します

const courses = ['PHP', 'Python', 'JS', 'Node'];
const learnedCourses = courses.map(function(course){
return 
' I learned '+ course;

})

このコードをもっと明確にしましょう!
関数を矢印関数に変換しました.

関数のキーワードを削除します.

1つのパラメータなら、括弧を取り外すことができます.

パラメータの後に(=>)を入れます.

私たちはコードの1行だけを持っています.

const courses = ['PHP', 'Python', 'JS', 'Node'];
const learnedCourses = courses.map(course => ' I learned '+ course )

ここでテンプレート文字列についてdiscusをしましょう.シングルクォートとダブルクォートを使用する代わりに、`` }文字を使うことができます.それを定義し、途中で我々はコースを動的にレンダリングすることができます.$とカーリーブレースを加えて、括弧の中で、それは引数プレースホルダです、あなたが中に入れたものは、動的にレンダリングされます.これはテンプレートリテラルと呼ぶものです.
...編集者の誤用により、私はコードを入力できませんでした.

それはパート1のためのすべてです🎉.
役に立つと思います.
つながりましょう