TIL 5 |[JavaScript]ES6

7612 ワード
arrow function JavaScript テキストリンク
ES6、ESはECMA Scriptの略です.JavaScriptを標準化および正規化するために作成します.ES 10までES6를 쓴다. ES 6を主に利用するとコードに毒性が増す.

Arrow function


これはES6の代表的な関数の使用方法である.function表現法に比べて文法が短く、自分のthis, arguments, superやnew.targetをバインドしません.矢印関数は常に익명です.この関数は、メソッド以外の関数に最適な場所を示します.ジェネレータとしては使用できません.
const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]

パラメータ付き関数

//ES5
const getName = function(name) {}

//ES6
const getName = (name) => {}
const getName = name => {}

💡 TIP


因子が하나の場合は括弧생략이 가능하지만、因子が두 개の場合は생략할 수 없다.

コールバック関数への応用

var numbers = [1, 4, 9];
var oddArr = numbers.filter( x => (x % 2) !== 0 );
console.log(oddArr); // [1, 9]

💡 TIP


矢印関数thisは、外部関数に近づくために使用される.

活用コード

let a = {
	sound: "k",
  	soundPlay: function () {
		setTimeout(() => {
			console.log(this.sound);
		}, 1000);
    }
}

a.soundPlay();
// 1초 후에 "k"

template literals


back tick


stringの作成には따옴표が使用されました.
const name = '개발자';
ES6からback tickで包むことができます.
const name = `개발자`;
backtickで包んで、中はstringです.변수를 넣어서 표현 
const name = '개발자';
const hi = `안녕하세요. 저는 ${name} 입니다.`;
( ${} 을 활용! )を使用すると、back tickをより便利に使用することができる.
let detail = `안녕
나는 
개발자`;

console.log(detail);

string methods


ES 6では、stringで特定のstringを検索する際に使用されるindexOfの代わりに、3つの方法が出現する.次の名前は直感的で、機能を身につけやすいです.
  • startsWith
  • endsWith
  • includes 
    • const email = '[email protected]';

console.log(email.startsWith('tmdckszm')); // true
console.log(email.endsWith('com')); // true
console.log(email.includes('@gmail')); // true
    ソース
    https://ko.javascript.info/arrow-functions-basics
    https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
    あなたの受信トレイを飼い慣らすGmailのヒント
    StatefulWidget|を作成して再レンダリングします.