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("错误");
    }
}

JavaScript

JavaScript之语法

一、概述

1. 组成

二、基本使用

1. 引入JS

2. 语法规范

三、变量

1. 变量

2.常量

3. 练习

四、数据类型

1.值类型

1.1 数值型

2. 对象

五、数据类型转换

1.自动类型转换

1.1 数学运算符

1.2 运算规则

2.强制类型转换

六、运算符

1.赋值运算符

2. 算数运算符

3. 复合运算符

4. 自增自减

5. 比较运算符

6. 逻辑运算符

7. 位运算符

8.三目运算符

七、流程控制

1. 判断

1.1 if

1.2 switch

2. 循环

2.1 while

2.2 do-while

2.3 for

2.4 循环控制

2.5 循环嵌套

八、函数

1. 定义

2. 函数调用

3. 作用域

4. 匿名函数

九、数组

1. 创建

2. 操作

3.数组属性

4.数组遍历

5. 数组方法

5.1 push

5.2 pop

5.3 unshift

5.4 shift

5.5 toString

5.6 join

5.7 reverse

5.8 sort

5.9 forEach

6. 二维数组

十、字符串

1. 创建

2. 特点

3. 属性

4.方法

(1) 大小写

(2) 下标

(3) 查下标

(4) 截取

(5) 分割

(6) 模式匹配

练习

十一、其他对象

1.RegExp

2. Math

3.Date

十二、例

推荐阅读