前端

JavaScript基础知识

一、JavaScript简介

JavaScript起源：在1995年时，由Netscape公司的 Brendan Eich，在网景导航者浏览器上首次设计实现而成。Netscape在最初将其脚本语言命名为LiveScript，因为Netscape与Sun合作，网景公司管理层希望它外观看起来像Java，因此取名为 JavaScript。

1、JavaScript介绍

  • JavaScript是最流行且使用最广泛的客户端脚本语言。
  • 客户端脚本是指在Web浏览器中运行的脚本。
  • JavaScript用于向网站添加交互性和其他动态功能。
  • JavaScript是一种面向对象的语言，并且在语法上与Java编程语言也有一些相似之处。但是JavaScript与Java没有任何关系。

2、JavaScript特性

  • 脚本语言：JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行，JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。
  • 基于对象：JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：封装、继承、多态中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。
  • 弱类型：JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。
  • 事件驱动：JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。
  • 跨平台性：JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

二、JavaScript基本语法

1、JavaScript代码嵌入方式

  • HTML文档内

①JavaScript代码要写在script标签内

②script标签可以写在文档内的任意位置

③为了能够方便查询或操作HTML标签（元素），script标签可以写在body标签后面

  • 引入外部JavaScript文档

在script标签内通过src属性指定外部xxx.js文件的路径即可。但是要注意以下两点：

①引用外部JavaScript文件的script标签里面不能写JavaScript代码

②先引入，再使用。script标签不能写成单标签

2、声明和使用变量

①JavaScript数据类型

  • 基本数据类型
    • 数值型：JavaScript不区分整数、小数
    • 字符串：JavaScript不区分字符、字符串；单引号、双引号意思一样
    • 布尔型：true、false
      • 在JavaScript中，其他类型和布尔类型的自动转换。
      • true：非零的数值，非空字符串，非空对象
      • false：零，空字符串，null，undefined
      • “false”放在if判断中会被当作【真】处理
  • 引用类型
    • 所有new出来的对象
    • 用[]声明的数组
    • 用{}声明的对象

②变量

  • 关键字：var
  • 数据类型：JavaScript变量可以接收任意类型的数据
  • 标识符：严格区分大小写
  • 变量使用规则
    • 如果使用了一个没有声明的变量，那么会在运行时报错Uncaught ReferenceError: b is not defined
    • 如果声明一个变量没有初始化，那么这个变量的值就是undefined

3、函数

①内置函数

内置函数：系统已经声明好了可以直接使用的函数。

1
2
3
4
5
6
7
8
9
10
11
12
//①弹出警告框
alert("警告框内容");
//②弹出确认框
//用户点击“确定”返回true，点击“取消”返回false
var result = confirm("老板，你真的不加个钟吗？");
if(result){
    console.log("老板点了确定，表示要加钟");
}else{
    console.log("老板点了取消，表示不加钟");
}
//③在控制台打印日志
console.log("日志内容");

②声明函数

两种写法：

写法1：

1
2
3
function sum(a,b){
    return a + b;
}

写法2：

1
2
3
var total = function(){
    return a + b;
}

写法2可以这样解读：声明一个函数，相当于创建了一个“函数对象”，将这个对象的引用赋值给变量total，最后加的分号不是给函数声明加的，而是给整体的赋值语句加的分号。

③函数调用

JavaScript中函数本身就是一种对象，函数名就是这个“对象”的“引用”。而调用函数的格式是：函数引用()。

1
2
3
4
5
6
7
8
9
10
11
12
13
function sum(a, b) {
    return a+b;
}

var result = sum(2, 3);
console.log("result="+result);

var total = function() {
    return a+b;
}

var totalResult = total(3,6);
console.log("totalResult="+totalResult);

4、对象

JavaScript中没有“类”的概念，对于系统内置的对象可以直接创建使用。

①使用new关键字创建对象

1
2
3
4
5
6
7
8
9
10
// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

// 在控制台输出对象
console.log(obj01);

②使用{}创建对象

1
2
3
4
5
6
7
8
9
// 创建对象
var obj02 = {
    "soldierName":"john",
    "soldierAge":35,
    "soldierWeapon":"gun"
};

// 在控制台输出对象
console.log(obj02);

③给对象设置函数属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//第一种：
// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

obj01.study = function() {
    console.log(this.stuName + " is studying");
};

// 在控制台输出对象
console.log(obj01);
// 调用函数
obj01.study();

//第二种：
// 创建对象
var obj02 = {
"soldierName":"john",
"soldierAge":35,
"soldierWeapon":"gun",
"soldierShoot":function(){
console.log(this.soldierName + " is using " + this.soldierWeapon);
}
};

// 在控制台输出对象
console.log(obj02);
// 调用函数
obj02.soldierShoot();

④this关键字

this关键字只有两种情况：

  • 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
  • 在函数里面：this关键字指向调用函数的对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 直接打印this
console.log(this);

// 函数中的this
// 1.声明函数
function getName() {
console.log(this.name);
}

// 2.创建对象
var obj01 = {
"name":"tom",
"getName":getName
};
var obj02 = {
"name":"jerry",
"getName":getName
};

// 3.调用函数
obj01.getName();
obj02.getName();

5、数组

①使用new关键字创建数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 1.创建数组对象
var arr01 = new Array();

// 2.压入数据
arr01.push("apple");
arr01.push("orange");
arr01.push("banana");
arr01.push("grape");

// 3.遍历数组
for (var i = 0; i < arr01.length; i++) {
console.log(arr01[i]);
}

// 4.数组元素反序
arr01.reverse();
for (var i = 0; i < arr01.length; i++) {
console.log(arr01[i]);
}

// 5.数组元素拼接成字符串
var arrStr = arr01.join(",");
console.log(arrStr);

// 6.字符串拆分成数组
var arr02 = arrStr.split(",");
for (var i = 0; i < arr02.length; i++) {
console.log(arr02[i]);
}

// 7.弹出数组中最后一个元素
var ele = arr01.pop();
console.log(ele);

②使用[]创建数组

1
2
3
// 8.使用[]创建数组
var arr03 = ["cat","dog","tiger"];
console.log(arr03);

6、JavaScript关键字

关键词

描述

var

声明一个变量，可以选择将其初始化为一个值

let

声明一个块{}作用域局部变量，可以选择将其初始化为一个值

const

声明一个只读的命名常量

break

终止当前循环，switch或标签语句，并将程序控制权转移到终止语句之后的语句

continue

在当前循环或标记循环的当前迭代中终止语句的执行，并在下一次迭代中继续执行循环

if…else

如果指定条件为真，则执行一条语句。如果条件为假，则可以执行另一条语句

switch

计算表达式，使表达式的值与case子句匹配，并执行与该case相关的语句

throw

引发用户定义的异常

try…catch

标记要尝试的语句块，并指定响应（如果发生异常）

while

创建一个循环，只要指定条件的值为真，该循环便执行指定的语句。在执行语句之前先判断条件

do…while

创建一个执行指定语句的循环，直到测试条件的值为假。执行该语句后评估条件，导致指定的语句至少执行一次

for

创建一个循环，该循环由三个可选表达式组成，用括号括起来并用分号隔开，后跟在循环中执行的语句

for…in

以任意顺序遍历对象的可枚举属性。对于每个不同的属性，可以执行语句

for…of

遍历可迭代对象（包括数组，类似数组的对象，迭代器和生成器），调用自定义迭代挂钩，并针对每个不同属性的值执行要执行的语句

三、JSON

1、JSON格式的用途

在开发中凡是涉及到跨平台数据传输，JSON格式一定是首选。

2、JSON格式的说明

  • JSON数据两端要么是{}，要么是[]
  • {}定义JSON对象
  • []定义JSON数组
  • JSON对象的格式如下：{key:value,key:value,...,key:value}
  • JSON数组的格式如下：[value,value,...,value]
    • key的类型固定是字符串
    • value的类型可以是：①基本数据类型；②引用类型（JSON对象或JSON数组）
    • 正因为JSON格式中value部分还可以继续使用JSON对象或JSON数组，所以JSON格式是可以“多层嵌套”的，所以JSON格式不论多么复杂的数据类型都可以表达。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
"stuId":556,
"stuName":"carl",
"school":{
"schoolId":339,
"schoolName":"atguigu"
},
"subjectList":[
{
"subjectName":"java",
"subjectScore":50
},
{
"subjectName":"PHP",
"subjectScore":35
},
{
"subjectName":"python",
"subjectScore":24
}
],
"teacherMap":{
"aaa":{
"teacherName":"zhangsan",
"teacherAge":20
},
"bbb":{
"teacherName":"zhangsanfeng",
"teacherAge":108
},
"ccc":{
"teacherName":"zhangwuji",
"teacherAge":25
}
}
}

3、JSON对象和JSON字符串互转

①JSON对象转JSON字符串

1
2
3
4
5
var jsonObj = {"stuName":"tom","stuAge":20};
var jsonStr = JSON.stringify(jsonObj);

console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string

②JSON字符串转JSON对象

1
2
jsonObj = JSON.parse(jsonStr);
console.log(jsonObj); // {stuName: "tom", stuAge: 20}