ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript コードを記述する際のヒントを共有する

JavaScript コードを記述する際のヒントを共有する

零下一度
零下一度オリジナル
2017-06-17 15:04:121394ブラウズ

はじめに

最近、仕事や生活の変化により、記事を書く頻度が少し落ちてしまいましたが、近いうちに少しずつ回復すると思いますので、今後ともよろしくお願いいたします。

この記事では、主に JavaScript コードを作成する際のいくつかの方法とテクニックを紹介しますが、すべての道はローマに通じている場合もありますが、常に最短の道が存在する可能性があります。以下の JavaScript スキルを通じて、皆さんのコードが「複雑化して簡素化、簡素化して洗練」されることを願っています。

上手に学んで使いましょう

1. new Set()

ES6 で新しいデータ構造 Set が提供されていることは知っている人もいるかもしれませんが、それを柔軟に使いこなせる人は多くありません。 Set データ構造を使用すると、次のような配列の重複を簡単に排除できます:

let arr = [1, 2, 2, 3];let set = new Set(arr);let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。console.log(newArr); // [1, 2, 3]

2. Object.assign()

Object.assign() は、ES6 で提供されるオブジェクトの拡張メソッドでもあり、マージに使用できます。オブジェクトをコピーします (例:

let obj1 = {a: 1};let obj2 = {b: 2};let obj3 = Object.assign({}, obj1, obj2);console.log(obj3); // {a: 1, b: 2}

3)。map()

map メソッドは、戻り値を持ち、配列の各項目を操作して新しい配列を生成します。場合によっては、 for ループと forEach ループを置き換えて、コードを簡素化できます。

let arr3 = [1, 2, 3, 4, 5];let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10console.log(newArr3); // [10, 20, 30, 40, 50]
4. filter()

filter メソッドは、名前が示すように、配列とトリガーをフィルタリングするためにも使用されます。各要素の後に

コールバック関数

を使用して、現在の項目を保持または削除し、最後に、

let arr4 = [1, 2, 3, 4, 5];let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模,过滤余数不为0的数console.log(newArr4); // [2,4]
5 などの新しい配列を返します。各要素の後にコールバック関数があり、条件を満たしている限り true を返します。それ以外の場合は、|| 比較と同様に false を返します。例:

let arr5 = [{result: true}, {result: false}];let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true,即为trueconsole.log(newArr5); // true

6.every()

すべてのメソッドが配列を走査するために使用されます。各要素の後にコールバック関数をトリガーし、条件を満たさない限り false を返します。そうでない場合は、 && 比較と同様に true を返します。例:

let arr6 = [{result: true}, {result: false}];let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false,即为falseconsole.log(newArr6); // false

~ 記号が使用されます。 JavaScript でビット単位の反転を実行する ~~ は 2 回反転することを意味し、

ビット演算

の演算値は要件が整数であり、結果も整数であるため、ビット単位の演算は自動的に整数となり、小数部分は整数になります。

let a = 1.23;let b = -1.23;console.log(~~a); // 1console.log(~~b); // -1

8 のように、parseInt と同様に賢く削除できます。 || 演算子

を使用して、変数のデフォルト値を設定できます。 .Operator...演算子は ES6 で配列を分解するために使用されるメソッドであり、

let c = 1;let d = c || 2; // 如果c的值为true则取存在的值,否则为2console.log(d); // 1

10 などの配列のパラメータをすばやく取得するために使用できます。この演算子に慣れていると、次のように if else の記述を簡素化できます。

let [num1, ...nums] = [1, 2, 3];console.log(num1); // 1console.log(nums); // [2, 3]

結論

この記事では、

JavaScript 構文のみをリストします

コーディング効率を向上させるためのより一般的な 10 点の方法について簡単に説明します。もちろん、それぞれの知識ポイントをそれに応じて拡張したり、探索したりすることもできますので、皆さんも上手に学びながら、上手に活用することで効果を実感していただければと思います。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。