JavaScript学习笔记

本文最后更新于 2024年11月4日 下午

目录（默认关闭，点击展开）：

展开目录找的更快

点击展开目录

一、JavaScript概述

JavaScript之父：布兰登·艾克

布兰登·艾克

ES1:1997年

ES2:1998年

ES3:1999年

ES5:2009年

ES2015：也叫ES6，发布于2015年

ES2016：

.............

ES2023：

主要学习ES5

二、JavaScript语言特性

HTML是标记语言（只有定义内容和结构，没有逻辑控制和操作）

JavaScript是编程语言（可以编写用于执行的程序）

编程语言 编译型编程语言 解释型编程语言
一次性全部编译成计算机识别的机器语言，再执行 多次边编译边执行
C语言、C++、C# Python
Go语言 JavaScript
Java语言 PHP

JavaScript简称“JS”、JS在浏览器中的解释引擎最主流的是谷歌的“V8引擎”（类似于汽车领域的V8发动机的地位）

Google_V8引擎

三、JS书写位置

1、可以直接在HTML中的script标签内写js语言

如图所示

2、类似于CSS也可以通过link引入的方式：

但是引入Src的script标签里面不能再写js代码了

script有一个type属性，写引用的语言类型的，例如js写type="text/javascript"

如图

四、JS基本语法

  • 每一条语句后面要加分号（不强制，但要规范）
  • JS大小写敏感

在VScode中，搜索transform可以找到并设置选中转大小写的快捷键

  • 单行注释：//

  • 多行注释: /**/

  • 输出语句：

1
2
3
document.write("hello world"); //输出内容到页面
alert("你好，世界"); //以弹窗方式输出内容
console.log(1); //将内容输出到控制台---最常用

五、JS数据类型

1、原始类型

不可再分的数据类型叫原始类型

  • 数字类型 (number)

0o ：八进制

0x ：十六进制

0b ：二进制

  • 字符串类型 (string)

单引号''（内容通过）

双引号""（内容通过）

反引号``(可以直接换行，)

  • 布尔类型 (boolean)

true

false

  • undefined

undefined（值未定义）

  • null

null空

2、引用类型

可以再分的数据类型叫引用类型

  • 对象（object）

存放一系列数据、功能的集合体

1
2
3
4
5
6
7
8
9
10
console.log({
    name: "Tom",
    age: 18,
    phone: "13200000000",
    hobby:{
        football: true,
        game: undefined,
        basketball: null
    }
});

查看数据类型typeof

1
2
3
4
5
6
7
8
9
10
console.log({
    name: typeof "Tom",
    age: typeof 18,
    phone: typeof "13200000000",
    hobby:{
        football: typeof true,
        game: typeof undefined,
        basketball: typeof null
    }
});
输出结果
  • 函数（function）

六、JS变量

1、定义变量

1
var variableName;

变量名命名：字母，下划线，美元开头，可以有数字，但不能以数字开头

2、赋值变量

1
2
3
4
5
6
7
8
var age;
age = 10;
console.log(age,typeof age)
age = "年龄"
console.log(age,typeof age)
// 输出
10 'number'
年龄 string

在JavaScript中，变量的类型也可以发生变化

强类型语言变量可以变化，但是不能变化类型，弱类型语言可以变量变化类型。js属于弱类型语言，而Python是强类型语言。

JavaScript是弱类型解释型语言，故又称js为脚本语言。

3、语法糖

1
2
var age = 10;
var a=1, b=2, c=3, d=4;

变量声明赋值一气呵成

4、变量提升

1
console.log(age);

直接输出没有定义的变量会报错（Uncaught ReferenceError: age is not defined）

1
2
console.log(age);
var age =10;

先引用再定义会变量提升，不会报错，但输出结果为（undefined）

1
2
3
var age; //这行相当于提升了
console.log(age);
age = 10;

这段代码是和上面的代码是等价的。

变量提升范围不会超过脚本块

变量提升

七、js对象

1、对象属性

1
2
3
4
5
6
7
8
9
10
// 示例
var hero = {
    name: "Tom",
    age: 18,
    phone: "13200000000",
    hobby:{
        football: true,
        game: "CS2",
        basketball: null}
};
  • 读取对象存在的属性（读取18）
1
2
console.log(hero.age);
// 输出: 18
  • 读取对象不存在的属性(不会报错，结果是undefined)（类型也为undefined）
1
2
console.log(hero.location, typeof hero.location);
// 输出: undefined 'undefined'
  • 读取不存在的对象（报错）
1
2
console.log(abc.location, typeof abc.location);
// 输出: Uncaught ReferenceError: abc is not defined

再次定义abc(仍然报错，因为abc没有赋值，没有赋值就是原始类型undefined，原始类型不可再拆分)

1
2
3
var abc;
console.log(abc.location, typeof abc.location);
// 输出: Uncaught TypeError: Cannot read properties of undefined (reading 'location')

再次将abc赋值为null(还是报错，因为null也是原始类型，不可拆分)

1
2
3
var abc = null;
console.log(abc.location, typeof abc.location);
// 输出: Uncaught TypeError: Cannot read properties of null (reading 'location')

再次将abc赋值为大括号(不会报错，大括号表示对象，只不过现在这个大括号内为空)

1
2
3
4
5
var abc = {};
console.log(typeof abc);
console.log(abc.location, typeof abc.location);
// 输出: object
//		undefined 'undefined'

但是，将abc赋值为数字、字符串（虽然为原始类型，但是也不会报错，就唯独undefined和null会报错）

1
2
3
4
5
var abc = 1;
console.log(typeof abc);
console.log(abc.location, typeof abc.location);
// 输出: number
//		undefined 'undefined'
留坑

undefined和null读取属性会报错

2、修改属性

1
2
hero.age =19;
console.log(hero.age);

通过取值赋值即可

类似于上面留坑，undefined和null修改属性会报错 ，原始类型不会报错但无法修改属性，引用类型正常

3、增加属性

1
2
hero.loaction = "USA"
console.log(hero.loaction);

和修改属性一样，取值赋值即可

类似于上面留坑，undefined和null增加属性会报错 ，原始类型不会报错但无法增加属性，引用类型正常

4、删除属性

1
delete hero.hobby.game

直接删（不推荐）

类似于上面留坑，undefined和null删除属性会报错 ，原始类型不会报错但无法删除属性，引用类型正常

1
hero.hobby.game = undefined

将待删除的属性赋值为undefined

类似于上面留坑，undefined和null修改属性会报错 ，原始类型不会报错但无法修改属性，引用类型正常

5、属性表达式

原本读取对象是对象点属性的方式，而属性表达式是另外的一种方式。

用途：一些用引号命名非法对象名称，无法通过用对象点的方式调用。

1
2
console.log(hero.age);
// 输出: 18

等价于

1
2
console.log(hero["age"]);
// 输出: 18

对象中括号内引号写属性名

其他增删改类似，同理！

6、动态取值

(属性表达式第二个应用)

简单案例：

1
2
3
4
5
6
7
8
9
var hero = {
    name: "Tom",
    age: 18,
    phone: "13200000000",
    hobby:{
        football: true,
        game: "CS2",
        basketball: null}
};

间接取值

1
2
3
var attr = "name"
console.log(hero[attr]);
// 输出: Tom

通过更换var attr = "name"的值，可以打印不同的值。当var attr = "name"的name是用户输入的时候，应用场景就来了。

1
console.log(prompt("请输入您查询的属性值"))
1
2
var attr = prompt("请输入您查询的属性值")
console.log(hero[attr]);

注：以上通过弹窗获取用户指令信息，不符合es标准。

八、JS全局对象

1、特殊的name（引例）

1
var name;console.log(name)

没有赋值的name的值并不是undefined，而是一个什么都没显示的内容，并且类型为字符串类型。

图片

当赋值给name数字1时，类型仍然为字符串类型：相比于其他关键字，name显得与众不同。

图片
图片

当删除name的赋值语句后，仍然能访问到上次赋值的值（重启服务后恢复默认值）

图片

这是因为name是全局对象window的一个属性。可以不用通过对象，直接可以访问的属性。

2、全局对象

所有的JS宿主环境，都会提供一个全局对象，这个全局对象以及全局对象的属性，可以直接访问。

全局对象的名称和属性，会因宿主环境的不同而不同。其中在浏览器这个宿主环境中，全局对象叫window

window对象代表当前浏览器窗口，提供对宿主环境的API访问。

图片

name默认为空字符串，不论给name赋予什么类型的值，都会转化为字符串类型：

图片

3、定义变量

定义的所有变量，都会作为window对象的属性，存在全局对象里面。

如果定义的变量没有赋值，不会用undefined覆盖已经存在的变量值。未赋值的对象也不会覆盖window对象的属性。

1
var a=10;var a;
图片

但是变量的提升不会超过脚本块。

图片
图片

但是不同脚本块在window对象中是一样的，说明undefined不能覆盖window对象的属性值。

图片

4、window的打印输出

1
console.log(window.console)window.console.log(window.console)
图片

其中window对象的console属性里面的log函数，就对应打印的功能

图片

通过给console属性复制可以使其语句失效：

1
var console = "abc";console.log(window.console);//报错信息：//TypeError: console.log is not a function//类型错误：console.log不是函数
图片

可以通过其他打印函数展现：

1
alert(console);
图片

九、

学习
#学习 #笔记 #JavaScript
JavaScript学习笔记
https://machomeng.pages.dev/12/
作者
Macho Meng
发布于
2024年8月20日
更新于
2024年11月4日
许可协议