フロントエンド用語の説明

目次

1. 多次元から一次元へ

2. 1次元から多次元へ

1 次元から多次元へ - 使用シナリオ: ページネーション

3. 現在の要素が配列であるかどうかを判断します。

4 番目に、現在の要素が空のオブジェクトかどうかを確認します。

5. 数値区切り記号: 数値の読みやすさを向上させる

6. ファジーボックス(奇妙なボックス)と標準ボックスモデル

7、CSSフィルター属性

ぼやけた画像

このフィルターを使用すると、グローバル ページをグレー表示にすることができます。

転送、再アップロード、キャンセルに失敗しました編集編集編集

8. 配列内の最大値/最小値を見つける

 

ナイン、仮想ドーム

10. vueのテンプレートテンプレートのレンダリング処理

11. グレースケールリリース(カナリアリリース、プログレッシブリリース)


1. 多次元から一次元へ

一、使用forEach 结合 递归处理
function flatData(list,children){

   let resList = []

   list.forEach(ele => {

       if(ele[children]&&ele[children].length>0){

         resList=resList.concat(flatData(ele[children]))  

       }else {

           resList.push(ele)

       }

   });

   return resList

}



二、[1,[2,[3]]].join().split(',')
三、[1,[2,[3]]].flat()

2. 1次元から多次元へ

1 次元から多次元へ - 使用シナリオ: ページネーション

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var row = 3; var multiArr = []; for (var i = 0; i < arr.length; i += row) { multiArr.push(arr.slice(i, i + row)); } console.log(multiArr);

3. 現在の要素が配列であるかどうかを判断します。

[1,2,3] instanceof Array

Array.isArray([1,2,3])

[1,2].constructor ===Array

4 番目に、現在の要素が空のオブジェクトかどうかを確認します。

Object.key/entries/value({}).length>0

console.log(JSON.stringify({})=='{}')

5. 数値区切り記号: 数値の読みやすさを向上させる

これは ES に新しく追加されたものであり、古いプロジェクトではサポートされていない可能性があります。数値の読みやすさを向上させるために、区切り文字としてアンダースコアを使用して、数値のさまざまな部分をより適切に区別できます。そうすることで、数字が一目で読みやすく理解しやすくなり、Xiaobai に誇示されます。

var num == 1_110_000;//1110000に等しい

6. ファジーボックス(奇妙なボックス)と標準ボックスモデル

ファジー ボックスの幅には、パディング、コンテンツ、ボーダーが含まれます。パディングとボーダーが設定されている場合、幅にはパディング/ボーダーが含まれるため、コンテンツは圧縮されます。属性 box-sizing: border-box;

標準ボックスモデルの幅は 1 つのコンテンツのみであるため、padding/border を設定すると要素全体が拡張され、コンテンツは圧縮されません。属性: box-sizing: content-box;

 

7、CSSフィルター属性

ぼやけた画像

imgタグの属性を設定する

フィルター: ぼかし(5px);

このフィルターを使用すると、グローバル ページをグレー表示にすることができます。

フィルター: グレースケール(1);

建国記念日などの重要な祭り、すべての主要な Web サイトやソフトウェアのページがグレー表示になることをまだ覚えていますか。

 

8. 配列内の最大値/最小値を見つける

 

 

ナイン、仮想ドーム

なぜ仮想 dom があるのでしょうか? 何年も前、vue や React がなかったときは、データを変更した後、ページは大規模なグローバル dom サイクルを通じてレンダリングされ、dom にクエリを実行してデータを更新していました。コンピューティング リソース、その他多数 不必要なパフォーマンスの消費はありません。仮想 dom とは何ですか。データ値を変更すると、仮想 dom はページ dom 要素をネストされたオブジェクト (dom ルート ノードから再帰的に取得) に抽象化します。仮想 dom オブジェクト内にあります。検索および変更されるのは仮想 dom オブジェクトの属性であり、実際の dom のレンダリングは diff アルゴリズムで前後の仮想 dom を比較した後にのみ実行されます。

10. vueのテンプレートテンプレートのレンダリング処理

まずテンプレートのコンテンツをレンダー関数に変換し、次にインスタンスをマウントし、ルートノードからのレンダー関数から仮想 dom を再帰的に形成し、新旧の仮想 dom を diff アルゴリズムで比較することによって実際の dom を更新します。

11. グレースケールリリース(カナリアリリース、プログレッシブリリース)

グレースケール リリースは、ユーザーがテストに使用できるように不安定なバージョンをリリースするリリース方法です。誰もが新しいコンテンツを事前に体験できるように、ゲームが一部のユーザーを選択していくつかのアカウントを発行することをよく目にします。最新バージョンに更新します。ユーザーがモルモットになりたいかどうかは完全に自主的です。開発者はリスクを回避するためにサーバーの安定性と新機能の流暢性をテストし、ユーザーのフィードバックに基づいてさらに調整を行うことができます。バージョンのリリースは双方にとって有利な戦略です。

 

おすすめ

転載: blog.csdn.net/aZHANGJIANZHENa/article/details/130943185