JavaScript基础

一、JavaScript

1.1 JavaScript简介

JavaScript简称JS。它是开发web的脚本语言。但是它也被用到很多非浏览器环境中【比如：node平台】
不同浏览器厂商在浏览器中都内置解析器解析JS语法。
Google：V8解析器

脚本语言：【PHP、JavaScript】
一个很大特征：可以嵌套在静态页面中增加动态效果。

1.2 JavaScript组成

问题1：前端三层？
结构层（前面学的标签）
样式层（前面学的样式）
行为层（JavaScript）
问题2：JavaScript组成？
ECMAScript（欧洲计算机协会）每年6月定制语法规范；
【我们学的是2014年规范ES5】
DOM（document object model 文档对象模型）常用来操作标签：在JS中
BOM（browser object model 浏览器对象模型）

1.3 JS书写格式

js属于脚本语言，所以JS语法必须嵌套在静态页面中才可以运行。
我们可以利用在静态页面中书写JS语法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    //这里写js语法
    alert("hello world"); // alert警告
</script>

js语法必须放置在双闭合标签script里面
双闭合标签script可以放置静态页面中任何地方
程序中可以有多个script标签

二、内置功能函数使用

2.1 警告框——alert

打开网页后，在浏览器正上方弹出会弹出警告

 <script>
     alert("aaa");
     alert("新希望");   
</script>

警告框可以多次使用
js字符串：务必加上单引号或者双引号

2.2 提示框——prompt

在js中内置函数prompt，可以在浏览器正上方弹出提示框

<script>
    prompt("你的年龄");
    prompt("你的性别",123); //默认值123
</script>

2.3 控制台使用

consloe.log（打印的数据）

<script>
    //控制台打印数据
    console.log("我在控制台打印数据，你看不见");
    console.log(12306);
</script>

三、数据类型

在js中也有数据类型，也分为：基本数据类型（5）、引用类型【复杂数据类型】（1）

:—:|:—:|
引用数据类型|数值|
Object:引用类型|函数、数组、正则、DOM、BOM|

<script>
    // 字符串是黑色的
    console.log("a你好");
    // 数值、Boolean是蓝色的
    console.log(123.1);
    console.log(true);
    // 未定义类型数据、空类型数据也是黑色的
    console.log(undefined);
    console.log(null);
</script>

typeof可以检测数据类型

1
2
3

<script>
    console.log(typeof undefined);
</script>

注：js中存在bug。
比如，虽然console.log(typeof null);打印出来是Object（其实不是），但是null是属于Null:空对象类型。
再比如，函数也属于引用类型，但是console.log(typeof 函数名);打印出来是function，但JS中根本没有这个数据类型。

四、变量

变量（variable）来源于数学，相当于一个容器，可以存储数据。通过访问变量名字获取存储数据。
JavaScript中变量使用:
1、关键字var声明变量
2、给变量赋值
3、使用变量

<script>
    //1、声明变量
    var num;
    //2、可以给变量进行赋值
    num = 123;
    //3、通过访问变量名字获取到对应数据
    console.log(num);
</script>

如果只用var声明，不赋值，那默认值就是undefined
JS中变量可以声明一次，但可以多次赋值后使用，使用的是最后一次赋值数据。
常把声明和赋值结合一起使用

命名标识符规范
可以是数字、英文字母、下划线、美元符号
不能以数字开头
不能是这门语言中关键字和保留字

0.1+0.2 == 0.3 是错的。因为遵守IEEE754浮点数标准，所以后面保留17位小数。

五、运算符

JS中有数学运算符、比较运算符、逻辑运算符、赋值运算符等。
运算符又称操作符。

5.1 数学运算符（5个）

JS中任意类型都可以参与数学运算。除了数字以外的其他类型需要隐式转换为数字参与数学运算。

5.1.1 数字参与

+、-、*、/、%

和数学运算规则相同。注意：console.log(123/10);打印结果是12.3，要是需要取整：parseInt(123/10)

5.1.2 布尔参与

计算机底层自动隐式转换为数字参与。
true –> 1
false –> 0

<script>
    console.log(Number(true)); //1
    console.log(Number(false)); //0
    console.log(true+99);//100
</script>

5.1.3 未定义类型参与

隐式转换为数字参与。
undefined –> NaN

NaN 也是数字类型数值，一般在计算数学运算，但计算不出结果的时候，会返回NaN。
0 / 0：不会抛异常，而是返回NaN

<script>
console.log(Number(undefined)); //NaN
console.log(0/0); //NaN
console.log(NaN*11); //NaN
</script>

5.1.4 空对象类型参与

空对象类型（null）也会隐式转换为数字参与。
null –> 0

<script>
    console.log(Number(null)); //0
    console.log(null*99); //0
    console.log(null+1); //1
</script>

5.1.5 字符串参与

字符串也可以参与数学运算，但有些特殊：
+ 运算比较特殊，如果遇到字符串，不是数学中的加法，而是成为连字符。
其他的-、*、/，隐式转换为数字参与。如果字符串是数字，就是对应的数值，如果是字母汉字，就是NaN。

<script>
    console.log("12" + 44 +2); //12442
    console.log("12" - 44); //-32
    console.log("12" / 44); //0.2727272727272727
    console.log("12" * 44); //528
    console.log(Number("zhang三")); //NaN
</script>

5.2 比较运算符（8个）

任意类型数据都可以参与比较运算，比较结果：布尔值true、false。除了数字外，其他类型数据也可以参与比较运算符，但是要转换为数字参与（字符串特殊）。
>、>=、 <、 <=、 == 、!= 、===、!===
==：相等判断，看数值是否一样；
===：全等，看数值、数据类型

5.2.1 基本数据类型比较

除了数字类型，其他基本数据类型会先隐式转换为数字，再来参与。

<script>
    console.log(false == 0); //true
    console.log(false === 0); //false
    console.log(0 == 0); //true
    console.log(0 === 0); //true
    console.log(666 > null); //true
    console.log(NaN > 100); //false
    console.log(null == 0); //false
    console.log(null >= 0); //true
    console.log(NaN == NaN); //false
</script>

NaN这个数值本身就不能确定。

5.2.2 字符串比较（奇葩）

字符串参与比较的时候，分为两种情况：
第一种，字符串和数字比较
第二种，字符串和字符串比较

字符串和数字比较，隐式转换为数字进行比较
字符串和字符串比较,比较的是ASCII值：两个字符串从左到右依次进行字符比较，直到某个字符比较出结果，比较结束。
0~~9 < A~~Z < a~z 从左到右依次变大

<script>
   // 字符串和数字比较
   console.log("66" == 66); //true
   console.log("66" === 66); //false
   // 字符串和字符串比较
   console.log("a1">"A1"); //true
   console.log("张三">"z"); //true
</script>

5.3 逻辑运算符（3个）

与、或、非

JS中任意类型数据都可以参与，但除了布尔值以外的数据需要隐式转换为布尔类型再参与运算。

5.3.1 逻辑与

A && B

两者同为真才为真，结果看B。否则为假，结果看假的那一个。如果都为假，就看A。

5.3.2 逻辑或

A || B

两者同为假才为假，结果看B。否则为真，结果看真的那一个。如果都为真，就看A。

5.3.3 逻辑非

!A

js中取反可以连续用多个!

5.3.4 隐式转换

<script>
console.log(NaN && 0);//都假，看前者。NaN
console.log(NaN && 32);//NaN
console.log("张三" && "李四");//都真，看后者。李四

console.log(NaN || 0);//都假，看后者。0
console.log("张三" || "李四");//都真，看前者。张三
</script>

六、条件语句

JS中也有条件语句和循环语句。

if中的条件要是布尔值，其他类型会进行隐式转换进行参与。
一行代码可以省略花括号。

<script>
    var score = prompt("你的分数：");
    if (score>=60) {
        alert("及格");
    } else if (score >=80) {
        alert("优秀");
    } else {
        alert("不及格");
    }
</script>

七、循环语句

7.1 for循环

JS中，for循环头的第一部分（var i = 0;）,认为是全局变量，可以在循环体外使用。

<script>
    for (var i = 0; i < 10; i++) {
        document.write("<h1>hello</h1>");
    }
    console.log(i); //会打印出10
</script>

7.2 while循环

循环内的变量，当成局部变量，在循环体外依旧能用。

<script>
    var i = 10;
    var sum = 0;
    while(i--) {
        console.log(i); // 9~0
       sum += i; 
    }
    console.log(sum); //45
</script>
<script>
    var i = 10;
    var sum = 0;
    do {
        console.log(i); // 10~0
        sum += i; 
    }while(i--)
    console.log(sum); //45
</script>

和java中一样：

1
2
3

int i = 10;
System.out.println(i-- + " "+i); // 10 9 
System.out.println(--i + " "+i); // 8 8

7.3 break 和 continue关键字

用法和java几乎一样。
break可以终止就近循环语句（立刻终止）
continue可以终止这一次循环，去执行下一次循环。
和Java中一样，循环也可以起名字：

<script>
    var i = 3;
    waiceng: while(i--) {
        console.log(i); // 2 1
        if (i == 1) break waiceng;
    }
</script>

八、函数

比如，之前学的内置函数：alert【警告框】、prompt【提示框】
js中，函数也分为两部分：声明+调用
js中声明方式：关键字function来声明函数、表达式声明函数

8.1 关键字函数

语法：
//声明部分
function 函数名() {
函数体
}
// 调用部分
函数名();

js中形参自动为var类型，不需要自己定义

// 无参
<script>
    function fun() {
        console.log("hello");
    }
    fun(); //打印hello
    fun(); //打印hello
</script>
// 有参
<script>
    function sum(a,b) {
        console.log("hello"+a+b);
    }
    sum(2,"zhang三");  //打印hello2zhang三
</script>

8.2 全局变量和局部变量

在js中，局部变量只有两种情况：

作为函数形参【只能在函数体中使用】
在函数体中声明变量【只能在函数体中使用】

其他都是全局变量。在js行为层中任意地方使用。

8.3 作用域

作用域【scope】，是代码的书写范围。
js语法最大的作用域就是双标签script之间。也称为全局作用域。

函数作用域：函数体

8.4 1.5JS当中没有函数重载

如果有多个重名函数，会调用最后一个，永远是后者覆盖前者。

<script>
    function fun(a) {
        console.log("hello1");
    }
    function fun(a,b) {
        console.log("hello2");
    }
    function fun(a,b,c) {
        console.log("hello3");
    }
    fun("zhang三"); // hello3
</script>

8.5 关键字return

return经常结合函数一起使用，可以将函数计算完的结果返回。
注:
return只能在函数体中使用
在函数体中return关键字后面的语句不执行

<script>
    function fun(a) {
        if(a > 2) {
            return;
        } 
        return a;
    }
    console.log(fun(3)); // undefined
</script>

九、数组

9.1 基本使用

array：数组

在JS中也有数组存在，可以存储很多有序数据(可以是任意类型)

数值在JS中是引用类型数据，在JS中数组是用中括号表示

<script>
    console.log([]); //[]
    console.log(typeof []); //object
    // 数组可以一次性存储很多数据
    console.log([1,2,3,4,5]); //(5) [1, 2, 3, 4, 5] array[5]
</script>

JS中数组可以存储、读取、修改、新增。

<script>
    //为了在js中使用数组方便，常将右侧数组赋值给左侧变量（通过变量名访问数组）
    //存储数据
    var arr = ["hello",123,true,NaN,[2,3,4]];
    //读取数据，通过枚举法 + 下标获取
    console.log(arr[0]); //hello
    console.log(arr[4][1]); //3
    //修改数组中已有的数据
    arr[1] = "你好";
    console.log(arr[1]);
    //新增数据
    arr[5] = "xinz";
    arr[7] = 12; // arr[6] 用undefined进行填充
    console.log(arr);//(8) ["hello", "你好", true, NaN, Array(3), "xinz", empty, 12]
</script>

length属性 arr.length 活获得数组元素个数

9.2 数组方法

pop：移除元素在数组尾部移除一个元素并返回删除的元素
push：新增元素在数组尾部添加一个或者多个元素并返回length

<script>
    var arr = ["阿文","发财","核桃"];
    // pop方法
    var res = arr.pop();
    console.log(arr); //(2) ["阿文", "发财"]
    console.log(res); // 核桃
    //push方法
    var res = arr.push("曹操","饭团");
    console.log(arr);//(4) ["阿文", "发财", "曹操", "饭团"]
    console.log(res);//4
</script>

shift：在数组头部删一个元素，并返回删除的元素
unshift：在数组头部增一个或多个元素，并返回length

<script>
    var arr = ["北京","天津","南京","上海"];
    //shift方法
    var res = arr.shift();
    console.log(arr); //(3) ["天津", "南京", "上海"]
    console.log(res); //北京
    //unshift方法
    var res = arr.unshift("吉林","哈尔滨");
    console.log(arr); //(5) ["吉林", "哈尔滨", "天津", "南京", "上海"]
    console.log(res); //5
</script>

reverse：让数组元素进行倒置
indexof：获取某一个元素的从左到右第一个索引值，如果没有返回-1

<script>
    var arr = ["北京","天津","南京","上海"];
    // reverse方法
    arr.reverse();
    console.log(arr);//(4) ["上海", "南京", "天津", "北京"]
    // indexof方法
    console.log(arr.indexOf("北京")); // 3
</script>

join：可以通过某一个字符将数组转换为字符串

<script>
    //join方法
    var arr = ["北京","天津","南京","上海"];
    console.log(arr.join());//北京,天津,南京,上海
    console.log(arr.join(""));//北京天津南京上海
</script>

concat：合并数组，对初始数组没有影响。

<script>
    //concat方法：合并数组
    var a = [1,2,3];
    var b = [4,5,6];
    var c = [7,8,9];
    console.log(a.concat(b,c)); //(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
    console.log(a,b,c); //(3) [1, 2, 3] (3) [4, 5, 6] (3) [7, 8, 9]
</script>

slice：切片。切割数组[a,b),对起始数组没有任何影响。

语法：
arr.slice(起始位置a,结束位置b);

splice：切割数组，也可以插入、替换数据。对起始数组有影响。

语法：
arr.slice(起始位置a,长度);

<script>
    //slice方法：对起始数组没有影响
    var arr = [1,2,3,4];
    var newArr1 = arr.slice(1);//从第2个开始切到最后
    var newArr2 = arr.slice(1,3);
    var newArr3 = arr.slice(-2);//从倒数第二个开始切到最后
    console.log(arr); //(4) [1, 2, 3, 4]
    console.log(newArr1); //(3) [2, 3, 4]
    console.log(newArr2); //(2) [2, 3]
    console.log(newArr3); //(2) [3, 4]
    //splice方法 ：对起始数组有影响
    console.log(arr); //(4) [1, 2, 3, 4]
    var newArr11 = arr.splice(1,2);//从第2个开始,长度为2
    console.log(arr); //(2) [1, 4]
    console.log(newArr11); //(2) [2, 3]
    //插入数据
    console.log(arr);//(2) [1, 4]
    arr.splice(1,0,"哈哈哈",3);
    console.log(arr); //(4) [1, "哈哈哈", 3, 4]
    //替换并插入数据
    arr.splice(1,1,"咯咯",6);
    console.log(arr); //(5) [1, "咯咯", 6, 3, 4]
</script>