# js基础阶段重点问题
## day01
### 1、js由哪些部分组成？每个部分的含义是什么？
- **ECMAScript（JavaScript的核心）**：ECMAScript是一套标准，规范了语言的基本语法。
- **DOM**（**Document** Object Model）：一套操作网页元素的方法
- **BOM**（Browser Object Model）：一套操作浏览器功能的方法
### 3、js的常见书位置有哪几种？
- 内嵌式：把js写在`script`标签中
- 外联式：把js写在一个单独的.js文件中，通过script的src属性引入即可
- 行内式：把js写在标签内部（当前阶段不推荐，后期vue阶段才会用到）
### 4、script标签一般写在页面的什么位置？
- script标签理论上可以写在页面任意位置，但是一般写在body标签内容的最后
### 5、在带有 `src` 属性的script标签内部，书写的js代码，浏览器会不会执行呢？
- 不会
### 6、js中常见的五种输出语句有哪些？（弹框、确认弹框、输入弹框、网页中写入内容、控制台打印）
- alert ： 弹框
- confirm ： 确认框
- prompt ： 输入框
- document.write ： 网页中写入内容
- console.log ：控制台打印数据
### 7、使用变量前，规范要求需要先做什么？
- 声明，let
### 8、变量如果只声明，未赋值，变量的默认值是什么？
- undefined
### 9、如果一个变量未声明，未赋值，直接使用，会出现什么结果？
- 报错
### 10、如果js中代码报错，报错之后的代码会执行吗？
- 不会
### 11、变量名可以由哪些字符组成？
- 由 `数字`、`字母`、`_` 、`$` 组成 ，并且不能以数字开头
### 12、变量 `NAME` 和 变量 `name` 是同一个变量吗？
- 不是，因为变量名区分大小写
### 13、变量名可以是js中有特定含义的单词吗？
- 不能，变量名不能是关键字或者保留字
### 14、多个单词组合的变量名，最好使用怎样的写法？
- 小驼峰命名法
### 15、js中基本数据类型有哪些？单词分别是什么？
- 数字类型：number
- 字符串类型：string
- 布尔类型：boolean
- undefined：未定义（声明未赋值）
- null：空类型
### 16、js中复杂数据类型有哪些？单词分别是什么？
- 数组：array
- 函数：function
- 对象：object
### 17、单引号、双引号、换行的转义字符的写法是什么？
- 单引号的转义字符：`\'`
- 双引号的转义字符：`\"`
- 换行的转义字符：`\n`
### 18、如果 `+` 两边有一个是字符串类型的数据，此时 `+` 是什么功能？
- 字符串的拼接
### 19、如果 `+` 两边都是数字类型的数据，此时 `+` 是什么功能？
- 加法运算
### 20、把数据转换成数字类型的方法有哪些？
- 显示转换：
- Number(值)
- parseInt(值)
- parseFloat(值)
- 隐式转换：
- 不会改变值的计算（-0 *1 /1）
- 正号（+str）
### 21、把数据转换成字符串类型的方法有哪些？
- 显示转换：
- String(值)
- 值.toString()
- 隐式转换：
- 拼接空字符串
### 22、把数据转换成布尔类型的方法有哪些？
- 显示转换：
- Boolean(值)
- 隐式转换：
- !!
## day02
### 1、NaN在什么情况下会出现？
- 在js中，如果把**无法用数字表示的值**转换为数字类型，此时浏览器不会报错，会用 `NaN` 表示
### 2、前自增和后自增的区别是什么？
- ++num：前自增：++在前，表示要先让自己+1，再把自己的值返回给整个式子
- num++：后自增：++在后，先把自己的值返回给整个式子，然后自己再默默的+1
### 3、=、==、===分别表示什么意思？
- =：表示赋值，把右侧的赋值给左侧
- ==：表示相等，只比较内容，不比较类型
- ===：表示全等，既比较内容，又比较类型
### 4、什么情况下会出现逻辑短路？
- &&：左边为false就短路
- ||：左边为true就短路
### 5、如何求出两个任意数的最大值？
```js
let num1 = +prompt('请输入第一个数')
let num2 = + prompt('请输入第二个数')
let max = num1 > num2 ? num1 : num2
console.log(max)
```
### 6、如何完成数字补0案例？
```js
// 数字补0案例：用户输入一个数字，如果数字小于10，则在前面补0（比如：01/02/03...得到的是字符串类型的数据），如果数字大于10，则不需要补（比如：20/30/40...）
let num = +prompt('请输入一个数字')
let result = num < 10 ? '0' + num : num
console.log(result)
```
### 7、用while语句求出1~100之间所有偶数的和？
```js
// 1、先打印1~100
// 2、打印1~100所有的偶数
// 3、累加
let i = 1
let sum = 0
while (i <= 100) {
if (i % 2 === 0) {
sum += i
}
i++
}
console.log(sum)
```
## day03
### 1、用for循环求出1~100所有奇数的和，奇数的和？
```js
let evenSum = 0
let oddSum = 0
for (let i = 1; i <= 100; i++) {
if (i % 2 === 0) {
evenSum += i
} else {
oddSum += i
}
}
console.log(evenSum,oddSum)
```
### 2、break和continue的作用分别是什么？有什么区别？
- **break：** 如果循环遇到了break，就立刻**结束整个循环**。开始执行循环之后的代码
- **continue：** 如果循环遇到了continue，就立刻**结束本次循环**，继续执行下一次循环
### 3、数组的作用是什么？
- 用于储存大量的数据
### 4、往数组的最前和最后添加数据的方法分别是什么？
- **arr.push(数据)：** 往数组的最后添加一项或者多项，并且返回添加之后数组的长度
- **arr.unshift(数据)：** 往数组的最前添加一项或者多项，并且返回添加之后数组的长度
### 5、往数组的最前和最后删除数据的方法分别是什么？
- **arr.pop()：** 在数组的最后删除一项，并且返回删除的这一项
- **arr.shift()：** 在数组的最前删除一项，并且返回删除的这一项
### 6、在数组的任意位置进行删除、添加、替换功能的方法分别是什么？
- **arr.splice(从那开始删除，删除几个，添加的项1，添加的项2，添加的项3，......)**
### 7、数组的正序遍历和倒序遍历的代码分别是什么？
```js
// 正序遍历
for(let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// 倒序遍历
for (let i = arr.length-1; i >= 0 ; i--) {
console.log( arr[i] )
}
```
## day04
### 1、使用函数的步骤分几步？
```js
// 先声明函数
function 函数名(形参) {
函数体
}
// 再调用函数
函数名(实参)
```
### 2、函数的形参和实参的区别是什么？
- 形参：在函数声明的（）中的参数，称之为形参，作用是占位置
- 实参：在函数调用的（）中的参数，称之为实参，作用是把实参传递给形参
### 3、如果函数实参传递多了或者少了，形参的值会有声明影响？
- 如果实参传多了，前几个会一一对应，多出的实参会忽略
- 如果实参传少了，前几个会一一对应，没有接收到实参的形参默认是undefined
### 4、如果函数没有设置return，此时调用函数获取的返回值是什么？
- undefined
### 5、在函数return之后写的代码，浏览器会执行吗？
- 不会执行
### 6、有哪些具体作用域的情况？各自作用域中的变量有什么特点？
- 局部作用域：函数内部的区域
- 局部变量：在函数内部声明的变量，称之为局部变量，
- 特点：局部变量只能在当前函数内部访问
- 全局作用域：在script标签内，函数外部的区域
- 全局变量：在script内，函数外部声明的变量，称之为全局变量
- 特点：全局变量可以在任意位置访问
- 块级作用域：let 配合 `{}` 包裹起来的区域
- 块级变量：在{}内部通过let声明的变量，称之为块级变量
特点：块级变量只能在当前{}内部被访问
## day05
### 1、对象取值和赋值的点语法和中括号语法在使用时有什么区别？
- 点语法：在点的后面只能设置属性名，不支持变量
- 中括号语法：在中括号中可以设置字符串或者变量，支持变量
### 2、如何遍历对象？
```js
for(let key in obj) {
console.log(key) // 表示每一个键值对的键，属性名
console.log(obj[key]) // 表示每一个键值对的值，属性值
}
```
### 3、取整的方法有哪些？
```js
parseInt() // 直接把小数点之后的部分舍弃掉
Math.ceil() //天花板，向上取整，取大的那个
Math.floor() //地板，向下取整，取小的那个
Math.round() //四舍五入，如果是.5，则取更大的那个数
```
### 4、如何获取0~n的随机整数？
```js
parseInt(Math.random() * (n + 1))
```
# webAPIs阶段重点问题
## day01
### 1、webAPIs的组成是什么？分别表示什么含义？
- DOM：文档对象模型：一套操作页面元素的方法
- BOM：浏览器对象模型：一套操作浏览器的方法
### 2、DOM中的document、node、element分别表示什么？
- document：文档，表示当前网页
- node：节点，表示网页中所有内容都可以称之为节点（标签、文本、注释等）
- element：元素，表示特指网页中的标签节点
### 3、获取DOM对象的方法有哪些呢？
- **通过css选择获取**
- 获取单个元素：`document.querySelector('css选择器')`
- 获取多个元素：`document.querySelectorAll('css选择器')`
- 通过id获取元素：`document.getElementById('id属性值')`
- 通过标签名获取元素：`document.getElementsByTagName('标签名')`
- 通过类名获取：`document.getElementsByClassName("类名")`
### 4、innerText和innerHTML的区别是什么？
- **innerText属性：**
- 只能获取文本——》如果有标签会忽略
- 只能设置文本——》当设置的是标签时，标签不能被解析，标签不能生效
- **innerHTML属性：**
- 可以获取文本和标签
- 可以设置文本和标签——》当设置的是标签，标签可以被解析，标签可以生效
### 5、如何通过style属性设置div盒子的背景颜色？
- `div.style.backgroundColor = 'red'`
### 6、dom对象的classList有哪些方法？
- classList.add()：往元素上**添加类名**，不会覆盖原有类名
- classList.remove()：往元素上**移除类名**，不会影响其他
- classList.contains()：判断元素的类名中是否**包含此类名**
- classList.toggle()：**切换类名**，原本无就添加，原本有就删除
### 7、设置表单的内容使用的是dom对象的什么属性？
- input.value
### 8、表单的布尔类型属性有哪些？
- disabled：true表示禁用
- checked：true表示选中
- selected：true表示option被选中
### 9、如何设置和获取自定义属性？
```html
<div data-name='棠哥' data-cc="哈哈哈">我是一个标签</div>
<script>
const div = document.querySelector('div')
console.log(div.dataset.name)
div.dataset.name = '棠哥真帅！！！！'
</script>
```
### 10、如何开启和关闭定时器？
```js
// 开启定时器
const timeId = setInterval(function(){
// 间隔一段时间要执行的代码
}, 1000)
// 关闭定时器
clearInterval(timeId)// 清除上面定义的定时器
```
## day02
### 1、注册事件的两种方式分别是什么？
```js
// on方式
事件源.on事件名 = function (){}
// addEventListener方式
事件源.addEventListener('事件名',function(){})
```
### 2、常见的事件名有哪些？
- 点击事件：click
- 鼠标移入事件：mouseenter
- 鼠标移出事件：mouseleave
- 获取焦点事件：focus
- 失去焦点事件：blur
- 键盘按下事件：keydown
- 键盘弹起事件：keyup
- 用户输入事件：input
### 3、事件对象上有哪些常见属性？
- `type`：获取当前的事件的事件名
- `clientX/clientY`：获取光标相对于浏览器可视区域左上角的水平和垂直坐标
- `offsetX/offsetY`：获取光标相对于当前DOM元素左上角的位置（在border内边界的坐标）
- `key`：用户按下的按键名
## day03
### 1、事件流有哪三个阶段？分别介绍以下
- 事件捕获阶段：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素**由外而内依次被触发**。这一过程被称为事件捕获。
- 事件目标阶段：当前触发的本体事件触发时
- 事件冒泡阶段：当一个元素的事件被触发时，**同类型事件**将会在该元素的所有祖先元素**由内而外中依次被触发**。这一过程被称为事件冒泡。
### 2、如何阻止事件冒泡？
- `e.stopPropagation()`
### 3、阻止浏览器的默认行为（如：a标签的跳转）有哪些方法？有什么区别？
- `e.preventDefault()` ：可以阻止浏览器的默认行为，并且之后的代码可以执行，并且阻止addEventListener注册事件的方式（推荐使用）
- `<a href="javascript:;">我是一个a标签</a>`
### 4、如何解绑事件？
```js
// on方式
btn.onclick = null
// addEventListener方式
removeEventListener('事件类型', 函数名)
```
### 5、页面加载事件有哪些？区别是什么？
- **load加载事件：** 加载外部资源（如：图片、外联样式、外联js等等）加载完毕时触发的事件
- **DOMContentLoaded加载事件：**当初识HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待：图片、外部样式表等资源完全加载
### 6、如何监听整个页面滚动？
```js
window.addEventListener('scroll', function () {
// 页面滚动时需要执行的代码
console.log('页面被滚动了')
})
```
### 7、如何设置页面滚动到之前坐标？
- **scrollTo(x,y)：** 可以让当前元素中的内容滚动到执行坐标
### 8、如何实时检测浏览器窗口宽度变化？
```js
window.addEventListener('resize',function () {
// 检测当前浏览器窗口的宽度
console.log(document.documentElement.clientWidth)
})
```
### 9、如何获取元素自身的宽高？
- **offsetWidth和offsetHeight：**获取元素的自身宽高、包含元素的：content、padding、border
### 10、如何获取元素距离自己定位父级元素的左上的距离？
- **offsetLeft和offsetTop：** 获取元素距离自己定位父级元素的左、上的距离
## day04
### 1、如何创建当前日期对象？如何获取日期对象中的每个部分？
```js
let now = new Date() // 当前时间
// 获取年份
let year = now.getFullYear()
// 获取月份——》月份从0开始，范围是0~11，一般会+1
let month = now.getMonth() + 1
// 获取日——》一个月的几号——》getDay表示获取星期几（从0开始，0表示周日，1表示周一）
let day = now.getDate()
// 获取时
let hours = now.getHours()
// 获取分
let minutes = now.getMinutes()
// 获取秒
let seconds = now.getSeconds()
```
### 2、查找所有父、子、兄元素的节点查找代码是什么？
- 查找父元素：parentNode
- 所有子元素：node.children
- 上一个兄弟元素：previousElementSibling
- 下一个兄弟元素：nextElementSibling
### 3、创建节点和添加节点的代码分别是什么？
- 创建节点： `document.createElement('标签名')`
- 添加节点： `parent.appendChild(newChild)`
- parent：要添加内容的父节点
- newChild：需要添加进入的子节点
### 4、插入节点的代码是什么？
- `parent.insertBefore(newChild,refChild)`
- parent：要插入元素的父元素
- newChild：添加的元素
- refChild：被插入前面的元素
### 5、克隆节点的代码是什么？
- `node.cloneNode(布尔类型)`
- false：浅克隆，只克隆当前节点，不包含其中内容节点
- true：深克隆，克隆当前节点以及其中所有内容节点
### 6、删除节点的代码是什么？
- `parent.removeChild(child)`
- parent：要删除元素的父元素
- child：需要删除的元素
### 8、如何创建当前日期对象？如何获取日期对象中的每个部分？
```js
let now = new Date() // 当前时间
// 获取年份
let year = now.getFullYear()
// 获取月份——》月份从0开始，范围是0~11，一般会+1
let month = now.getMonth() + 1
// 获取日——》一个月的几号——》getDay表示获取星期几（从0开始，0表示周日，1表示周一）
let day = now.getDate()
// 获取时
let hours = now.getHours()
// 获取分
let minutes = now.getMinutes()
// 获取秒
let seconds = now.getSeconds()
```
### 9、移动端触屏事件有哪些？
| 触摸touch事件名 | 说明 |
| :-------------: | :---------------------------: |
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从DOM元素上移开时触发 |
## day05
### 1、js中哪些任务是异步任务？
常见的异步任务有以下三种类型:
1. 注册事件，如 click、resize 等
2. 定时器，包括 setInterval、setTimeout 等
3. ajax（网络模块）
### 2、location对象上的常见属性和方法有哪些？
- `location.href` ：获取地址栏完整的URL地址，赋值可以用于**跳转**
- `location.search` ：获取地址栏中携带的参数，即：`?` 后面的部分
- `location.hash` ：获取地址中携带的哈希值，即：符号 `#` 后面的部分
- `location.reload()` ：重新加载，刷新页面，传入参数true时表示强制刷新
### 3、history对象上的常见方法有哪些？
```js
// 页面前进
history.forward()
// 页面后退
history.back()
// ------------------------------------------
history.go(1)// 前进一页，相当于：history.forward()
history.go(0)// 刷新当前页，相当于：location.reload()
history.go(-1)// 后退一页，相当于：history.back()
```
### 4、localStorage的储存、获取、删除数据的方法分别是什么？
- 储存数据：`localStorage.setItem(key,value)`
- 获取数据：`localStorage.getItem(key)`
- 删除数据：`localStorage.removeItem(key)`
### 5、复杂类型和JSON字符串互相转换的代码分别是什么？
- 把复杂数据类型转换成JSON字符串：`JSON.stringify(复杂数据类型)`
- 把JSON字符串转换回复杂数据类型：`JSON.parse(JSON字符串)`
## 前端面试题
### 1、localStorage、sessionStorage和cookie的区别
```js
答: 共同点: 都是可以用来存储数据
区别:
1. 请求不同:
cookie 数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
sessionStorage 和 localStorage不会自动把数据发给服务器，仅在本地保存。
2. 存储大小限制也不同:
cookie 数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
sessionStorage 和 localStorage虽然也有存储大小的限制，但比cookie大得多，sessionStorage约5M、localStorage约5M 。
3. 数据有效期不同:
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
```
### 2、什么是事件代理（事件委托）
```js
1、事件代理（事件委托），是JavaScript中绑定事件的常用技巧。顾名思义，“事件代理”，就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听。事件代理的原理是DOM元素的事件冒泡
事件委托的好处：
减少事件数量，提高性能
```
### 3、什么是事件流
```js
事件流是指从页面接收事件的顺序。也就是说，当一个事件发生时，这个事件的传播过程就是事件流。
事件流一般包含三个阶段：捕获 目标 冒泡
```
### 4、js的运行机制是什么
```
答：js是单线程执行的，页面加载时，会自上而下执行主线程上的同步任务，当主线程代码执行完毕时，才开始执行在任务队列中的异步任务。具体如下
1.所有同步任务都在主线程上执行，形成一个执行栈。
2.主线程之外，还存在一个"任务队列(eventloop队列或者消息队列)"。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3.一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。哪些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4.主线程不断重复上面的第三步。
```
### 5、异步函数有哪些
```js
JavaScript 中常见的异步函数有：定时器，事件和 ajax 等
```
### 6、伪数组有哪些
```js
1、参数 arguments，
2、DOM 对象列表（比如通过 document.getElementsByTags 得到的列表）、childNodes也是伪数组
3、jQuery 对象（比如 $("div")）
```
### 7、真数组和伪数组的区别
```js
伪数组：
1、拥有length属性
2、不具有数组的方法
3、伪数组是一个Object，真数组是Array
4、伪数组的长度不可变，真数组的长度是可变的
```
### 8、伪数组怎么转真数组
```js
1、let newArr = Array.protype.slice.call(伪数组)
2、let newArr = Array.from(伪数组),ES6的新语法
3、let newArr = [...伪数组]，使用扩展运算符,也是ES6的语法
```
### 9、DOM操作常用的API有哪些
```js
1、创建节点
createElement
cloneNode
2、页面修改
appendChild
insertBefore
removeChild
replaceChild
3、节点查询
document.querySelector
document.querySelectorAll
document.getElementById
document.getElementsByTagName
4、节点关系
父关系型：parentNode
子关系型：children
5、元素属性
设置：setAttribute
获取：getAttribute
```
### 10、如何检测浏览器的类型
```js
可以通过检测navigator.userAgent 在通过不通浏览器的不同来检测
```
### 11、JavaScript计时函数
```js
1、setInterval() 周期执行函数。间隔指定的毫秒数不停地执行指定的代码。
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
2、setTimeout() 延迟执行函数。延迟执行指定的函数，只能执行一次
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
```
### 12、如何阻止冒泡和默认行为
```js
答: 阻止冒泡和捕获 e.stopPropagation()
阻止默认行为 e.preventDefault() return false
注意：addEventListener注册的事件，在高浏览器版本中，return false将没有效果，必须要用事件对象
```
### 13、原生注册事件的方式有哪些？区别是什么
```js
答: 注册方式
1. on + 事件名称
2. addEventListener
区别:
1. 使用on注册事件,同一个元素只能注册一个同类型事件,否则会覆盖。
2. addEventListener可以注册同一事件多次,不会被覆盖。
```
1885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
