ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript_javascript スキルにおける実践的なネイティブ API のまとめ

JavaScript_javascript スキルにおける実践的なネイティブ API のまとめ

WBOY
WBOYオリジナル
2016-05-16 15:59:001382ブラウズ

トピックに直接移動

文字列オブジェクトを解析します

JavaScript オブジェクトを JSON にシリアル化できること、また JSON をオブジェクトに解析できることは誰もが知っていますが、問題は、JSON でもオブジェクトでもない「もの」がある場合、JSON に変換するのが不便であることです。どちらかを選択してから eval を使用すると便利です

var obj = "{a:1,b:2}";  // 看起来像对象的字符串
eval("("+ obj +")")   // {a: 1, b: 2}

eval は文字列式を実行でき、文字列オブジェクト obj を実際のオブジェクトに実行したいので、eval を使用する必要があります。ただし、eval がステートメントとして {} を使用して obj を実行するのを防ぐために、obj の外側に () のペアを置き、式に解析できるようにします。

& (ビット単位の AND)

数値が 2 の n 乗であるかどうかを判断するには、その数値から 1 を引いた値と AND を演算します。

var number = 4
(number & number -1) === 0 // true

^ (ビットごとの XOR)

異なる 3 番目の変数を使用すると、2 つの変数の値を交換できます

var a = 4,b = 3
a = a ^ b //  7
b = a ^ b //  4
a = b ^ a //  3

日付のフォーマット

フォーマット後の時間を取得したいですか?年、月、日、時、分、秒を取得する必要はなくなり、3 つのステップで取得できるようになりました

var temp = new Date();
var regex = /\//g;
(temp.toLocaleDateString() + ' ' + temp.toLocaleTimeString().slice(2)).replace(regex,'-');

// "2015-5-7 9:04:10"

フォーマットされた時刻を時刻オブジェクトに変換したいですか? Date コンストラクター

を直接使用します。
new Date("2015-5-7 9:04:10");

// Thu May 07 2015 09:04:10 GMT+0800 (CST)

標準時間オブジェクトを UNIX タイムスタンプに変換したいですか? valueOf でそれが完了します

(new Date).valueOf();

// 1431004132641

多くの友人も、これでタイムスタンプをすぐに取得できることを思い出させてくれました

新しい日付

1ドルプラス

1 ドルプラスすると、文字列数値を数学的な数値にすばやく変換できます。つまり、

var number = "23" 
typeof number // string
typeof +number // number

時間オブジェクトをタイムスタンプに変換できます

new Date // Tue May 12 2015 22:21:33 GMT+0800 (CST)
+new Date // 1431440459887

エスケープ URI

ルート内のパラメータとして URL を渡す必要がありますが、エスケープしてください

var url = encodeURIComponent('http://segmentfault.com/questions/newest')

// "http%3A%2F%2Fsegmentfault.com%2Fquestions%2Fnewest"

逆脱出

decodeURIComponent(url)
// "http://segmentfault.com/questions/newest"


番号

文字列インターセプトを行わずに小数点以下の小数点以下の桁を保持したい場合は、toFixed を使用してそれらを取り除きます

number.toFixed()   // "12346"
number.toFixed(3)  // "12345.679"
number.toFixed(6)  // "12345.678900"

パラメータの範囲は 0~20 で、書かれていない場合、デフォルトは 0 です

タイプ検出

Typeof は最も頻繁に使用される型検出方法です

typeof 3    // "number"
typeof "333"  // "string"
typeof false  // "boolean"

基本的な (単純な) データ型には適していますが、参照データ型になると、それほど簡単ではありません

typeof new Date()  // "object"
typeof []      // "object"
typeof {}      // "object"
typeof null     // "object"   

最初の 3 つは耐えられますが、null は実際にはオブジェクトを返します。冗談ですか! ! ! (追記: 実はこれは JavaScript のバグで、人が修正することはできません ꒰・◡・๑꒱ )

今回は、instanceof

を使用します。
toString instanceof Function
// true
(new Date) instanceof Date
// true
[] instanceof Object
// true
[] instanceof Array
// true

実際、[] と Object が true になることがわかります。[] もオブジェクトであることはわかっていますが、型を決定するためのより正確な方法が必要であり、それがここにあります。
Object.prototype.toString() を使用して判定します。各オブジェクトが検出を通過するには、Function.prototype.call または Function.prototype.apply を使用して

を呼び出す必要があります。
var toString = Object.prototype.toString;

toString.call(new Date)  // "[object Date]"
toString.call(new Array)  // "[object Array]"
toString.call(new Object) // "[object Object]"
toString.call(new Number) // "[object Number]"
toString.call(new String) // "[object String]"
toString.call(new Boolean) // "[object Boolean]"

toString メソッドはオーバーライドされる可能性が高いため、使用する必要がある場合は、
Object.prototype.toString() メソッドを直接使用できます

継承の実装

公式の例を見てください

//Shape - superclass
function Shape() {
 this.x = 0;
 this.y = 0;
}

Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
 Shape.call(this); //call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle();

rect instanceof Rectangle //true.
rect instanceof Shape //true.

rect.move(1, 1); //Outputs, "Shape moved."

呼び出しを通じて初期化されたプロパティとメソッドを取得し、Object.create を通じてプロトタイプ オブジェクトのプロパティとメソッドを取得します

反復

ES5 には、map、filter、some、every、reduce などの反復関数が多数あります。

配列

特定の API については、ここで詳しく紹介されています。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Glob...
ここにいくつかの言葉があります:
結合、ポップ、プッシュ、リバース、シフト、ソート、スプライス、シフト解除により元の配列が変更されます

concat,indexOf,lastIndexOf,slice,toString は元の配列を変更しません

map、filter、some、every、reduce、forEach などの反復メソッドは、元の配列を変更しません

いくつかの注意点:

1 シフト、ポップは削除された要素を返します
2 splice は、削除された要素で構成される配列、または空の配列を返します
3 プッシュすると新しい配列の長さが返されます
true の場合は 4 回停止します
false がある場合はストップごとに 5 つ
6 上記の反復メソッドでは、最後にパラメーター thisArg を追加できます。これは、コールバック実行時の this 値です。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

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