JavaScript

JavaScript之语法

一、概述

面向对象的编程语言，也称为浏览器解释型语言。

嵌入到HTML中交给浏览器去解释和执行。

1. 组成

• 核心语法（ECMAScript5）
• BOM（Browser Object Model）浏览器对象模型，提供操作窗口的方法
• DOM（Document Object Model）文档对象模型，提供操作页面元素的方法
• Ajax 前后端交互的技术，异步页面刷新（json交互）
• jQuery（JS工具）

二、基本使用

1. 引入JS

• 元素绑定事件方式书写JS代码

  事件：用户的行为或元素的状态。例：onclick(单击)

  事件处理：事件发生后的响应

  语法：将事件的名称以标签属性的方式绑定到元素上

• 内嵌

  例：<div onclick="">xx</div>

借助<script></script>嵌入JS代码，可以书写任意多次，书写在任意位置。不同的书写位置会影响代码执行的结果。书写位置即为JS代码执行的位置

• 外链

  创建外部的js文件（***.js），引入方式：在HTML中使用<script></script>

  注意：script标签只能内嵌或外链二选一

JS基础语句：

alert("");警告框

console.log("","");控制台输出

prompt("");带输入框的弹框

document.write();网页写入（如果写入的内容为标签语法，则解析后呈现），wrtie()表示动态写入内容，可以识别标签语法；如果通过元素绑定事件方式执行写入，会造成页面重写。

2. 语法规范

• 严格区分大小写；
• 语句可以使用;作为结束的标志，也可以不写
• 注释：//单行； /* */多行

三、变量

1. 变量

变量用于存储在程序运行过程中可以随时修改的数据

关键字：var

// 定义
var a ; // 声明变量
a = 100 ; // 给变量赋值
var b = 200; //声明的同时赋值
var c,d,n; // 同时声明多个变量
c = 10;
d = 20;
var k = 100, m = 1000; //同时声明并赋值多个变量

注意：

变零使用var关键字声明，但未赋值，默认为undefined

省略var关键字给变量赋值，变量可以正常使用，但是影响变量的作用域

变量如果未声明、未赋值，直接使用则会报错

2.常量

常量用于存储一经定义就不能修改的数据。

使用const关键字创建常量，必须声明并赋值。

命名规范：

• 变量名、常量名、函数名、方法名自定义，可以由数字、字母、下划线和$组成，禁止以数字开头，禁止与关键字冲突。尽量见名知意，多个单词组成采用小驼峰命名。
• 尽量使用小写字母表示，特殊情况区分。常量名一般采用全大写字母表示，与变量区分

3. 练习

定义变量，常量，计算圆的周长和面积，并保留n位小数

提示：toFixed(n)保留n位小数

var r = 6;
const PI = 3.14;
var l = 2 * PI * r;
var s = PI * (r ** 2);
console.log("该圆周长为：",l.toFixed(2));
console.log("该圆面积为：",s.toFixed(2));

四、数据类型

检测数据类型：typeof num /typeof (num)

1.值类型

基础数据类型

1.1 数值型

(1) number

• 整数

  var a = 100;
  // 八进制以0位前缀
  var b = 015;
  // 十六进制以0x为前缀
  var c = 0x15;
  

  不管使用哪一种进制表示，最终在控制台都以十进制输出

• 小数

  var n = 1.56
  // 科学计数法：var k = 1.56e3; 1.56*(10 ** 3)
  //e表示以10位底，3表示次方数
  1.56 * 10 (3)
  

(2)string

字符串，使用引号表示

var s1 = 'chancey';
console.log(typeof s1 ,s1)

(3) boolean

只有true / false两个值，可以转换成数值类型，true为1，false为0

(4) ubdefined

两种方式

特殊值，声明未赋值的时候，默认值为undefined

var age;
console.log(s)
console.log(typeof age);

(5) null

var num = null;
console.log(num,typeof num)

一般用于解除对象的引用。

2. 对象

引用数据类型

对象是由属性和方法组成，使用.语法访问

函数、数组、字符串、日期、自定义对象

五、数据类型转换

1.自动类型转换

1.1 数学运算符

+ - * / %

var r1 = 100 + 10;
var r2 = 5 + "20";
var r3 = 50 + 2 + "1";
console.log(r1,r2,r3);

var r4 = "1" + 2 + 50;
console.log(r4);

var r5 = "100" + true;
var r6 = "100" + undefined;
var r7 = "100" + null;
console.log(r5,r6,r7)

var res2 = "hello" - 10;
console.log(res2);
var res3 = "100" - true;
var res4 = "100a" - true;
console.log(res3,res4)
var res5 = "100" + true;
var res6 = "100" - undefined;
var res7 = "100" - null;
console.log(res5,res6,res7)

1.2 运算规则

字符串与其他类型做+运算，将非字符串自动转为字符串做拼接，结果仍为字符串

其他情况下一律将操作数转number参与数学运算。如果转换number失败则变成NAN参与数学计算，结果一律为NaN

2.强制类型转换

(1) 转字符串 .toString()将变量装换为字符串并返回

//强制类型转换
var n1 = 100;
var n2 = true;
var n3 = null;
//将其转换为字符串
var s1 = n1.toString();
var s2 = n2.toString();
// var s1 = n3.toString(); //对象不能直接转换
console.log(n1,typeof n1,s1,typeof s1)
console.log(n2,typeof n2,s2,typeof s2)
// console.log(n3.s3,typeof s3)
var n4 = undefined;
console.log(n4,typeof n4)
var s4 = undefined.toString()

null为对象类型无法转换为字符串

undefined特殊，同样不能转换

(2) 转换number

• 整体转number Number(n)

console.log(Number("100"));
console.log(Number("100a"),Number("hello"));
console.log(Number(undefined),Number(null));

• 解析整数或解析number部分

  parseInt(n)解析整数部分

  parseFloat(n)解析整数加小数

  解析过程：现将数据转换为字符串；从前向后逐位对每一个字符转number，转换失败则停止向后解析，直接返回结果

  console.log(parseInt("100"));
  console.log(parseInt(35.5)); //取整数
  console.log(parseInt("35.5a"));
  console.log(parseInt("a35.5"));
  console.log(parseInt(true));
  console.log(parseFloat(35.5))
  

(3) 转布尔

Boolean(n)

console.log(Boolean(0))
console.log(Boolean(1))
console.log(Boolean(100))
console.log(Boolean('100'))
console.log(Boolean(0.0))
console.log(Boolean(""))
console.log(Boolean(undefined))
console.log(Boolean(null))
console.log(Boolean(NaN))

除0或者空字符串外，其余都为真，即true(0包括undefined / null / NaN非空字符串也为真)

六、运算符

1.赋值运算符

=

2. 算数运算符

+ - * / %

3. 复合运算符

+= -= *= /= %=

4. 自增自减

++ --

作用：在变量自身值的基础上+1/-1

• 单独与变量结合，做前缀或后缀都可以，包含自动类型转换，在自身number值的基础上+1
• 与其他运算符结合使用，做前缀表示先自增，做后缀表示后自增

// 自增自减运算符
var a = 10;
a ++; // 等同于 a += 1;
++ a;
console.log(a);
var b = "10";
b += 1;
console.log(b)
// ++包含自动类型转换，在自身number值的基础上+1
b ++;
console.log(b)

var c = 10;
var r1 = c++; // 先将c值赋给r1,则r1为10，c还要自增，则c为11
console.log(c,r1)
var r2 = ++c; // c先自增，则c为12，然后将12赋值给r2，则r为12
console.log(c,r2)

var n = 5;
var r = n++ + ++n + n++ + ++n + n
console.log(r,n)

5. 比较运算符

> < <= >= == === != !==

(1) 比较运算符的结果永远是布尔值

(2) 运算规则：

console.log("10" > "2"); // 同为字符串的时候，逐位比较unicode编码值
console.log("15" > "151");
console.log("hello" > "apple");
console.log(r4 = "10" > 2);
console.log(100 > true); // 100>1
console.log(100 > undefined); //100>NaN
console.log(100 > null);
console.log('hello' > 100);
console.log('hello' > undefined); //NaN>NaN
console.log(true > false); //1>0

同为字符串进行比较，不会转换数据类型，逐位比较每位字符的Unicode码值；

其他情况下，一律将操作数转换为number进行比较。如果转换失败则变成NaN参与比较运算，结果一律为false

(3) 相等和全等

相等：包含自动转换类型，只要值相等就成立

全等：不会转换类型，要求数据类型一致并且值相等才会成立

不等：不考虑数据类型，只要值不相等就成立

不全等：数据类型不同或值不等，都不成立

console.log('10' == 10 , '10' === 10) //true false 松散比较和严格比较
console.log('10' != 10 , '10' !== 10) //false true

6. 逻辑运算符

逻辑运算的结果为布尔值

(1) 与&&

全1则1

(2) 或||

有1则1

(3) 非!

对已有结果取反，切换布尔值。除“零”值以外，其他值都为真

console.log(10>5 && 2>3) // false
console.log(10>5 && 2<3) // true
console.log(10>5 || 2>3) // true
console.log(10>5 || 2<3) // true
console.log(! 2>3) // false
console.log(! 2<3) // true
console.log(!2) // false
console.log(!0) // true

console.log(!(3>5)) //true

比较运算优先级：非!>与&&>或||

练习：

定义变量表示年份，判断是否为闰年

var year = 2019;
r = year%400==0 || year%4==0 && year%100!=0;
console.log(r)

7. 位运算符

位运算符是指直接对数据的二进制操作

(1)位与&

全1则1

console.log(3 & 5)

(2)位或|

(3)异或^

相同为0，不同为1

//两个变量交换值
var a = 3,b = 5;
a = a ^ b;
b = a ^ b;
a = a ^ b;
console.log(a,b)

8.三目运算符

语法：表达式1 ？ 表达式2 ： 表达式3；

过程：判断表达式1是否成立，成立则执行或返回表达式2的结果，不成立则返回表达式3的结果

var money = 1000;
console.log( money >= 1000 ? '存款' : '余额');

var score = 85;
console.log(score >= 90 ? "A" : score >= 80 ? "B" : "C");

练习：

输入用户的成绩，判断区间范围

score = prompt("请输入您的成绩")
a = (score >= 80 ? '优秀' : score >= 60 ? '合格' : "不合格")
document.write("您的成绩",a)

输入用户的身高(m)和体重(kg)，计算bmi，（bmi = 体重 / （身高*身高）），保留两位小数，判断身体指数，（bmi >= 23.9 偏胖 bmi >=18.5 健康 bmi < 18.5 偏瘦）

m = prompt("请输入身高(单位：m)")
kg = prompt("请输入体重(单位：kg)")
bmi = (kg / (m * m)).toFixed(1)
a = bmi >= 23.9 ? "偏胖" : bmi >= 18.5 ? "健康" : "偏瘦"
document.write("您的健康指数为：",a)

七、流程控制

1. 判断

分支语句

1.1 if

语法：

//单分支
if (判断条件){
    条件成立的执行体
    }else{
        条件不成立的执行体
    }

//多重分支
if (判断条件){
    条件成立的执行体
}else if(){
         前边条件成立的执行体
}else if(){
         前边条件成立的执行体
}else{
    以上条件均不成立的执行体
}

如果if()之后没有{}，则if只控制if后边的一行代码

//单分支
var a = 10;
if(a > 0){
    document.write(a,"<br>")
}

if(a < 0) //不跟{}
console.log("a < 0");
console.log("---------");

//多重分支
var b = 10;
if(b < 2){
    document.write("成立");
}else{
    document.write("不成立");
}

var b = 10;
if(b > 2){
    document.write("成立");
}else if(b > 5){
    document.write("不成立");
}else{
    document.write("哈哈")
}

练习：

// 判断成绩
var s = prompt("请输入成绩");
if(s >= 80){
    document.write("成绩优秀");
}else if(s >= 60){
    document.write("成绩合格");
}else{
    document.write("成绩不合格");
}

// 判断当日是今年的第几天
var year = prompt("请输入年份");
var month = prompt("请输入月份");
var day = prompt("请输入日份");
var sum = 0;
var day = Number(day)
// 闰年判断
var isRun = year%4 == 0 && year%100 != 0 || year%400 ==0
if(month == 1){
    sum += day;
}else if(month == 2){
    sum = 31 + day;
}else if(month == 3){
    sum = 31 + 28 + day;
}else if(month == 4){
    sum = 31 + 28 + 31 + day;
}else if(month == 5){
    sum = 31 + 28 + 31 + 30 + day;
}else if(month == 6){
    sum = 31 + 28 + 31 + 30 + 31 + day;
}else if(month == 7){
    sum = 31 + 28 + 31 + 30 + 31 + 30 + day;
}else if(month == 8){
    sum = 31 + 28 + 31 + 30 + 31 + 30 + 31 + day;
}else if(month == 9){
    sum = 31 + 28 + 31 + 30 + 31 + 30 + 31 + 30 + day;
}else if(month == 10){
    sum = 31 + 28 + 31 + 30 + 31 + 30 + 31 + 30 + 31 + day;
}else if(month == 11){
    sum = 31 + 28 + 31 + 30 + 31 + 30 + 31 + 30 + 31 + 30 + day;
}else if(month == 12){
    sum = 31 + 28 + 31 + 30 + 31 + 30 + 31 + 30 + 31 + 30 + 31 + day;
}
if(isRun && month > 2){
    sum ++
}
document.write("今天是",year,'年',month,'月',day,'日','<br/>',"今天是今年的第",sum,"天")

1.2 switch

用于值的全等匹配

语法：

switch(a){
        //依次列举所有可能的值
    case 值1:
        //匹配全等时执行的代码段
        break; //结束匹配
    case 值2:
        //代码语句
        break
    default:
        //所有case匹配失败以后，执行的默认操作
}

var a = 3;
switch(a){
    case 1:
        document.write("a===1");
        break;
    case 2:
        document.write("a===2");
        break;
    case 3:
        document.write("匹配成功");
        break;
    default:
        document.write("匹配失败");
}

特殊用法：

省略break，会从当前匹配到case开始向后执行所有的代码语句；

多个case共用代码段

case 1:
case 2:
	//代码段
	break;

使用switch改版日期计算

var year = prompt("请输入年份");
var month = prompt("请输入月份");
var day = prompt("请输入日份");
var sum = 0;
var day = Number(day)
// 闰年判断
var isRun = year%4 == 0 && year%100 != 0 || year%400 ==0
switch(month - 1){
    case 11:
        sum += 30;
    case 10:
        sum += 31;
    case 9:
        sum += 30;
    case 8:
        sum += 31;
    case 7:
        sum += 31;
    case 6:
        sum += 30;
    case 5:
        sum += 31;
    case 4:
        sum += 30;
    case 3:
        sum += 31;
    case 2:
        sum += 28;
        if(isRun && month > 2){
            sum ++
        }
    case 1:
        sum += 31;
}
document.write("今天是",year,'年',month,'月',day,'日','<br/>',"今天是今年的第",sum,"天")

2. 循环

2.1 while

语法：

var i = 1; //定义循环变量
while(i<101){
    //定义循环条件
    i++//更新循环变量
}

练习

//打印1-100之间的整数
var i = 0;
while(i<101){
    document.write(i,'&emsp;');
    i ++;
}

// 求1-100之间整数的和
var a = 0;
var i = 0;
while(i<101){
    // document.write(i,'&emsp;');
    a += i;
    i ++;
}
document.write(a)

// 输出1-100之间所有3的倍数
var i = 0;
while(i<101){
    i ++;
    if(i % 3 == 0){
        document.write(i,"&emsp;")
    }
}

2.2 do-while

语法：

do{
    //循环体
    //更新循环变量
}while(循环条件);

while循环先判断条件成立才执行循环，do-while循环先循环一次，然后开始判断条件执行

// 循环让用户输入，直至输入exit结束循环
do{
    var input = prompt();
}while(input != "exit");

2.3 for

语法：

for(定义循环变量;循环条件;更新循环变量){
    //循环体
}

//打印1-100之间的整数
for(var i = 10 ; i < 101 ; i ++){
    document.write(i,"&emsp;")
}
// 求1-100之间整数的和
var sum = 0;
for(var i = 1 ; i < 101 ; i ++){
    sum += i;
}
document.write(sum)
// 输出1-100之间所有3的倍数
for(var i = 1 ; i < 101 ; i ++){
    if (i % 3 == 0){
        document.write(i,'&emsp;')
    }
}

2.4 循环控制

break跳出循环

continue结束本次循环，开始下次循环

// 循环让用户输入，直至输入exit结束循环
while(true){
    input = prompt("");
    if(input == "exit"){
        break;
    }
}

2.5 循环嵌套

// 计算星期几
var year = prompt("请输入年");
var month = prompt("请输入月");
var day = prompt("请输入日");

var sum = 0;

var idRun = year%4 == 0 && year%100 != 0 || year% 400 == 0;
//整年天数的累加
for(var i = 1990 ; i < year - 1 ; i++){
    sum += 365;
    if(i%4 == 0 && i%100 != 0 || i%400 == 0){
        sum++;
    }
}
//当前整月天数的累加
for(var j = 1 ; j < month ; j++){
    switch(i){
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
            sum += 31;
            break;
        case 4:
        case 6:
        case 9:
        case 11:
            sum += 30;
            break;
        case 2:
            sum += 28;
            if(isRun){
                sum ++;
            }
    }
}
//当前月天数的累加
sum += day;
// 计算当前星期几
var week = sum % 7;
var show = "";
switch(week){
    case 0:
        // show = "日";
        week = "日";
        break;
    case 1:
        week = "一";
        break;
    case 2:
        week = "二";
        break;
    case 3:
        week = "三";
        break;            
    case 4:
        week = "四";
        break;            
    case 5:
        week = "五";
        break;            
    case 6:
        week = "六";
        break; 
}

        console.log('今年是星期',week)

// 九九乘法表，要求在控制台输出
for(var i = 1 ; i < 10 ; i++){
    var show = "";
    for(var j = 1 ; j <= i ; j++){
        show += i + "*" + j + "=" + i*j + '\t';
        // 拼接每行中所有的表达式
    }
    console.log(show)
}

八、函数

保存代码或封装功能

1. 定义

使用function关键字声明函数

function 函数名(参数列表){
    //函数体
    return 返回值;
}

2. 函数调用

函数名（参数）

// 无参数
function f1() {
    console.log("f1 被调用");
}
f1();
// 带参数
function f2(a,b) {
    console.log(a,b,a*b);
    // arguments 只能在函数体中访问，保存实际参数
    console.log(arguments);
}
f2(2,5) // 实参和形参个数一致
f2(2,5,3) // 实参多于形参 只取前边的实参
f2(2) // 实参少于形参 返回NaN

// 允许实参和形参个数不匹配

3. 作用域

作用域分为全局作用域函数作用域

(1)全局变量（全局函数）：全局作用域下创建的变量或者函数，在任意地方都能访问和使用。所有省略var关键字创建的变量都是全局变量。

(2)局部变量：函数作用域中使用var关键字创建的变量都为局部变量

var a = 100;
function f1(){
    console.log("函数内部访问",a) // 在函数内部访问外部变量
}
console.log("外部访问",a) // 在函数外部访问外部变量
f1();
function f2(){
    f1();
    var b = 200;
    console.log("f2:",b) //在函数内部访问内部变量
}
f2();
// console.log(b) // 报错，局部变量无法在函数外部访问

// 以上代码可以看出，全局变量可以在函数内部和外部都访问


var age = 30;
function fn(){
    var age = 18;
    username = "张三"; // 无var关键字，则为全局变量
    console.log(age); //就近原则。内部访问就是内部的值
}
fn();
console.log(username); //创建时并没有var关键字，所以可以正常访问

4. 匿名函数

function()()前边的括号是函数自身，后边的实参

// 匿名函数
(function (a){
    console.log(a)
})(1000)

//定义变量保存匿名函数,变量名即为函数名
var fun = function (){};
fun();
console.log(fun)

内存回收，用完即销毁

• 匿名函数自执行，否建局部作用域。(函数自身)(实参)
• 定义变量接收匿名函数，变量名即为函数名

九、数组

一组数据

1. 创建

var a = [1,2,3]字面量方式创建

var b = new Array(1,2,3)new关键字创建，如果只有一个参数，则代表预分配的长度

2. 操作

数组会自动为每一位元素分配下标，从0开始

3.数组属性

length：数组长度

4.数组遍历

// 遍历数组
var arr5 = [10,2,3,5,6,2,34];
for (var i = 0 ; i < arr5.length ; i++){
    console.log(arr5[i]);
}
for (var i = arr5.length -1 ; i >= 0 ; i--){
    console.log(arr5[i]);
}

// for-in，还可以用来遍历对象
for (var i in arr5){
    console.log(i,arr5[i])
}

练习：

// 1.循环接收用户输入，存储到数组中，直至输入"exit"结束循环，控制台输出数组
function addData(){
    var arr = [];
    while (true){
        var input = prompt(" ");
        if (input == "exit"){
            break; // 跳出循环
        }
        arr[arr.length] = input; //添加元素
    }
    bianLi(arr);
}
function bianLi(arr){  // 遍历数组
    for (var i in arr){
        document.write(arr[i],"<br/>")
    }
}

addData() // 调用


// 2.定义包含若干number值的数组，求数组中的最大值
function findMax(){ //假设最大的值为arr[0],将其赋值给其他变量，然后依次更改最大值
    var arr = [1,56,78,-5,78,-89,666];
    var max = arr[0];
    for (var i in arr){
        if(arr[i] > max){
            max = arr[i]
        }
    }
    document.write("最大值为：",max)
}

findMax();

5. 数组方法

5.1 push

push(data);

在数组的末尾添加一个或多个元素

返回添加后的数组长度

var arr = [1,2,3];
r1 = arr.push(10,20); //一次性在数组末尾添加两个元素

5.2 pop

pop();

溢出数组的末尾元素

返回被删除的元素

var arr = [1,2,3];
document.write(arr,"<br/>")
arr.pop(); //只删除末尾元素
document.write(arr)

5.3 unshift

unshift(data);

在数组的头部添加一个或多个元素

var arr = [1,2,3];
arr.unshift("a","b") // 将ab整体添加到头部，即['a','b',1,2,3]
console.log(arr)
arr.unshift("c")
arr.unshift("d") // 分别添加，每次添加到头部，即['d','c','a','b',1,2,3]

5.4 shift

shift();

移除数组的头部元素

var arr = [1,2,3];
arr.shift()
console.log(arr)

5.5 toString

toString();

将数组转换为字符串，返回转换后的结果

5.6 join

join(param);

将数组转换为字符串，参数用于指定数组元素之间的连接符，默认使用逗号

var s1 = arr.toString();
console.log(s1,arr);
var s2 = arr.join("-");
console.log(s2,arr);
var s3 = arr.join("");
console.log(s3,arr)

5.7 reverse

reverse();

翻转数组（倒序重排），对当前数组结构的调整。

5.8 sort

sort();

res = arr.sort(); //默认按照Unicode编码升序排列
console.log(res);

5.9 forEach

forEach(function (){})

数组自带的遍历方法

// 数组自带的遍历的方法
var arr = [1,2,3,4,5]
arr.forEach(function (elem,index){
    console.log(elem,index);
});

6. 二维数组

var arr = [[1],[2,3],[6,4,5]];
arr[1][1] //3

// 遍历二维数组

十、字符串

1. 创建

创建字符串有两种方法

var s = 'hello';

var s = new String("world");

// 遍历字符串
for (var i in s1){
    console.log(s1[i]);
}
for (var i = 0 ; i < s1.length ; i++){
    console.log(s1[i]);
}

2. 特点

字符串采用数组结构存储，自动为每一位字符分配下标，可以使用下标访问每位存储

3. 属性

length:字符串长度

4.方法

(1) 大小写

toUpperCase()转换大写

toLowerCase()转换小写

var s3 = "Apple";
var r1 = s3.toUpperCase();
var r2 = s3.toLowerCase();
console.log(s3)
console.log(r1)
console.log(r2)

(2) 下标

根据下标获取指定的字符或字符编码

charAt(index)

charCodeAt(index)

var r1 = s1.charAt(1); // 下标为1的字符
console.log(r1)
var r2 = s1.charCodeAt(1); // 下标为1的字符编码
console.log(r2)

参数可以省略，默认为0

(3) 查下标

indexOf("",fromIndex)

lastIndexOf("",fromIndex)

参数：

指定查找字符串；

fromIndex设置起始下标；

str = 'hello world';
var r3 = s1.indexOf('o',2);
var r4 = s1.lastIndexOf('l',3);
console.log(r3)
console.log(r4)

查找方式：

indexOf从指定的下标开始向后查找字符，找到即返回

lastIndexOf从指定下标开始向前查找字符，找到即返回

如果为-1则表示查找失败

(4) 截取

substring(startIndex,endIndex)

截取start~end-1范围内的字符串，结束下标可以省略。

// 截取字符串
var r5 = s1.substring(2,4);
var r6 = s1.substring(2);
console.log(r5);
console.log(r6);

(5) 分割

split(param)

参数为指定分隔符，返回数组，存放分割结果。

var s1 = "2020-10-10";
var r1 = s1.split("-");
console.log(r1);
var r2 = s1.split('/');
console.log(r2)

注意：

参数必须为字符串中存在的字符，否则分割无效。

// "101=5&201=10&301=8"
s2 = "101=5&201=10&301=8";
var r3 = s2.split("&");
for (i in r3){
    var r4 = r3[i].split("=");
    console.log(r4[0],r4[1]);
}

(6) 模式匹配

正则表达式（RegExp）

指定的字符串格式

语法：var reg1 = /字符格式/修饰符;

修饰符：i(ignorecase)忽略大小写，g(global)全局匹配。

例如：

// 固定查找内容
var reg1 = /知乎/g;
// 固定查找格式
var reg2 = /\d{6,11}/g;

match()查找

replace()替换

var s = "上知乎，搜知乎，问知乎，答知乎";
console.log(s.match("知乎"));
var reg = /知乎/;

console.log(s.match(/知乎/)); // 懒惰匹配
console.log(s.match(/知乎/g)); // 贪婪匹配

// 查找并替换
r1 = s.replace("知乎","新浪");
r2 = s.replace(/知乎/g,"新浪");
console.log(r1,"  ",r2);

练习

指定邮箱字符串，提取用户名和服务商

function mail(){
    var email = prompt("请输入邮箱");
    var number = email.indexOf("@");
    var username = email.substring(0,number);
    var server = email.substring(number + 1);
    document.write("用户名：",username,"<br/>服务商：",server);
}

从身份证号提取年月日

function id(){
    var credId = prompt("请输入身份证号码");
    var year = credId.substring(6,10);
    var month = credId.substring(10,12);
    var day = credId.substring(12,14);
    document.write(year,month,day);
}

十一、其他对象

1.RegExp

创建：

属性：

lastIndex表示下一次匹配的起始下标

方法：

test(str)验证字符串中是否存在满足正则表达式格式的内容，返回布尔值

全局匹配光标位置不同

// 创建正则表达式
var reg1 = /\d{6}/; // 匹配6位数字
var reg2 = /\d{6}/g; // 全局

var s = "a123456789";

var r1 = reg1.test(s);
var r2 = reg1.test(s);
var r3 = reg1.test(s);
// console.log(r1,r2,r3);

console.log(reg2.lastIndex); // 查看起始索引，即开始匹配的位置
var r4 = reg2.test(s);
console.log(reg2.lastIndex);
var r5 = reg2.test(s);
console.log(reg2.lastIndex);
var r6 = reg2.test(s);
console.log(r4,r5,r6);


console.log(reg2.lastIndex); // 查看起始索引，即开始匹配的位置
var r4 = reg2.test(s);
reg2.lastIndex = 0; //手动指定索引位置
console.log(reg2.lastIndex);
var r5 = reg2.test(s);
reg2.lastIndex = 0;
console.log(reg2.lastIndex);
var r6 = reg2.test(s);
console.log(r4,r5,r6);

2. Math

// Math对象的属性:数学常量
console.log(Math.PI,Math.E); //圆周率，对数
// 方法
console.log(Math.random()); //生成0-1之间的随机小时
console.log(Math.ceil(4.1)); //向上取整：舍弃小数位，整数+1
console.log(Math.floor(4.99)); //向下取整：舍弃小数位，保留整数
console.log(Math.round(4.5)) //四舍五入

3.Date

// 提取时间分量
var year = date.getFullYear(); // 获取年
var month = date.getMonth() + 1; // 返回0-11对应12个月，所以这里必须加1
var day = date.getDate();// 获取日期
var week = date.getDay(); // 获取星期
var hour = date.getHours(); // 获取小时
var mintue = date.getMinutes(); // 获取分
var second = date.getSeconds(); //获取秒
console.log(year,month,day,'星期',week,hour,":",mintue,":",second);

// 转换日期对象的显示格式
var timeStr = date.toLocaleString(); // 转字符串
console.log(timeStr);


// 获取年月日
var str1 = date.toLocaleDateString();
var str2 = date.toLocaleTimeString();
console.log(str1,str2)

十二、例

循环接收用户输入，保存到数组中，exit结束，使用数组相关方法实现

function addData(){
    var arr = [];
    while (true){
        var input = prompt("请输入");
        if (input == "exit"){
            break;
        }
        arr.push(input);
    }
    console.log(arr);
}

模拟验证码

// 模拟验证码
function createCode(length){
    // 模拟数据源
    var arr = ["a","c","h","q",4,5,"n",8,"c",9,2,"e",6,0,"y"]
    var code = "";
    for (var i = 1 ; i <= length ; i++){
        // 创建随机下标
        var index = parseInt( (Math.random()) * arr.length );
        // 拼接
        code += arr[index]
    }
    return code;
}
function validate(){
    // 1.生成验证码
    var code = createCode(4);
    // 2.提示输入
    var input = prompt("验证码为"+code);
    // 3.验证
    if(code.toLowerCase() == input.toLowerCase()){
        alert("正确");
    }else{
        alert("错误");
    }
}