実用上の問題JSの開発を解決するために、この24のES6方法。

転送製品は、少しネットである：http://www.pinlue.com/article/2020/03/0609/599987093418.html

本論文では、24のES6方法を説明し、これらの方法は非常に便利な、時間から見ることが判明した時に良い本を、覚えていてくださいます。

1.指定されたすべての要素を非表示にする方法

constの非表示=（エル）=> Array.from（エル）.forEach（E =>（e.style.display = 'なし'））; //ケース：隠すページ上のすべての `の<img>`非表示要素（？ document.querySelectorAll（「IMG」））2.要素が指定されたクラスを持っているかどうかを確認する方法コードをコピー？

各ノードは、プログラマが変更ノード上で、CSSクラスを追加、削除するためのメソッドを使用することができますCLASSLISTオブジェクトを、持っているDOMページ。使用CLASSLIST、プログラマは、ノードはCSSクラスを与えられているかどうかを判断するためにそれを使用することができます。

constのhasClass =（エル、クラス名）=> el.classList.contains（クラス名）//場合hasClass（document.querySelector（ 'p.special'）、 '特別な'）//真のコピーコード3.どのようにスイッチング素子クラス？

constのtoggleClass =（エル、クラス名）=> el.classList.toggle（クラス名）//クラス `special`特別なクラスtoggleClassの削除Pインスタンス（document.querySelector（ 'p.special'）、 '特別な'）のコピー4.どのように現在のスクロール位置のコードページを取得しますか？

CONST getScrollPosition =（EL =ウィンドウ）=>（{X：el.pageXOffset ==未定義el.pageXOffset：el.scrollLeft、Y：el.pageYOffset ==未定義el.pageYOffset：！？！？el.scrollTop}）。 //ケースgetScrollPosition（）; // {X：0、Y：200} 5.方法スムーズスクロールページの先頭にコードをコピー

CONST scrollToTop =（）=> {CONST C = document.documentElement.scrollTop || document.body.scrollTop; IF（C> 0）{window.requestAnimationFrame（scrollToTop）。window.scrollToは（0、C - C / 8）。}} //事例scrollToTop（）复制代码

あなたが映画をやりたい、とブラウザが指定したコールバック関数は次の再描画の前にアニメーションを更新呼び出す必要が - window.requestAnimationFrame（）は、ブラウザに指示します。コールバック関数は、ブラウザに一度再描画される前に実行方法の必要性は、引数としてコールバック関数を渡します。

requestAnimationFrameの：長所：コールバック関数の実装のタイミングは、システムによって決定されます。60Hzのリフレッシュレート、あなたは間隔がコールバック関数を実行します更新するたびに、原因はフレームではなく、カトンを落としませんので。

6.どのように親要素が子要素が含まれているかどうかをチェックするには？

constのelementContains =（親、子）=>親==子&& parent.contains（子）;! //ケースelementContains（document.querySelector（ '頭'）、document.querySelector（ 'タイトル'））; // trueelementContains （document.querySelector（「体」）、document.querySelector（「体」））; // falseをコピー指定された要素をチェックするためにどのようにコード7は、ビューポートに表示されていますか？

CONST elementIsVisibleInViewport =（EL、partiallyVisible = FALSE）=> {CONST {上、左、下、右} = el.getBoundingClientRect（）; constの{innerHeightは、はinnerWidth} =ウィンドウ;?リターンpartiallyVisible（（TOP> 0 &&トップ< innerHeightは）||（底> 0 &&底<はinnerHeight））&&（（左> 0 &&左<はinnerWidth）||（右> 0 &&右<はinnerWidth））：TOP> = 0 &&> = 0 &&左下< = innerHeightは&&右<=はinnerWidth;}; //場合elementIsVisibleInViewport（EL）; //（上下）8は、コード要素をコピーし得る方法を見ることができるすべてのフルスクリーンのために必要と; //見えるがelementIsVisibleInViewportについてかかり（EL、真）画像？

CONST getImages =（EL、includeDuplicates = FALSE）=> {CONST画像は= [... el.getElementsByTagName（ 'IMG'）]マップ（IMG => img.getAttribute（ 'SRC'））;戻りincludeDuplicates画像：。？ [...新しいセット（画像）];}; //例：重複する要素を排除するincludeDuplicates真手段はgetImages（文書、true）を必要と; // [ 'image1.jpg'、 'image2.png'、「画像1。 PNG '' ... '] getImages（文書、偽）; // [' image1.jpg '' image2.png '' ...「] 9.デバイスは、モバイルデバイスやデスクトップであるかを決定するためのコードをコピー/ラップトップ？

constのdetectDeviceType =（）=> /アンドロイド|橋渡し| iPhone | iPadの| iPodの|ブラックベリー| IEMobile |オペラミニ/ i.test（navigator.userAgent）？'モバイル'： 'デスクトップ'; //事例detectDeviceType（）; //「モバイル」または「デスクトップ」复制代码10.Howは、現在のURLを取得しますか？

constのCURRENTURL =（）=> window.location.href //ケースCURRENTURL（）// 'https://google.com' は現在のURLパラメータを含むオブジェクトを作成するために、どのようにコード11をコピー？

constのgetURLParameters = URL =>（url.match（/（[^？=＆] +）（=（[^＆] *））/グラム）|| []）。（（（、V）=>を減らします（[v.slice（0、v.indexOf（ '='））] = v.slice（v.indexOf（ '='）+ 1）））{}）; //ケースgetURLParameters（ ' http://url.com/page?n=Adam&s=Smith '）; // {N：' アダム 'は、（S）' スミス '} getURLParameters（' google.com「）; // {}は、コード12をコピーします。どのようにオブジェクトにフォーム要素のグループ？

CONST formToObject =フォーム=> Array.from（新しいいるFormData（フォーム））（（ACC、[キー、値）=>（{... ACC、[キー]：値}）、{}）を低減;. / /ケースformToObject（document.querySelector（「＃フォーム」））; // {メール「[email protected]」、名称：「テスト名」}所与Aからオブジェクトを取得する方法コードセレクタ13をコピーするための命令グループのプロパティ？

constのGET = => [...セレクタ]の.map（S => S .replace（/ \ [（[^ \ [\]] *）\] / gで、」。$ -1（セレクタ...、から） 。 '）.split（'。 '！）.filter（T => T =='「）.reduce（（PREV、CUR）=> PREV && PREV [CUR]、から））; CONST OBJ = {セレクタ。 {に：{ヴァル： 'を選択するヴァル'}}、ターゲット：[1、2、{ 'テスト'}]}; // Exampleget（OBJ、 'selector.to.val'、「ターゲット[0] 「」ターゲット[2] .A 『）; // [』 valを選択するために「1」テスト「]はどのように指定された時間の後に設けられた関数を呼び出すコード14をコピー？

CONST遅延=（FN、待機、...引数）=>のsetTimeout（FN、待機、...引数）;遅延（関数（テキスト）{にconsole.log（テキスト）;} 1000、 '後'）。 // 1秒を印刷した後、「後で」指定された要素に特定のイベントをトリガーするためにどのようにコード15をコピーして、カスタムデータを渡すように選択することができますか？

CONSTのTriggerevent =（EL、eventTypeを、詳細）=> el.dispatchEvent（新しいCustomEvent（eventTypeを、{詳細}））; //事例のTriggerevent（のdocument.getElementById（ 'MYID'）、 'クリック'）のTriggerevent（文書。 getElementByIdを（ 'MYID'）、 'クリック'、{ユーザー名： 'ボブ'}）;复制代码

カスタムイベント機能は、イベント、CustomEventとは、dispatchEventを持っています

イベントコンストラクタ使用して、直接window.dispatchEvent（新しいイベント（「リサイズ」））//カスタムイベントを構築し、//ウィンドウのサイズ変更イベントを配布します。varイベント=新しいイベント（「ビルド」）; VARのelem = document.querySelector （ '#ID'）// elem.addEventListenerリスナーイベント（ 'ビルド'、関数（E）{...}、偽）; //トリガイベント.elem.dispatchEvent（イベント）;重複コード

CustomEventは、次のようにデータの一部と一緒に使用され、より高集積カスタムイベントを作成することができます。

VAR myEvent =新しいCustomEvent（eventnameに、オプション）;オプションは、かもしれ：{詳細：{...}は、泡：真、//解約バブリング場合：falseを//デフォルトのイベントをキャンセルするかどうか}そして、

どの詳細いくつかの初期化情報を格納することができ、トリガされたときに呼び出すことができます。イベントは、バブリング、よりいるかどうかを定義する他の属性。

内蔵のイベントブラウザで特定のアクションに基づいてトリガされる、カスタムイベントを手動でトリガーにする必要があります。dispatchEvent機能は、イベントをトリガするために使用されます。

でelement.dispatchEvent（customEvent）重複コード

上記のコードは、上記customEvent要素をトリガするイベントでは、そのことを示します。

{//作成しeventvarイベントをディスパッチ=新しいCustomEvent（ "CAT"、{ "詳細"; //適切なイベントlistenerobj.addEventListener（ "CAT" 機能（E）{工程（e.detailを）}）を追加"hazcheeseburger"：真}}）; obj.dispatchEvent（イベント）; jQueryのを使用しているノート互換性の問題への使用のカスタムイベントがはるかに簡単です：//バインドカスタムイベント$（要素）（「myCustomEvent .on '関数（）{}）; //トリガイベント$（要素）.trigger（' myCustomEventは「）; //ほかに、あなたはより多くのパラメータ情報を渡すことができたときにトリガーカスタムイベント：$（ "P"） .on（ "myCustomEvent"、機能（イベント、がmyName）{$（この）は.text（がmyName +」、こんにちは！ "）;}）; $（ "ボタン"）.click（関数（）{$（" P「）.trigger（」myCustomEvent「[」ジョン「]）;}）; 16要素からイベントリスナーを削除するためにコードをコピーする方法？

オフCONST =（エル、EVT、FN、OPTS =偽）=> el.removeEventListener（EVT、FN、OPTS）; constのFN =（）=>はconsole.log（ '！'）; document.body.addEventListener（ ' 「FN）を、オフ（document.body、」をクリッククリック」、FN）;重複したコード17ミリ秒読める形式の与えられた数を取得する方法？

CONST formatDuration = MS => {（MS <0）MS = -ms場合、CONST時間= {日：Math.floor（MS / 86400000）、時間：Math.floor（MS / 3600000）％24分：数学。床（MS / 60000）60％、第二：Math.floor（MS / 1000）60％、ミリ秒：Math.floor（MS）1000％};リターンObject.entries（時間）.filter（ヴァル=>ヴァル[1 ！] == 0）.MAP（（[キー、ヴァル]）=> `$ {ヴァル} $ {キー} $ {！ヴァル== 1 'S'：？ ''} '）.join（ '' ）;}; //場合formatDuration（1001）; // '1秒、1 millisecond'formatDuration（34325055574）; //' 397日間、6時間、44分、15秒、574ミリ秒を取得する方法コード18をコピー（日中）2つの日付の差？

constのgetDaysDiffBetweenDates =（dateInitial、dateFinal）=>（dateFinal - dateInitial）/（* 24 * 3600 1000）; //ケースgetDaysDiffBetweenDates（新しい日付（ '2017年12月13日'）、新しいDate（「2017年12月22日「））; // 9 19.どのようにGETリクエストを作成するためのコードは、URLを渡しコピー？

CONST HTTPGET =（URL、コールバック、ERR = console.error）=> {CONST要求=新規のXMLHttpRequest（）; request.open（ 'GET'、URL、真の）; request.onload =（）=>コールバック（request.responseText）。request.onerror =（）=> ERR（リクエスト）。request.send（）;}; HTTPGET（ 'https://jsonplaceholder.typicode.com/posts/1'、にconsole.log）。// { "はuserId"：1、 "ID"：1、 "タイトル"： "サンプルタイトル"、 "本文"、 "私のテキスト"}复制代码20。如何对传递的URL发出POST请求？

CONST httpPost =（URL、データ、コールバック、ERR = console.error）=> {CONST要求=新規のXMLHttpRequest（）; request.open（ 'POST'、URL、TRUE）; request.setRequestHeader（ 'コンテンツタイプ'、 'アプリケーション/ JSON;のcharset = UTF-8'）; request.onload =（）=>コールバック（request.responseText）; request.onerror =（）=> ERR（リクエスト）; request.send（データ）;}; CONST newPost = {にuserId：1、ID：1337、タイトル： 'foo' で、本体： 'バーバール'}; CONSTデータ= JSON.stringify（newPost）; httpPost（「https://jsonplaceholder.typicode.com/ポスト、データ、にconsole.log）; // { "はuserId"：1、 "ID"：1337、 "タイトル"： "はFoo"、 "本体"： "バーバーバー"} 21.方法を指定するコードをコピーカウンタの指定範囲、刻み幅と持続時間とのセレクタを作成しますか？

CONSTカウンタ=（選択、開始、終了、ステップ= 1、期間= 2000）=> {電流=開始させ、_step =（終了 - 開始）*ステップ<0 - ステップ：ステップ、タイマ=たsetInterval（（）=？ > {現在+ = _step; document.querySelector（セレクタ）.innerHTML =現在;もし（現在> =端）document.querySelector（セレクタ）.innerHTML = END;もし（現在> =終了）てclearInterval（タイマ）;} math.abs（Math.floor（期間/（終了 - 開始））））;戻りタイマー;}; //インスタンスカウンタ（ '＃私の-ID'、1、1000年、5、2000）; //メイク `ID =「私の-ID」 `の文字列をコピーし、クリップボードにコードをコピーする方法を2秒タイマ22を作成するための要素？

CONST EL =のdocument.createElement（ 'TEXTAREA'）; el.value = STR; el.setAttribute（ '読み取り専用'、 ''）; el.style.position = '絶対'; el.style.left = '-9999px' ; document.body.appendChild（エル）; = document.getSelection（）rangeCount> 0 document.getSelection（）getRangeAt（0）選択のconst：偽; el.select（）; document.execCommand（ 'コピー'）。？。 ; document.body.removeChild（EL）;（選択）であれば{document.getSelection（）removeAllRanges（）;. document.getSelection（）addRange（選択）;.}}; //ケースcopyToClipboard（ 'Loremのイプサム'）。 //「Loremのイプサム」のページのブラウザのタブを決定するために、どのようにコード23をコピーし、クリップボードにコピーされたフォーカスされていますか？

！のConst isBrowserTabFocused =（）=> document.hidden; //インスタンスはisBrowserTabFocused（）; //真のコピーディレクトリ（もし存在しない）を作成するために、どのようにコード24？

constのfsは=（ 'FS'）を必要とします。constのcreateDirIfNotExists = DIR =>（fs.existsSync（DIR）fs.mkdirSync（DIR）：！？未定義）; //事例createDirIfNotExists（ 'テスト'）; 复制代码

大規模な実用的な方法のすべての種類があります、開発プロセスは、多くの問題を解決することができ、我々は今、それを利用します。

誰もがFundebug監視ツールを使用するように簡単な方法のBUGを推奨するためのコードは、BUGの存在する可能性が配備された後に、リアルタイムで知っているし、その後これらのバグを解決するためにすることはできません、ここでは、ログのデバッグに多くの時間を費やしました。