JavaScript コードを簡潔にするためのヒント

この記事は主に、仕事で輝けるようになる簡単な JavaScript コードのヒントを皆さんと一緒に学ぶことを目的としています。

注: 以下のコード比較には、絶対的な正誤はありません。一部の記述方法は、使用シナリオが比較的単一です。各人の習慣や好みに基づいて判断できます。より良い意見や異なる意見がある場合は、退出してください。交換するメッセージ~

(無料学習の推奨事項: javascript ビデオ チュートリアル)

1. ショートサーキット操作:

このような状況に遭遇した場合、

const res1 = item.a ? item.a : item.b // 看起来很是简洁const res2 = item.a ? item.b : item.a // 看起来很是简洁

を使用して実装しますか? それとも JS 論理演算を使用して実装しますか?

const res1 = item.a || item.b;const res1 = item.a && item.b;

2. 条件判断によって変数にブール値を割り当てる正しい方法:

結果を得るために単一の値を比較する必要がある場合は、次を使用します。直接操作、そうでない場合は、if の判断がはるかに簡単になります~

let res;if(a === '余光'){
	res = true }else{
	res = false;}// good?const res = a === '余光'

3. if で配列の長さがゼロでないかどうかを判断する正しい方法:

シナリオ: 配列がメモリ要素に存在する場合、次の操作を実行します:

// badif (arr.length !== 0) {
    // todo}// goodif (arr.length) {
    // todo}

同様に、配列の長さが空かどうかを判断する必要がある場合:

if(!arr.length){
	// todo}

4 if の判断を簡素化するには、インクルードを使用します:

シナリオ: パラメータが 1、2、3、4 に等しい場合、次のステップに進みます。

最初のバージョンのコード:

if(a === 1 || a === 2 || a === 3 || a ===4){
	// todo}

読んだ後、異常な頭痛がするようになりました。次に、コードを次のように変更しました:

if([1,2,3,4].includes(a)){
	// todo}

5。修飾された値があるかどうかを判断するには、some を使用します:

シナリオ: n

const itemList = [
	{name: '手机', price: 1000},
	{name: '手机壳', price: 10},
	{name: '帽子', price: 50},]function checkData(n){
	for(let i = 0; i < item.length; i++){
		if(item.price < n){
			return true;
		}
	}
	return false;}

# 未満の価格の製品があるかどうかを確認する ##メソッドは記述されていますが、js には非常に多くの配列メソッドが用意されているため、それを使用します。

const itemList = [
	{name: '手机', price: 1000},
	{name: '手机壳', price: 10},
	{name: &#39;帽子&#39;, price: 50},]const checkData = (n) => itemList.some(item => item.price < n)

再度最適化

const checkData = (n, itemList) => itemList.some(item => item.price < n)

6. filter メソッドを使用して元の配列をフィルターし、新しい配列を形成します

シナリオ: いくつかの不要な要素を削除します。例: , 各データの ID は後続の操作に必要なデータです。欠陥のあるデータを排除するために、これを行います:

const data = [
    { name: '手机', price: 1000, id: 1 },
    { name: '手机壳', price: 10, id: 2 },
    { name: &#39;帽子&#39;, price: 50, id: &#39;&#39; },]// badlet newArr = []for (let i = 0; i < data.length; i ++) {
    if (data.id) {
        newArr.push(arr[i])
    }}

「フィルタリング」の概念をマスターするために、次のように処理します。 :

const afterData = data.filter(item => item.id);

7. マップを使用して配列内の要素をバッチ処理します:

シナリオ: 価格に関して言えば、インタラクションで取得する価格フィールドは通常、セント単位ですが、どうやって表示すればよいのでしょうか？

const data = [10000, 20000, 980000]const afterData = data.map(price => price / 100)

8. 配列を分解して変数値を置き換えます

シナリオ: 2 つの値を交換する必要があります

// badlet a = 1,
    b = 2let temp = a
a = b
b = temp// goodlet a = 1,
    b = 2[b, a] = [a, b]

9。分割 コードへの統合:

シナリオ: オブジェクト内の要素を取得し、デフォルト値を設定します

コードの最初のバージョンを作成します:

// badsetForm (person) {
    this.name = person.name    this.age = person.age 
}// goodsetForm ({name = '余光', age}) {
    this.name = name    this.age = age 
}

10. 複数の方法を組み合わせると何ができるでしょうか? (例 1)

これはコードの最後の簡潔なアイデアです。他の人にインスピレーションを与えるために、特定のシーンの距離を取ってみましょう。皆さんもコメント エリアにメッセージを残してください~

シナリオ:

フロントエンドによって取得されたデータは

data = [
    { id: 1, name: '一级标题-1' },
    { id: 2, name: '一级标题-2' },
    { id: 3, name: '二级标题-1', pid: 1 },
    { id: 3, name: '一级标题-3' },
    { id: 3, name: '二级标题-2', pid: 2 },]

です。次のような関連付け関係を形成する必要があります。配列によって提供される API:

needData = [
    {
        id: 1,
        name: '一级标题-1',
        children: [
            { id: 3, name: '二级标题-1', pid: 1 }
        ]
    },
    {
        id: 2,
        name: '一级标题-2',
        children: [
            { id: 5, name: '二级标题-2', pid: 2 }
        ]
    },
    { id: 4, name: '一级标题-3' },]

Idea:

親を持つ要素を検索

正しい場所に送信

1. すべてを返す親フィールド (pid) のないデータ
2. さらに同様のアイデアや操作がある場合は、必ずメッセージを残してください

関連する無料学習の推奨事項:

javascript(ビデオ)

以上がJavaScript コードを簡潔にするためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。