ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptの基礎知識集(2) おすすめ集_基礎知識

JavaScriptの基礎知識集(2) おすすめ集_基礎知識

WBOY
WBOYオリジナル
2016-05-16 18:11:551122ブラウズ

添付の例を詳しく見てください。比較的簡単に記述できます。


1. Cookie の機能について:

コードをコピーします コードは次のとおりです。以下のように:

/**
* Cookie 操作ツール
* 使用方法: Save value: CookieTool('name','1',{expires: 7}) //値が 1、キー値が の Cookie を保存することを示します。 name は無効です。時刻 7 日後
* 値: CookieTool('name') //Return 1
* @param {} name
* @param {} value
* @param {} オプション
* @return {}
*/
CookieTool = function(name, value, options) {
if (typeof value != 'unknown') {
options = オプション || {};
if (value === null) {
options.expires = -1;
var 期限切れ = ' ';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number) ') {
date = new Date();
date.setTime(date.getTime() (options.expires * 24 * 60 * 60 * 1000)); else {
date = オプション .expires;
expires=' date.toUTCString();
}
var path = options.path='; '' ;
var ドメイン = options.domain ? '; ドメイン=' (options.domain) : '';
var secure = options.secure' : ''; cookie = [名前, '=', encodeURIComponent(value), 期限切れ, パス, ドメイン, セキュア].join('');
} else {
var cookieValue = null; cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i var cookie = トリム(cookies[i]);
if (cookie.substring(0, name.length 1) == (name '=')) {
cookieValue = decodeURIComponent(cookie.substring(name) .length 1));
break;
}
}
return cookieValue;



2. js オブジェクトを表示できる js 関数に関するクールなメソッド:





コードをコピー

コードは次のとおりです
/*** オブジェクトのプロパティを表示するために使用されます */ function debugObjectInfo(obj){ traceObject(obj); function trackObject(obj){
var str = ' ';
if(obj.tagName&&obj.name&&obj.id)
str="else{
str="
";
}
var key=[]; for(var i in obj ){
key.push(i);
key.sort();
for(var i=0;ivar v= new String(obj[key[i]]).replace(//g,">"); ="";
str=str "
" key[i] "" v "
";
writeMsg(str)
}
function trace(v){
var str="
";
str =String(v).replace(/,"str ="
";
writeMsg(str); >function writeMsg(s) {
traceWin=window.open("","traceWindow","height=600, width=800,scrollbars=yes");
traceWin.document.write(s);
}
}


3. 正規表現:

g はグローバル一致を表します
m は複数行の一致を表します
i は大文字と小文字を区別しない一致を表します
^ 一致を表します入力文字列の
$ は、入力文字列の終了位置と一致します。
* は、前の部分式と 0 回以上一致します。
は、前の部分式と 1 回以上一致します。 1,}
? この文字の後に他の修飾子 (*, , ? , {n}, {n,}, {n, m}) その後、一致パターンは非貪欲になります。非貪欲モードは検索文字列の可能な限り少ない部分と一致しますが、デフォルトの貪欲モードは検索文字列の可能な限り多くの部分と一致します。たとえば、文字列「oooo」の場合、「o ?」は単一の「o」に一致しますが、「o 」はすべての「o」に一致します。

d は、[0-9] と同等の数字に一致します。
D は、[^0-9]
w と同等で、「[A -Za」と同等です。 -z0-9_]"
W は、"[^A-Za-z0-9]" と同等の任意の非単語文字に一致します。
s は、スペース、タブ、フォームフィードなどを含む任意の空白文字に一致します。 to [fnrtv]
S は任意の非空白文字に一致します。 [^frntv]
b は単語の境界、つまり単語とスペースの間の位置に一致します。
B は単語以外の境界に一致します。

正規表現の一般的な js メソッド:
コードをコピー コードは次のとおりです:

/**
* ソース文字列内の要件を満たす部分文字列を検索します。
* @return {}
*/
function MatchDemo() {
var r, re; // 変数を宣言します。
var s = "スペインの雨は主に平地に降ります";
re = new RegExp("ain", "g"); // 正規表現オブジェクトを作成します。
r = s.match(re); // 文字列 s 内で一致を検索します。
return (r);
}

/**
* 正規表現を満たすソース文字列内のすべての文字列と位置情報を返します。*/
function RegExpTest() {
var ver = Number(ScriptEngineMajorVersion() "."
ScriptEngineMinorVersion())
var ans = '';
if (ver >= 5.5) { // JScript のバージョンをテストします。
var src = "スペインの雨は主に平地に降ります。";
var re = /w /g; // 正規表現パターンを作成します。
var arr;
while ((arr = re.exec(src)) != null)
ans = arr.index "-" arr.lastIndex arr "t";
ans = "最新バージョンの JScript を使用してください";
}
return
}

/**
* ソース文字列に対して正規表現チェックを実行して、正規表現に準拠しているかどうかを確認します。*/
function TestDemo() {
var s1;
var source = "abcdefg";
var regex = /w /g; // 正規表現パターンを作成します。
if (regex.test(source))
s1 = " が含まれます。
else
s1 = " が含まれません。
return ("'" ソース "'" s1 " '" regex.source "'");
}

/**
* ソース文字列内の正規表現文字列を検索します。
* @return {}
*/
function SearchDemo() {
var r, re;
var s = "スペインの雨は主に平地に降ります。";
re = /falls/i
r = s.search(re);


4. 優れたメソッド call() を学習して使用する価値があります:

call([thisObj[,arg1[, arg2[, [,.argN]]] ]])
パラメータ
thisObj
オプション。現在のオブジェクトとして使用されるオブジェクト。 arg1、arg2、、、argN
オプション。一連のメソッドパラメータが渡されます。
説明
call メソッドを使用すると、別のオブジェクトの代わりにメソッドを呼び出すことができます。 call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。

簡単な例:




コードをコピー

コードは次のとおりです: 関数 add (a,b) { alert(a b); function sub(a,b)
{
alert(a-b);
🎜>
add.call(sub,3,1);
//この例の意味は、sub を add に置き換えることです、add.call(sub,3,1) == add(3,1) )、実行結果は次のようになります:alert(4);


少し複雑な例:




コードをコピー

コードは次のとおりです。
function Class1() { this.name = "class1"; this.showNam = function() {
alert(this.name);
}
}

関数 Class2()
{
this.name = "class2";

var c1 = new Class1();
var c2 = new Class2();

c1.showNam.call(c2); c1 のメソッドが c2 で実行されました。c2 には showNam() メソッドがないことがわかり、c1 の showNam() メソッドは実行のために c2 に配置されるため、this.name は class2 になるはずです。は: アラート ("クラス 2");
多重継承の例:
コードをコピー コードは次のとおりです:

関数Class10()
{
this.showSub = function(a,b)
{
alert(a-b);
}
}

function Class11()
{
this.showAdd = function(a,b)
{
alert(a b)
}
}


function Class2();
{
Class10.call(this);
Class11.call(this)
}

5.apply 関数:
Function。apply(obj,args) メソッドは 2 つのパラメーターを受け取ることができます。
obj: このオブジェクトは Function クラスのこのオブジェクトを置き換えます。
args: これは配列であり、パラメーターとして Function に渡されます ( args-->arguments)
呼び出しのような継承の効果を実現します:
コードをコピー コードは次のとおりです。 :

function person(name,age){ // クラス、人間を定義します
this.name=name; //Name
this.age=age
this.sayhello=function(){alert ("hello")};
}
function Print(){ //クラス属性を表示します
this.funcName="Print"; .show=function(){
var msg=[];
for(this の var key){
if(typeof(this[key])!="function"){
msg .push([key,":", this[key]].join(""));
}
}
alert(msg.join(" "));
}
function Student( name,age,grade,school){ //学生クラス
person.apply(this,arguments);
Print.apply(this,arguments); this.grade=grade; //Grade
this.school=school; //school
}
var p1=new Person("jake",10);
var s1=new Student(" tom",13,6,"清華小学校");
s1.sayhello(); );


配列パラメーターの関数を最適化するには、apply を使用します。これはクールなメソッドです:



コードをコピーします

alert(Math.max(5,7,9,3,1,6)) //9

しかし、多くの場合、配列内の最大の要素を見つける必要があります。
var arr=[5,7,9,1]
alert(Math.max(arr)) // これは機能しません。必ず次のように記述してください。

function getMax(arr){
var arrLen=arr.length;
for(var i=0,ret=arr[0];iret=Math.max(ret,arr[i]);
}
return ret;

apply を使用するには、次のコードを参照してください。 🎜>function getMax2( arr){
return Math.max.apply(null,arr);
}


2 つの配列をマージする別の例を次に示します。 >


コードをコピー


コードは次のとおりです:


もう 1 つの例は、配列のプッシュ メソッドです。
var arr1=[1,3,4]; var arr2=[3,4,5]; arr2 を 1 つずつ追加し、最後に arr1 を追加します。 =[1,3,4,3,4,5] arr1.push(arr2) は明らかに機能しません。 これを実行すると [1,3,4,[3,4,5]] が取得されるため、 ループを使用して 1 つずつプッシュすることしかできません (もちろん、arr1.concat(arr2) を使用することもできます)ただし、 concat メソッドは arr1 自体を変更しません) var arrLen=arr2.length
for(var i=0;iarr1.push(arr2[i]);
}


適用を使用するには:




コードをコピーします


コードは次のとおりです。


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