js的复习（一）

提示：以下是本篇文章正文内容，下面案例可供参考

一、JavaScript 是什么？

JavaScrip 是一种轻量级、解释型、弱类型、基于原型的脚本语言。
主要作用：实现网页交互（点击、弹窗、动画、数据请求等）。
三大前端核心：
HTML：结构（骨架）
CSS：样式（皮肤）
JavaScript：行为（动作）

二、JS 的三种引入方式

1. 行内式

<button onclick="alert('hello')">点击</button>

2. 内嵌式

<script>alert('HelloJavaScript')</script>

3. 外链式

<script src="index.js"></script>

注意：外链式 script 标签中间不能写代码。

三、变量与常量

1. 定义变量

let age=18let name='小明'

2. 定义常量（不可修改）

constPI=3.14159

3. 命名规则

• 只能由字母、数字、下划线、$ 组成
• 不能以数字开头
• 严格区分大小写
• 不能是关键字（let、const、var、function 等）
• 推荐：见名知意（userName、age）

4. var /let/const 区别
   以下是整理后的变量声明关键字对比表格，符合Markdown格式要求：

变量声明关键字对比

建议：优先使用const→ 必要时使用let→ 避免使用var

四、数据类型

JS 数据类型分为 基本数据类型 和 引用数据类型。

1. 基本数据类型（7 种）

• Number：数字（1, 3.14, NaN, Infinity）
• String：字符串（’ 单引号 '、“双引号”、反引号）
• Boolean：布尔（true /false）
• Undefined：未定义（只声明不赋值）
• Null：空（手动清空）
• Symbol：独一无二的值（ES6）
• BigInt：大整数（ES2020）

2. 引用数据类型（1 种）

• Object
  包含：对象、数组、函数、日期、正则等

3. 检测数据类型

typeof123// "number"typeof'abc'// "string"typeoftrue// "boolean"typeof undefined// "undefined"typeofnull// "object"（历史bug）typeof[]// "object"typeof{}// "object"typeoffunction(){}// "function"

4. 数据类型转换

• 转字符串

String(123)123+'' num.toString()

• 转数字

Number('123')parseInt('123px')// 123parseFloat('3.14')// 3.14

• 转布尔

Boolean(0)// falseBoolean('')// falseBoolean(NaN)// falseBoolean(null)// falseBoolean(undefined)// false只有这5个是假值，其余都是真值

五、运算符

1. 算术运算符

+-*/%++--

2. 赋值运算符

=+=-=*=/=%=

3. 比较运算符

==// 只比较值===// 既比较值也比较类型（推荐！）

!= !== > < >= <=

• 开发永远优先使用 === 严格相等

4. 逻辑运算符

&&与（全真为真）||或（一真为真）!非（取反）

5. 三元运算符

• 条件 ? 满足时执行 : 不满足时执行

六、流程控制

1. if 条件语句

if(age>=18){console.log('成年')}elseif(age>=12){console.log('青少年')}else{console.log('儿童')}

2. switch 语句

switch(week){case1:console.log('周一');breakcase2:console.log('周二');breakdefault:console.log('未知')}

3. 循环语句
   for 循环（最常用）

for(let i=0;i<10;i++){console.log(i)}

while 循环

let i=0while(i<10){i++}

do while 循环

do{i++}while(i<10)

4. break 和 continue

• break：跳出整个循环
• continue：跳过本次循环，继续下一次

七、数组

数组是有序的数据集合。

1. 创建数组

let arr=[1,2,3,'a',true]

2. 访问数组

arr[0]// 1

3. 数组长度

arr.length

4. 常用数组方法

arr.push()// 末尾添加arr.pop()// 末尾删除arr.unshift()// 开头添加arr.shift()// 开头删除arr.splice()// 删除/替换/插入arr.slice()// 截取arr.forEach()// 遍历arr.map()// 映射新数组arr.filter()// 过滤arr.find()// 查找第一个满足元素arr.every()// 全部满足arr.some()// 有一个满足arr.reduce()// 累计计算arr.includes()// 是否包含arr.indexOf()// 查找索引arr.join()// 转字符串arr.sort()// 排序arr.reverse()// 反转

八、函数

函数是封装一段可重复使用的代码块。

1. 函数声明

function 函数名(参数){return返回值}

2. 函数调用

• 函数名()

3. 函数参数

• 形参：定义时的参数
• 实参：调用时的参数

4. return
   函数遇到 return 立即停止执行
   return 后面的值是函数返回结果
   没有 return 默认返回 undefined
5. 匿名函数

let fn=function(){}

6. 箭头函数（ES6）

constfn=()=>{}

• 特点：
  1. 写法更简洁
  2. 没有自己的 this
  3. 没有 arguments
  4. 不能当构造函数

7. 作用域
   1. 全局作用域
   2. 函数作用域
   3. 块级作用域（let/const）
   4. 作用域链：内部函数可以访问外部函数变量

九、对象（Object）

对象是无序的键值对集合。

1. 创建对象

let obj={name:'小明',age:18,sayHi(){console.log('hi')}}

2. 访问属性

obj.name obj['name']

3. 遍历对象

for(let key in obj){console.log(key,obj[key])}

4. 对象方法

Object.keys(obj)// 获取所有键Object.values(obj)// 获取所有值Object.assign()// 合并对象...obj// 对象展开

十、字符串（String）

常用方法

str.length// 长度str.indexOf()// 查找str.includes()// 是否包含str.slice()// 截取str.substring()// 截取str.substr()// 截取str.split()// 分割成数组str.replace()// 替换str.trim()// 去空格str.toUpperCase()// 转大写str.toLowerCase()// 转小写str.startsWith()// 开头str.endsWith()// 结尾

模板字符串（ES6）

let str=`名字：${name}，年龄：${age}`

十一、内置对象

1. Math 数学对象

Math.PIMath.random()// 0-1随机数Math.floor()// 向下取整Math.ceil()// 向上取整Math.round()// 四舍五入Math.max()// 最大值Math.min()// 最小值Math.abs()// 绝对值

2. Date 日期对象

let date=newDate()date.getFullYear()// 年date.getMonth()// 月（0-11）date.getDate()// 日date.getDay()// 星期date.getHours()// 时date.getMinutes()// 分date.getSeconds()// 秒

十二、DOM 操作

DOM = Document Object Model（文档对象模型）

1. 获取元素

document.getElementById('id')document.getElementsByClassName('class')document.getElementsByTagName('div')document.querySelector('选择器')// 常用document.querySelectorAll('选择器')// 常用

2. 操作内容

elem.innerHTML// 解析标签elem.innerText// 纯文本elem.value// 表单值

3. 操作属性

elem.src elem.href elem.title elem.setAttribute('属性','值')elem.getAttribute('属性')elem.removeAttribute('属性')

4. 操作样式

elem.style.color='red'elem.className elem.classList.add()elem.classList.remove()elem.classList.toggle()elem.classList.contains()

5. 节点操作

parentNode children nextSibling previousSibling createElement appendChild removeChild

十三、事件基础

1. 注册事件

elem.onclick=function(){}elem.addEventListener('click',function(){})

2. 常见事件
   1. 鼠标：click、mouseenter、mouseleave、mousemove
   2. 键盘：keydown、keyup、keypress
   3. 表单：focus、blur、change、submit
   4. 页面：load、scroll、resize
3. 事件对象 event

e.target// 触发事件元素e.preventDefault()// 阻止默认行为e.stopPropagation()// 阻止冒泡

4. 事件流
   捕获阶段 → 目标阶段 → 冒泡阶段
   事件冒泡：子元素事件会向上传递给父元素

十四、BOM 操作

1. window 对象
   全局对象，所有全局变量、函数都属于 window
2. 弹出框

alert()confirm()// 确认框prompt()// 输入框

3. 定时器

setTimeout(()=>{},毫秒)// 延迟执行setInterval(()=>{},毫秒)// 循环执行clearTimeout()clearInterval()

4. location 地址栏

location.href// 获取/设置 URLlocation.search// 参数location.reload()// 刷新

5. history 历史

history.back()history.forward()history.go(n)

6. navigator 浏览器信息

navigator.userAgent

十五、本地存储

1. localStorage
   永久存储（手动清除才会消失）
   只能存字符串

localStorage.setItem('key','value')localStorage.getItem('key')localStorage.removeItem('key')localStorage.clear()

2. sessionStorage
   临时存储（关闭页面消失）
   用法同上

十六、异步与同步

同步：代码按顺序执行，前面执行完才执行后面
异步：不阻塞代码，如定时器、ajax 请求、事件
JS 是单线程语言，异步任务进入任务队列。

十七、闭包

1. 闭包 = 函数 + 函数能够访问的自由变量
2. 作用：
   延伸变量作用域
   私有化变量，避免污染全局

functionouter(){let num=10functioninner(){console.log(num)}returninner}

注意：滥用闭包可能造成内存泄漏。

十八、原型与原型链（极简版）

1. 所有对象都有proto
2. 所有函数都有 prototype
3. 对象的proto指向构造函数的 prototype
4. 原型链：当访问一个对象属性时，先找自己，没有就沿proto向上找，直到 null

十九、ES6+ 常用新特性

1. let / const
2. 箭头函数
3. 模板字符串
4. 解构赋值
5. 展开运算符 …
6. 数组方法：map /filter/reduce /includes
7. 对象简写
8. Promise
9. async / await
10. 模块化 import /export