JavaScript基础知识

最新推荐文章于 2024-11-08 16:09:18 发布

黄泉旧部

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量250

点赞数 2

分类专栏： Java学习文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/qq_56243696/article/details/127168079

版权

Java学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

简介

JavaScript是一门跨平台，面向对象的脚本语言，来控制网页的行为，使网页变得可交互；

W3C标准

结构：HTML

表现：CSS

行为：JavaScript

起源

JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证；

前段验证就是检查用户输入的内容是否符合一定的规则；

组成

完整的JavaScript由ECMAScript，DOM,BOM三部分组成；

特点

解释性语言
动态语言

动态语言可以理解为在语言中的一切内容都是不确定的；
类似于C和java的语法结构
基于原型的面向对象
严格区分大小写

使用

标签引用

直接在HTML中的script标签中编写JavaScript代码；
文件引用

在单独的JavaScript文件中编写代码，在HTML文件中使用script标签中进行引用；

JavaScript输出

页面输出

<script>
    document.write("Hello,World!");
</script>

控制台输出

<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>

弹出窗口输出

<script>
    alert("Hello internet!");
</script>

注释

JS中的注释和Java的的一致，分为两种：

单行注释：// 注释内容
多行注释：/* 注释内容 */

基础语法

标识符(命名规则)

所谓标识符，就是指给变量、函数、属性或函数的参数起名字；

命名规则：

第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
其它字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript 标识符采用驼峰命名法。
标识符不能是关键字和保留字符。

关键字：

保留字符：

其他不建议使用的标识符：

字面量与变量

字面量：字面量实际上就是一些固定的值，比如：1、2 、3、true、false、null、NaN、“hello”，字面量都是不可以改变的，由于字面量不是很方便使用，所以在JavaScript中很少直接使用字面量，使用的而是变量。

变量：变量的作用是给某一个值或对象标注名称；

变量声明的关键字：var，let，const；

js中的变量类型是弱类型，所以可以用来保存任何类型的数据；

变量的声明
```
var a;
```
变量的赋值
```
a = 123;
```
声明和赋值同时进行
```
var a = 123;
```

数据类型

数据类型决定了一个数据的特征；

分类：

基本数据类型
- String、Number、 Boolean、Undefined、Null。
- 基本数据类型的值是无法修改的，是不可变的
- 基本数据类型的比较是值的比较，也就是只要两个变量的值相等，我们就认为这两个变量相等
引用数据类型
- 引用类型的值是保存在内存中的对象。
- 当一个变量是一个对象时，实际上变量中保存的并不是对象本身，而是对象的引用。
- 当从一个变量向另一个变量复制引用类型的值时，会将对象的引用复制到变量中，并不是创建一个新的对象。

JavaScript中一共有5种基本数据类型：

字符串型（String）
数值型（Number）
布尔型（Boolean）
undefined型（Undefined）
null型（Null）

ps：上述5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型

typeof运算符：用来检查一个变量的数据类型

使用方式：typeof 数据
示例：
console.log(typeof 123);
console.log(typeof "Hello,World!");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

结果：

堆和栈梳理：

JavaScript在运行时数据是保存到栈内存和堆内存当中的。
栈内存用来保存变量和基本类型，堆内存是用来保存对象。
声明一个变量时，实际上就是在栈内存中创建了一个空间用来保存变量。
变量中保存的实际上是对象在堆内存中的地址。

var a = 123;
var b = true;
var c = "hello";
var d = {name: 'sunwukong', age: 18};

在上述代码运行时，堆内存与栈内存的结构如下：

String类型

String用于表示一个字符序列，即字符串。字符串需要使用 单引号 或 双引号 括起来。

转义字符：

ps：使用typeof运算符检查字符串时，会返回"string"。

Number类型

Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

Number表示的数字大小是有限的，如果超过了这个范围，则会返回±Infinity。

最大值：+1.7976931348623157e+308
最小值：-1.7976931348623157e+308
0以上的最小值：5e-324

特殊的是数字：

Infinity：正无穷
-Infinity：负无穷
NaN：非法数字（Not A Number）

其它的进制

二进制：0b 开头表示二进制，但是，并不是所有的浏览器都支持
八进制：0 开头表示八进制
十六进制：0x 开头表示十六进制

ps:使用typeof检查一个Number类型的数据时（包括NaN 和 Infinity），会返回"number"。

Boolean

布尔型也被称为逻辑值类型或者真假值类型。

布尔型只能够取真（true）和假（false）两种数值。除此以外，其它的值都不被支持。

Undefined

Undefined 类型只有一个值，即特殊的 undefined。

在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。

ps：使用typeof对没有初始化和没有声明的变量，会返回“undefined”。

Null

Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。

undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true。

ps:从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

强制类型转换

强制类型转换指将一个数据类型强制转换为其它的数据类型。一般是指，将其它的数据类型转换为String、Number、Boolean。

转换为String类型

方式一：调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回，但是注意：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错。
```
var a = 123;
a = a.toString();
console.log(a);
console.log(typeof a);
```
方式二：调用String()函数，并将被转换的数据作为参数传递给函数，使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法，它会将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”。
```
var a = 123;
a = String(a);
console.log(a);
console.log(typeof a);

var b = undefined;
b = String(b);
console.log(b);
console.log(typeof b);

var c = null;
c = String(c);
console.log(c);
console.log(typeof c);
```

方式三：为任意的数据类型 +""

var a = 123;
a = a + "";
console.log(a);
console.log(typeof a);

转换为Number类型

方式一：使用Number()函数；可以用来转换任何类型的数据‘
- 字符串 --> 数字
  - 如果是纯数字的字符串，则直接将其转换为数字
  - 如果字符串中有非数字的内容，则转换为NaN
  - 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
- 布尔-->数字
  - true 转成 1
  - false 转成 0
- null-->数字
  - null 转成 0
- undefined-->数字
  - undefined 转成 NaN
方式二：专门用来对付字符串，parseInt() 把一个字符串转换为一个整数
```
var a = "123";
a = parseInt(a);
console.log(a);
console.log(typeof a);
```
方式三：专门用来对付字符串，parseFloat() 把一个字符串转换为一个浮点数
```
var a = "123.456";
a = parseFloat(a);
console.log(a);
console.log(typeof a);
```
注意：如果对非String使用parseInt()或parseFloat()，先将其转换为String然后在操作；

转换为Boolean类型

将其它的数据类型转换为Boolean，只能使用Boolean()函数；

使用Boolean()函数
- 数字 —> 布尔
  - 除了0和NaN，其余的都是true
- 字符串 —> 布尔
  - 除了空串，其余的都是true
- null和undefined都会转换为false
- 对象也会转换为true

运算符

运算符也叫操作符，通过运算符可以对一个或多个值进行运算并获取运算结果；

在js中的运算符，大部分与Java运算符是大部分的功能是一样的；

算术运算符

算术运算符用于表达式计算。

以y=5，解释算术运算符：

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
-	减法	x=y-2	3	5
/	除法	x=y/2	2.5	5
%	取模（求余数）	x=y%2	1	5
++	自增	x=++y x=y++	6 5	6 6
–	自减	x=–y x=y–	4 5	4 4

关系运算符

关系运算符在逻辑语句中使用，以测定变量或值是否相等：

以X=5，解释：

运算符	描述	比较	返回值
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

复制运算符

赋值运算符用于给 JavaScript 变量赋值

以，x=10和y=5，解释赋值运算符：

运算符	例子	等同于	运算结果
=	x=y		x=5
=	x=y		x=5
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
*=	x*=y	x=x*y	x=50
*=	x*=y	x=x*y	x=50

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

以，x=6 以及 y=3，解释逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

比较运算符

比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。

使用 == 来做相等运算
- 当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较
使用 != 来做不相等运算
- 不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
使用 === 来做全等运算
- 用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false
使用 !== 来做不全等运算
- 用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

条件运算符

类似于Java中的三目运算符；

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法：variablename=(condition)?value1:value2;

举例：result=(age<18)?"年龄太小":"年龄合适";

执行流程：如果condition为true，则执行语句1，并返回执行结果，如果为false，则执行语句2，并返回执行结果。

逗号运算符

使用逗号可以在一条语句中执行多次操作。

比如：var num1=1, num2=2, num3=3;

使用逗号运算符分隔的语句会从左到右顺序依次执行。

运算符优先级

运算符优先级由上到下依次减小，对于同级运算符，采用从左向右依次执行的方法。

代码结构

语句：是一个程序的基本单位，JavaScript的程序就是由一条一条语句构成的，每一条语句使用;结尾。

JavaScript中的语句默认是由上至下顺序执行的；

代码块：在大括号 {} 中所写的语句，以此将多条语句的集合视为一条语句来使用。

条件语句

if…else

switch…case

符合Java语句的格式；

循环语句

while
do…while
for
break：结束最近的一次循环，可以在循环和switch语句中使用。
continue：结束本次循环，执行下一次循环，只能在循环中使用。

与Java的格式相符；

对象结构

Object类型，我们也称为一个对象，是JavaScript中的引用数据类型。它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个名/值对。对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性。除了字符串、数字、true、false、null和undefined之外，JavaScript中的值都是对象。

创建对象

方式一：

var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);

方式二：

var person = {
    name: "孙悟空",
    age: 18
};
console.log(person);

访问属性

方式一：使用 . 来访问
```
对象.属性名
```
方式二：使用 [] 来访问
```
对象[‘属性名’]
```

删除属性

删除对象的属性可以使用delete关键字，格式如下：

delete 对象.属性名

遍历属性

枚举遍历对象中的属性，可以使用for … in语句循环，对象中有几个属性，循环体就会执行几次。

语法格式：

for (var 变量 in 对象) {

}

函数

函数是由一连串的子程序（语句的集合）所组成的，可以被外部程序调用，向函数传递参数之后，函数可以返回一定的值。

JavaScript中的函数也是一个对象，使用typeof检查一个函数对象时，会返回function。

函数使用演示

创建：

方式一:函数对象；不常用

语法格式：
```
var 函数名 = new Function("执行语句");
```

方式二：函数声明；常用

语法格式：

function 函数名([形参1,形参2,...,形参N]) {
    语句...
}

方式三：函数表达式；常用

var 函数名  = function([形参1,形参2,...,形参N]) {
    语句....
}

函数参数：

JS中的所有的参数传递都是按值传递的，也就是说把函数外部的值赋值给函数内部的参数，就和把值从一个变量赋值给另一个变量是一样的，在调用函数时，可以在()中指定实参（实际参数），实参将会赋值给函数中对应的形参
函数的实参可以是任意的数据类型,而调用函数时，解析器不会检查实参的类型，所以要注意，是否有可能会接收到非法的参数，如果有可能，则需要对参数进行类型的检查;
调用函数时，解析器也不会检查实参的数量，多余实参不会被赋值，如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined

函数返回值：

语法格式:return 值；

使用 return 来设置函数的返回值，return后的值将会作为函数的执行结果返回，可以定义一个变量，来接收该结果。
函数中return后的语句都不会执行，如果return语句后不跟任何值就相当于返回一个undefined，如果函数中不写return，则也会返回undefined，return后可以跟任意类型的值

函数调用：

与Java函数调用一致；

示例代码：

function sun(a,b){
    return a+b;
}
var result=sun(10,89);
console.log(result);

嵌套函数

嵌套函数：在函数中再次声明创建函数

嵌套函数只能在当前函数中可以访问，在当前函数外无法访问。

示例代码：

function fu() {
    function zi() {
        console.log("嵌套函数:zi()");
    }
    zi();
}
fu();

匿名函数

匿名函数：没有名字的函数就是匿名函数，它可以让一个变量来接收，也就是用 “函数表达式” 方式创建和接收。

立即执行函数

立即执行函数：函数定义完，立即被调用，这种函数叫做立即执行函数，立即执行函数往往只会执行一次。

示例代码：

(function () {
    alert("我是一个匿名函数");
})();

对象中的函数

对象的属性值可以是任何的数据类型，也可以是个函数。

对象的方法：即对象内部的函数

示例代码：

var person = {
    name: "zhangsan",
    age: 18,
    sayHello: function () {
        console.log(name + " hello")
    }
}

person.sayHello();

this对象

解析器在调用函数时，每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象

以函数的形式调用时，this永远都是window
以方法的形式调用时，this就是调用方法的那个对象

示例代码：

//创建一个全局变量name
var name = "全局变量name";

//创建一个函数
function fun() {
    console.log(this.name);
}

//创建一个对象
var obj = {
    name: "孙悟空",
    sayName: fun
};

//我们希望调用obj.sayName()时可以输出obj的名字而不是全局变量name的名字
obj.sayName();

作用域

全局作用域

直接编写在script标签中的JavaScript代码，都在全局作用域
全局作用域在页面打开时创建，在页面关闭时销毁
在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建，我们可以直接使用
在全局作用域中：
- 创建的变量都会作为window对象的属性保存
- 创建的函数都会作为window对象的方法保存
全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到

函数作用域

调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
每调用一次函数就会创建一个新的函数作用域，它们之间是互相独立的
在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量
在函数中要访问全局变量可以使用window对象
作用域链：当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用，如果没有则向上一级作用域中寻找，直到找到全局作用域，如果全局作用域中依然没有找到，则会报错ReferenceError

作用域链

多个上下级关系的作用域形成的链，它的方向是从下向上的(从内到外)，查找变量时就是沿着作用域链来查找的。

查找一个变量的查找规则：

在当前作用域下的执行上下文中查找对应的属性，如果有直接返回，否则进入2
在上一级作用域的执行上下文中查找对应的属性，如果有直接返回，否则进入3
再次执行2的相同操作，直到全局作用域，如果还找不到就抛出找不到的ReferenceError异常

JavaScript常用对象

数组对象

数组是一种用于表达有顺序关系的值的集合的语言结构，也就是同类数据元素的有序集合。

数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据

在JavaScript中是支持数组可以是不同的元素，这跟JavaScript的弱类型有关

数组内的各个值被称作元素，每一个元素都可以通过索引（下标）来快速读取，索引是从零开始的整数。

使用typeof检查一个数组对象时，会返回object。

创建数组

方式一：使用对象创建

格式：

var arr = new Array();
arr[0] = 1;
arr[1] = "2";
arr[2] = 3;
arr[3] = "4";
arr[4] = 5;
arr[5] = "6";
arr[6] = 7;
arr[7] = "8";
arr[8] = 9;

方式二：使用字面量创建：

格式：

var arr = [1, "2", 3, "4", 5, "6", 7, "8", 9];

数组遍历

for循环：

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

数组属性

constructor属性：返回创建数组对象的原型函数

数组方法

push()方法：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
pop()方法：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
unshift()方法：该方法向数组开头添加一个或多个元素，并返回新的数组长度
shift()方法：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回
forEach()方法：该方法可以用来遍历数组
- forEach()方法需要一个函数作为参数，像这种函数，由我们创建但是不由我们调用的，我们称为回调函数。数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素，以实参的形式传递进来，我们可以来定义形参，来读取这些内容，浏览器会在回调函数中传递三个参数：
  1. 第一个参数：就是当前正在遍历的元素
  2. 第二个参数：就是当前正在遍历的元素的索引
  3. 第三个参数：就是正在遍历的数组
```
var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.forEach(function(value,index,obj){
    console.log(value+":"+index+":"+obj);
});
```
运行结果：
slice()方法：该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

参数：
- 第一个参数：截取开始的位置的索引，包含开始索引
- 第二个参数：截取结束的位置的索引，不包含结束索引，第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
- 注意：索引可以传递一个负值，如果传递一个负值，则从后往前计算，-1代表倒数第一个，-2代表倒数第二个。
```
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.slice(1, 4);
console.log(result);
result = arr.slice(3);
console.log(result);
result = arr.slice(1, -2);
console.log(result);
```
splice()方法：该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

参数：
- 第一个参数：表示开始位置的索引
- 第二个参数：表示要删除的元素数量
- 第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
```
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.splice(3, 2);
console.log(arr);
console.log(result);
result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");
console.log(arr);
console.log(result);
```
  结果：

concat()方法：该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");
console.log(result);

join()方法：该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用","作为连接符
reverse()方法：该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组
sort()方法：该方法可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序
- 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果。
- 可以在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边，浏览器会根据回调函数的返回值来决定元素的顺序，如下：
  - 如果返回一个大于0的值，则元素会交换位
  - 如果返回一个小于等于0的值，则元素位置不变

Date对象

用Date对象来表示一个时间，如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间。

案例演示：

var date = new Date();
console.log(date);

console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)

结果：

Math对象

/*固定值*/
console.log("PI = " + Math.PI);
console.log("E  = " + Math.E);
console.log("===============");
/*正数*/
console.log(Math.abs(1));        //可以用来计算一个数的绝对值
console.log(Math.ceil(1.1));     //可以对一个数进行向上取整，小数位只有有值就自动进1
console.log(Math.floor(1.99));   //可以对一个数进行向下取整，小数部分会被舍掉
console.log(Math.round(1.4));    //可以对一个数进行四舍五入取整
console.log("===============");
/*负数*/
console.log(Math.ceil(-1.1));    //可以对一个数进行向上取整，小数部分会被舍掉
console.log(Math.floor(-1.99));  //可以对一个数进行向下取整，小数位只有有值就自动进1
console.log(Math.round(-1.4));   //可以对一个数进行四舍五入取整
console.log("===============");
/*随机数*/
//Math.random()：可以用来生成一个0-1之间的随机数
//生成一个0-x之间的随机数：Math.round(Math.random()*x)
//生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+x)
console.log(Math.round(Math.random() * 10));            //生成一个0-10之间的随机数
console.log(Math.round(Math.random() * (10 - 1) + 1));  //生成一个1-10之间的随机数
console.log("===============");
/*数学运算*/
console.log(Math.pow(12, 3));   //Math.pow(x,y)：返回x的y次幂
console.log(Math.sqrt(4));      //Math.sqrt(x) ：返回x的平方根

结果：