見落としがちなJavaScriptの知識ポイント

今回はJavaScriptについて見落としがちな注意事項についてお届けします。

1. オブジェクトのすべてのキーを取得します:

var arr = ['a', 'b', 'c'];Object.keys(arr ); //["0","1","2"]var obj={name:Jack,age:12}Object.keys(obj)//["name","age"]Object.getOwnPropertyNames(obj)

2. 関数の 属性とメソッド

name 属性: function キーワードの直後にある関数名を返します。

function f1() {}
f1.name // 'f1'var f2 = function () {};
f2.name // ''var f3 = function myName() {};
f3.name // 'myName'

length 属性: 関数に渡されることが予想されるパラメーターの数、つまり関数定義内のパラメーターの数を返します。

function f(a, b) {}
f.length // 2

関数の toString メソッドは関数のソース コードを返します。

function f() {
  a();
  b();
  c();
}
f.toString()// function f() {//  a();//  b();//  c();// }

3. 通常、eval の最も一般的な機会は JSON データ文字列を解析することですが、正しいアプローチはブラウザーによって提供される JSON.parse メソッドを使用することです

4. ビット演算子は直接操作するために使用されます。バイナリビットの計算は全部で7つあります。

Or 演算 (or): 記号は | で、両方の 2 進数ビットが 0 の場合、結果は 0 になり、それ以外の場合は 1 になることを意味します。

And 演算 (and): 記号は & です。これは、両方の 2 進ビットが 1 の場合、結果は 1 になり、それ以外の場合は 0 になることを意味します。

操作なし (not): 記号は ~ で、バイナリ ビットを反転することを意味します。

排他的 OR 演算 (xor): 記号は ^ です。これは、2 つのバイナリ ビットが同じでない場合、結果は 1 になり、そうでない場合は 0 になることを意味します。

左シフト演算(左シフト): 記号は<<です。
左シフト演算子は、数値のバイナリ値を指定された桁数だけ左に移動し、最後に 0 を付けます。つまり、指定された 2 の累乗を乗算します (最上位ビットである符号ビットは、運動には参加しません）。

// 4 の 2 進形式は 100、 // 1 ビット左にシフトすると 1000 (つまり、10 進数で 8) // これは 2 の 4 乗 << 1 を乗算することと同じです。 // 8-4 << 1// -8

右シフト演算 (右シフト): 記号は >> です。
右シフト演算子は、数値のバイナリ値を指定された桁数だけ右に移動し、先頭を 0 で埋めます。つまり、指定された 2 の累乗で除算します (最上位ビットである符号ビットは、運動には参加しません）。

4 > つまり、10 進数で 2
*/-4 >> ; 1// -2/*
// -4 の 2 進形式は 1111111111111111111111111100 なので、
// 1 桁右にシフトして、1 を追加します先頭に、1111111111111111111111111111110を取得、
// 10進数で-2です
*/


符号ビット付き右シフト演算(ゼロ埋め右シフト): 記号は>>です。したがって、この演算は常に正の値を返します。正の数の場合、この演算の結果は右シフト演算子 (») とまったく同じになります。主な違いは、負の数の場合です

// -4 のバイナリ形式は 1111111111111111111111111111100 なので、
// 符号ビットを 1 ビット右にシフトすると、011111111111111111111111111111 が得られます。 10、

*/


5. JavaScript のネイティブ エラー タイプ

SyntaxError は、コードを解析するときに発生する構文エラーです。

// 变量名错误var 1a;// 缺少括号console.log 'hello');

ReferenceErrorは、存在しない変数を参照したときに発生するエラーです。

unknownVariable// ReferenceError: unknownVariable is not definedconsole.log() = 1// ReferenceError: Invalid left-hand side in assignmentthis = 1// ReferenceError: Invalid left-hand side in assignment

RangeError は、値が有効範囲外の場合に発生するエラーです。主な状況はいくつかあります。1 つは配列の長さが負の数であること、もう 1 つは Number オブジェクトのメソッド パラメーターが範囲外であり、関数スタックが最大値を超えていることです。

new Array(-1)// RangeError: Invalid array length(1234).toExponential(21)// RangeError: toExponential() 引数は 0 から 20 の間でなければなりません

new 123//TypeError: number is not a funcvar obj = {};
obj.unknownMethod()// TypeError: obj.unknownMethod is not a function

が正しくない場合にスローされるエラーで、主に encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()、unescape() の 6 つの関数が関係します。

decodeURI('%2')// URIError: URI malformed

eval 関数が正しく実行されなかった場合、EvalError がスローされます。このエラー タイプは ES5 では表示されなくなり、以前のコードとの互換性を確保するためにのみ残されています。 6. カスタム エラー

function UserError(message) {   this.message = message || "默认信息";   this.name = "UserError";
}
UserError.prototype = new Error();
UserError.prototype.constructor = UserError;

上記のコードは、エラー オブジェクト UserError をカスタマイズし、Error オブジェクトを継承させます。その後、このカスタム エラーを生成できます。

new UserError("これはカスタム エラーです!");

7. JavaScript プログラミング スタイル

インデント

ブロックの先頭の中括弧は新しい行で開始する必要はありませんが、以下に示すようにブロックの直後に続ける必要があります:

block{
    ···
}

関数が呼び出されるときにスペースがないことを示します。関数名と左括弧の間にあります。

は、関数が定義されるときに、関数名と左括弧の間にスペースがないことを意味します。

其他情况时，前面位置的语法元素与左括号之间，都有一个空格。

行尾的分号
建议不要省略

全局变量
JavaScript最大的语法缺点，可能就是全局变量对于任何一个代码块，都是可读可写。这对代码的模块化和重复使用，非常不利。
因此，避免使用全局变量。如果不得不使用，用大写字母表示变量名，比如UPPER_CASE。

变量声明
JavaScript会自动将变量声明”提升”（hoist）到代码块（block）的头部。

if (!o) {  var o = {};
}// 等同于var o;if (!o) {
  o = {};
}

为了避免可能出现的问题，最好把变量声明都放在代码块的头部。

for (var i = 0; i < 10; i++) {  // ...}// 写成var i;for (i = 0; i < 10; i++) {  // ...}

另外，所有函数都应该在使用之前定义，函数内部的变量声明，都应该放在函数的头部。

new命令
JavaScript使用new命令，从构造函数生成一个新对象。

var o = new myObject();

上面这种做法的问题是，一旦你忘了加上new，myObject()内部的this关键字就会指向全局对象，导致所有绑定在this上面的变量，都变成全局变量。
因此，建议使用Object.create()命令，替代new命令。如果不得不使用new，为了防止出错，最好在视觉上把构造函数与其他函数区分开来。比如，构造函数的函数名，采用首字母大写（InitialCap），其他函数名一律首字母小写。

with语句
禁止使用with语句。

相等和严格相等
不要使用“相等”（==）运算符，只使用“严格相等”（===）运算符。

语句的合并
有些程序员追求简洁，喜欢合并不同目的的语句。比如，原来的语句是

a = b;if (a) {  // ...}```

他喜欢写成下面这样。

if (a = b) {
// ...
}

虽然语句少了一行，但是可读性大打折扣，而且会造成误读，让别人误解这行代码的意思是下面这样。

```if （a === b）{  // ...}```

建议不要将不同目的的语句，合并成一行。
- 自增和自减运算符
自增（++）和自减（--）运算符，放在变量的前面或后面，返回的值不一样，很容易发生错误。事实上，所有的++运算符都可以用+= 1代替。

- switch…case结构switch...case结构要求，在每一个case的最后一行必须是break语句，否则会接着运行下一个case。这样不仅容易忘记，还会造成代码的冗长。
而且，switch...case不使用大括号，不利于代码形式的统一。此外，这种结构类似于goto语句，容易造成程序流程的混乱，使得代码结构混乱不堪，不符合面向对象编程的原则。

function doAction(action) {
switch (action) {
case 'hack':
return 'hack';
break;
case 'slash':
return 'slash';
break;
case 'run':
return 'run';
break;
default:
throw new Error('Invalid action.');
}
}

上面的代码建议改写成对象结构。

function doAction(action) {
var actions = {
'hack': function () {
return 'hack';
},
'slash': function () {
return 'slash';
},
'run': function () {
return 'run';
}
};
if (typeof actions[action] !== 'function') {
throw new Error('Invalid action.');
}
return actionsaction;
}```

建议避免使用switch...case结构，用对象结构代替。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Javascript的策略模式

用JS实现排序算法

以上が見落としがちなJavaScriptの知識ポイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。