私たちは毎日のタスクで、並べ替え、検索、一意の値の検索、パラメータの受け渡し、値の交換などの関数を作成します。そのため、ここでは私が作成した簡単なヒントのリストをまとめました。
これらの方法はJavaScript は、学習して使用するのに本当に優れた言語です。特定の問題に対して、同じ解決策に到達する方法が複数ある場合があります。この記事では、最も速いものについてのみ説明します。
間違いなく役立ちます
。これらの JavaScript ハックのほとんどは ECMAScript6 (ES2015) 以降のテクノロジーを使用していますが、最新バージョンは ECMAScript11 (ES2020) です。
==注意==: 以下のヒントはすべて、Google Chrome のコンソールでテストされています。
デフォルト値 (""、null、0 など) を使用して、特定のサイズの配列を初期化できます。すでに 1D 配列にこれらを使用しているかもしれませんが、2D 配列/行列を初期化するにはどうすればよいでしょうか?
const 配列 = Array(5).fill('');
// 出力(5) ["", "", "", "", ""]
const 行列 = Array(5).fill(0).map(()=>Array(5).fill(0));
// 出力(5) [配列(5), 配列(5), 配列(5), 配列(5), 配列(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0、0、0、0、0]
4: (5) [0, 0, 0, 0, 0]
長さ: 5 基本的な数学演算をすばやく見つけるには、 reduceメソッドを使用する必要があります。
const array = [5,4,7,8,9,2];
array.reduce((a,b) => a+b); // 出力:
array.reduce((a,b) => a>b?a:b); // 出力:
array.reduce((a,b) => a<b?a:b); // 出力: 2
文字列を並べ替えるための組み込みメソッドsort()とreverse()がありますが、数値やオブジェクトの配列についてはどうすればよいでしょうか?
数値とオブジェクトの昇順および降順の並べ替え手法を見てみましょう。
const stringArr = ["Joe", "Kapil", "Steve", "Musk"] stringArr.sort(); // 出力(4) ["ジョー", "カピル", "マスク", "スティーブ"] stringArr.reverse(); // 出力 (4) ["Steve", "Musk", "Kapil", "Joe"]
const array = [40, 100, 1, 5, 25, 10]; array.sort((a,b) => ab); // 出力(6) [1, 5, 10, 25, 40, 100] array.sort((a,b) => ba); // 出力(6) [100, 40, 25, 10, 5, 1]
const objectArr = [
{ 名: 'ラズロ'、姓: 'ジャムフ' },
{ 名前: 'ブタ'、姓: 'ボディン' },
{ first_name: '海賊'、last_name: 'Prentice' }
];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// 出力(3) [{…}, {…}, {…}]
0: {名: "豚"、姓: "ボディン"}
1: {名: "ラズロ"、姓: "ジャムフ"}
2: {名前: "海賊"、姓: "弟子"}
length: 3 0 、 undefined 、 null 、 false 、 "" 、 ''のような偽の値は、
const array = [3, 0, 6, 7, '' によって簡単に省略できます。 、 間違い]; 配列.フィルター(ブール値); // 出力 (3) [3, 6, 7]
ネストされた if...else を減らしたり、ケースを切り替えたりする場合は、基本的な論理演算子AND/OR使用するだけです。
関数 doSomething(arg1){
引数1 = 引数1 || 10;
// まだ設定されていない場合は、arg1 をデフォルトとして 10 に設定します return arg1;
}
foo = 10 とします。
foo === 10 && doSomething();
// これは if (foo == 10) then doSomething(); と同じです。
// 出力: 10
foo === 5 || doSomething();
// これは if (foo != 5) then doSomething(); と同じです。
// 出力: 10 最初に見つかったインデックスを返す for ループでindexOf()使用したり、配列からブール値 true/false を返して Out/remove を検索する新しいincludes()使用した可能性があります。重複します。 ここで、より高速な方法が 2 つあります。
const 配列 = [5,4,7,8,9,2,7,5]; array.filter((item,idx,arr) => arr.indexOf(item) === idx); // または const nonUnique = [...新しいセット(配列)]; // 出力: [5, 4, 7, 8, 9, 2]
ほとんどの場合、変数をキーとして追跡するカウンター オブジェクトまたはマップを作成して問題を解決する必要があります。その頻度/発生を値として追跡します。
let string = 'カピラリパック';
const テーブル={};
for(let char of string) {
テーブル[文字]=テーブル[文字]+1 || 1;
}
// 出力 {k: 2, a: 3, p: 2, i: 2, l: 2}および
const countMap = new Map();
for (let i = 0; i < string.length; i++) {
if (countMap.has(string[i])) {
countMap.set(string[i], countMap.get(string[i]) + 1);
} それ以外 {
countMap.set(string[i], 1);
}
}
// Output Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2} 三項演算子 if…elseif…elseif を使用すると
関数 発熱(温度) {
戻り温度 > 97 ? 「医者に来てください!」
: 温度 < 97 ? 「外に出て遊びましょう!!」
: 温度 === 97 ? '少し休んでください!';
}
// 出力フィーバー(97): 「少し休んでください!」
Fever(100): "Visit Doctor!" 9. for ループはfor for..infor..in数値以外も受け入れるので、避けてください。forEach 、 for...of要素を直接取得します。forEachではインデックスも取得できますが、 for...of取得できません。forとfor...of配列内の穴を考慮しますが、他の 2 つは考慮しません。通常、日常のタスクでは複数のオブジェクトをマージする必要があります。
const ユーザー = {
名前：「カピル・ラグワンシ」、
性別：「男性」
};
const カレッジ = {
小学校: 「マニ小学校」、
中等教育: 「ラス中等学校」
};
const スキル = {
プログラミング: 'エクストリーム'、
水泳: '平均'、
睡眠中:「プロ」
};
const summary = {...ユーザー、...大学、...スキル};
// 出力性別：「男性」
名前：「カピル・ラグワンシ」
小学校: 「マニ小学校」
プログラミング：「エクストリーム」
中等学校: 「ラス中等学校」
寝ている：「プロ」
水泳: "平均" アロー関数式は、従来の関数式に代わるコンパクトな代替手段ですが、制限があり、すべての状況で使用できるわけではありません。これらは字句スコープ (親スコープ) を持ち、独自のスコープを持たないため、 this argumentsそれらが定義されている環境を参照します。
const 人 = {
名前：「カピル」、
SayName() {
this.name を返します。
}
}
person.sayName();
// 「Kapil」を出力しますが、
const person = {
名前：「カピル」、
言う名前: () => {
this.name を返します。
}
}
person.sayName();
// 出力 "" チェーン オプションのチェーン?。値が ? より前にある場合、評価を停止します。未定義または null であり、
未定義を返します。
const ユーザー = {
従業員： {
名前：「カピル」
}
};
ユーザー.従業員?.名前;
// 出力: "カピル"
ユーザー.雇用?.名前;
// 出力: 未定義
ユーザーの雇用名
// 出力: VM21616:1 Uncaught TypeError: 未定義のプロパティ 'name' を読み取れません組み込みのMath.random()メソッドを使用して配列をスクランブルします。
const リスト = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => {
Math.random() - 0.5 を返します。
});
// 出力(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
// もう一度呼び出します
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6] Null 合体演算子 (??) は論理演算子で、左オペランドが空または未定義の場合、その演算子を返します。右オペランド、それ以外の場合は左オペランドを返します。
const foo = null ?? '私の学校'; // 出力: 「私の学校」 const baz = 0 ?? 42; // 出力: 0
謎の3点...レストもスプレッドもできる！ ?
関数 myFun(a, b, ...manyMoreArgs) {
引数を返します。長さ;
}
myFun("1"、"2"、"3"、"4"、"5"、"6");
// 出力: 6および
const 部分 = ['肩', '膝']; const 歌詞 = ['頭', ...パーツ, 'そして', 'つま先']; 歌詞; //出力： (5) [「頭」、「肩」、「膝」、「そして」、「足の指」]
const search = (arr, low=0,high=arr.length-1) => {
ハイに戻ります。
}
検索([1,2,3,4,5]);
// 出力: 4 問題を解決する際、 .toPrecision()や.toFixed()などのいくつかの組み込みメソッドを使用して、多くのヘルパー関数を実装できます。
定数 = 10; num.toString(2); // 出力: "1010" num.toString(16); // 出力: "a" num.toString(8); // 出力: "12"
let a = 5; b = 8 とします。 [a,b] = [b,a] [a、b] // Output(2) [8, 5]
まあ、これは完全な省略表現のヒントではありませんが、文字列の使い方についてはよくわかります。
関数 checkPalindrome(str) {
return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// 出力: true Object.entries()、Object.keys()、Object.values() を使用して、オブジェクトのプロパティをプロパティ配列に変換します。
const obj = { a: 1、b: 2、c: 3 };
オブジェクト.エントリ(obj);
// 出力(3) [配列(2), 配列(2), 配列(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
長さ: 3
オブジェクト.キー(obj);
(3) [「a」、「b」、「c」]
オブジェクト.値(obj);
(3) [1、2、3]