Web前端—JavaScript中篇之常见方法

前言

这一篇主要是JavaScript中常见的方法，如字符串方法，数组方法，Math方法，日期方法等

常见方法

innerHTML
document.getElementById("").innerHTML=""; //也可以使用 this.innerHTML

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

window.alert();

document.write();

//控制台输出
console.log();

注:
访问没有 () 的函数将返回整个函数的定义

字符串相关操作

length 属性返回字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
//注意是属性!!!不是调用方法

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

var str = "The full name of China is the People's Republic of China.";
var pos1 = str.indexOf("China");
var pos2 = str.lastIndexOf("China");
//如未找到则返回-1

//第二个参数表示检索起始位置
var pos3 = str.indexOf("China", 18);
var pos4 = str.lastIndexOf("China", 50);

search() 方法搜索特定值的字符串，并返回匹配的位置：

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");
//括号内可设置正则表达式

字符串部分提取:

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

var str = "Apple, Banana, Mango";
var res = str.slice(7,13);

//如果某个参数为负，则从字符串的结尾开始计数。
var res1 = str.slice(-13,-7);
//若省略第二个参数,则意味该方法将裁剪字符串的剩余部分

substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引。
substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。

替换字符串内容

replace() 方法用另一个值替换在字符串中指定的值：

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");

注:replace() 方法不会改变调用它的字符串。它返回的是新字符串。默认地，replace() 只替换首个匹配,且对大小写敏感.如需执行大小写不敏感的替换，可以使用正则表达式 /i（大小写不敏感）：

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

注:正则表达式不带引号。如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）：

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");

其它方法

通过 toUpperCase() 把字符串转换为大写,通过 toLowerCase() 把字符串转换为小写：

var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1
var text3 = text1.toLowerCase();  // text3 是被转换为小写的 text1

concat() 连接两个或多个字符串：

var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);
//等效于
var text = "Hello" + " " + "World!";

trim() 方法删除字符串两端的空白符：

var str = "       Hello World!        ";
alert(str.trim());

charAt() 方法,charCodeAt() 方法字符串字符
charAt() 方法返回字符串中指定下标（位置）的字符串,而charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H
str.charCodeAt(0);         // 返回 72

split() 将字符串转换为数组：

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

//如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。
//如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：
var txt = "Hello";       // 字符串
txt.split("");           // 分隔为字符

数字操作

var x = 10;
var y = 20;
//常见的错误是认为结果应该是 30
var z = "The result is: " + x + y;

var z = "30";
//常见的错误是认为结果应该是 102030
var result = x + y + z;

//运算中会将字符串转换成数字
var x = "100";
var y = "10";
var z = x / y;       // z 将是 10
var z = x * y;       // z 将是 1000
var z = x - y;       // z 将是 90
//例外,进行了级联操作
var z = x + y;       // z 不会是 110（而是 10010）

toString() 方法:
可使用 toString() 方法把数输出为十六进制、八进制或二进制。

var myNumber = 128;
myNumber.toString(16);     // 返回 80
myNumber.toString(8);      // 返回 200
myNumber.toString(2);      // 返回 10000000

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

var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

toFixed() 方法:
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() 方法:
toPrecision() 返回字符串值，它包含了指定长度的数字：

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

valueOf() 方法:
valueOf() 以数值返回数值:

var x = 123;
x.valueOf();            // 从变量 x 返回 123
(123).valueOf();        // 从文本 123 返回 123
(100 + 23).valueOf();   // 从表达式 100 + 23 返回 123

注:所有 JavaScript 数据类型都有 valueOf() 和 toString() 方法。
Number() 方法:
Number() 可用于把 JavaScript 变量转换为数值：

x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1970 年 1 月 1 日至今的毫秒数。 1404568027739
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);        // 返回 NaN

数组操作

遍历数组
for循环-最安全方法
Array.foreach()函数

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

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

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

//也可以使用 length 属性向数组添加新元素：
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)

//添加最高索引的元素可在数组中创建未定义的“洞”：
fruits[6] = "Lemon";                 // 向 fruits 添加一个新元素 (Lemon),第五六个元素为undefined

Array.isArray()：
返回一个Boolean值用以判断是否为数组Array.isArray(fruits);
toString() 把数组转换为数组值（逗号分隔）的字符串。
join() 方法也可将所有数组元素结合为一个字符串。
它的行为类似 toString()，但是您还可以规定分隔符：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();   //Banana,Orange,Apple,Mango

//join方法
document.getElementById("demo").innerHTML = fruits.join(" * ");  //Banana * Orange * Apple * Mango

pop() 方法从数组中删除最后一个元素,也可以返回“被弹出”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
var x = fruits.pop();      // x 的值是 "Mango"

push() 方法（在数组结尾处）向数组添加一个新的元素,也可以返回新数组的长度：

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

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素, 返回 "Banana""Banana"

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon",返回 5

delete:
使用 delete 会在数组留下未定义的空洞(undefined值)。请使用 pop() 或 shift() 替换。

splice() 方法可用于向数组添加新项：
该方法会将当前数组修改并返回,而不是返回另外一个新的数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
//第一个参数（2）定义了应添加新元素的位置（拼接）。
//第二个参数（0）定义应删除多少元素。
//其余参数（“Lemon”，“Kiwi”）定义要添加的新元素
fruits.splice(2, 0, "Lemon", "Kiwi");  //在这里,元素被添加在fruits[2]的前面

//还可以通过设置参数来删除特定位置的元素
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

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

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys
//返回一个新数组。

//连接三个数组
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一

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

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1); //返回[ "Orange", "Lemon", "Apple", "Mango"]
//返回的是一个新的数组

//两个参数,将会限定截取的数组元素的范围
var citrus = fruits.slice(1, 3); 

自动 使用toString(),例:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits; 

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

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

//如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"。
//通过一个比值函数来修正此问题：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); //当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

//以随机顺序排序数组
points.sort(function(a, b){return 0.5 - Math.random()}); 

reverse() 方法反转数组中的元素:fruits.reverse();

使用 Math.max.apply 来查找数组中的最高值：

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}
//Math.max.apply([1, 2, 3]) == Math.max(1, 2, 3)

使用 Math.min.apply 来查找数组中的最低值：

function myArrayMin(arr) {
    return Math.min.apply(null, arr);
}
//Math.min.apply([1, 2, 3]) == Math.min(1, 2, 3)

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

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
//遍历数组值
//该函数接受 3 个参数：项目值,项目索引,数组本身
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}
//只使用value,故此处可改为
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

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

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
//此处将函数作为参数传入
function myFunction(value, index, array) {
  return value * 2;
}

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

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

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

//item	必选。要检索的项目。
//start	可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。
array.lastIndexOf(item, start)

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

日期方法

Math方法

Math.round(x) 的返回值是 x 四舍五入为最接近的整数：

Math.round(6.8);    // 返回 7

Math.ceil(x) 的返回值是 x 上舍入最接近的整数：

Math.ceil(6.4);     // 返回 7

Math.floor(x) 的返回值是 x 下舍入最接近的整数：

Math.floor(2.7);    // 返回 2

Math.sqrt(x) 返回 x 的平方根

Math.abs(x) 返回 x 的绝对（正）值

Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：

Math.max(0, 450, 35, 10, -8, -300, -78);  // 返回 450

Math.max(0, 450, 35, 10, -8, -300, -78);  // 返回 450

Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数

其它方法

Boolean() 函数来确定表达式（或变量）是否为真：

Boolean(10 > 9)        // 返回 true
//undefined,null,NaN 的布尔值是 false,