[JS符号化の技術]反復文簡略化部1

42075 ワード

矢印関数による繰返し文の簡略化
矢印関数を使用して関連しない情報を削除
JavaScriptでは多くのコールバック関数が見られます.コールバック関数は、他の関数のパラメータを渡します.次に表示する重複文の多くは、コールバック関数に依存します.
💡 矢印関数は、不要な情報を最大限に折りたたむことができます.
例)

記名関数:名前は関数の一部として宣言されます.

function capitalize(name) {
	return name[0].toUpperCase() + name.slice(1);
};

匿名関数:無名匿名関数を作成し、変数に

const capitalize = function (name) {
	return name[0].toUpperCase() + name.slice(1);
};

を割り当てます.

矢印関数:functionキーワードを削除し、厚い矢印で置き換えます.パラメータが1つしかない場合は、カッコ

const capitalize = name => {
	return name[0].toUpperCase() + name.slice(1);
};

を削除できます.

矢印関数の使用例:

// Before
function key() {
	return 'abc123';
}

function greet(first, last) {
	return `Hi ${capitalize(first)} ${capitalize(last)}님`;
};

function formatUser(name) {
	return `${capitalize(name)}님이 로그인했습니다.`;
}

// After
const key = () => {
	return 'abc123';
}

const greet = (first, last) => {
	return `Hi ${capitalize(first)} ${capitalize(last)}님`;
};

const formatUser = name => return `${capitalize(name)}님이 로그인했습니다.`;
// 함수가 한 줄일 경우  return 키워드 불필요.

矢印関数を変数に割り当てずに匿名関数として使用します.
JavaScriptでは、関数をパラメータとして他の関数に渡すことができます.

const capitalize = name => name.toUpperCase();

function applyCustomGreeting(name, callback) {
  return callback(capitalize(name));
};

// Before
applyCustomGreeting('mark', function (name) {
  return `Hi ${name}`;
});

// After 인수로 화살표 함수 전달
const result = applyCustomGreeting('mark', name => `Hi ${name}`);

console.log(result); // Hi MARK

並べ方で繰り返した文を短く書く
簡潔性、可読性、予測性を有するコードを記述するために、従来の重複文は一致しない.配列メソッドを書き込みます!

既存の重複文:文字列価格設定スキームを浮動小数点値

function getPrices() {
  const prices = ['1.0', '2.15'];

  const formattedPrices = [];
  for (let i = 0; i < prices.length; i++) {
    formattedPrices.push(parseFloat(prices[i]));
  }

  return formattedPrices;
}

に変換

配列に数値以外の文字列があり、数値に変換できる値だけが必要な場合はどうなりますか?修正するコード!

function getPrices2() {
  const prices = ['1.0', '흥정가능', '2.15'];

  const formattedPrices = []; 
  for (let i = 0; i < prices.length; i++) { 
    const price = parseFloat(prices[i]);
    if (price) {
      formattedPrices.push(price);
    }
  }
  
  return formattedPrices;
}

◇新たな集合宣言は、文予測の可能性が破壊される場合があります.あまり良いハーモニーではありません

配列方法
簡潔で予測可能なコードを作成する良い方法で、不要なデータを除去することができます.

パターンメソッドのタイプ

map()

動作:形状を変えるが長さを保つ

例:完全なチーム名

を取得

sort()

動作:形状や長さを変えることなく、順序

のみを変える.

例:

をチーム名のアルファベット順に並べます.

filter()

動作:長さは変更するが形状は変更しない

例:開発者

のみ選択

find()

動作:配列xを返します.データを返します.変形X

例:チームマネージャの検索

forEach()

動作:形状を使用するが何も返さない

例:すべてのチームメンバーにボーナスを支給する

reduce()

動作:長さと形状の変更を含む任意のコンテンツを処理できます.

例:すべての非開発者および開発者のチームメンバー数を計算する

タイリングメソッドを使用したマッピング()の例

  function getPrices() {
    const prices = ['1.0', '2.15'];
    const formattedPrices = prices.map(price => parseFloat(price));
    return formattedPrices;
  }

  // 배열 메서드 사용
  function getPrices2() {
    const prices = ['1.0', '흥정가능', '2.15'];
    const formattedPrices = prices.map(price => parseFloat(price))
      .filter(price => price);
    return formattedPrices;

map()メソッドを使用して類似長の配列を作成する
💡 map()関数は新しい配列を返して生成します

例配列

const band = [
  {
    name: '코벳',
    instrument: '기타',
  },
  {
    name: '에반',
    instrument: '기타',
  },
  {
    name: '션',
    instrument: '베이스',
  },
  {
    name: '브렛',
    instrument: '드럼',
  },
];

バンドに関する情報がありますが、実際に必要なのはバンドメンバーが演奏する楽器カタログですか?

✌️ すべての配置方法でコールバック関数が渡され、配置内の各項目に適用されます.

for文で比較するコード

function getInstruments(band) {
  const instruments = [];
  for (let i = 0; i < band.length; i++) {
    const instrument = band[i].instrument;
    instruments.push(instrument); 
  }
  return instruments;
}

4行と5行のマージ

function getInstrument(member) {
  return member.instrument;
}

for文の新しいメソッドの組合せ

function getInstruments2(band) {
  const instruments = [];
  for (let i = 0; i < band.length; i++) {
    instruments.push(getInstrument(band[i]));
  }
  return instruments;
}

map()メソッドの使用

function getInstruments2() {
  const instruments = band.map(member => member.instrument);
  return instruments;
}
// ['기타', '기타', '베이스', '드럼']

新しい値のアレイを準備する必要はありません.配列メソッドの一部だからです.

push()メソッドのX.マッピング関数の実行結果を返す配列

に追加する必要がある.
💡 元の配列の各項目を引数として受信し、新しく作成した配列に含める値を返す関数を作成します.

getInstruument()関数を直接map()に渡して再使用

bandはgetInstrument関数のパラメータに自動的に移動します...?!

function getInstrument(member){
  return member.instrument;
}
const instruments = band.map(getInstrument);
// [ '기타', '기타', '베이스', '드럼' ]

矢印関数に置換

は、関数宣言なしで1行で終了し、

const instruments = band.map(member => member.instrument);
// [ '기타', '기타', '베이스', '드럼' ]

filter()とfind()を使用してデータのサブセットを作成する

アレイ内のアイテム形状を維持しながらアレイの長さを変更する方法

配列の情報を変更せずに、返される配列の長さを減らします.(map()メソッドとは異なる)

サンプルコード

const team = [
  'Michelle B',
  'Dave L',
  'Dave C',
  'Courtney B',
  'Davina M',
];

チームリストに「dav」という名前の人を探したらどうしますか?

for文のコードの使用

function getDaveVariants(team) {
  const daves = [];
  for (let i = 0; i < team.length; i++) {
    if (team[i].match(/Dav/)) {
      daves.push(team[i]);
    }
  }
  return daves;
}

✌️ フィルタ関数は、同じタスクを1行のコードで処理できます.

const dav = team.filter(name => name.match(/Dav/));

真の値を返すfilter()メソッド
💡 map()メソッドとは異なり、filter()メソッドに渡される関数は真の値を返さなければなりません.
[真](True)が返されない場合、この値は新しい配列に含まれません.

const scores = [30, 82, 70, 45];
function getNumberOfPassingScores(scores) {
  const passing = scores.filter(score => score > 59);
  // [70, 82]
  return passing.length;
}
// 2

の戻り値は保持されません.

の配列を返し、元の配列の順序を維持します.

常に配列

を返し、条件を満たす値がなくても配列を返します.(空のアレイ)

function getPerfectScores(scores) {
  const perfect = scores.filter(score => score === 100);
  // []
  return perfect.length;
}
// 0

配列に一致する条件の項目がある場合find()メソッド
または一致するアイテムが1つしか必要ありません!
💡 真または偽の値を返す関数を引数として受信し、真の値を返す最初の項目のみを返します.
ない場合はundefinedを返します
サンプルコード

const instructors = [
  {
    name: '짐',
    libraries: ['미디어교육정보 도서관'],
  },
  {
    name: '새라',
    libraries: ['기념 도서관', '문헌정보학 도서관'],
  },
  {
    name: '엘리엇',
    libraries: ['중앙 도서관'],
  },
];

for文コード

function findMemorialInstructor(instructors) {
  let memorialInstructor;
  for (let i = 0; i < instructors.length; i++) {
    if (instructors[i].libraries.includes('기념 도서관')) {
      memorialInstructor = instructors[i];
      break;
    }
  }
  return memorialInstructor;
}

コード

find()メソッド

function findMemorialInstructor(instructors) {
  const librarian = instructors.find(instructor => {
    return instructor.libraries.includes('기념 도서관');
  });

  return librarian;
}

段落評価を使用して、一致する項目がない場合にデフォルト値を追加

const image = [{
	path: './me.jpg',
	profile: false
}];

const profile = image.find(image => image.profile) || {
	path: './default.jpg'
}; // { path: './default.jpg' }

🧨 残念な点

図書館名「記念図書館」をハードコードします.

配列法のコールバック関数は1つの引数のみであり,検査対象となる項目は1つしか受け入れられない.

回目の買収を追加する必要がある場合に問題が発生します.tip 34の

リファレンス
JavaScriptコーディング技術

Reference

この問題について([JS符号化の技術]反復文簡略化部1), 我々は、より多くの情報をここで見つけました https://velog.io/@devbin20/JS-코딩의-기술-반복문-단순화-part1

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

vue.js戻りステータスコードの取得

[Spring JPA]Self Joinセルフコネクタ