ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

ES6使えるって言ったら早く使ってよ！

著者：Eve Cole 更新時間：2022-08-26 13:21:21
この記事では、ES6 に関するリーダーからの 10 のコメントを紹介し、それに応じて関連知識を追加します。これが皆さんのお役に立てれば幸いです。

VUE3.0 をすぐに始める方法:

「ES6 の使い方を知っているなら、それを使ってください!」の学習から始めましょう: これは、リーダーがコード レビュー中にチーム メンバーに対して発した「怒鳴り声」です。 ES5 で書くと機能しないというわけではなく、コードの量が増えて読みにくくなるだけです。

たまたま、このリーダーはコードフェチで、このレベルのコードを書いた経験が 3 ～ 5 年のメンバーに非常に不満を抱いており、コードについて文句を言い続けていました。しかし、それでも私は彼の苦情から多くのことを得ることができたと感じたので、リーダーの苦情を記録し、役立つと思われる場合は、他のディガーと共有しました。間違いやより良い書き方があれば、「いいね」を押してください。コメントを残していただければ幸いです。

ps: ES5 以降の JS 構文はまとめて ES6 と呼ばれます。 ！ ！

1. 値の収集に関する Tucao

値は、オブジェクトobjから値を取得するなど、プログラムでは非常に一般的です。

const obj = {
    :1、
    b:2、
    c:3、
    d:4、
    e:5、
トゥカオ

：

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

または

const f = obj.a + obj.d;
const g = obj.c + obj.e;

Tucao: "ES6 の分割代入を使用して値を取得することはできませんか? 1 行のコードで 5 行のコードを使用するのは良いことではありませんか? オブジェクト名にプラスを使用するだけです。値を取得するための属性名。オブジェクト名が短くても問題ありませんが、非常に長い場合、オブジェクト名がコード内のあらゆる場所に存在します。 "

改善:

const {a,b,c,d,e} =オブジェクト;
const f = a + d;

const

g

=

c + e

トラバース割り当てを再作成します。

ES6 の構造化と代入についての理解が十分ではないようです

。

作成する変数の名前がオブジェクトのプロパティ名と一致しない場合は、次のように記述できます。

const {a:a1} = obj;
console.log(a1); // 1

補足

ES6 の分割割り当ては使いやすいです。ただし、構造化解除されたオブジェクトをundefinedまたはnullにすることはできないことに注意してください。そうしないとエラーが報告されるため、構造化されていないオブジェクトにはデフォルト値を与える必要があります。

const {a,b,c,d,e} = obj || {};

2.

2 つの配列のマージや 2 つのオブジェクトのマージなど、データのマージに関する苦情。

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

const obj1 = {
  :1、
}
const obj2 = {
  b:1、
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1} は、

ES6 の拡張演算子が忘れられているかどうか、配列のマージでは重複排除が考慮されていないかどうか

について不満を述べていました

。 
const a = [1,2,3];

を改善しました

。
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  :1、
}
const obj2 = {
  b:1、
}
const obj = {...obj1,...obj2};//{a:1,b:1}

3. 文字列の結合について Tucao

const name = 'Xiao Ming';
定数スコア = 59;
結果 = '';
if(スコア > 60){
  result = `${name} の試験のスコアは合格です`; 
}それ以外{
  result = `${name} は試験に不合格でした`;
あなたと同じように ES6 文字列テンプレートの使用

について文句を言うなら

、

${}でどのような操作が実行できるのかわかりません。 ${}任意の JavaScript 式を記述し、操作を実行し、オブジェクトのプロパティを参照できます。

const name = 'Xiao Ming';

を改善しました

。
定数スコア = 59;
const result = `${name}${score > 60?''s test得点合格':''s test得点不合格'}`
4. if 
(

の判定条件のコメント

    タイプ == 1 ||
    タイプ == 2 ||
    タイプ == 3 ||
    タイプ == 4 ||
){
   //...

配列インスタンス メソッドincludes ES6 で使用されるかどうか

について不満があり

ます
か
? 
const 条件 = [1,2,3,4]

が改善されました

。

if( 条件.includes(type) ){
   //...
}

5. リスト検索に関する不満

このプロジェクトでは、一部のページ分割されていないリストの検索機能がフロントエンドによって実装されており、検索は一般に精密検索とあいまい検索に分けられます。検索はフィルタリングとも呼ばれ、通常はfilter使用して実装されます。

const a = [1,2,3,4,5];
const result = a.filter( 
  item => {
    return item === 3
  }
)
完全一致検索に

文句を言い

たいなら

、ES6 ではfindを使わないのですか? findの最適化を理解していますか？

const a = [1,2,3,4,5];

が改善されました

。
const 結果 = a.find( 
  項目 =>{
    返品アイテム === 3
  }
)

6. フラット化された配列に関する不満

部門の JSON データでは、属性名は部門 ID であり、属性値は部門メンバー ID の配列コレクションです。次に、すべての部門メンバー ID を配列コレクションに抽出する必要があります。

const deps = {
「購買部門」:[1,2,3],
「人事部」:[5,8,12],
「管理部門」:[5,14,79],
「運輸省」:[3,64,105]、
}
メンバー = []; にします。
for（depsのアイテムを）{
    const 値 = deps[アイテム];
    if(Array.isArray(値)){
        メンバー = [...メンバー,...値]
    }
}
member = [...new Set(member)]

オブジェクトのすべての属性値を取得するにはトラバースする必要がありますか

?

Object.valuesを忘れましたか?配列を伴うflat化プロセスもあります。幸いなことに、今回の配列の深さは 2 次元までです。4 次元または 5 次元の深さの配列が必要な場合は、それが必要でしょうか。ネストされたループをループして平坦化しますか?

const depsを

改善

= {
    「購買部門」:[1,2,3],
    「人事部」:[5,8,12],
    「管理部門」:[5,14,79],
    「運輸省」:[3,64,105]、
}
let member = Object.values(deps). flat(Infinity);

Infinity flatのパラメータとして使用されるため、フラット化された配列の次元を知る必要はありません。

flatメソッドは IE ブラウザをサポートしていない

ことを補足しました

。

7. Tucao オブジェクトの属性値の取得について

const

name = obj && obj.name;

ES6 ではオプションのチェーン演算子が使用されますか?

const name = obj？.name;
オブジェクト属性の

追加

に関するコメント

オブジェクトに属性を追加すると、属性名が動的に変更された場合はどうすればよいですか。

obj = {}とします。
index = 1;
let key = `topic${index}`;
obj[key] = 'トピックコンテンツ';

追加の変数を作成する必要がある理由

。

ES6 ではオブジェクトのプロパティ名に式を使用できるのでしょうか?

let

let obj = {};
インデックス = 1 とします。
obj [`トピック$ {index}`] = 'トピックコンテンツ

'

。

if(値 !== null && 値 !== 未定義 && 値 !== ''){
    //...

ES6 の新しい null 値結合演算子について聞いたことがありますか? それほど多くの条件を記述する必要があります

か

?

if((値??'') !== ''){
  //...
10.

非同期関数に関する苦情

非同期関数は非常に一般的であり、Promise を使用して実装されることがよくあります。

const fn1 = () =>{
  return new Promise((解決、拒否) => {
    setTimeout(() => {
      解決(1);
    }, 300);
  });
}
const fn2 =（）=> {
  return new Promise((解決、拒否) => {
    setTimeout(() => {
      解決(2);
    }, 600);
  });
}
const fn =（）=> {
   fn1().then(res1 =>{
      コンソール.log(res1); // 1
      fn2（）。then（res2 => {
        コンソールログ(res2)
      })
   })
このように非同期関数

を呼び出す

と

、地獄のようなコールバックを恐れることはありません

。
const fn = async () =>{

を改善しました

。
  const res1 = fn1(); を待ちます。
  const res2 = await fn2();
  console.log（res1）;
  console.log（res2）; // 2
}

サプリメント

：同時リクエストを作成する場合、 Promise.all()使用する必要があります。

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log（res）; // [1,2]
   })
同時リクエストがある場合
、

非同期関数の 1 つが完了している限り、結果が返されるため、 Promise.race()使用する必要があります。

11.

上記の 10 点のリーダーの不満に反論してください。あなたの反論が合理的であれば、次回のコードレビュー会議で私が反論します。

なお、上記の整理した内容に誤りがございましたら、お気軽にコメントにて修正していただければ幸いです。

この記事の転載元: https://juejin.cn/post/7016520448204603423

著者:Hongchen Lianxin

[関連ビデオチュートリアルの推奨事項: Web フロントエンド]

上記は、ES6 を使用できると述べたもので、すぐに使用できます。詳細については、php 中国語 Web サイトの他の関連記事にご注目ください。

関連記事