JS基础阶段问题

JS基础阶段

1.JS四种输出方式:

• 使用 window.alert() 写入警告框

• 使用 document.write() 写入 HTML 输出

• 使用 innerHTML 写入 HTML 元素

• 使用 console.log() 写入浏览器控制台

2.关键字, 标识符,保留字有什么区别？

关键字：有特殊意义的;保留字；未来可能会被征用的名字；标识符指的是变量、函数、属性的名字，或者函数的参数。

3.基本数据类型和引用数据类型有哪些？

基本数据类型：String，、Number、Boolean、Undefined、Null、Symbol

引用数据类型 ：Object 数组 函数

4.JavaScript 构成

• 核心（ECMAScript）：语言核心部分。

• 文档对象模型（Document Object Model，DOM）：网页文档操作标准。

• 浏览器对象模型（BOM）：客户端和浏览器窗口操作基础。

5.NAN和ISNAN的区别

isNaN方法检测一个值是不是非纯数字 , 如果非纯数字就返回true 如果是纯数字就返回false;

NaN(不是一个数字)，是一个特殊的数值，特点：无论和谁比较都是fasle 无论和谁计算都是NaN

6.判断数据类型有哪几种方式？

typeof(判断基本数据类型，不能识别NUll); instanceof识别引用数据类型;还一个construact null、undefined没有construstor方法，因此constructor不能判断undefined和null。（通过构造器的名字判断构造器） toString是此方法可以相对较全的判断js的数据类型。（用的次数比较少，执行的时间过长，性能会更差。

7.JavaScript数据类型转换有哪几种？

Number()方法 将其他类型转换成number类型 Number方法会返回一个转换后的值;

parseInt是一个全局方法,它可以把值转换为整数

parseFloat()也是一个全局方法，它可以把值转换成浮点数，即它能够识别第一个出现的小数点，而第二个小数点视为非法。解析过程和parseInt相同。

8.this的6个指向是什么？

(1) 在script标签中 this代表的是window对象

(2) 在普通函数中 this代表的是window对象

(3)在构造函数中this代表的是 创建出来的实例化对象

(4)在方法内部的this 代表的是方法的调用者

(5) 在事件回调函数中 this代表的是事件源

(6) 在call和apply方法中 this代表的是第一个参数

9.call和apply的区别？

call传递是一个又一个的值，改变了this指向； apply传递是一个数组。

10.创建对象的方法有哪些？

new,构造函数，工厂类，构造方法，字面量

11.构造器的定义和特点

(1)严格意义上来说 构造器的名字 首字母必须大写

(2)构造器是不需要写返回值的

（3）一个函数是不是构造器 并不是取决于函数名字的首字母是否大写 而是取决于是否在前面加new。

特点：

• 如果构造函数中 写了return返回的是基本数据类型 那么还是返回的是对象

• 如果构造函数中 写了return返回的是引用数据类型 那么返回的是引用数据类型

12.属性的增删改查

增（点语法，中括号语法），删：delete 变量名["属性值"];改：变量名.属性值；详细见其他后面发布的文章；和改差不多。

13数组内置函数增加两种方式？

push()：将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

unshift: 向数组头部添加一个或多个元素，并返回数组的新长度。

14.全局作用域（Global Scope）和局部作用域（Local Scope）

• 在全局作用域定义的变量或函数我们称之为是全局变量或全局函数，在任何地方都可以被访问。

• 在函数内部就是局部（函数）作用域

每调用一次函数就会创建一个新的函数作用域，它们之间是相互独立的。

函数内部声明的变量我们称之为局部变量，它只能在所定义的函数内部可访问，在全局中是无法访问的。

15.作用域链概念 作用域和作用域链的区别？

作用域链：即各个函数作用域链互相嵌套形成的一个链式结构。

• 作用域:描述的是变量作用的范围。

• 作用域链:决定了变量的查找规则（就近原则，由内往外层找 ）

• 作用域链的就近原则：访问变量，会优先在自身的作用域查找，若没有找到，会继续往上一级作用域中去找，直到找到全局作用域，若找到就使用，找不到就报错（引用错误，这个变量没有定义）

16.数组常见内置函数

• 有影响的：push、pop、unshift、shift、reverse，splice, sort(排序)

• 没有影响的:concat、includes、join、indexOf,slice

• ES6新数组:

17.两个时间器函数

setTimeout 延时器 （执行一次）

setInterval 定时器 （执行多次）

dom阶段

1.获取dom的方法

• document.getElementById <!--通过id属性获取dom对象-->

• document.getElementsByTagName <!--通过标签名字获取dom对象-->

• document.getElementsByClassName <!--通过class属性获取dom对象-->

• document.getElementsByName <!--通过name属性获取dom对象-->

• document.querySelector <!--通过选择器获取dom对象-->

• document.querySelectorAll <!--通过选择器获取dom对象-->

2.修改dom的四个方法

通过原生属性-普通属性

特殊属性1-，当属性名字和属性值一致的时候 我们一般使用的是true和false

可以使用className来修改class的属性值

自定义的属性可以通过setAttribute来设置

3.DOM修改标签中的内容的区别？

从获取来说: innerHTML获取的是标签中的html文本; innerText获取的是标签中的纯文本 。

从设置来说: innerHTML中的文本标签会生效; innerText中的文本标签不会生效

3.dom事件的三要素

• 事件源

• onclick：事件类型

• function(){}:事件的回调函数 就是这个事件干了什么

4.鼠标事件方法有哪些

• onclick <!--点击-->

• onmousemove <!--鼠标移入-->

• onmouseover/onmouseout <!--鼠标移入移出-->

• onmounseenter/onmouseleave <!--鼠标移入移出-->

• onmousedown/onmouseup <!--鼠标点击和抬起-->

5.键盘事件4个

• onkeyup <!--按键抬起-->

• onkeydown <!--按键落下-->

• onfocus <!--获取焦点-->

• onblur <!--失去焦点-->

6.innerText和textContent区别？

• innerText和textContent都是用来操作元素的文本（不会包含标签）

• textContent可以获取到隐藏的元素的内容

• innnerText获取不到

• textContent只有高级浏览器才能用

• innnerText所有浏览器都能用

7.元素隐藏方式哪些是占位和不占位？

• display: none; 不占位

• 占位 : visibility: hidden;

opacity: 0;

transform: translateX(10000px);

transform: scale(0);

/* transform: rotateY(90deg);占位 */

/* transform: skew(90deg); */

/* width: 0;占位 */

/* height: 0;占位 */

8.节点分类？

元素节点（标签）；文本节点（标签的内容）；属性节点（标签的属性）；注释节点（注释）。

9.父节点，子节点，兄弟节点分别是？

父节点:

• parentNode 父节点

• parentElement 父元素节点

子节点 :

• childNodes children 获取子元素节点

• firstChild 获取第一个子节点

• firstElementChild 获取第一个子元素节点

• lastChild 获取最后一个子节点

• lastElementChild 获取最后一个子元素节点

兄弟节点;

• previousSibling 上一个兄弟节点

• previousElementSibling 上一个兄弟元素节点

• nextSibling 下一个兄弟节点

• nextElementSibling 下一个兄弟元素节点

10.节点的增删改

• 节点的添加，从末尾加 appendChild；从其他位置添加insertBefore；

• 节点的修改：repqublaceChild

• 节点的删除：removeChild ；

• 删除整个ul

document.body.removeChild(ulNode);

ulNode.parentNode.removeChild(ulNode);

10.DOM和DOM2比较区别？

区别：dom0高级浏览器中同一个对象 绑定同一个事件 那么会覆盖

dom2高级浏览器 同一个对象绑定同一个事件的执行顺序是从上到下依次执行的

DOM2低级浏览器中 同一个对象绑定同一个事件的执行顺序：是从下到上依次执行

11.取消冒泡的三种方式有哪些？

• // 方法1 event.cancelBubble = true;

• // 方法2 event.stopPropagation(); 注：Propagation是传播的意思

• // 方法3 event.stopImmediatePropagation();

// event高级浏览器可以直接使用

// 低级浏览器中的事件对象是window.event

12.事件流概念解释和分类？

• 发生了事件之后的各个盒子的顺序。

• 捕获事件流（网景） 最终很少用几乎不用

• 冒泡事件流 ：最终我们所用的事件传播都是冒泡（dom0和dom2事件流都是冒泡）

• 标准DOM事件流 这个是我们现用的标准事件流，里面包含三个阶段： 有捕获 再去获取目标元素 最后冒泡，这个三个阶段当中的捕获和冒泡可以由程序员自己选择。但是通常情况我们都是使用默认 （冒泡）

13.事件委派概念,作用,和用法？

• 什么时候用?

当一个元素内部子元素（儿子）很多，并且每个子元素（儿子）都要添加相同的事件的时候，我们可以使用事件委派来提高效率

出现新添加的东西，并且新添加的东西要和老的拥有同样的行为；此时我们就想事件委派；不用事件委派，老的身上会有想要的行为，而新添加的没有

• 用法？事件委派的做法： 给父元素添加事件监听，不给元素本身添加，事件发生后通过event的target属性去找真正发生事件的目标元素进行处理

• 好处？事件委派的好处：可以大大降低内存的占用，并且可以提高效率。

• 总结

事件委派其实是借用事件冒泡去做的，因为事件冒泡导致内部所有的元素发生事件都会冒泡到祖先身上，我们不在子元素身上去添加事件监听和处理，而是在共同的祖先身上去添加，让祖先去处理子元素发生的事件；祖先去处理其实就是通过事件对象当中的target 去获取到真正发生事件的子元素；对子元素进行处理

14.两对移入移出的区别?

• onmouseover/onmouseout 如果涉及到事件切换或者冒泡必须使用双o

如果是一个父子元素模型，对父元素添加移入和移出，当鼠标移入父元素里面的子元素的时候，事件会移出然后再移入。也就是说事件元素会有切换；事件委派的时候，必须使用这一对，大部分的时候我们使用的事件流都是冒泡，冒泡一定会涉及到事件的切换，所以我们常用双o事件；

• onmouseenter/onmouseleave

如果是一个父子元素模型，对父元素添加移入和移出，当鼠标移入父元素里面的子元素的时候， 事件并没有移出然后再移入。也就是说事件元素没有切换；

总结:企业级开发中大部分使用的是onmouseenter/onmouseleave 因为不会发生事件切换 不会影响动态效果, 使用双o在部分浏览器下会发生卡顿现象。如果使用冒泡必须使用双o.

15.鼠标的三种位置？

offsetX offsetY 拿的是鼠标相对自身元素的水平距离和垂直距离 相对的是自身元素左上角（以自身元素左上角为原点）

clientX& clientY 拿的是鼠标相对视口的 水平距离和垂直距离 相对的是视口的左上角（以视口左上角为原点）

pageX pageY 拿的是鼠标相对页面（第一屏）的水平距离和垂直距离 相对的是页面的左上角（以页面左上角为原点）