JavaScript中的基本API整理及应用

第一类：string

---------------------------------------------------------------------------------------------------------------

强调：所有StringAPI都无权修改原数组，只能返回新的字符串

---------------------------------------------------------------------------------------------------------------

API：

str.slice(start,endi+1)    作用：从指定位置截取字符串

案例：通过身份证获得性别信息：

<script>
var str="1***************59";
var str1 = str.slice(-2,-1);
if(str1%2 !== 0)
    console.log("性别为女");
else
    console.log("性别为男");
</script>

---------------------------------------------------------------------------------------------------------------

何时使用：当不区分大小写时，都要先转换为一致大小写，再进行比较

str.toUpperCase()    作用：将字符串转换为大写

str.toLowerCase()    作用：将字符串转换为小写

案例：验证码输入时，应不区分大小写

<script>
    var p = prompt("请输入验证码");
    var str = "ADFc";
    if(p.value == str.toUpperCase() || str.toLowerCase()){
        console.log("通过");
    }else{
        console.log("不通过，重新输入");
    }
</script>

---------------------------------------------------------------------------------------------------------------

var char = str.charAt(i)    作用：获取指定位置字符

案例：

<script>
str = "卧槽";
var char = str.charAt(0);
console.log(char);
</script>

---------------------------------------------------------------------------------------------------------------

var code = str.charCodeAt(i)    作用：获取指定位置字符的Unicode码

var char = String.fromCharCode(code)    作用：Unicode码转回数字

转码与解码：将今天是2018年3月22日进行转码，然后进行解码输出

<script>
var str = "今天是2018年3月22日";
var code = "";
for(var i = 0 ; i<str.length;i++){
    var msg = str.charCodeAt(i);
     if(msg<100){
         msg = "000"+msg;
     }else if(msg<1000){
         msg = "00"+msg;
     }
     code+=msg;
}
var rel = "";
console.log(code);
for(var i=0;i<code.length;i+=5){
    var message = code.slice(i,i+5);
    var result = String.fromCharCode(message);
    rel+=result;
}
console.log(rel); //今天是2018年3月22日
</script>

---------------------------------------------------------------------------------------------------------------

str.substring(starti,endi+1)    作用：选取子字符串，同slice，但是不支持负数参数

str.substr(starti,n)    作用：选取字符串，从starti开始，选取n个

案例：从身份证号中截取生日

<script>
var str="1*****19830212****";
var birth = str.substr(6,8);
console.log(birth);
</script>

---------------------------------------------------------------------------------------------------------------

var i = str.indexOf("关键词",[,fromi])    作用：在str中从fromi位置开始查找下一个关键词的位置，如果找到返回为止，如果找

不到，返回-1

缺点：不支持正则表达式，一次只能查找一种关键词

固定用法：查找出所有关键词出现的位置

var i = -1;
while((i=str.indexOf("关键词",i+1))!=-1){
i即为本次查找到的关键词位置
}

案例：查找文本中是否存在“我”

<script>
var str = "我是一个普通人";
var i = str.indexOf("我");
if(i!=-1)
    console.log("在"+i+"处发现关键词我");
</script>

var i = str.lastIndexOf("关键词");    作用：查找关键词在字符串中最后一次出现的位置

案例：查找一段url中的图片名称

<script>
var str = "http://www.baidu.com/img/tree.png";
var i = str.lastIndexOf("/");
var img = str.slice(i+1);
console.log(img);
</script>

---------------------------------------------------------------------------------------------------------------

var i = str.search(/正则表达式/i)    作用：判断是否包含符合规则的关键词

缺点：不能设置开始查找位置，只能找到第一个，不能找到所有，只能返回位置，不能返回关键词内容。

<script>
var str = "我12356";
var i = str.search(/[0-9]/i);
if(i!=-1)
    console.log("找到数字在"+i+"处");
</script>

---------------------------------------------------------------------------------------------------------------

var kwards = str.match(/正则表达式/ig)    作用：获取所有关键词的内容，返回包含所有关键词的数组，如果没找到返回null

缺点：无法返回每个关键词的位置

案例：查找一段文字中“卧槽”是否出现，如果出现，输出

<script>
var str = "有一天，我在12305买火车票，我说：卧槽，卖完了";
var arr = str.match(/卧槽/ig);
console.log("发现关键词"+arr);
</script>

---------------------------------------------------------------------------------------------------------------

regexp.exec(str);    作用：查找关键词，返回内容，返回位置

案例：查找一段文字中的“卧槽”，返回位置和内容

<script>
var str = "有一天，我在12305买火车票，我说：卧槽，卖完了";
var reg = /卧槽/;
var s = reg.exec("卧槽");
console.log(s);
</script>

---------------------------------------------------------------------------------------------------------------

str = str.replace("关键词","替换值")    作用：将第一个位置的关键词替换为新词

案例：将字符串中的第一个“我”换成“你”

<script>
var str = "有一天，我发现了一个宝藏，我说：厉害了";
str = str.replace("我","你");
console.log(str);
</script>

str = str.replace(/正则表达式/ig,"替换值")    作用：将所有关键词都替换为统一的新值，如果替换一个固定关键词，则第一

个参数可以不使用正则表达式

案例：将字符串中的所有“我”，换成“你”

<script>
var str = "有一天，我发现了一个宝藏，我说：厉害了";
str = str.replace(/我/ig,"你");
console.log(str);
</script>

str = str.replace(/正则表达式/ig,function(kw,$1,$2){

    //kw : 自动获得本次找到的完整关键词

    //$n  :自动获得本次查找的关键词中第N个分组的子内容

    return 根据不同kw，返回不同替换值

})

---------------------------------------------------------------------------------------------------------------

var subs = str.split("分隔符")    作用：切割字符串

案例：将字符串Hello World以“o”分割

<script>
var str = "Hello World";
   var str1 = str.split("o");
    console.log(str1);
</script>

var subs = str.split(/正则表达式/);    作用：切割复杂字符串

案例：将字符串12Hello34World678，通过数字分割

<script>
var str = "12Hello34World0675";
   var str1 = str.split(/\d/);
    console.log(str1);
</script>

将字符串打散为字符数组：var chars=str.split("")

---------------------------------------------------------------------------------------------------------------

第二类：数组API

强调：无权修改原数组，只能返回新数组，必须使用变量接住返回值

---------------------------------------------------------------------------------------------------------------

String(arr)    作用：将数组转化为字符串，用逗号链接

arr.join("连接符")    作用：将arr总每个元素转换为字符串，可以自定义连接符

固定用法：

无缝拼接：arr.join("")

判断空数组：arr.join("") === ""

动态生成页面元素：var html=“<ANY>”+arr.join("</ANY><ANY>")+"</ANY>";  elem.innerHTML=html;

案例：使用方法

<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
var str = String(arr);
console.log(str);
var str1 = arr.join("/");
console.log(str1);
var str2 = arr.join("");
console.log(str2);
if(arr.join("") === ""){
    console.log("空数组");
}else{
    console.log(arr);
}
</script>

---------------------------------------------------------------------------------------------------------------

var newArr = arr1 . concat(值1，值2，arr2,.....)    作用：将值1，值2，arr2中的每个元素拼接到arr结尾

强调：可以打散数组类型参数

案例：拼接的使用

<script>
var arr = [1,2,3,4,5,6];
var arr2 = [6,6,6,6,5];
var newArr = arr.concat(7,8,9,arr2);
console.log(newArr);
</script>

---------------------------------------------------------------------------------------------------------------

var subArr = arr.slice(starti,endi+1)    作用：选取arr中的starti位置到endi位置的元素，组成新数组返回

强调：凡是两个参数都是下标的API，都遵循一个规则：含头不含尾，支持负数参数

当省略全部参数的时候，作用为：赋值整个数组，用于将类数组对象转换为数组对象时

固定套路：获得i位置开始的n个元素：arr.slice(i,i+n)

案例：截取数组0到5位置的数据

<script>
var arr = [1,2,3,4,5,6,7];
var subArr = arr.slice(0,5);
console.log(subArr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.splice(starti,n)    作用：删除arr中从starti开始的n个元素

强调：直接修改原数组，不考虑含头不含尾，支持负数参数，当省略第二个参数时，删除starti位置后所有元素

有返回值，var deletes = arr.splice(starti,n)    返回被删除的元素组成的临时数据

案例：删除从0开始向后5个数

<script>
var arr = [1,2,3,4,5,6,7,8];
arr.splice(0,5);
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.splice(starti,0,值1，值2...)    作用：在arr中starti位置插入新值，元starti位置的值及其之后的值向后瞬移

强调：不支持打散数组类型参数，如果插入子数组，会变成二位数组

案例：从0位置开始插入9,10,11

<script>
var arr = [1,2,3,4,5,6,7];
arr.splice(0,0,9,10,11);
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.splice(starti,n,值1,值2....)    作用：先删除arr中starti位置的n个元素，再从starti位置插入新的元素

强调：删除元素个数不一定和插入的元素个数一致

案例：从0位置删除3个元素，插入9,10,11

<script>
var arr = [1,2,3,4,5,6,7];
arr.splice(0,3,9,10,11);
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.reverse()    作用：反转数组

<script>
var arr = [1,2,3,4,5,6,7];
arr.reverse();
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.sort()    作用：将arr中每个元素转为字符串，再按字符串升序排列

强调：只能按照字符串升序排列

故使用：arr.sort(function(a,b){return a-b})，可以对数字进行排序（升序）

arr.sort(function(a,b){return b-a});（降序）

案例：排序数组（升序）

<script>
var arr = [1,2,3,4,5,6,7,5,8,4,1,2,2,3,4,5];
arr.sort(function(a,b){return a-b});
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.push(值)    作用：结尾入栈

使用时机：希望始终使用最新进入数组的元素时

案例：

<script>
var arr = [1,2,3,4,5,6,7,5,8,4,1,2,2,3,4,5];
arr.push(10,11,12);
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

var last = arr.pop(值)    作用：结尾出栈

案例：将结尾的数组元素出栈

<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.pop();
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

arr.unshift(值)    作用：开头入栈

案例：开头插入10,20,30

<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.unshift(10,20,30);
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

var first = arr.shift()    作用：开头出栈

强调：开头入栈和结尾入栈的顺序是反的

案例：将开头第一个元素出栈

<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.shift();
console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

第三类：RegExp API

何时使用：使用正则表达式验证字符串格式，即查找关键词内容，又查找关键词位置

---------------------------------------------------------------------------------------------------------------

var bool = reg.test(str)    作用：验证str是否符合reg的规则要求

注意：定义reg的时候，正则前面加^，后面加$

案例：检测是否符合规则

<script>
var str = "验证该文本中是否符合规则：卧槽";
var reg = /^卧槽$/;
var bool = reg.test(str);
console.log(bool);
if(!bool)
    console.log("不符合规则");
</script>

---------------------------------------------------------------------------------------------------------------

var arr = reg.exec(str)    作用：查找关键词，即查找内容又查找位置

返回值：arr:[0:"完整关键词",1:$1,2:$2,...,index:本次查找的位置]

reg.lastIndex    下次查找的位置，如果没找到，返回null

<script>
    var str = "1a1b1c";
    var reg = new RegExp("1.", "");
    var arr = reg.exec(str);
    console.log(arr);
</script>

---------------------------------------------------------------------------------------------------------------

第四类：Math API

强调：所有API都用Math.直接调用

---------------------------------------------------------------------------------------------------------------

Math.ceil(num)    作用：上取整

<script>
var num = 234.1231385;
console.log(Math.ceil(num));
</script>

---------------------------------------------------------------------------------------------------------------

Math.floor(num)    作用：下取整

强调：只能对纯数字内容下取整，如果传入的不是数字，自动调用Number(x)隐式转换

<script>
var num = 234.1231385;
console.log(Math.floor(num));
</script>

---------------------------------------------------------------------------------------------------------------

Math.round(num)    作用：取整，返回值是number，只能取整，不能指定小数位置

<script>
var num = 234.1231385;
console.log(Math.round(num));
</script>

相比于num.toFixed(d)    作用：四舍五入取整

返回string，必须先转换为number再计算，可以按任意小数位数四舍五入

钱数一律是toFixed(2)

案例：

<script>
var num = 234.1231385;
console.log(Number(num.toFixed(2)));
</script>

---------------------------------------------------------------------------------------------------------------

Math.pow(底数，幂)    作用：乘方

案例：

<script>
var num = 234.1231385;
console.log(Math.pow(num,2));
</script>

---------------------------------------------------------------------------------------------------------------

Math.sqrt(num)    作用：开平方

案例：

<script>
var num = 234.1231385;
console.log(Math.sqrt(num));
</script>

---------------------------------------------------------------------------------------------------------------

Math.max/min(值1,值2,....)    作用：最大值/最小值

案例：

<script>
var num = 234.1231385;
var num2 = 255;
console.log(Math.max(num,num2));
console.log(Math.min(num,num2));
</script>

问题：不支持查找一个数组中的最大值/最小值

解决方式：Math.max/min(...arr)

---------------------------------------------------------------------------------------------------------------

Math.random()    作用：随机数

在任意min-max之间生成随机整数     parseInt(Math.random()*(max-min+1)+min)

在0-max之间生成随机整数                parseInt(Math.random()*(max+1))

案例：

<script>
console.log(Math.random());
console.log(Math.random()*10+1);
console.log(Math.random()*1);
</script>

---------------------------------------------------------------------------------------------------------------

第五类：Date API

---------------------------------------------------------------------------------------------------------------

var ms = date.getTime();    作用：获取当前时间（ms）

案例：

<script>
var date = new Date();
var ms = date.getTime();
console.log(ms);
</script>

---------------------------------------------------------------------------------------------------------------

FullYear

Month

Date

Day

Hours

Minutes

Seconds

Milliseconds

除了Milliseconds以外都有一对儿方法：

date.getXXX()    作用：负责获取指定单位的数值

date.setXXX(num)    作用：负责设置指定单位的数值

---------------------------------------------------------------------------------------------------------------

toString()    作用：当地标准时间的完整格式

toLocaleString()    作用：当地时间的简化版格式

toLocaleDateString()    作用：显示当地时间格式（保留日期部分）

toLocaleTimeString()    作用：当地时间格式

toGMTString()    作用：国际标准时间(0时区)

---------------------------------------------------------------------------------------------------------------

第六类：转换类

基本数据类型转换的三种方法：

-------------------------------------------------------------------------------------------------

1.转换为字符型：String(); 例：String(678)的结果为"678"

2.转换为数值型：Number(); 例：Number("678")的结果为678

3.转换为布尔型：Boolean(); 例：Boolean("aaa")的结果为true

从一个值中提取另一种类型的值的方法：

--------------------------------------------------------------------------------------------------

1.提取字符串中的整数：parseInt(); 例：parseInt("123zhang")的结果为123

2.提取字符串中的浮点数：parseFloat(); 例：parseFloat("0.55zhang")的结果为0.55

3.执行用字符串表示的一段javascript代码：eval(); 例：zhang=eval("1+1")的结果zhang=2

---------------------------------------------------------------------------------------------------------------