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 不会对数字进行舍入。

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

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

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

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

1 var x = 9.656;
2 x.toPrecision();        // 返回 9.656
3 x.toPrecision(2);       // 返回 9.7
4 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() 函数以解决此问题：

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

　　方案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() 方法返回通过测试函数的第一个数组元素的索引。

转载于:https://www.cnblogs.com/chen2608/p/11061624.html