JavaScript小知識彙總
(本篇內容全部來自w3school)
操作符
===表示值和類型是否都相等
數據類型
undefined
如果一個變量聲明瞭但是沒賦值，則該變量的值就是 undefined，類型也是 undefined .
var car;// Value is undefined, type is undefined
null
null表示nothing，通常被認爲變量不存在的意思。
但是，在JS中，null的類型是object。
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;// Now value is null, but type is still an object
可以使用undefined將值設爲空。
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = undefined; // Now both value and type is undefined
null與undefined的不同
typeof undefined // undefined
typeof null// object
null === undefined // false
null == undefined // true
原始數據類型
typeof操作符會返回4種原始類型：
- string
- number
- boolean
- undefined
變量作用域
JS有兩種類型的作用域：
Local Scope(本地作用域)
Global Scope(全局作用域)
在函數內聲明的變量，就是本地類型。只能被本函數訪問。
在函數外聲明的變量，就是全局類型。在頁面的所有腳本和函數都能訪問。
自動全局(Automatically Global)
如果在一個函數中，對一個未聲明的變量賦值，則該變量自動轉爲全局變量。
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}
大多數瀏覽器都支持”Strict Mode”,該模式下，不會進行自動轉換爲全局變量的操作。
詳見JS Scope
字符串
長字符串換行
因爲有的瀏覽器可能不支持，所以不推薦反斜槓的方式：
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
最好使用+號的方式：
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
字符串對象
通常，字符串是個原始類型，但也可以以對象的方式創建:
var x = "John";
var y = new String("John");
// typeof x will return string
// typeof y will return object
不推薦以對象的方式創建字符串，這樣會拖慢執行速度，同時也會造成其他後果：
var x = "John";
var y = new String("John");
// (x == y) is true because x and y have equal values
// (x === y) is false because x and y have different types (string and object)
或者更糟:
var x = new String("John");
var y = new String("John");
// (x == y) is false because x and y are different objects
// (x === y) is false because x and y are different objects
JS String Methods
slice()
slice()可以截取字符串的一部分，返回一個新字符串。
兩個參數：第一個是其實位置；第二個是結束位置。
如果參數是負數，則位置從末尾算起。
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12, -6);
Banana
如果省略第二個參數，則表示從起始位置到結束。
substring()
substring()與slice()類似，不同的是不接受負數。
substr()
substr()與slice()類似，不同的是第二個參數表示長度。
replace()
replace()函數將字符串的特定字符替換，並返回一個新字符串。
replace()函數並不改變原字符串。
默認情況，replace函數是大小寫敏感的，並且只替換第一個匹配項。可以使用正則表達式來解決這個問題。
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3Schools");
注意：正則表達式是沒有引號的。
trim()
trim()會移除字符串兩邊的空格。
在IE 8及更低版本的IE中不被支持。
可以使用正則表達式：
var str = " Hello World! ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
也可以通過再String.prototype中增加trim函數：
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
var str = " Hello World! ";
alert(str.trim());
charAt()
charAt函數返指定位置的字符。
charCodeAt()
charCodeAt函數返回指定位置的unicode編碼。
像使用數組一樣訪問字符串是不安全的
原因主要是不安全並且不可預測的：
- 並不是所有瀏覽器都支持。（如IE5,IE6,IE7）
- 是字符串看起來像數組，但實際上它們不是。
- str[0]=”H”並不會報錯，但實際上並不會起作用。
split()
split函數可以將字符串轉爲數組。
var txt = "Hello"; // String
txt.split(""); // Split in characters
toUpperCase()
將字符串轉爲大寫。
toLowerCase()
將字符串轉爲小寫。
數字類型
JS的數字都是64位的浮點型。
JS沒有像其它語言一樣，定了整型、短整型、長整型等。
JS數字都是按IEEE 754標準，存儲未雙精度浮點類型。
存儲格式：
Value (aka Fraction/Mantissa) Exponent Sign
52 bits (0 - 51) 11 bits (52 - 62) 1 bit (63)
精度
整型（非科學表示法）最高到15位數字。
var x = 999999999999999; // x will be 999999999999999
var y = 9999999999999999; // y will be 10000000000000000
小樹最高到17位，但是浮點型不是100%精確。
var x = 0.2 + 0.1; // x will be 0.30000000000000004
To solve the problem above, it helps to multiply and divide:
var x = (0.2 * 10 + 0.1 * 10) / 10; // x will be 0.3
數字字符串
JS會嘗試在一個數字操作中將數字字符串轉換爲數字。
var x = "100";
var y = "10";
var z = x / y; // z will be 10
但是+號除外：
var x = "100";
var y = "10";
var z = x + y; // z will not be 110 (It will be 10010)
NaN
NaN是JS的保留字，表示非法數字。
當操作非數字的字符串是，會返回NaN。（Not a Number):
var x = 100 / "Apple"; // x will be NaN (Not a Number)
isNaN(x); // returns true because x is Not a Number
var x = NaN;
var y = 5;
var z = x + y; // z will be NaN
var x = NaN;
var y = "5";
var z = x + y; // z will be NaN5
typeof NaN; // returns "number"
Infinity
Infinity或-Infinity表示超出最大範圍的數字。
var x = 2 / 0; // x will be Infinity
var y = -2 / 0; // y will be -Infinity
typeof Infinity; // returns "number"
Hexadeximal
以0x開頭的數字被認爲是16進制。
var x = 0xFF; // x will be 255
默認，JS以10進制顯示數字。
var myNumber = 32;
myNumber.toString(10); // returns 32
myNumber.toString(32); // returns 10
myNumber.toString(16); // returns 20
myNumber.toString(8); // returns 40
myNumber.toString(2); // returns 100000
數字對象
可以使用new創建數字對象:
var x = 123;
var y = new Number(123);
// typeof x returns number
// typeof y returns object
不推薦使用數字對象:
var x = 500;
var y = new Number(500);
// (x == y) is true because x and y have equal values
var x = 500;
var y = new Number(500);
// (x === y) is false because x and y have different types
var x = new Number(500);
var y = new Number(500);
// (x == y) is false because objects cannot be compared
JS數字操作函數
toExponential()
toExponential函數返回數字的指數形式的字符串。
var x = 9.656;
x.toExponential(2); // returns 9.66e+0
x.toExponential(4); // returns 9.6560e+0
x.toExponential(6); // returns 9.656000e+0
toFixed()
toFixed返回指定小數位數的小數。
var x = 9.656;
x.toFixed(0); // returns 10
x.toFixed(2); // returns 9.66
x.toFixed(4); // returns 9.6560
x.toFixed(6); // returns 9.656000
toPrecision()
toPrecision返回指定位數的數字。
var x = 9.656;
x.toPrecision();// returns 9.656
x.toPrecision(2); // returns 9.7
x.toPrecision(4); // returns 9.656
x.toPrecision(6); // returns 9.65600
valueOf()
在JS中，數字可以是原始類型(typeof = number),也可以是對象類型(typeof = object).valueOf用於將數字對象轉換爲原始類型。
JS的所有數據類型都有valueOf和toString函數。
將變量轉換爲數字
有三個函數可以將變量轉換爲數字:
- Number()
- parseInt()
- parseFloat()
Number()
Number()用於將變量轉換爲數字。
Number(true); // returns 1
Number(false); // returns 0
Number("10"); // returns 10
Number(" 10");// returns 10
Number("10 ");// returns 10
Number("10 20"); // returns NaN
Number("John");// returns NaN
If the number cannot be converted, NaN (Not a Number) is returned.
Number()也可以轉換Date類型的數據。
Number(new Date("2017-09-30"));// returns 1506729600000
The Number() method above returns the number of milliseconds since 1.1.1970.
parseInt()
parseInt解析字符串，並返回一個數字。可以空格分割，只返回第一個數字：
parseInt("10"); // returns 10
parseInt("10.33"); // returns 10
parseInt("10 20 30"); // returns 10
parseInt("10 years"); // returns 10
parseInt("years 10"); // returns NaN
parseFloat()
parseFloat()解析字符串，並返回數字。可以空格分割，只返回第一個數字:
parseFloat("10");// returns 10
parseFloat("10.33"); // returns 10.33
parseFloat("10 20 30"); // returns 10
parseFloat("10 years"); // returns 10
parseFloat("years 10"); // returns NaN
Number的屬性
Number.MAX_VALUE 返回最大數值
Number.Min_VALUE 返回最小數值
Number.NEGATIVE_INFINITY 表示負無限
Number.NaN 表示非數字
Number.POSTIVE_INFINITY 表示正無限
不能在變量上使用這些屬性，如x.MAX_VALUE。
數組
數組的typeof類型是object。
可以使用Array.isArray()判斷是否數組。
也可以自己實現一個isArray函數。
function isArray(x) {
return x.constructor.toString().indexOf("Array") > -1;
}
也可以使用instanceof來判斷。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array // returns true
不要使用new創建數組，可以使用[]代替。
var points = new Array(); // Bad
var points = []; // Good
toString()
可以將數組轉換爲逗號分割的字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Banana,Orange,Apple,Mango
join()
join函數將數組所有元素組成一個字符串。跟toString類似，但是可以自己指定分隔符。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
Banana * Orange * Apple * Mango
pop
pop函數將數組的最後一個元素移除。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop(); // the value of x is "Mango"
push
push將一個新元素加入到數組中，並且返回數組長度。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi"); // the value of x is 5
shift
shift函數與pop類似，不同的是移除第一個元素而不是最後一個。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // Returns "Banana"
unshift
unshift函數會在數組頭部增加一個新元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");// Returns 5
change elements
使用數組下標索引，修改數組中的值。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";// Changes the first element of fruits to "Kiwi"
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi"; // Appends "Kiwi" to fruit
delete elements
可以使用delete關鍵字刪除數組中的某個元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0]; // Changes the first element in fruits to undefined
使用delete會在數組中留下一個未定義的值，應該使用pop或shift替代。
splice
splice可以向數組中增加新的元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
第一個參數表示需要添加元素的起始位置；
第二個參數表示有幾個元素需要移除。
剩下的參數表示需要添加的數組元素。
也可以使用splice移除數組元素。（除了前面兩個元素，後面不傳需要增加的元素即可）
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);// Removes the first element of fruits
concat
concat可以將已有的數組合並並返回一個新數組。
concat不會改變原數組。
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); // Concatenates arr1 with arr2 and arr3
slice
slice函數將原數組切成一個新數組。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
第一個參數爲起始位置。
第二個參數爲結束位置，並不包括該位置。如果不傳第二個參數，則截取剩下所有元素。
字符串自動轉換
在需要原始類型的地方，數組會自動轉換爲字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
sort
sort函數按字符序排序數組。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();// Sorts the elements of fruits
reverse
reverse方法用於將數組中的元素調轉順序。
數字排序
默認情況下，sort函數將元素按照字符串類型排列。
對於字符串類型可以正常運行，比如“apple”在“banbana”前面；但是對於數字，“25”比“100”大，因爲“2”比“1”大。所以，對於數字類型的數組，sort函數產生不正確的結果。
可以使用自定義函數排序：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
隨機排序：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});
Math.max
可以使用Math.max找出數組中的最大值。
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
也可以使用Math.min找出數組中的最小值。
Array.forEach
forEach函數對於數組中的每個元素都調用一次函數。
var txt = "";
var numbers = [4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt = txt + item + "<br>";
}
注意函數有三個參數，元素值、索引、數組本身。
Array.Map
map函數對數組的每個元素執行一次函數，並返回一個新數組。
var numbers1 = [4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return val * 2;
}
map函數對於數組中沒有值的元素不會執行函數。
map函數不會改變原數組的值。
Array.filter
filter函數篩選原數組的值，並返回一個新數組。
var numbers = [4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Array.reduce
reduce函數將數組返回一個值。
如數組求和：
var numbers1 = [4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
total參數是指初始值或者前一個返回值。
Array.every
every函數測試是否所有元素都滿足條件。
比如檢查所有數字是否大於某個值：
var numbers = [4, 9, 16, 25, 29];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Array.indexOf
在數組中查找某個元素第一次匹配的地方並返回索引。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
還可以在後面傳起始位置參數。
Array.lastIndexOf
查找某個元素最後一次匹配的地方，並返回索引。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
還可以在後面傳起始位置參數。
JS Math
Math.PI
返回PI值。
Math.PI;// returns 3.141592653589793
Math.round
round函數對小數進行四捨五入。
Math.round(4.7);// returns 5
Math.round(4.4);// returns 4
Math.pow
pow函數返回x的y次冪。
Math.pow(8, 2); // returns 64
Math.sqrt
sqrt函數返回參數的平方根。
Math.sqrt(64); // returns 8
Math.abs
abs函數返回參數的絕對值。
Math.abs(-4.7); // returns 4.7
Math.ceil
ceil函數將小數向上取整。
Math.ceil(4.4); // returns 5
Math.floor
floor函數將小數向下取整。
Math.floor(4.7);// returns 4
Math.sin
sin函數返回參數的正弦值。
如果要重角度替代弧度，需要將角度轉爲弧度。
Angle in radians = Angle in degrees x PI / 180.
Math.sin(90 * Math.PI / 180); // returns 1 (the sine of 90 degrees)
Math.cos
返回參數的餘弦值。（同sin）
Math.cos(0 * Math.PI / 180); // returns 1 (the cos of 0 degrees)
Math.min
返回數組的最小值。
Math.max
返回數組的最大值。
Math.random
random產生[0,1)之間的隨機數。
Math.random(); // returns a random number
Math屬性
Math.E// returns Euler's number
Math.PI // returns PI
Math.SQRT2// returns the square root of 2
Math.SQRT1_2 // returns the square root of 1/2
Math.LN2 // returns the natural logarithm of 2
Math.LN10 // returns the natural logarithm of 10
Math.LOG2E// returns base 2 logarithm of E
Math.LOG10E // returns base 10 logarithm of E
詳見JS Math
隨機數
Math.random返回[0,1)之間的隨機數。
返回其他大小的整型：
Math.floor(Math.random() * 10); // returns a random integer from 0 to 9
Math.floor(Math.random() * 11); // returns a random integer from 0 to 10
可以定義隨機函數[x,y):
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
也可以定義隨機函數[x,y]:
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
布爾值
var x = 0;
Boolean(x); // returns false
var x = -0;
Boolean(x); // returns false
var x = "";
Boolean(x); // returns false
//undefined
var x;
Boolean(x); // returns false
var x = null;
Boolean(x); // returns false
//NaN
var x = 10 / "H";
Boolean(x); // returns false
var x = new Boolean(false);
var y = new Boolean(false);
// (x == y) is false because objects cannot be compared
跳轉
continue關鍵字，無論帶不帶label，都會跳過當前循環。
The continue statement (with or without a label reference) can only be used to skip one loop iteration.
break關鍵字，如果不帶label，會跳出當前的循環或switch。
The break statement, without a label reference, can only be used to jump out of a loop or a switch.
break關鍵字，帶label，會跳出當前代碼塊。代碼塊由{}包裹。
With a label reference, the break statement can be used to jump out of any code block.
詳見JS Break
類型轉換
JS有5中不同的數據類型:
- string
- number
- boolean
- object
- function
對象類型有三種:
- Object
- Date
- Array
還有兩種不包含值的類型:
- null
- undefined
構造函數原原型
"John".constructor// Returns function String() {[native code]}
(3.14).constructor// Returns function Number() {[native code]}
false.constructor // Returns function Boolean() {[native code]}
[1,2,3,4].constructor // Returns function Array() {[native code]}
{name:'John',age:34}.constructor // Returns function Object() {[native code]}
new Date().constructor// Returns function Date(){[native code]}
function () {}.constructor// Returns function Function(){[native code]}
可以用函數原型判斷是否數組:
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
也可以直接判斷該對象是不是數組:
function isArray(myArray) {
return myArray.constructor === Array;
}
Unary + Operator
單+符號可以將變量轉換爲數字。
var y = "5"; // y is a string
var x = + y; // x is a number
自動轉換
5 + null// returns 5 because null is converted to 0
"5" + null // returns "5null" because null is converted to "null"
"5" + 2 // returns "52" because 2 is converted to "2"
"5" - 2 // returns 3 because "5" is converted to 5
"5" * "2" // returns 10because "5" and "2" are converted to 5 and 2
正則表達式
格式: /pattern/modifiers;
正則表達式通常用於字符串的兩個函數中：search和replace。
var str = "Visit W3Schools";
var n = str.search(/w3schools/i);
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3Schools");
修飾符(modifiers):
- i 大小寫不敏感
- g 全局搜索，而不是在第一個匹配的地方停止
- m 多行搜索
模式：
- [abc] 查找括號中的任一字符
- [0-9] 查找括號中的任一數字
- (x|y) 查找|號分割的任意字符
元字符：
- \d 數字
- \s 空格符號
- \b 匹配詞的開頭和結尾
- \uxxxx 查找16進製表示的unicode字符。
數量符號：
- n+ 表示匹配一個或多個字符n
- n* 表示匹配0個或多個字符n
- n? 表示匹配0個或1個字符n
test
test函數查找一個字符串或模式，返回true或false。
var patt = /e/;
patt.test("The best things in life are free!");
true
exec
exec查找一個字符串或模式，並返回找到的字符串。
/e/.exec("The best things in life are free!");
e
異常
使用try catch捕獲異常。
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
throw
throw可以拋出一個自定義異常。
throw "Too big";// throw a text
throw 500; // throw a number
finally
finally塊，不論代碼執行結果如何，finally塊中的代碼都會執行。
Error Object
error對象有兩個屬性:
- name 錯誤的名稱
- message 錯誤的信息
Strict Mode
在腳本或者函數起始處，使用”use strict”聲明，會使用strict mode，比如強制變量聲明、不允許使用關鍵字爲變量名等。
"use strict";
x = 3.14;// This will cause an error
this關鍵字
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
在函數定義中，this表示該函數的所有者。
在上例中，this表示person對象。
person對象包含fullName函數。
默認綁定
當單獨使用this時，this表示全局對象。
在瀏覽器中，全局對象表示對象窗口。
var x = this;
在stric mode下，this是undefined，因爲該模式下不允許默認綁定。
最佳實踐
避免使用全局變量
全局變量和函數會被其他腳本覆蓋。
永遠聲明局部變量
所有在函數中使用的變量都要使用var聲明爲局部變量，否則會被自動轉換爲全局變量。
strict mode可以禁止未聲明的變量
在起始處聲明變量
在腳本或函數的起始處聲明變量。
- 代碼更清晰
- 只有頭部放置局部變量，可以很容易排查
- 可以很容易的避免自動轉換爲全局變量
- 減少重複聲明的可能性
初始化變量
代碼更清晰
只有一個地方初始化
避免未定義的值
永遠不要使用Number、String或Boolean對象
對於這三種類型，要永遠使用原始類型，而不是對象類型。
不要使用new創建對象
- 使用{}代碼new創建對象
- 使用”“代替創建String對象
- 使用0代替Number對象
- 使用false代替Boolean對象
- 使用[]代替Array對象
- 使用/()/代替RegExp對象
- 使用function(){}代替Function對象
注意自動類型轉換
JS是鬆散類型的語言。一個變量可以保護不同的數據類型，而且變量也可以改變數據類型。
var x = "Hello"; // typeof x is a string
x = 5; // changes typeof x to a number
使用===比較
==號會在比較前進行類型轉換。
===同時會比較類型和值。
使用參數默認值
如果函數調用缺少參數，則該參數會被設爲undefined。比較好的做法是給該值設默認值。
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
在switch語句中使用default
要使用default關鍵字結束switch語句。
避免使用eval
eval函數用於運行一段文本代碼。在大多數情況下，都不需要使用它。
因爲隨機代碼的運行，會有安全問題。
常見錯誤
Undefined is not NUll
可以將一個對象與undefined比較，但是不能將一個undefined類型的對象與null比較，這樣做會拋出異常。
Incorrect:
if (myObj !== null && typeof myObj !== "undefined")
Correct:
if (typeof myObj !== "undefined" && myObj !== null)
代碼塊範圍
JS並不會爲每個代碼塊創建新的作用域範圍。
for (var i = 0; i < 10; i++) {
// some code
}
return i;
性能
減少循環中的操作
循環中的每個語句，包括循環表達式，會在每次循環時執行。
Bad:
var i;
for (i = 0; i < arr.length; i++) {
Better:
var i;
for (i = 0; i < arr.length; i++) {
減少DOM的訪問
訪問DOM非常慢，如果要多次訪問，可以賦值給變量：
var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";
減少DOM個數
儘量減少頁面的元素個數。這樣可以改善頁面加載，加速頁面渲染，特別是在小的設備上。如果DOM個數少，那每次查找消耗的時間也會比較少。
減少不必要的變量
不要創建不需要存儲值的變量。
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Better:
document.getElementById("demo").innerHTML = firstName + " " + lastName
延遲加載JS
將腳本放在頁面的底部，讓瀏覽器首先加載頁面。
當腳本在下載時，瀏覽器不會開始其他的下載。解析和渲染都會被阻塞。
Http規格定義瀏覽器不應該併發下載超過兩個組件。
替代做法是使用defer=”true”。defer屬性會告訴瀏覽器在頁面解析完之後再執行腳本，但是隻對外部腳本起作用。
也可以在頁面加載完後，通過代碼將腳本包含進來。
<script>
window.onload = function() {
var element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
不要使用with
使用with關鍵字，會對速度有負面影響。
在strict模式下會禁用該關鍵字。