前端JS基础回顾1

JS书写位置及分类

内部书写：书写在body内部、页面元素下方
外部导入：书写在页面文件外，使用src导入，
内联写法：书写在页面元素内

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS回顾</title>
</head>

<body>
    <h1>JS回顾测试页面</h1>
    <!-- 内联写法 -->
    <button onclick="alert('write to int')">测试</button>
    <script>
    // 内部书写区
    alert('write a something')
    </script>
    <script src="test.js">
    //外部导入，该区域内的代码会被忽略
    </script>
</body>
</html>

输入输出

输入：用户输入

1
2
3
<script>
    prompt('Please input something')
</script>

输出：文档内输出、弹窗输出、控制台输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS回顾</title>
</head>

<body>
    <h1>JS回顾测试页面</h1>
    <!-- 页面弹出alert -->
    <button onclick="alert('write to int')">测试</button>
    <script>
    // 文档内输出
    document.write('<p>writing in doc</p>')
    //控制台输出
    console.log('writing in command')
    </script>
</body>
</html>

变量

即存储数据的“元素”
变量声明：var 变量名、let 变量名
其中var并不会因为变量名重复而报错，let在同一作用域下变量名唯一
命名规则：避开key,由下划线、字母、数字组成、且不以数字开头，严格区分大小写
命名规范：有意义、小驼峰命名规范：username->userName

数组

顺序存储多个数据,下标从0开始

1
2
3
//数组定义,arr[0]->'data1'
let arr=['data1','data2','data3']
let arr2=[...arr]//...为扩展运算符，此时arr2===arr

常量

const定义常量，定义时需初始化赋值，初始化后不可重新赋值

数据类型

基础数据类型

number、string、boolean、undefined（未赋值）、null等
模板字符串：用于接收数据拼接字符串

1
2
3
let str='testStr'
let sentence=`Connect ${str} into a sentence`//使用反引号``包裹字符，${}内传入待拼接字符
console.log(sentence)//Connect words into a sentence

引用数据类型

object（对象）

检测数据类型

typeof(变量名)

数据类型转换

显式转换：Number()、parseInt()、parseFloat()

1
2
3
4
let str='8.92px'
console.log(Number(str))//return 8.92
console.log(parseInt(str))//return 8
console.log(parseFloat(str))//return 0.92
前端开发 > Javascript
#前端开发 #Javascript
前端JS基础回顾1
http://example.com/2026/03/03/前端JS基础回顾1/
作者
印星
发布于
2026年3月3日
许可协议