JS实用技术

JS外部引用其他文件（建议）

<script src="myScript1.js"></script>

JS输出显示方式

• 使用 window.alert() 写入警告框
• 使用 document.write() 写入 HTML 输出，仅用于测试。
• 使用 innerHTML 写入 HTML 元素
• 使用 console.log() 写入浏览器控制台

运算符优先级

Undefined

　　在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。

　　任何变量或者对象均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

Null

在 JavaScript 中，null 是 "nothing"。它被看做不存在的事物。

不幸的是，在 JavaScript 中，null 的数据类型是对象。

可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。

可以通过设置值为 null 清空对象。

typeof 

typeof 运算符可返回以下两种类型之一：function,object

typeof 运算符把对象、数组或 null 返回 object。

typeof 运算符不会把函数返回 object。

请注意：

• NaN 的数据类型是数值
• 数组的数据类型是对象
• 日期的数据类型是对象
• null 的数据类型是对象
• 未定义变量的数据类型是 undefined
• 尚未赋值的变量的数据类型也是 undefined

您无法使用 typeof 去判断 JavaScript 对象是否是数组（或日期）。

　　constructor 属性返回所有 JavaScript 变量的构造器函数。

JavaScript 改变 HTML 内容

　document.getElementById("demo").innerHTML = "Hello JavaScript";

改变 <img> 标签的 src 属性（source）来改变一张 HTML 图像

document.getElementById('myImage').src='/i/eg_bulbon.gif'；

JavaScript 改变 HTML 样式 (CSS)

document.getElementById("demo").style.fontSize = "25px";

JavaScript 隐藏 HTML 元素

document.getElementById("demo").style.display="none";

JavaScript 能够显示 HTML 元素

　　document.getElementById("demo").style.display="block"；

字符串函数

length 属性返回字符串的长度indexOf(str) 和 lastIndexOf(str)，如果没有找到则返回-1,　返回字符串中指定文本首次(最后)出现的索引。indexOf(str，index) ,表示从index开始搜索。search() 方法搜索特定值的字符串，并返回匹配的位置。search() 方法无法设置第二个开始位置参数。indexOf() 方法无法设置更强大的搜索值（正则表达式）

提取部分字符串

• slice(start, end)，提取字符串的某个部分并在新字符串中返回被提取的部分。如果某个参数为负，则从字符串的结尾开始计数。

　　　　　　　　　　　如果省略第二个参数，则该方法将裁剪字符串的剩余部分，负值位置不适用 Internet Explorer 8 及其更早版本

• substring(start, end)
• substr(start, length)，从start开始，截取length长度。
• replace(str，str2) 用str2替换在字符串str值，不会改变调用它的字符串，它返回的是新字符串。同时，对大小写敏感，str2支持正则表达式。
• toUpperCase()
• concat(str1,str2)，连接两个或多个字符串，字符串不能更改，只能替换。
• trim() 方法删除字符串两端的空白符.不适用 Internet Explorer 8 及其更早版本
  • ==str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''))

提取字符串字符

这是两个提取字符串字符的安全方法：

• charAt(position) 方法返回字符串中指定下标（位置）的字符串
• charCodeAt(position) 方法返回字符串中指定索引的字符 unicode 编码,
  • 如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。
• split(str) 根据str，将字符串转换为数组

JS数值方法：

　　toString() 以字符串返回数值。

　　toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。该参数是可选的。如果您没有设置它，JavaScript 不会对数字进行舍入。

 var x = 9.656;
 x.toExponential(2);     // 返回 9.66e+0
 x.toExponential(4);     // 返回 9.6560e+0
 x.toExponential(6);     // 返回 9.656000e+0

　　toFixed() 返回字符串值，它包含了指定位数小数的数字

 var x = 9.656;
 x.toFixed(0);           // 返回 10
 x.toFixed(2);           // 返回 9.66
 x.toFixed(4);           // 返回 9.6560
 x.toFixed(6);           // 返回 9.656000

　　toPrecision() 返回字符串值，它包含了指定长度的数字

 var x = 9.656;
 x.toPrecision();        // 返回 9.656
 x.toPrecision(2);       // 返回 9.7
 x.toPrecision(4);       // 返回 9.656

　　valueOf() 以数值返回数值，一般不在代码中使用。

把变量转换为数值

• Number() 方法，返回数字，由其参数转换而来。如果无法转换数字，则返回 NaN
• parseInt() 方法，解析其参数并返回浮点数。
• parseFloat() 方法，解析其参数并返回整数。

　　这些方法并非数字方法，而是全局 JavaScript 方法。所有数字方法可用于任意类型的数字（字面量、变量或表达式）

溢出时返回 POSITIVE_INFINITY；var x = 1 / 0;（正无穷）

溢出时返回 NEGATIVE_INFINITY；var x = -1 / 0;（负无穷）

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

数组方法

遍历数组的最安全方法是使用 "for" 循环：

也可以使用 Array.foreach() 函数

list.forEach(myFunction);

向数组添加新元素的最佳方法是使用 push() 方法

list.push("Lemon");

也可以使用 length 属性向数组添加新元素

list[list.length] = "Lemon";

没有必要使用 JavaScript 的内建数组构造器 new Array()。new 关键词只会使代码复杂化。它还会产生某些不可预期的结果。请使用 [ ] 取而代之！

识别数组：

　　方案1：ECMAScript 5 定义了新方法 Array.isArray()；（ECMAScript 5 不支持老的浏览器）；

Array.isArray(list);

　　方案2：创建您自己的 isArray() 函数以解决此问题：

 function isArray(x) {
     return x.constructor.toString().indexOf("Array") > -1;
 }

　　方案3：假如对象由给定的构造器创建，则 instanceof 运算符返回 true

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // 返回 true

数组方法

toString()   把数组转换为数组值（逗号分隔）的字符串。

join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString()，但是您还可以规定分隔符，list.join(" * ")

Popping 和 Pushing

在处理数组时，删除元素和添加新元素是很简单的。

Popping 和 Pushing 指的是：

从数组弹出项目，或向数组推入项目。

pop() 方法从数组中删除最后一个元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); 

pop() 方法返回“被弹出”的值

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

push() 方法（在数组结尾处）向数组添加一个新的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

push() 方法返回新数组的长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

位移元素

位移与弹出等同，但处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。shift() 方法返回被“位移出”的字符串

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素，unshift() 方法返回新数组的长度。

删除元素

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除；

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

拼接数组

splice() 方法可用于向数组添加新项

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

使用 splice() 来删除元素

通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

裁剪数组

slice() 方法用数组的某个片段切出新数组。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);//返回Apple,Mango

slice() 可接受两个参数，比如 (1, 3)。

该方法会从开始参数选取元素，直到结束参数（不包括）为止。

slice() 方法创建新数组。它不会从源数组中删除任何元素。

合并（连接）数组

concat() 方法通过合并（连接）现有数组来创建一个新数组。

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数

var myChildren = arr1.concat(arr2, arr3);
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

数组排序

sort() 方法以字母顺序对数组进行排序。

如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"。

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个比值函数来修正此问题：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。

通过比较函数来对比属性值

cars.sort(function(a, b){return a.year - b.year});

反转数组

reverse() 方法反转数组中的元素。

您可以使用它以降序对数组进行排序

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

 数组迭代

Array.forEach() 方法为每个数组元素调用一次函数（回调函数）

map() 方法通过对每个数组元素执行函数来创建新数组。map() 方法不会对没有值的数组元素执行函数。map() 方法不会更改原始数组

filter() 方法创建一个包含通过测试的数组元素的新数组。

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。reduce() 方法在数组中从左到右工作。reduce() 方法不会减少原始数组。

Array.reduceRight()；

every() 方法检查所有数组值是否通过测试。

some() 方法检查某些数组值是否通过了测试。

indexOf() 方法在数组中搜索元素值并返回其位置。

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

find() 方法返回通过测试函数的第一个数组元素的值。

　　　　所有浏览器都支持 上述方法，除了 Internet Explorer 8 或更早的版本。

findIndex() 方法返回通过测试函数的第一个数组元素的索引。