js的复习（一）

文章目录

• [一、JavaScript 是什么？](#一、JavaScript 是什么？)
• [二、JS 的三种引入方式](#二、JS 的三种引入方式)
• 三、变量与常量
• • • 变量声明关键字对比
• 四、数据类型
• 五、运算符
• 六、流程控制
• 七、数组
• 八、函数
• 九、对象（Object）
• 十、字符串（String）
• 十一、内置对象
• [十二、DOM 操作](#十二、DOM 操作)
• 十三、事件基础
• [十四、BOM 操作](#十四、BOM 操作)
• 十五、本地存储
• 十六、异步与同步
• 十七、闭包
• 十八、原型与原型链（极简版）
• [十九、ES6+ 常用新特性](#十九、ES6+ 常用新特性)

---

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

一、JavaScript 是什么？

JavaScrip 是一种轻量级、解释型、弱类型、基于原型的脚本语言。

主要作用：实现网页交互（点击、弹窗、动画、数据请求等）。

三大前端核心：

HTML：结构（骨架）

CSS：样式（皮肤）

JavaScript：行为（动作）

二、JS 的三种引入方式

1. 行内式

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

2. 内嵌式

<script>
  alert('Hello JavaScript')
</script>

3. 外链式

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

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

三、变量与常量

1. 定义变量

let age = 18
let name = '小明'

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

const PI = 3.14159

3. 命名规则

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

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

变量声明关键字对比

关键字	作用域	重复声明	变量提升	重新赋值
var	函数级	允许	有	允许
let	块级	不允许	有（暂时性死区）	允许
const	块级	不允许	有（暂时性死区）	不允许

建议 ：优先使用 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. 检测数据类型

typeof 123          // "number"
typeof 'abc'        // "string"
typeof true         // "boolean"
typeof undefined    // "undefined"
typeof null         // "object"（历史bug）
typeof []           // "object"
typeof {}           // "object"
typeof function(){} // "function"

4. 数据类型转换

• 转字符串

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

• 转数字

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

• 转布尔

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

五、运算符

1. 算术运算符

+ - * / % ++ --

2. 赋值运算符

= += -= *= /= %=

3. 比较运算符

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

   !=   !==  >  <  >=  <=

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

4. 逻辑运算符

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

5. 三元运算符

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

六、流程控制

1. if 条件语句

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

2. switch 语句

switch (week) {
  case 1: console.log('周一'); break
  case 2: console.log('周二'); break
  default: console.log('未知')
}

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

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

while 循环

let i = 0
while (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）

const fn = () => {}

• 特点：
  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.PI
Math.random()  // 0-1随机数
Math.floor()   // 向下取整
Math.ceil()    // 向上取整
Math.round()   // 四舍五入
Math.max()     // 最大值
Math.min()     // 最小值
Math.abs()     // 绝对值

2. Date 日期对象

let date = new Date()
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   // 获取/设置 URL
location.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. 作用：
   延伸变量作用域
   私有化变量，避免污染全局

function outer() {
  let num = 10
  function inner() {
    console.log(num)
  }
  return inner
}

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

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

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