搜尋
首頁web前端js教程javaScript容易被忽略的知識點
javaScript容易被忽略的知識點Mar 14, 2018 am 10:01 AM
javascriptjs知識點

這次帶給大家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

右移運算(​​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 '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是當一個值超出有效範圍時發生的錯誤。主要有幾種情況,一是陣列長度為負數,二是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('%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 程式設計風格

縮排

選擇空白或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中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器