【JavaEE】_JavaScript基础语法

[1. JavaScript概述](#1. JavaScript概述)

[1.1 JavaScript简介](#1.1 JavaScript简介)

[1.2 HTML、CSS、JavaScript的关系](#1.2 HTML、CSS、JavaScript的关系)

[1.3 JavaScrip的组成](#1.3 JavaScrip的组成)

[2. JavaScript的书写形式](#2. JavaScript的书写形式)

[2.1 内嵌式](#2.1 内嵌式)

[2.2 行内式](#2.2 行内式)

[2.3 外部式](#2.3 外部式)

[3. 输出](#3. 输出)

[3.1 alert](#3.1 alert)

[3.2 console.log](#3.2 console.log)

[4. 变量的使用](#4. 变量的使用)

[4.1 创建变量](#4.1 创建变量)

[4.1.1 使用var](#4.1.1 使用var)

[4.1.2 使用let](#4.1.2 使用let)

[4.1.3 动态类型变量](#4.1.3 动态类型变量)

[4.2 基本数据类型](#4.2 基本数据类型)

[4.3 运算符](#4.3 运算符)

[5. 数组](#5. 数组)

[5.1 创建数组](#5.1 创建数组)

[5.1.1 使用new关键字创建](#5.1.1 使用new关键字创建)

[5.1.2 使用字面量方式创建](#5.1.2 使用字面量方式创建)

[5.2 数组元素的访问与修改](#5.2 数组元素的访问与修改)

[5.3 数组的遍历](#5.3 数组的遍历)

[5.4 新增与删除数组元素](#5.4 新增与删除数组元素)

[5.4.1 数组尾插元素 push](#5.4.1 数组尾插元素 push)

[5.4.2 数组删除元素 splice](#5.4.2 数组删除元素 splice)

[6. 函数](#6. 函数)

[6.1 语法格式](#6.1 语法格式)

[6.2 参数个数](#6.2 参数个数)

[6.3 函数表达式](#6.3 函数表达式)

[6.4 作用域](#6.4 作用域)

7.对象

[7.1 创建对象方式1：使用字面值常量](#7.1 创建对象方式1：使用字面值常量)

[7.2 创建对象方式2：使用new Object](#7.2 创建对象方式2：使用new Object)

1. JavaScript概述

1.1 JavaScript简介

（1）JavaScript是一个脚本语言，通过解释器运行；

（2）JavaScript主要在客户端（浏览器）上运行，如在chrome里有一个特定的模块：JS引擎，相当于JVM一样，能够解释执行JS代码，后来chrome上的JS引擎被单独封装成独立程序，称为V8引擎；

（3）JS最初只是为了进行前端页面开发，后来也被赋予了更多功能，可以用于开发桌面程序，手机app，服务器端的程序等等；

（4）JavaScrip又称liveScript或ECMAScript；

1.2 HTML、CSS、JavaScript的关系

即：HTML构成网页的结构（骨），CSS构成网页的表现（皮），JavaScript构成网页的行为（魂）；

1.3 JavaScrip的组成

（1）ECMAScript（简称ES）：JavaScrip语法；

（2）DOM：页面文档对象模型，对页面中的元素进行操作；

（3）BOM：浏览器对象模型，对浏览器窗口进行操作；

浏览器还提供了很多API，主要学习ECMAScript半部分和DOM中一些常用API；

2. JavaScript的书写形式

2.1 内嵌式

类似于CSS利用style标签嵌入到HTML中一样，JavaScript可以利用script标签嵌入HTML中：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert('hello');
        // alert是弹出会话框显示字符串内容的API
    </script>
</body>
</html>

2.2 行内式

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div onclick="alert('hello')">
        click
    </div>
</body>
</html>

运行以下代码后，初始页面如下：

点击文本后出现弹窗：

将js代码直接嵌入到html元素内部，进行点击div时才加载运行script标签；

2.3 外部式

在同目录下创建.js文件：

javascript 复制代码

alert("hello");

在.html文件中插入.js文件：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="hello.js"> </script>
</body>
</html>

以上三种方式运行后显示页面均如下：

注：（1）HTML的注释是，CSS的注释是/* */，JS的注释是 //或 /* */；

（2）内嵌式与外部式都是在页面加载的时候执行script代码，行内式是在执行到html标签内容时才会执行script代码；

3. 输出

3.1 alert

（1）alert可以弹出一个警示对话框，从而看到输出；

（2）alert是一个模态对话框，即弹出来后会组织用户操作页面其他部分；

3.2 console.log

（1）console.log可以在控制台上进行输出；

（2）JavaScript没有字符、字符串的类型区分，单双引号均可（MySQL同）；

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log('hello world');
    </script>
</body>
</html>

在Chrome网页开发者工具栏console标签页就可以看到输出结果：

注：console.log并不能被认为是一种可以和用户进行交互的一种手段，而是可以帮助程序员进行调试；

4. 变量的使用

4.1 创建变量

4.1.1 使用var

javascript 复制代码

<body>
    <script>
        var a=10;
        console.log(a);
        var b="hello";
        console.log(b);
    </script>
</body>

注：（1）使用var 变量名=初始值;

（2）JS定义变量不必写类型，其类型是通过初始化操作的值来确定的；

（3）JS中没有整数、小数类型，即不区分int与double，只有number类型；

4.1.2 使用let

注：（1）var属于老式写法，存在一些弊端，如：无法报错变量重复定义：

javascript 复制代码

    <script>
        var a=10;
        var a=10;
        console.log(a);
    </script>

在Chrome网页console标签页可查看该代码可正常运行不报错：

但是let是新式写法，更接近主流语言C++,Java等写法；

试将var改为let再运行后查看console标签页：

会发现重复定义变量报错；

还有变量作用域的问题等等，故而let使用的更多；

4.1.3 动态类型变量

html 复制代码

<body>
    <script>
        let a=10;
        console.log(a);
        a="hello";
        console.log(a);
    </script>
</body>

打开Chrome网页的console标签页可以查看运行结果：

注：（1）JavaScript是一个动态类型的编程语言，一个变量在程序运行过程中可以发生改变；

像C语言、C++、Java就是静态类型编程语言；

像Python、JS、PHP、Lua等就是动态类型编程语言；

（2）动态类型的优点在于代码非常灵活，但弊端在于一个变量的类型、数值以及相关方法与属性都是不确定的；

4.2 基本数据类型

（1）number：数字，不区分整数和小数；

（2）boolean：true和false；

（3）string：字符串类型；

（4）undefined：只有唯一的值undefined，表示未定义的值；（没有盒子）

（5）null：只有唯一的值null，表示空值；（空盒子）

4.3 运算符

JavaScript的运算符与Java基本相同，此处仅罗列不同或新增运算符：

试运行以下代码：

javascript 复制代码

    <script>
        let a=10;
        let b='10';
        console.log(a==b);
        console.log(a===b);
        
        let c=1;
        let d=0;
        let e=true;
        let f=false;
        console.log(c==e);
        console.log(d==f);
    </script>

打开Chrome网页的console标签页查看运行结果：

在JavaScript中，不只有==判等符号，还有===判等符号：

（1）== ：比较相等（JS在进行不同类型的比较或运算时，会尝试尽可能地转成想同类型）

===：比较相等（不会进行隐式类型转换，先比较类型，类型不同则不等）

（2）!= 与 !== 同理；

注：像Java这种不太支持隐式类型转换的语言称为强类型语言，JS这种比较能支持隐式类型转换的语言称为弱类型语言；

5. 数组

5.1 创建数组

5.1.1 使用new关键字创建

javascript 复制代码

        let arr=new Array();

5.1.2 使用字面量方式创建

javascript 复制代码

        let arr2=[];
        let arr3=[1,2,3,4];

注：JavaScript中不要求数组元素是相同类型，故而以下写法是允许的：

javascript 复制代码

        let arr4=[1,2.5,"hello",false];

5.2 数组元素的访问与修改

javascript 复制代码

        let arr=['Mike','Mary','Jhon'];
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
        console.log(arr);
        arr[1]='Lucy';
        console.log(arr);

打开Chrome网页的console标签页，查看运行结果：

注：（1）如果超出下标范围访问数组元素：

javascript 复制代码

        let arr=['Mike','Mary','Jhon'];
        console.log(arr[100]);
        console.log(arr[-1]);

运行结果为：

程序仍然正常执行，并未因为下标越界而异常终止；

（2）试运行以下代码：

javascript 复制代码

        let arr=['Mike','Mary','Jhon'];
        console.log(arr);
        console.log('arr[100]= '+arr[100]);
        arr[-1]="xxxx";
        console.log(arr);
        arr[100]="yyyy";
        console.log(arr);
        arr["hello"]="zzzz";
        console.log(arr);

运行结果为：

JS的数组不仅是一个传统意义的数组，更是一个数组+Map的混合体，即带有"键值对"性质，很多动态类型语言都是如此，如PHP；

5.3 数组的遍历

javascript 复制代码

        let arr=['Mike','Mary','Lucy'];
        console.log('方法1：for循环')
        for(let i=0;i<arr.length;i++){
            console.log(arr[i]);
        }
        console.log('方法2：for-each1')
        for(let i in arr){
            // i为数组元素下标
            console.log(arr[i]);
        }
        console.log('方法3：for-each2')
        for(let elem of arr){
            // elem为数组元素
            console.log(elem);
        }

运行结果如下：

5.4 新增与删除数组元素

5.4.1 数组尾插元素 push

javascript 复制代码

        let arr=['Mike','Mary','Lucy'];
        console.log(arr);
        arr.push('Jike');
        console.log(arr);

运行结果如下：

5.4.2 数组删除元素 splice

splice不仅可以用于删除元素，还可以用来插入、删除等等，

javascript 复制代码

solice(startIndex, count, 变长参数)
// 会将变长参数替换到参数位置指定区间之内
// 如果没有变长参数，即删除；
// 如果变长参数个数=指定区间元素个数，即修改；
// 如果变长参数个数>指定区间元素个数，即新增；

试运行以下代码：

javascript 复制代码

        let arr=['Mike','Mary','Lucy','Jike'];
        console.log(arr);
        arr.splice(2,1);
        console.log(arr);
        arr.splice(2,0,'John');
        console.log(arr);

运行结果如下：

6. 函数

6.1 语法格式

javascript 复制代码

// 创建函数/函数声明/函数定义
function 函数名(形参列表){
    函数体
    return 返回值;
}
// 函数调用
函数名(实参列表)         // 不考虑返回值
返回值=函数名(实参列表)  // 考虑返回值

注：（1）JS函数定义时不需要写返回值类型；

（2）JS不是面向对象的编程语言，故而也不存在封装、继承、多态等特点；

示例如下：

javascript 复制代码

        function add(x,y){
            return x+y;
        }
        console.log(add(10,2));
        console.log(add('hello','world'));
        console.log(add(10,true));
        console.log(add(undefined,10));
        console.log(add(undefined,'10'));

运行结果为：

注：（1）undefined与数字相加，是将undefined转换为"undefined"再与数字相加，即最终结果不是一个数字，会返回NaN，即not a number；

但undefined与字符串相加，即为字符串拼接；

6.2 参数个数

（1）如果实参个数少于形参个数，则多出的形参值为undefined：

javascript 复制代码

        function add(x,y){
            return x+y;
        }
        console.log(add(10));
        console.log(add('10'));

运行结果为：

（2）如果实参个数比形参个数多，则多出的实参不参与运算：

javascript 复制代码

        function add(x,y){
            return x+y;
        }
        console.log(add(10, 20,30));

运行结果如下：

注：（1）每个函数内部会自动定义一个arguments变量，相当于一个数组，包含了所有实参，故而可以使用arguments获取到所有实参：

javascript 复制代码

        function add(){
            let result=0;
            for(let elem of arguments){
                result += elem;
            }
            return result;
        }
        console.log(add(10));
        console.log(add(10,20));
        console.log(add(10,20,30));
        console.log(add(10,20,30,40));

运行结果如下：

对于JS这样的动态类型语言来说，不需要重载这样的语法；

6.3 函数表达式

javascript 复制代码

        let add = function(){
            let result=0;
            for(let elem of arguments){
                result+=elem;
            }
            return result;
        }

注：（1）这种函数写法是：先定义了一个匿名函数，再将匿名函数赋值给一个add变量，这个add变量就是一个function类型变量：

javascript 复制代码

        console.log(typeof(add));

且function类型变量是可以调用的，即在该种函数定义方式下，以下代码仍然可以正常运行：

javascript 复制代码

        console.log(add(10,20,30));

JS中可以像普通变量一样将函数赋值给一个变量，同时也可以把函数作为一个函数的参数，或者把函数作为另一个函数的返回值，这一点Java是无法做到的；

6.4 作用域

JS中，有作用域链的概念，即：JS会先在当前作用域找，如果没有，依次向上层作用域找，直至全局作用域，如果仍然查询无果，就报错或undefined；

示例代码1：

javascript 复制代码

        let num=1;
        function test1(){
            let num=2;
            function test2(){
                let num=3;
                console.log("test2:"+num);
            }
            test2();
            console.log("test1:"+num);
        }
        test1();
        console.log("global:"+num);

运行结果如下：

示例代码2：

javascript 复制代码

        let num=1;
        function test1(){
            let num=2;
            function test2(){
                console.log("test2:"+num);
            }
            test2();
            console.log("test1:"+num);
        }
        test1();
        console.log("global:"+num);

运行结果如下：

当在test2函数中查找num无果，就会向上查找，找到定义在test1函数中的num=2，故而打印2；

7.对象

首先需要明确：JS不是面向对象的编程语言，但是存在对象的概念；

故而JS中关于对象的设定与Java差别很大，JS中没有封装、继承、多态，甚至没有类；

在JS中没有类，所有的对象类型都是Object；

JS的对象是有属性也有方法的；

7.1 创建对象方式1：使用字面值常量

javascript 复制代码

        let student={
            name:'Mike',
            age:20,
            height:180,
            weight:75,
            learn:function(){
                console.log("JavaScript");
            },
            leisure:function(){
                console.log("Entertainment");
            }
        };
        console.log(student.name);
        console.log(student.age);
        student.learn();
        student.leisure();

运行结果如下：

7.2 创建对象方式2：使用new Object

javascript 复制代码

        let student = new Object();
        student.name="Mike";
        student.age=20;
        student.learn=function(){
            console.log("JavaScript");
        }
        student.leisure=function(){
            console.log("Entertainment");
        }

注：

（1）这种创建方式中的对象的属性、方法都不是提前约定好的，随时都可以新增属性或方法；

（2）其实还可以通过构造函数创建对象，但是并不常用；

（3）在JS的ES6版本中，引入了class关键字，JS也可以定义类，再通过类创建对象，更接近Java了；