ネイティブjsの一般的なメソッドを整理しました

フロントエンド市場の急速な発展に伴い、現在の市場ではますます多くのスキルを習得する人材が求められています。今日は、ネイティブ JS クロージャー、継承、プロトタイプ チェーン、ノードについてまとめます。お役に立てれば幸いです。 -end road. ヘルプ

以下は個人的な要約であり、一部はマスターによってコピーされ、後で参照しやすいようにまとめられています（間違いがある場合は、指摘していただければ幸いです）。できるだけ早く）。

1. !! ブール値
への強制変換は、判定する必要がある値が true であるか false であるかによって判定されます。この場合、プロテーゼは false を除きます。残りもとても価値があります。

False 値には次のものが含まれます: 0、""、null、未定義、false、NaN、

これらの 6 つを除き、他の値はオブジェクト、配列、正規表現を含めて「true」です、機能など。
注: 「0」、「null」、「false」、{}、[] も true 値です。
それでは、ブール値を変換する方法を見てみましょう。
例:
最初に 3 つの変数を宣言します。x は null、y は空文字列、str は文字列です。「!!」を追加した後の結果を見てみましょう。

var x=null; var str="abcd"; console.log(!!y) // false; str) // true;

上で述べたように、false 値は false を返し、true 値は true を返します。

2. str の前に ➕ 記号を追加すると、強制的に Number に変換されます
文字列の前に + を追加して、強制的に Number に変換します。

var str="88"; console.log(+str) // 88 //ただし、混合型文字列の場合は NaN に変換されます var b="1606e"; / / NaN

3. 信頼性の低い未定義の信頼性のある void 0
JavaScript では、項目が未定義かどうかを判断したいと想定して、通常次のように書きます:

if(a === unknown){ dosomething . .... }

なぜなら、JavaScriptでは、unknownは信頼できないからです
例:
関数関数の中にunknownを置いた場合、次のように、値を代入できるローカル変数として扱います。試してみましょう。

function foo2(){ var unknown=1; console.log(unknown) } foo2(); // 1;

ただし、関数内でグローバル変数が定義されている場合、値を割り当てることはできません

var undefined ; function foo2(){ unknown=1; console.log(unknown) } foo2() // unknown

次に、代わりに void 0 または void (0) を使用してみましょう:
最初に変数 a を宣言し、値を代入します。 unfineed まで、次は void 0 を使って判定します。

var a=unknown; //void 0 を使用して if(a===void 0){ console.log('true') } // true // void (0) を使用して if( a== =void (0)){ console.log('true') } // true //最後にこれら 2 つの戻り値を出力します console.log(void 0,void (0)) // 未定義 未定義

これで void 0 操作を通じて未定義を取得できるようになり、将来値が未定義であると判断する必要がある場合は、void 0 または void (0) を直接使用し、これら 2 つの値の直接の戻り値を使用できます。は未定義なので、非常に信頼性があります!

4. 文字列にも長さ属性があります。
すべての配列には長さ属性があることがわかっています。空の配列であっても、長さは 0 なので、文字列は存在しますか?次に検証してみましょう。

var str="sdfsd5565s6dfsd65sd6+d5fd5"; console.log(str.length) // 26

結果は Yes なので、型を判断するときに、単純に length 属性を使用してそれがタイプであるかどうかを判断することはできません。 array. の場合、次のメソッドを使用して配列であるかどうかを判断できます:

var obj=[1,2]; console.log(toString.call(obj) === '[object Array]');

5. ランダムな配列を作成する方法、または既存の配列をスクランブルする方法は?
プロジェクト内でランダムにスクランブルされた配列が必要な場合があるため、次を実装しましょう:
まず配列を作成します:

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

次にそれを中断しましょう:

arr.sort(()=> ;{ return Math.random() - 0.5 }) // [1, 0, 2, 3, 4, 6, 8, 5, 7, 9]

2 番目のタイプの Random メソッド:

arr.sort( (a,b)=>{ return a>Math.random()*10; }) // [1, 2, 0, 6, 4, 3, 8, 9, 7, 5]

前回通常のソートは次のようになります:

arr.sort(function(a,b){ return b-a });

分析:
まず通常のソートについて説明します。
a、b は配列内の任意の 2 つの要素を表し、reutrn a-b の出力は小さいものから大きいものの順にソートされ、b-a の出力は大きいものから小さいものの順にソートされます。
次に、それをどのように中断するかについて説明します。
言うまでもなく、次のステップは、js sort メソッドを使用して実装し、0 ～ 1 の間のランダムな 10 進数を実装して、0.5 を減算します。このとき、戻り比較後に得られた値に応じてソートされるため、大から小、または小から大という正規ではないソートが生成されます。

スクランブルの 2 番目の方法も、並べ替え方法に従い、a と b を渡して乱数と比較する方法です。比較方法は明確ではありません。

6. 前後、前後のスペースをすべて削除します
これは、スペースを削除するために特別に書かれたメソッドのセットです。すべてのスペース、前後のスペース、前後のスペースなど、さまざまな状況に適しています。

var strr="    1 ad dertasdf sdfASDFDF DFG SDFG    "     //  type 1-所有空格，2-前后空格，3-前空格，4-后空格function trim(str,type){     switch (type){         case 1:return str.replace(/\s+/g,"");         case 2:return str.replace(/(^\s*)|(\s*$)/g, "");         case 3:return str.replace(/(^\s*)/g, "");         case 4:return str.replace(/(\s*$)/g, "");         default:return str;     } } console.log( trim(strr,1))      //  "1addertasdfsdfASDFDFDFGSDFG"

分析:
この方法では通常のマッチング形式を使用します。後で通常のマッチングを分離してシリーズをまとめますので、お楽しみに! ！ ！

s: スペース文字、タブ、改行文字、改行文字 S: s 以外のすべての内容 /g: グローバル一致 ^: 行頭で一致 $: 行末で一致 +: 行頭の数繰り返し > 0 *: 繰り返し回数 >=0 | : または

replace(a,b): このメソッドは、キャラクター作成時に一部の文字を他の文字に置き換えるのに使用されます。カンマの前の値 a は、カンマの後の値 b に置き換えられます。

7. 大文字と小文字の切り替え (通常の一致、置換) このメソッドは主に、最初の文字を大文字に、最初の文字を小文字に、すべてを大文字に変換する必要があるいくつかのメソッドに提供されます。小文字にします。

type: 1: 最初の文字を大文字 2: ホームページの小文字 3: 大文字と小文字の変換 4: すべて大文字 5: すべて小文字

元の文字列:

var str="sdfwwerasfddffddeerAasdgFegqer"; function changeCase(str,type) {    //这个函数是第三个大小写转换的方法     function ToggleCase(str) {         var itemText = ""         str.split("").forEach(                 function (item) {                  // 判断循环字符串中每个字符是否以a-z之间开头的并且重复大于0次                     if (/^([a-z]+)/.test(item)) {                     //  如果是小写，转换成大写                         itemText += item.toUpperCase();                     }                 //  判断循环字符串中每个字符是否以A-Z之间开头的并且重复大于0次                     else if (/^([A-Z]+)/.test(item)) {                    //   如果是大写，转换成小写                         itemText += item.toLowerCase();                     }                     else{                   //  如果都不符合，返回其本身                         itemText += item;                     }                 });         return itemText;     }   //下面主要根据传入的type值来匹配各个场景     switch (type) {          //当匹配         case 1:             return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {                  //v=验证本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer                 return v1.toUpperCase() + v2.toLowerCase();             });         case 2:             return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {                 //v=验证本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer                 return v1.toLowerCase() + v2.toUpperCase();             });         case 3:             return ToggleCase(str);         case 4:             return str.toUpperCase();         case 5:             return str.toLowerCase();         default:             return str;     } }  console.log(changeCase(str,1))   //SdfwwerasfddffddeerAasdgFegqer

分析:

split: 文字列を分割するために使用されます。文字列配列 w: 0 ～ 9 の数字、または a ～ z および A ～ Z の文字、またはアンダースコア W: w 以外、上記以外の特殊記号など toUpperCase: 大文字に変換 toLowerCase: 小文字に変換 replace 2 番目のパラメータは関数にすることができます。

関数 パラメータのうち、最初のパラメータはそれ自体、2番目のパラメータは通常の一致するコンテンツ、3番目のパラメータは残りのコンテンツと一致します

小さな実験を通して検証してみましょう:

インターネットでは、次のように置き換えられると言われていますには 4 つのパラメータを指定できますが、4 番目のパラメータの意味は検証されていません。最初の 3 つは検証自体、2 番目のパラメータは通常の一致結果、3 番目のパラメータは検証後の残りの値です。 2回目の試合。

8. 受信文字列を n 回ループします

str は渡されるランダムな文字列、count はループ数です

var str="abc";  var number=555; function repeatStr(str, count) {     //声明一个空字符串，用来保存生成后的新字符串     var text = &#39;&#39;;     //循环传入的count值，即循环的次数     for (var i = 0; i < count; i++) {        //循环一次就把字符串+到我们事先准备好的空字符串上         text += str;     }     return text; }   console.log(repeatStr(str, 3))         // "abcabcabc"   console.log(repeatStr(number, 3))      // "555555555"

分析: count ループの数に従って、それをループ本体にコピーし、return は+=

9 以降の値。検索文字列の A コンテンツを B コンテンツに置き換えます

let str="abacdasdfsd" function replaceAll(str,AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); return str.replace(raRegExp, ARepText); } console.log(replaceAll(str,"a","x")) // xbxcdxsdfsd

str: 編集する必要がある文字列そのもの AFindText: 編集する必要がある内容置き換えられた ARepText: 置き換えられるコンテンツ
分析: 通常の作成、コンテンツの一致、置き換え

10. 一般的な形式、電子メール、携帯電話番号、名前、大文字、小文字の検出

フォーム検証 中に、検証が必要になることがよくあります。一部のコンテンツについては、一般的な検証例をいくつか示します。

function checkType (str, type) {     switch (type) {         case 'email':             return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);         case 'phone':             return /^1[3|4|5|7|8][0-9]{9}$/.test(str);         case 'tel':             return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);         case 'number':             return /^[0-9]$/.test(str);         case 'english':             return /^[a-zA-Z]+$/.test(str);         case 'chinese':             return /^[\u4E00-\u9FA5]+$/.test(str);         case 'lower':             return /^[a-z]+$/.test(str);         case 'upper':             return /^[A-Z]+$/.test(str);         default :             return true;     } } console.log(checkType ('hjkhjhT','lower'))   //false

分析:

checkType ('hjkhjhT',' lower') '検証する文字列'、'一致する形式' email: 検証用メール Phone: 検証用携帯電話番号 tel: 検証用固定電話番号 Number: 検証用番号 英語: Verify英語の文字 chinese: 中国語の文字を確認する lower: 小文字を確認する upper: 大文字を確認する

これらのケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSSエンコーディングを変換する方法

css3クリックして波及効果を表示

キャンバスを使用してボールとマウスの相互作用を実現する方法

以上がネイティブjsの一般的なメソッドを整理しましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。