参考文献:Do it reactionプログラミング仕様

Intro

現在、業界では主に反応剤が使われていると聞いていますが、実際にはこれほど使われるとは思いませんでした.私はフロントを志望したことがありませんが、生存のために、私がしなければならないことはフロントであることを認めなければなりません.一生懸命勉強します.
しばらくPSを中心に位置決めが行われていました.今から、主に技術を宣伝します.

テンプレート文字列

var string1 = 'Hello';
var string2 = 'Nice to meet you';
var result = string1 + ' ' + string2

var product = {name : 'chicken', price : '18000'};
var message = product.name + '의 가격은' + product.price + '입니다.';

上のコードは、一般的なjavascript文字列の使用方法です.
特に後者は、C++の中でもそのようなことをたくさんしています.かなり不便です.

var string1 = 'Hello';
var string2 = 'Nice to meet you';
var result = '${string1} ${string}';

var product = {name : 'chicken', price : '18000'};
var message = '${product.name} 의 가격은 ${product.price} 입니다.';

Pythonでformat関数を使ったことがある人は似たような一面を発見するかもしれません.ES 6は、このような形式の文字列処理をサポートする.

展開演算子

var array1 = ['1','2'];
var array2 = ['3','4'];

この2つの配列を組み合わせるには、いろいろな方法がありますが、大体2つの方法があります.
1.値を1つずつ取り、大きな配列を形成します.
2.concatを使用します.
しかし、ES 6では、これを行う必要はなく、以下の操作を実行するだけです.

var result = [...array1, ...array2];

... つまり、展開演算子を使用すると、データ全体を挿入できます.

かへんへんすう

var num = 1;

既存のjavascriptはvarによって変数を宣言します.もちろん、今でもそうはできません.しかし、他の言語のように、可変(可変)変数と不変(不変)変数を宣言できるキーワードが追加されました.

let num = 2;
const num2 = 1;

letは可変変数、constは不変変数です.letは往々にして私たちが知っている変数と同じである.
constは不変変数です.ただし、値を再割り当てすることはできません.値を変更できます.埋め込み関数で値を変更できます.

const data = [];
data.push(1);//[1]
data.pop();//[]
data.push(2);//[2]
data.splice(0,0,0);//[0,2]

可変内蔵関数整合性内蔵関数push(...items)concat(...items)splice(s,c,items)slice(0,s,s),concat(...items,slice(s+c)pop()slice(0,len-1)shift(1)slice(1)

カテゴリ

実際、既存のJavaScriptはそれほど馴染みがなく、最初はかなり理解しにくい.Javaに詳しいなら、ES 6文法はそんなに難しくありません.

class shape{
	static create(x, y) {return new Shape(x, y);}
  	name = 'shape';
	constructor(x, y){
    	this.move(x, y);
    }
	move(x, y){
    	this.x = x;
      	this.y = y;
    }
	area(){
    
      return 0;
    }
}

既存のjavaとほぼ似ています.これを既存の文法に変えたら?

function Shape(x, y) {
  this.name = 'Shape';
  this.move(x, y);
}
Shape.create = function(x, y) {
  return new Shape(x, y);
};
Shape.prototype.move = function(x, y) {
  this.x = x;
  this.y = y;
};
Shape.prototype.area = function() {
  return 0;
};

もちろんjavaのようにフィールド変数を単独で宣言することはありません.

class Circle extend Shape{
	constructor(x, y, radius){
    	super(x, y);
      	this.radius = radius;
    }
  	area(){
    	if(this.radius === 0) return super.area();
      	return this.radius * this.radius;
    }
}

継承はこのように体現されている.

矢印関数

var add = (first, second) =>{
	return first + second;
};
var add = (first, second) => first + second;
var addAndMultiple = (first, second) => ({add : first + second, multiply : first * second});

この宣言関数の利点は次のとおりです.
1.ループ構造においてステップ関数は生成されない.

function addNum(num){
	return function(value){
    	return num + value;
    }
}

var addNum = num => value => num + value;

コールバック関数のこの範囲で発生するエラーを回避するためにbind処理は不要である.

class MyClass{
	value = 10;
	constructor(){
    	var add = function(first, second){
        	return this.value + first + second;
        }
        var add2 = (first, second) => this.value + first + second;
    }
}

オブジェクト展開式

既存のJavaScriptでは、キー名と値が一緒に割り当てられ、オブジェクトとオブジェクトの値が宣言されます.そうしないでください.ES 6ではそうしません.

var x = 0;
var y = 0;
var obj = {x, y};
var randomKeyString = 'other';
var combined = {
  ['one' + randomKeyString] : 'some value',]
};
var obj2 = {
	x,
  	methodA() {console.log('method A');},
  	methodB() { return 0;},
};

構造分解の割り当て

var list = [0,1];
var item1 = list[0];
var item2 = list[1];
var item3 = list[2] || -1;

var temp = item2;
item2= item1;
item1 = temp;

var obj = {
  key1: 'one',
  key2: 'two',
};

var key1 = obj.key1;
var key2 = obj.key2;
var key3 = obj.key3 || 'default key3 value';
var newKey1 = key1;

このように表現できるコード.

var list = [0, 1];
var [
  item1,
  item2,
  item3 = -1,
] = list;
[item2, item1] = [item1, item2];

var obj = {
  key1: 'one',
  key2: 'two',
};
var {
  key1: newKey1,
  key2,
  key3 = 'default key3 value',
} = obj;

var [item1, ...otherItems] = [0, 1, 2];
var { key1, ...others } = { key1: 'one', key2: 'two' };

このように表現することもできます.|演算子は混同されやすく、この問題を解決することができます.

アレイ関数

forEach()

私たちが考えているforeachです

const qs = 'banana=10&apple=20&orange=30';

function parse(qs) {
  var queryString = qs.substr(1); // querystring = 'banana=10&apple=20&orange=30'
  var chunks = queryString.split('&'); // chunks = ['banana=10', 'apple=20', 'orange=30']
  var result = {};
  for(var i = 0; i < chunks.length; i++) {
    var parts = chunks[i].split('=');
    var key = parts[0];
    var value = Number.isNaN(Number(parts[1])) ? parts[1] : Number(parts[1]);
    result[key] = value;
  }
  return result;
}

まず「&」を標準として文字列を分離し、「=」を標準として文字列を分離し、keyとvalueに分けます.次にvalueを対応するキー値に入れます.
foreachでは、そのような方法でforドアを回す必要はありません.実はjavaでもc++でもよくある文法です

function parse(qs) {
  const queryString = qs.substr(1); // querystring = 'banana=10&apple=20&orange=30'
  const chunks = queryString.split('&'); // chunks = ['banana=10', 'apple=20', 'orange=30']
  let result = {};
  chunks.forEach((chunk) => {
    const [ key, value ] = chunk.split('='); // key = 'banana', value = '10'
    result[key] = value; // result = { banana: 10 }
  });
  return result;
}

map()

Pythonを使ったことがある人なら、よく聞いたことがあるはずです.Pythonではmap関数を特定の形式の値に変換する役割を果たす.

myList = [1, 2, 3, 4, 5]
def add_one(n): 
	return n + 1 
result2 = list(map(add_one, myList))
print(myList)
print(result2)

[1,2,3,4,5]
[2,3,4,5,6]

このようにして.JavaScriptも似ています.

function parse(qs){
	const queryString = qs.substr(1);
  	const chunks = qs.split('&');
  	const result = chunks.map((chunk) =>{
    	const [ key, value ] = chunk.split('=');
      	return {key : key, value : value };
    });
  return result;
}

result = [
	{key : 'banana', value = '10'},
    {key : 'apple', value = '20'},
    {key : 'orange', value = '30'}
];

reduce

配列をオブジェクトに変換するときに使用する関数

function parse(qs) {
  const queryString = qs.substr(1);
  const chunks = queryString.split('&');
  return chunks
    .map((chunk) => {
      const [ key, value ] = chunk.split('='); // key = 'banana', value = '10'
      return { key, value }; // { key: 'banana', value: '10' }
    })
    .reduce((result, item) => ({
      ...result,
      [item.key]: item.value,
    }), {});
}

result : {banana : '10', apple : '20', orange : '30' }

ひどうきかんすう

既存のjavascriptはsettimeout()形式で非同期タスクを処理し、遅延があります.

function work1(onDone) {
  setTimeout(() => onDone('작업1 완료!'), 100);
}
function work2(onDone) {
  setTimeout(() => onDone('작업1 완료!'), 200);
}
function work3(onDone) {
  setTimeout(() => onDone('작업3 완료!'), 300);
}

work1(function(msg1) {
  console.log('done after 100ms:' + msg1);
  work2(function(msg2) {
    console.log('done after 300ms:' + msg2);
    work3(function(msg3) {
      console.log('done after 600ms:' + msg3);
    });
  });
});

ES 6ではPromiseで解決できます.

const work1 = () =>
  new Promise(resolve => {
    setTimeout(() => resolve('작업1 완료!'), 100);
});
const work2 = () =>
  new Promise(resolve => {
    setTimeout(() => resolve('작업2 완료!'), 200);
});
const work3 = () =>
  new Promise(resolve => {
    setTimeout(() => resolve('작업3 완료!'), 300);
})

const nextWorkOnDone = (msg1) => {
	console.log('done after 100ms:' + msg1);
  	return work2();
};

work1()
  .then(nextWorkOnDone)
  .then((msg2) => {
	console.log('done after 200ms:' + msg2);
  	return work3();
})
  .then((msg3) => {
    console.log('done after 600ms:' + msg3);
});

返品

特定の時間を待っている場合は、最後に入力したコンテンツに基づいてサーバを要求します.
ex.関連検索語

export function debounde(func, delay){
	let inDebounce;
    return function(...args){
    	if(inDebounce){
        	clearTimeout(inDebounce);
        }
      	inDebounce = setTimeout(
          () => func(...args), delay);
    }
}

const run debounce(val => console.log(val), 100);
run('a');
run('b');
run(2);
//100ms 이후 2가 출력됨. 

制限

入力された操作がインバウンドと異なる場合でも、以前に要求された操作は定期的に実行されます.
ex.フェイスブックのタイムライン.スクロールすると、次の内容が出力されます.

export function throttle(func, delay) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    const context = this;
    if (!lastRan) {
      func.call(context, ...args);
      lastRan = Date.now();
    } else {
      if (lastFunc) clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= delay) {
          func.call(context, ...args);
          lastRan = Date.now();
        }
      }, delay - (Date.now() - lastRan));
    }
  }
}

var checkPosition = () => {
  const offset = 500;
  const currentScrollPosition = window.pageYOffset;
  const pageBottomPosition = document.body.offsetHeight - window.innerHeight - offset;
  if (currentScrollPosition >= pageBottomPosition) {
    // fetch('/page/next');
    console.log('다음 페이지 로딩');
  }
};
var infiniteScroll = throttle(checkPosition, 300);
window.addEventListener('scroll', infiniteScroll);