ホームページ ウェブフロントエンド jsチュートリアル 開発中によく使用される js メソッドのカプセル化 (概要)

開発中によく使用される js メソッドのカプセル化 (概要)

Oct 11, 2018 pm 03:45 PM
javascript カプセル化

この記事では、開発中によく使用される js メソッドのカプセル化について紹介します。必要な方は参考にしていただければ幸いです。

1. 配列であるかどうかを判断します

1

2

3

4

5

function isArray(arr){

return Object.prototype.toString.call(arr) ==='[object Array]';

}

  

isArray([1,2,3]) //true

ログイン後にコピー

2. 関数であるかどうかを判断します (3 種類)

1

2

3

4

5

6

function isFunction(fn) {

return Object.prototype.toString.call(fn) ==='[object Function]';

return fn.constructor == Function;

return fn instanceof Function;

return typeof (fn) == Function;

}

ログイン後にコピー

3. 配列の重複排除。配列内の要素は数値または文字列のみとみなします。

1

2

3

4

5

6

7

8

9

function newarr(arr){

var arrs = [];

for(var i =0;i<arr.length;i++){

if(arrs.indexOf(arr[i])== -1){

arrs.push(arr[i])

}

}

return arrs;

}

ログイン後にコピー

4。動的重複排除#

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

var arr = [1,2, 3, 4];

function add() {

var newarr = [];

$(&#39;.addEle&#39;).click(() => {

var rnd = Math.ceil(Math.random() * 10);

newarr.push(rnd)

for (var i =0; i < newarr.length; i++) {

if (arr.indexOf(newarr[i]) == -1) {

arr.push(newarr[i])

arr.sort(function (a, b) {

return b - a //降序

});

}

}

console.log(arr)//[1,2,3,4,5,6,7,8,9]

})

}

add()

ログイン後にコピー

#。 ## 5. 文字列スペースを削除します (3 つの状況を含む)

#

1

2

3

4

5

function trim(str) {

return str.replace(/^[" "||" "]*/,"").replace(/[" "|" "]*$/,"");// 去除头和尾

return str.replace(/\s/g,&#39;&#39;);//去除所有空格

return str.replace(/(\s*$)/g,"");//去除右边所有空格

}

ログイン後にコピー
6. 電子メール アドレスかどうかを確認します

1

2

3

4

5

6

7

8

9

function isEmail(emailStr) {

var reg = /^[a-zA-Z0-9]+([._-]*[a-zA-Z0-9]*)*@[a-zA-Z0-9]+.[a-zA-Z0-9{2,5}$]/;

var result = reg.test(emailStr);

if (result) {

alert("ok");

} else {

alert("error");

}

}

ログイン後にコピー
7。メールアドレスか携帯電話番号

1

2

3

4

5

6

7

8

function isMobilePhone(phone) {

var reg = /^1\d{10}$/;

if (reg.test(phone)) {

alert(&#39;ok&#39;);

} else {

alert(&#39;error&#39;);

}

}

ログイン後にコピー
8. オブジェクトの最初の要素の番号を取得します

1

2

3

4

5

6

7

8

9

10

11

function getObjectLength(obj){

var i=0;

for( var attrin obj){

if(obj.hasOwnProperty(attr)){

i++;

}

}

console.log(i);

}

var obj = {name:&#39;kob&#39;,age:20};

getObjectLength(obj) //2

ログイン後にコピー
9。ブラウザ ウィンドウの位置に相対的な要素の数。{x,y} オブジェクトを返します。

1

2

3

4

5

6

7

8

9

10

function getPosition(element) {

var offsety = 0;

offsety += element.offsetTop;

var offsetx = 0;

offsetx += element.offsetLeft;

if (element.offsetParent != null) {

getPosition(element.offsetParent);

}

return { Left: offsetx, Top: offsety };

} 

ログイン後にコピー
10 文字列内に特定の文字が出現する回数を決定します。 ##

1

2

3

4

5

6

7

8

var str = &#39;To be, or not to be, that is the question.&#39;;

var count = 0;

var pos = str.indexOf(&#39;e&#39;);

while (pos !== -1) {

count++;

pos = str.indexOf(&#39;e&#39;, pos + 1);

}

console.log(count) //4

ログイン後にコピー

11 、配列内で最も多く出現する要素を計算します

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var arrayObj = [1,1, 2, 3, 3, 3,4, 5, 5];

var tepm = &#39;&#39;,count =0;

var newarr = new Array();

for(var i=0;i<arrayObj.length;i++){

if (arrayObj[i] != -1) {

temp = arrayObj[i];

}

for(var j=0;j<arrayObj.length;j++){

if (temp == arrayObj[j]) {

count++;

arrayObj[j] = -1;

}

}

newarr.push(temp + ":" + count);

count = 0;

}

for(var i=0;i<newarr.length;i++){

  console.log(newarr[i]);

}

ログイン後にコピー

12 配列フィルター (検索関数)

1

2

3

4

5

6

7

8

var fruits = [&#39;apple&#39;,&#39;banana&#39;, &#39;grapes&#39;,&#39;mango&#39;, &#39;orange&#39;];

function filterItems(query) {

return fruits.filter(function(el) {

return el.toLowerCase().indexOf(query.toLowerCase()) > -1;

})

}

 

console.log(filterItems(&#39;ap&#39;)); // [&#39;apple&#39;, &#39;grapes&#39;]

ログイン後にコピー

13. オブジェクトのコピー (No. A)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

//第一种

var cloneObj =function(obj) {

var newObj = {};

if (obj instanceof Array) {

newObj = [];

}

for (var keyin obj) {

var val = obj[key];

newObj[key] = typeof val === &#39;object&#39; ? cloneObj(val) : val;

}

return newObj;

};

//第二种

function clone(origin , target){

var target = target || {};

for(var propin origin){

target[prop] = origin[prop];

}

return target;

} 

ログイン後にコピー

14. 最大値と配列の最小値

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

var newObj ={};

function deepClone(origin,target){

var target = target || {},

toStr = Object.prototype.toString,

arrStr = "[object Array]";

 

for(var propin origin){

if(origin.hasOwnProperty(prop)){

if(origin[prop] != "null" && typeof(origin[prop]) == &#39;object&#39;){//判断原型链

target[prop] = (toStr.call(origin[prop]) == arrStr) ? [] : {}//判断obj的key是否是数组

deepClone(origin[prop],target[prop]);//递归的方式

}else{

target[prop] = origin[prop];

}

}

}

return target

 

}

 

deepClone(obj,newObj);

console.log(newObj)

ログイン後にコピー

16. JSON 配列の重複排除

1

2

3

4

5

6

7

8

9

Array.prototype.max = function(){

return Math.max.apply({},this)

}

  

Array.prototype.min = function(){

return Math.min.apply({},this)

}

  

console.log([1,5,2].max())

ログイン後にコピー

17. 2 つの配列を比較し、交差部分を取り出します

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function UniquePay(paylist){

var payArr = [paylist[0]];

for(var i =1; i < paylist.length; i++){

var payItem = paylist[i];

var repeat = false;

for (var j =0; j < payArr.length; j++) {

if (payItem.name == payArr[j].name) {

repeat = true;

break;

}

}

if (!repeat) {

payArr.push(payItem);

}

}

return payArr;

} 

ログイン後にコピー

18. 配列合計オブジェクトの比較。配列要素

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

Array.intersect = function () {

var result = new Array();

var obj = {};

for (var i =0; i < arguments.length; i++) {

for (var j =0; j < arguments[i].length; j++) {

var str = arguments[i][j];

if (!obj[str]) {

obj[str] = 1;

}

else {

obj[str]++;

if (obj[str] == arguments.length)

{

result.push(str);

}

}//end else

}//end for j

}//end for i

return result;

}

console.log(Array.intersect(["1","2", "3"], ["2","3", "4", "5", "6"]))

ログイン後にコピー

19と同じキーを持つオブジェクトを取り出し、配列中の要素を削除します。

1

2

3

4

5

6

7

8

9

var arr = [&#39;F00006&#39;,&#39;F00007&#39;,&#39;F00008&#39;];

var obj = {&#39;F00006&#39;:[{&#39;id&#39;:21}],&#39;F00007&#39;:[{&#39;id&#39;:11}]}

var newobj = {};

for(var itemin obj){

if(arr.includes(item)){

newobj[item] = obj[item]

}

}

console.log(newObj)

ログイン後にコピー

20を決定します。配列に特定の要素が含まれているかどうか

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

//第一种

Array.prototype.remove = function(val){

var index = this.indexOf(val);

if(index !=0){

this.splice(index,1)

}

}

[1,3,4].remove(3)

//第二种

function remove(arr, indx) {

for (var i =0; i < arr.length; i++) {

var index = arr.indexOf(arr[i]);

if (indx == index) {

arr.splice(index, 1)

}

}

return arr

}

ログイン後にコピー
要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、

JavaScript ビデオ チュートリアルをご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

JavaScript グラフィック チュートリアル

#JavaScriptオンラインマニュアル

以上が開発中によく使用される js メソッドのカプセル化 (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

TrendForce: Nvidia の Blackwell プラットフォーム製品により、TSMC の CoWoS 生産能力は今年 150% 増加します TrendForce: Nvidia の Blackwell プラットフォーム製品により、TSMC の CoWoS 生産能力は今年 150% 増加します Apr 17, 2024 pm 08:00 PM

4月17日の当サイトのニュースによると、TrendForceは最近、Nvidiaの新しいBlackwellプラットフォーム製品に対する需要は強気で、2024年にはTSMCのCoWoSパッケージング総生産能力が150%以上増加すると予想されるレポートを発表した。 NVIDIA Blackwell の新しいプラットフォーム製品には、B シリーズ GPU と、NVIDIA 独自の GraceArm CPU を統合する GB200 アクセラレータ カードが含まれます。 TrendForce は、サプライチェーンが現在 GB200 について非常に楽観的であることを確認しており、2025 年の出荷台数は 100 万台を超え、Nvidia のハイエンド GPU の 40 ~ 50% を占めると予想されています。 Nvidiaは今年下半期にGB200やB100などの製品を提供する予定だが、上流のウェーハパッケージングではさらに複雑な製品を採用する必要がある。

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

AMD「Strix Halo」FP11のパッケージサイズを公開:Intel LGA1700と同等、Phoenixより60%大きい AMD「Strix Halo」FP11のパッケージサイズを公開:Intel LGA1700と同等、Phoenixより60%大きい Jul 18, 2024 am 02:04 AM

このWebサイトは7月9日、AMD Zen5アーキテクチャの「Strix」シリーズプロセッサには2つのパッケージングソリューションがあり、小型のStrixPointはFP8パッケージを使用し、StrixHaloはFP11パッケージを使用すると報じた。出典: videocardz 出典 @Olrak29_ 最新の事実は、StrixHalo の FP11 パッケージ サイズが 37.5mm*45mm (1687 平方ミリメートル) であり、これは Intel の AlderLake および RaptorLake CPU の LGA-1700 パッケージ サイズと同じであるということです。 AMD の最新の Phoenix APU は、サイズ 25*40mm の FP8 パッケージング ソリューションを使用しています。これは、StrixHalo の F

See all articles