JavaScript小知识汇总

JavaScript小知识汇总

(本篇内容全部来自w3school)

操作符

===表示值和类型是否都相等

详见JS Operators

数据类型

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 DataTypes

变量作用域

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 Strings

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 String Methods

数字类型

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。

详见JS Number Methods

数组

数组的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;
}

详见JS Random

布尔值

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

详见JS Booleans

跳转

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 

详见JS Type Conversion

正则表达式

格式: /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

详见JS RegExp

异常

使用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 错误的信息

详见JS Errors

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，因为该模式下不允许默认绑定。

详见JS this Keyword

最佳实践

避免使用全局变量

全局变量和函数会被其他脚本覆盖。

永远声明局部变量

所有在函数中使用的变量都要使用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函数用于运行一段文本代码。在大多数情况下，都不需要使用它。
因为随机代码的运行，会有安全问题。

详见JS Best Practice

常见错误

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;

详见JS Mistakes

性能

减少循环中的操作

循环中的每个语句，包括循环表达式，会在每次循环时执行。

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模式下会禁用该关键字。

详见JS Performance