JavaScript基本知识点

2026/9/12 10:14:51 拓冰建站浏览量

学习网站：JavaScript - 学习 Web 开发 | MDN

js的组成

1、ECMASript：规定了js基础语法核心知识点

比如：变量、分支语句、循环语句、对象等等

2、Web APIs：应用层面

（1）DOM：操作文档，比如对页面元素进行移动、大小、添加删除等操作

（2）BOM：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

js的书写位置

1、内部js：直接写在html文件里面，使用script标签包着

规范：script标签写在</body>上面

2、外部js：

<body><script src = './js/filename.js'>// 中间不要写内容，写了也会被忽略</script>
</body>

3、内联js：代码写在标签内部（在vue框架会用到这种模式）

js注释

1、单行注释：

符号：// 注释

快捷键：ctr + /

2、块注释：

符号：/* 注释 */

快捷键：shift + alt + a

js中的结束符

分号（;）

// 可写可不写

输入输出语法

输出语法

1、语法一：文档输出内容：

document.write('')
// 如果是标签的话也会被解析为网页元素

2、语法二：页面弹出警示框：

alert('要输出的内容')

3、语法三：控制台输出语法：

console.log('控制台打印')

输入语法

prompt('请输入信息：')

js代码执行顺序

1、按HTML文档流顺序执行JavaScript代码

2、alert和prompt函数他们会跳过页面渲染先被执行

变量

1、变量的声明：

let 变量名

数组

// 数组是有序的

// 数组中的变量可以是任意类型

1、声明语法：

let 数组名 = [数据1,数据2,数据3,……，数据n]

let 数组名 = new Array(数据1,数据2,数据3,……，数据n)

2、取值语法：

数组名[索引号]

3、数组长度：

数组名.length

4、操作数组：

（1）增加数组

Arr.push(新增的内容)

// 将一个或多个元素添加到一个数组的末尾，并返回数组的长度

Arr.unshift(新增的内容)

// 将一个或多个元素添加到一个数组的开头，并返回数组的长度

（2）删除数组

Arr.pop()

// 从数组中删除最后一个元素，并返回该元素的值

Arr.shift()

// 删除第一个元素，并返回该元素的值

Arr.splice(起始位置,删除的个数)

// 删除任意一个元素的值

// 如果第二个参数不写，会从起始位置删除所有元素

常量

使用const声明的变量称为“常量”

常量声明的时候必须赋值

数据类型

1、基本数据类型

number 数字型：

// 所有的数字都称为数字型

算数运算符：加减乘除，取余数

// NaN （not a number）代表一个错误

string 字符串型：

被单引号、双引号、反引号包裹的数据

字符串通过加号实现拼接

模板字符串：

作用：拼接字符串和变量

外面使用反引号包含，内容拼接变量时，用${}包住变量

boolean 布尔型：

true，false

undefined 未定义型：

声明一个变量未赋值就是未定义类型

null 空类型：

表示赋值了，但是值为空

console.log(undefined + 1)  // NaN
console.log(null + 1) // 1

2、判断数据类型：

作为运算符：typeof x

函数形式：typeof()

隐式转换和显示转换

隐式转换

+：加号两侧，只要有一个字符串，都会转换为字符串类型

加号作为正向解析可以转换为数字型

/ * -：都会把数据转换为数据类型

显示转换

强制转换为数字类型：Number(数据)

只保留整数：parseint(数据)

// 只取整数，不会四舍五入（只取前面以数字开头的字符串）

只保留小数：parseFloat(数据)

转化为布尔型：Boolean(数据)

运算符

一元运算符：

自增、自减运算符

比较运算符（重要）：

==：左右两边值是否相等

===：左右脸变是否类型和值都相等

!==：左右两边是否不全等

语句

1、分支语句

if(条件1){// 代码1
}else if(条件2){// 代码2
}else if(条件3){// 代码3
}else{// 代码4
}条件 ? 满足条件执行的代码 : 不满足条件执行的代码switch (数据){case 值1 ：代码1breakcase 值2 ：代码2breakdefault ：代码nbreak
}

2、循环语句

（1）while循环

while(循环条件){要重复执行的代码（循环体）
}

（2）for循环

for(变量起始值; 终止条件; 变量变化量){// 循环体
}

3、函数的使用

（1）函数的声明

function 函数名(参数列表){函数体
}

（2）参数默认值

function getSum(x = 0, y = 0) {document.write(x + y)
}
getSum() // 结果是0，而不是NaN
getSum(1, 2) // 结果是3

（3）函数的返回值

使用return关键字

（4）函数表达式

let fn = function(){// 函数体
}
// 调用
fn()

（5）立即执行函数

// 方式1
(function (){ console.log(11);})();
// 方式2
(function (){ console.log(11);}());

// 多个立即执行函数必须要加分号结束

// 作用：防止变量污染

// 立即执行函数不需要调用

对象

1、对象的声明

let 对象名 = {属性名:属性值,方法名:函数
}let 对象名 = new object()

// 函数一般为匿名函数

2、对象的使用

查：

第一种：对象名.属性

第二种：对象名[属性]

增：对象名.新属性 = 数据

删：delete 对象名.属性

3、对象的方法

使用：对象名.方法名

4、遍历对象

使用关键字in遍历数组

例子：

let arr = ['pink', 'red', 'bule']for (i in arr) {console.log(i)  // 打印出来的是索引号，索引号为字符串型}

使用for in遍历对象：

例子：

    let obj = {name: 'pink',age: 18,gender: '男'}for (let k in obj) {console.log(k)  // 打印出来是属性名，为字符串属性console.log(obj[k]) // 打印出来的是属性值}

建站实战干货