[JavaScript知识库]js语法复习

js基础

1-变量

• 请说出变量的作用是什么？

  • 变量的作用是 存储数据

• 请写出你说知道的所有的js关键字？

  • 关键字 是一个 拥有特殊功能的 英语单词

  • let : 声明变量

  • typeof : 检测数据类型

  • if else : 分支语句

  • switch case : 分支语句

  • while : 循环

  • for : 循环

  • break : 结束switch-case与循环语句

  • continue : 结束本次循环体

  • function : 函数

  • return : 返回值

  • in : 遍历对象

  • new : 4件事

  • class extends super : ES6类函数

  • instanceof : 检测原型链

• 你认为变量和字面量的区别是什么？

  • (1)变量 : 是内存中的一块空间（装东西的容器）

    • 空间： 存储的数据是可以修改的

  • (2)字面量 ： 是js中可以被编译器识别的数据

    • 可以识别数据： 所有数据类型的数据统称

      • "123" 123 true undefined null [] function(){} {}

  • (3)字面量只能出现在等号右边

    • 原因： 只有变量才有存储功能

• let a = 'a' , 你觉得 这两个a是一样的吗？ 如果不一样，你认为它们的区别是什么？

  • a : 变量名。 内存中一块空间的名字。

    • 变量名无论写在任何地方，作用都是取出里面存储的数据

  • 'a':字面量。 代表是一个固定的字符串数据 字符串"a"

2-运算符与表达式

• = 作用是什么？

  • 赋值运算符的作用是 右边的数据 存入 左边的变量

• == 作用是什么？

  • 比较运算符的作用是： 比较两个数据的值，判断某个条件是否成立

• ===作用是什么?

  • 全等运算符的作用是： 比较两个数据的类型与值

• 关系运算符干什么用的？

  • 判断条件 : 结果一定是布尔类型

• 请结合课程案例，说出1-2个用到关系运算符的场景

  • 非空判断 ： 判断字符串是不是空字符

• 逻辑运算符干什么用的？ 左边式子 逻辑运算符 右边式子

  • 逻辑运算符作用是 判断多个条件的关系

    • && ： 多个条件同时成立

    • || ： 多个条件成立任意一个

    • ! : 取反

• 请结合课程案例，说出1-2个用到逻辑运算符的场景

  • 平年和闰年 ： 能被400整除 或 能被4整除且不能被100整除

  • 登录 ： 账号和密码 同时成立

• 逻辑运算符短路运算（逻辑中断）规则是什么？ 左边式子 逻辑运算符 右边式子

  • 逻辑与： 一假则假。 找假：左边式子为假，则返回左边式子的值。 反之返回右边式子的值。

  • 逻辑或： 一真则真。 找真：左边式子为真，则返回左边式子的值。 反之返回右边式子的值。

• 逻辑运算符的短路运算应用场景

  • 函数默认参数

• 逻辑运算符在开发中功能与多分支语句有重叠的。请问当你遇到需求的时候，你会如何选择

  • 逻辑运算符： 多个条件的关系（代码少)

    • 多个条件需要执行的代码相同的

  • 多分支语句 ： 多个条件是否成立（代码多）

    • 多个条件执行的代码不同

• num++ 和 num+1 有什么区别？

  • 功能不同

    • num++ 相当于 num = num + 1会修改num自身的值 .

    • num + 1只是算术运算，不会修改num自身的值

• num++ 和 num += 1 有什么区别？

  • num++ 可以隐式转换 (字符串转数字)

  • num+=1 不可以隐式转换 (如果遇到字符串，则是连接操作)

3-分支语句

• 一般什么时候会用到if语句？

  • 单个条件判断

• 一般什么时候会用到if-else语句？

  • 两个互斥条件判断

• 一般什么时候会用到if-else if-else语句？

  • 多个条件判断

• 一般什么时候会用到switch-case语句？

  • 固定值匹配

    • 条件判断： 大于10 小于100 是否相等 是否等于0

    • 固定值匹配 ： 月份、星期、账号类型

• 假如有一个变量 let a = true，现在我的判断条件是检测a是不是true.以下有两种写法，请问这两种写法哪一种更好？为什么，请说出你的理由？

  • if(a == true){ }

  • if(a){ }

  • 分支语句注意点： 小括号里面的代码，如果不是布尔类型。编译器会自动隐式转换成布尔类型判断真假.

    • Boolean() : '' undefined null 0 NaN false -0

• 如果分支语句中的判断条件，不是一个布尔类型。而是一些其他的值，请问js编译器会如何处理？处理规则是什么？

  • 分支语句注意点： 小括号里面的代码，如果不是布尔类型。编译器会自动隐式转换成布尔类型判断真假.

    • Boolean() : '' undefined null 0 NaN false -0

4-循环语句

• 请说出for循环语句的执行流程。 for(语句1 ; 语句2 ; 语句3){ 循环体 }

  • 1.执行语句1（声明循环变量）

  • 2.判断语句2是否成立（循环条件）

    • 2.1 成立：执行循环体，执行语句3（循环变量自增）

    • 2.2 不成立：循环结束

  • 3.重复步骤2

• 请说出while循环语句的执行流程。 while(循环条件){ 循环体 }

  • 1.判断循环条件是否成立

    • 1.1 成立：执行循环体

    • 1.2 不成立：循环结束

  • 2.重复步骤1

• 你会在什么样的情况下选择使用循环语句来完成需求？

  • 循环语句作用是： 重复执行一段代码

• 当你需要使用循环语句的时候，你是如何抉择到底使用for循环还是while循环的？

  • for : 循环次数明确

  • while: 循环次数不明确

• 你在书写循环语句的时候，认为哪一个细节最容易出错（开放式回答）

  • 声明循环变量：容易忘记let

  • 循环条件容易写混淆

  • 循环体容易写错

• 你认为自己在使用循环语句解决问题的时候，最大的难点或瓶颈是什么？（开放式回答）

5-数据类型

• js为什么要有数据类型？

  • 因为不同的数据， 存储 与 处理不同 。系统要对其进行分类。这就是数据类型。

• 字符串类型的作用是什么？（结合理论+应用，说出自己的理解）

  • 字符串作用是：显示文本

• 数字类型作用是什么？（结合理论+应用，说出自己的理解）

  • 数字类型的是： 数学计算

• 布尔类型的作用是什么？（结合理论+应用，说出自己的理解）

  • 布尔类型作用 ： 判断条件成立/不成立

• 你会在什么时候使用数组？什么时候使用对象？你的判断依据是什么？（结合理论+应用，说出自己的理解）

  • 使用数组：存储的数据是否有序

  • 使用对象：存储的数据是否无序

  • 判断依据：需要存储多个数据

• 你会在什么样的情况下，想起来使用函数？

  • 代码冗余 （重复的代码写多次）

    • 循环： 一段代码在一个地方执行多次

    • 函数：一段代码在多个地方执行一次

• js中的对象在取值的时候有两种语法。 使用最多的是点语法：对象名.属性名 , 还有一种语法是 : 对象名['属性名'] , 这两种语法作用是一致的。但是在使用的时候还是有一些细微的区别。

  • 例如，遍历对象for(let key in obj){ },请说出 obj.key 和 obj[ key ]这两个语法有什么区别？

    • obj.key : key代表属性名，（1）取出key属性值

    • obj[ key ] : key代表变量名， (1)取出key变量值 (2)取变量值对应的属性值

  • 你还知道对象 点语法 和 中括号语法，一些其他区别吗？（开放式回答，比较深）

    • 点语法属性名需要符合js命名规则

    • 字符串语法不需要遵守js命名规则

webApi

1-DOM操作

查-查元素

• 你会在什么时候使用document.querySelector('选择器') ?

  • 需求决定： 只需要获取一个元素

• 你会在什么时候使用document.querySelectorAll('选择器') ?

  • 需求决定： 需要获取多个元素

• querySelector和querySelectorAll有什么区别与注意事项

  • 区别(能说多少是多少) ：

    • querySelector : 获取null|dom对象， 可以直接使用dom语法

    • querySelectorAll : 获取伪数组，不可以直接用dom语法 （原型链不一样）

  • 注意事项 ：

    • 伪数组一定要通过下标取出dom对象，才可以使用dom语法

• 你有没有注意到，querySelector的参数是一个选择器字符串,那你能分清楚id选择器和id名，类选择器与类名的区别吗？ 例如有一个盒子<div class="box"></div>

  • 类名是： box

  • 类选择器是： .box

• 其实，querySelector查元素是通过选择器来查询的（相当于一个通过身份证来找到一个人），dom中还有一种方式是通过节点关系来查询元素的。（相当于我想找你爸爸，我先找到你就知道你爸爸是谁了），那么你能说出几个常用的节点操作语法吗？

  • 获取一个元素所有的子元素： 元素.children

  • 获取一个元素的父元素： 元素.parentNode

  • 获取一个元素的上一个元素(哥哥): 元素.previousElementSibling

  • 获取一个元素的下一个元素(弟弟):元素.nextElementSibling

查：查属性

• 你能说出元素属性和元素样式属性的区别？（从概念和语法这两个角度，也可以举例加深印象）

  • 概念：

    • 元素属性： html标签自身的属性。 例如 src、href、title、alt

    • 样式属性： css属性

  • 语法：

    • 元素属性： 元素.属性名

    • 样式属性： 元素.style.属性名

• 请说出innerText和innerHTML的区别？（经常会被问到这个的哟）

  • innerText : 获取文本

  • innerHTML : 获取文本+标签

• 在dom语法中，表单元素有一些属性与普通元素不一样，你能说出你说知道的表单元素独有属性有哪些吗？顺便说一下他们干啥的？

  • value : 获取表单的值

  • disabled : 是否禁用

  • checked、selected：是否选中

改：改属性

• 在dom语法中，当我们想要修改元素样式的时候。其实有很多种方式，有的语法是用来修改一个样式的，有的语法是用来修改多个样式的。那么你知道什么场景用什么语法吗？

  • 当我想要修改一个样式的时候使用：

    • 元素.style.样式名 = 样式值

    • 注意： 权重是行内权重

  • 当我想要修改多个样式的时候使用：

    • 元素.classList.add()/remove()/toggle()/contains()

      • 注意：权重是类名权重

• dom元素的属性分为标准属性与自定义属性。 它们区分的原则是：标准属性表示HTML与CSS原生的属性。 自定义属性：我们自己像对象那样添加属性，这部分属性主要起到存储数据作用。 例如一个删除订单按钮，我们只需要在这个按钮中存储对应的订单编号。这样点击删除按钮的时候，就知道用户到底想到删除哪一个订单了。（我说了这么多，其实重点就是：自定义属性作用是用来存储数据的），那么你能说出js中自定义属性的语法有哪几个方法吗？

  • 元素.getAttribute('属性名')

  • 元素.setAttribute('属性名',属性值)

  • 元素.removeAttribute('属性名')

增：增加元素

• 你能说出dom语法中，哪个语法是用来给页面创建元素的吗？顺便说一下它的使用注意事项。

  • document.createElement('标签名')

    • 在内存创建空标签

  • 设置内容

  • 新增到dom树

• 你能说出dom语法中，哪些语法是用来给页面添加元素的吗？ （创建和添加的意思不同哟。 创建指的是在内存中创建，添加指的是把这个元素添加到dom树，只有完成添加操作，我们才可以在页面看到元素渲染哟）

  • 元素.appendChild()

  • 元素.insertBefore()

删：删除元素

• 请说出dom中删除元素的语法及注意事项

  • 父元素.removeChild(子元素)

事件

• 事件是js处理用户交互的一种机制，一个事件必须由三个要素组成，你能说出组成一个事件的三要素吗？

  • 事件源： dom元素

  • 事件类型 ： 交互时机

  • 事件处理函数

• 事件处理函数在注册的时候是不会执行的，这个点非常重要的哟。既然事件处理函数在注册的时候并不会执行，那你能说出来，它会在什么样的情况下执行吗？

  • （1）用户触发事件的时候

  • （2）主动调用事件处理函数

• 你能说出一些常用的事件及他们执行的时机吗？（开放式回答，越多越好）

  • 鼠标事件

    • 鼠标单击 onclick

    • 鼠标双击 obdblclick

    • 鼠标移入/移出

      • onmouseover/onmouseout : 支持冒泡

      • onmouseenter/onmouseleave： 不支持冒泡

    • 鼠标移动 onmousemove

    • 鼠标按下 onmousedown

    • 鼠标松开 onmouseup

  • 键盘事件

    • oninput : 键盘输入

    • onkeydwon : 键盘按下

    • onfocus: 成为焦点

    • obblur: 失去焦点

  • 页面事件

    • onscroll ： 页面滚动

    • onresize：页面大小变化

• 你能说出事件委托的原理吗？（高频面试题）

  • 什么是事件委托呢？

    • 事件委托是给父元素注册事件，委托子元素处理

  • 事件委托原理是什么呢？

    • 事件冒泡

  • 事件委托可以解决什么问题呢？

    • (1)动态新增元素

    • (2)所有的子元素需要注册同名事件，给父元素注册

  • 在开发中，什么时候我们会用到事件委托呢？

    • 动态新增

• 你能说出事件流三个阶段吗？

  • 事件捕获

  • 事件目标

  • 事件冒泡

• 你能说出事件对象的常用属性或方法吗？（开放式回答，越多越好）

  • e.preventDefault() : 阻止a和form默认跳转

  • e.target : 事件委托里面的触发源

  • e.stopPrapagation() : 阻止事件流（冒泡+捕获）

  • e.key / e.keyCode : 获取按键

bom

• 请说说localStorage与sessionStorage区别（面试必问点）

  • localStorage : 硬盘存储

  • sessionStorage ： 内存存储

• 请说说延时函数setTimeout与间歇函数setInterval的区别（他们统称为定时器）

  • setTimeout ： 只执行一次，自动清除

  • setInterval ： 永久重复，需要手动清除

js高级（面试点汇总）

• 请说说你对面向对象的理解？

  • 面向对象 是 一种 注重结果的 思维方式

  • 面向对象 ： 封装、继承

• 原型对象是来解决什么问题的？

  • 内存浪费 + 变量污染

• 请简述原型对象、构造函数、实例对象三者之间的关系（三个属性）

  • 构造函数： prototype指向原型对象

  • 原型对象 ： constructor指向构造函数

  • 实例对象： __proto__指向原型对象

• js是通过什么来实现面向对象继承的？

  • 原型链

• 请说说什么是静态成员，什么是实例成员。

  • 静态成员： 函数自己的成员

  • 实例成员： 实例对象的成员

• 请说说你对js中this指向的理解。

  • 谁调用我，我就指向谁

  • 函数名() : 指向window

  • 对象名.方法名() : 对象

  • new 函数名() : new创建的实例

• 请说说call apply bind的区别及对应应用场景（面试必问点）

  • 传参方式不同 ： call是单个传参，apply是数组、伪数组传参

  • 执行机制不同 : call和aplly会立即执行， bind不会立即执行而是得到一个修改this的新函数

• 请说说闭包是什么

  • 闭包 是 一个 可以访问其他函数内部变量 的 函数

    • 函数 + 上下文引用

• 请说说闭包是干什么用的（js高级先记住概念结论，高薪资必问点，后期就业辅导课程老师还会加强复习）

  • 解决变量污染

• 请说说什么是递归函数

  • 递归函数 是一个 在函数内部调用自己的 函数

• 请说说递归函数的应用场景（js高级先记住概念结论，高薪资必问点，后期就业辅导课程老师还会加强复习）

  • 浅拷贝和深拷贝

  • 遍历dom树

• 请说说数组几个常用的迭代方法（遍历方法）

  • 筛选数组： arr.filter()

  • 检测是否所有元素满足条件（开关法） ： arr.every()

  • 遍历数组 : arr.forEach()

  • 数组叠加(求累加和) ： arr.reduce()