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

この記事では、ES6 に関するリーダーからの 10 件のコメントを紹介し、それに応じて関連知識を追加します。皆様のお役に立てれば幸いです。

「ES6 の使い方を知っているなら、それを使ってください!」: これは、コード レビュー ミーティング中にリーダーがチーム メンバーに向けた「怒鳴り声」です。その理由は次のとおりです。コードレビューの結果、まだ ES5 の記述方法を使用しているところが多いことが分かりましたが、これは ES5 の記述方法が使用できないということではなく、バグが発生するということではなく、コード量が増加し、可読性が低下するだけです。

たまたまこのリーダーはコードフェチで、このレベルのコードを書いた経験が 3 ～ 5 年のメンバーに非常に不満を持ち、コードについて文句を言い続けていました。しかし、それでも私はリーダーの愚痴から得るものが多かったように感じたので、リーダーの愚痴を記録し、ディガー仲間と共有しました。役に立ったと思ったら高評価をお願いします。間違いやもっと良い書き方があれば、コメント大歓迎ですので、メッセージを残してください。 [関連する推奨事項: JavaScript 学習チュートリアル]

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

1. 値の取得に関する苦情

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

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}

Tucao:

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 の構造化代入を使用しませんか? 5 に 1 を使用してくださいコード行 たった 1 行のコードで実行できたら便利だと思いませんか? オブジェクト名と属性名を使用して値を取得するだけです。オブジェクト名が短い場合は問題ありませんが、非常に長い場合はどうなるでしょうか?オブジェクト名はコード内のあらゆる場所に表示されます。」

改善:

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;

反論

私がそうしていないわけではありません。 ES6 の構造化割り当ては使用できませんが、サーバーから返されたデータ オブジェクトの属性名が必要なものではありません。この方法で値を取得するには、トラバーサル割り当てを再作成する必要があります。

Tucao

ES6 の構造化代入についての理解が十分ではないようです。作成したい変数の名前がオブジェクトのプロパティ名と一致しない場合は、次のように記述できます。

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

Supplementary

ただし、分割代入は行われません。 ES6は使いやすいです。ただし、非構造化オブジェクトを

unknown または 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 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

Tucao

ES6 のスプレッド演算子を忘れていませんか?配列を結合するときに重複排除を考慮していませんか?

改善点

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

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

3. 文字列の結合に関するコメント

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

Tucao

ES6 文字列テンプレートをあなたのように使用しないほうがよいでしょう。

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

#改善点

const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

4. if

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}

##の判定条件のコメント#Tucao

ES6includes

の配列インスタンス メソッドは使用されますか?

改善点

const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}

5. リスト検索に関するコメント

プロジェクトでは、いくつかのページネーションされていないリストの検索機能はフロントエンドで実装されており、検索は一般的に精密検索とあいまい検索に分けられます。検索はフィルタリングとも呼ばれ、通常は filter

を使用して実装されます。

const a = [1,2,3,4,5];
const result = a.filter( 
  item =>{
    return item === 3
  }
)

Tucao

正確な検索であれば、ES6 では find

を使用するのではないでしょうか?パフォーマンスの最適化について理解していますか? 条件を満たす項目が

find メソッドで見つかった場合、配列の走査は続行されません。 改善点

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)

6. フラット化された配列に関するコメント

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

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]

Tucao

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

お忘れですか?配列に関するフラット化プロセスもあります。ES6 が提供する

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);

lat

のパラメータとして

Infinityを使用すると、フラット化された配列の次元を知る必要がなくなります。 。 #補足

flat メソッドは IE ブラウザをサポートしていません。

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

const name = obj && obj.name;

Tucao

ES6 では次のようになります。オプションの連鎖演算子を使用する必要がありますか?

改善点

const name = obj?.name;

8. オブジェクト属性の追加に関するコメント

当给对象添加属性时，如果属性名是动态变化的，该怎么处理。

let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '话题内容';

吐槽

为何要额外创建一个变量。不知道ES6中的对象属性名是可以用表达式吗？

改进

let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';

九、关于输入框非空的判断

在处理输入框相关业务时，往往会判断输入框未输入值的场景。

if(value !== null && value !== undefined && value !== ''){
    //...
}

吐槽

ES6中新出的空值合并运算符了解过吗，要写那么多条件吗？

if((value??'') !== ''){
  //...
}

十、关于异步函数的吐槽

异步函数很常见，经常是用 Promise 来实现。

const fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

吐槽

如果这样调用异步函数，不怕形成地狱回调啊！

改进

const fn = async () =>{
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);// 1
  console.log(res2);// 2
}

补充

但是要做并发请求时，还是要用到Promise.all()。

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);// [1,2]
   }) 
}

如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。

十一、后续

欢迎来对以上十点leader的吐槽进行反驳，你的反驳如果有道理的，下次代码评审会上，我替你反驳。

此外以上的整理内容有误的地方，欢迎在评论中指正，万分感谢。

本文转载自：https://juejin.cn/post/7016520448204603423

作者：红尘炼心

【相关视频教程推荐：web前端】

以上がES6使えるって言ったら早く使ってよ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。