首頁 > web前端 > js教程 > javaScript容易被忽略的知識點

javaScript容易被忽略的知識點

php中世界最好的语言
發布: 2018-03-14 10:01:11
原創
1572 人瀏覽過

這次帶給大家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):符號為|,表示若兩個二進位位元都為0,則結果為0,否則為1。

與運算(and):符號為&,表示若兩個二進位位元都為1,則結果為1,否則為0。

否運算(not):符號為~,表示對一個二進位位元取反。

異或運算(xor):符號為^,表示若兩個二進位位元不相同,則結果為1,否則為0。

左移運算(left shift):符號為<<。
左移運算子表示將一個數的二進位值向左移動指定的位數,尾部補0,即乘以2的指定次方(最高位即符號位不參與移動)。

// 4 的二進位形式為100,// 左移一位為1000(即十進位的8)// 相當於乘以2的1次方4 << 1// 8- 4 << 1// -8

右移運算(​​right shift):符號為>>。
右移運算子表示將一個數的二進位值向右移動指定的位數,頭部補0,即除以2的指定次方(最高位即符號位不參與移動)。

4 >> 1// 2/*
// 因為4的二進位形式為00000000000000000000000000000100,
// 右移一位得到000000000000100的2
*/-4 >> 1// -2/*
// 因為-4的二進位形式為11111111111111111111111111111100,
// 右移一位,頭部補1,得到11111111111111111111111111111110,
// 即為十進制的-2
*/

帶符號位元的右移運算(​​zero filled right shift):符號為

##帶符號位元的右移運算(​​zero filled right shift):符號為
#> ##此運算子表示將一個數的二進位形式向右移動,包括符號位元也參與移動,頭部補0。所以,該運算總是會得到正值。對於正數,此運算的結果與右移運算子(»)完全一致,差異主要在於負數

4 >>> 1// 2-4 >>> / 2147483646/*
// 因為-4的二進位形式為1111111111111111111111111111100,
// 帶符號位的右移一位,得到01111111111111111 2147483646。
*/

5.JavaScript的原生錯誤類型

SyntaxError是解析程式碼時發生的語法錯誤。

// 变量名错误var 1a;// 缺少括号console.log &#39;hello&#39;);
登入後複製

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是當一個值超出有效範圍時發生的錯誤。主要有幾種情況,一是陣列長度為負數,二是Number物件的方法參數超出範圍,以及函數堆疊超過最大值。

new Array(-1)// RangeError: Invalid array length(1234).toExponential(21)// RangeError: toExponential() argument must be between 0 and 20


## TypeError是變數或參數不是預期類型時發生的錯誤。例如,對字串、布林值、數值等原始類型的值使用new指令,就會拋出這種錯誤,因為new指令的參數應該是建構子。

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

URIError是URI相關

函數的參數不正確時拋出的錯誤,主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()這六個函數。

decodeURI(&#39;%2&#39;)// 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 程式設計風格

縮排

選擇空白或tab鍵縮排,只可選擇某一種,不可混淆,若是中途加入項目,遵從原先程序中的風格。

區塊

區塊起首的大括號,不要另起一行,要緊接區塊之後,如下所示:

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 &#39;hack&#39;:
return &#39;hack&#39;;
break;
case &#39;slash&#39;:
return &#39;slash&#39;;
break;
case &#39;run&#39;:
return &#39;run&#39;;
break;
default:
throw new Error(&#39;Invalid action.&#39;);
}
}
登入後複製

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

function doAction(action) {
var actions = {
&#39;hack&#39;: function () {
return &#39;hack&#39;;
},
&#39;slash&#39;: function () {
return &#39;slash&#39;;
},
&#39;run&#39;: function () {
return &#39;run&#39;;
}
};
if (typeof actions[action] !== &#39;function&#39;) {
throw new Error(&#39;Invalid action.&#39;);
}
return actionsaction;
}```
登入後複製

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

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

推荐阅读:

Javascript的策略模式

用JS实现排序算法

以上是javaScript容易被忽略的知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板