（二）JS基础知识总结

目录

第一天

第二天

第三天

第四天

第五天

第六天

第七天

第八天

第九天

1、数组的迭代方法

2、正则

第十天

DOM操作节点

第十一天

第十二天

1、事件基础

2、事件绑定与取消

3、DOM事件流

4、阻止冒泡

---

---

第一天

1、什么是JavaScript，有什么特点，作用是什么

JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。

特点：解释性、基于对象、事件驱动、安全性、跨平台

作用：验证发往服务器端的数据、增加 Web 互动、加强用户体验度

2、JavaScript数据类型有哪些？

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

引用数据类型 ：Object 、Array、function

3、NaN是什么意思，会在什么情况下出现？

not a number 不是一个数字

当我们需要得到一个数字，但是不能给一个数字的时候就会出现

4、null 和 undefined 的区别？

• undefined：未初始化，访问一个空变量返回的值，声明变量但是未赋值

• null：空，访问一个空对象返回的值，声明变量赋值但是值为空

5、变量的作用及命名规则？

作用：存储数据的一种容器

命名规则：

• 1、只能由数字、英文字母、$、下划线组成

• 2、不能以数字开头

• 3、不能包含关键字、保留字

6、typeof的返回值有哪些？

数字           'number'
字符串         'string'
布尔              'boolean'
空              'object'
未定义         'undefined'
函数              'function'

7、请写出至少三个强制转换，两个隐式转换。

Number()
parseInt()
parseFloat()
String()
xx.toString()
Boolean()

+ - * / % ++ --

8、ECMAScript和JavaScript的关系

ECMAScript与JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

9、JavaScript的组成

1、ECMAScript：该语言的核心、基本语法、语句、变量、关键字等等

2、DOM：document object model (文档对象模型)

3、BOM：browser object model（浏览器对象模型）

第二天

1、“==” 和 “===”的区别？

==：值是否相等，会进行隐式类型转换

===：全等，类型和值都要相等，不会进行隐式类型转换

2、innerHTML与innerText的特点及区别？

innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。

innerText可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本

3、window.onload的作用？

当页面加载完成之后（页面包含的html\css\js\图片等等），执行这个函数

第三天

1、document.write()与 innerHTML 的区别？

• document.write 是直接将内容写入页面的body中，会导致页面全部重绘。innerHTML 将内容写入某个DOM节点，不会导致页面全部重绘。

• 推荐使用innerHTML 。

2、for 循环与 while 循环的区别，分别适用什么循环？

• 两者在功能上是可以互换的。for适合能明确循环次数的循环，while适合只有条件判断的循环。

3、continue 和 break 的作用和区别？

• break 与 continue 都是在循环中，中止循环的操作。

• break 是结束循环，后面的循环都不再执行。

• continue 是结束本次循环，即本次循环中 continue 以后代码都不再执行，直接执行下一次循环。

第四天

1、声明函数的方式有哪些？分别举例，区别是什么？

function 函数(){}

var 函数 = function (){}

区别：函数声明在函数定义的前后调用均可，而函数表达式只能在函数定义的后面调用。

2、使用函数计算 50 、100、150、200、1000 以内所有奇数的和。

  function add(n) {
            var num = 0;
            for (var i = 1; i <= n; i+=2) {
                num += i;
            }
            console.log(num);
        }
        add(50)
        add(100)
        add(150)
        add(200)
        add(1000)

3、函数的参数

①实参和形参个数不等

• 如果实参比形参少，则没有匹配上的形参值为undefined

• 如果实参比形参多，则多的实参也白多

②arguments

它是实参的集合，存在于函数的里面，是一个对象，一个类数组、伪数组，有长度，有下标，可以通过下标获取某一个

③函数参数的类型

函数的参数可以是任意数据类型，包括函数

4、作用域及预解析

作用域：变量或函数的有效使用范围，有全局作用域与函数作用域两种

全局作用域：<script>标签下

局部作用域：函数里面的

①全局变量和局部变量

全局变量：声明在script标签下的变量或函数，全局变量在任何地方都可以访问，任何地方都可以修改

局部变量：在函数内部声明的变量或函数，就是局部变量。局部变量或函数只能在函数内部访问

②作用域链

JavaScript 中的一种值的查找机制，当需要使用到一个变量或函数，先查找自身作用域，自身作用域没有再从父级作用中找，依次查找，一直到全局，全局还是没有，显示 is not defined。

③预解析

找东西，找var、函数、参数，找到var之后，给它赋一个值为undefined，提到最上面，找到函数之后，将函数整体提到最上面，参数同var

如果var 和 var同名，后面的覆盖前面的，如果函数同名，后面的覆盖前面的，如果var和函数同名，则函数覆盖var

5、函数返回值

return特点：

1、函数通过关键字 return 返回函数中的内容

2、return 一次只能返回一个值(如果要返回多，可以写成对象或者数组的形式)

3、函数中只要遇到 return，函数就会结束

4、函数没有return，默认结果为 undefined

第五天

1、函数封装：是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

2、获取元素样式

方式一：元素.style.样式名    不足：只能获取行间的样式
    console.log(box.style.width);

方式二：Computed计算机    获取计算以后的样式，返回的是一个对象

语法：window.getComputedStyle(元素)

方式三:current当前的,返回元素当前的样式，返回的是一个对象

语法：元素.currentStyle

3、封装

• 1、声明函数，把主要代码放入函数中

• 2、找函数中可变量做参数，代入函数中

• 3、调用，调试

// 函数封装
// 参数：元素 样式名
function getStyle(ele, attr) {
    if (window.getComputedStyle) {
        // IE9及以上
        return window.getComputedStyle(ele)[attr];
    } else {
        // IE8及以下
        return ele.currentStyle[attr];
    }
}

console.log(getStyle(box, 'width'));
console.log(getStyle(box, 'height'));
console.log(getStyle(box, 'backgroundColor'));

4、谈谈你对this的理解

• 谁调用了函数，this就指向谁

• this不是在定义的时候确定的，而是在调用的时候确定的

第六天

1、定时器的分类和使用场景？

（setTimeout）超时调用：

• 超时定时器，延迟执行，延迟某个特定的时间开始执行，只执行一次。

• 一般用于咨询弹框、网站广告弹窗等相关操作。

（setInterval）间歇调用：

• 间歇调用：隔某段时间执行一次，会一直执行

• 一般用于轮播图、倒计时、抽奖等相关操作。

第七天

1、js 有哪些内置对象？

Number String Boolean Array数组 Object Function Error错误对象 Date时间对象 RegExp正则

2、判断一个字符串中出现次数最多的字符，并且统计次数。

3、把下面的字符串去重，并去除掉特殊字符按照数字在前字母在后的顺序排序字符串

var str = '1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs';
返回:'12345fdsarg'

第八天

1、初识数组

数组的作用是：使用单独的变量名来存储一系列的值。数组是可以存储任意数据类型的数据

2、数组API方法

1、栈方法：即数组的前后添加，前后删除

 共同点：都修改原数组
 添加的方法：一次可以添加多个，同时返回数组的长度
删除的方法：一次只能删除一个，返回被删除的项

①数组.push(参数):向数组的尾部添加，一次可以添加多个，返回数组的长度

②数组.unshift（参数）：向数组的头部添加，一次可以添加多个，返回数组的长度

③数组.pop(参数)：删除数组最后一项，返回被删除的项

④数组.shift(参数)：删除数组第一项，返回被删除的项

2、splice

• 数组.splice(起始位置, 要删除的个数, 要添加的项...);

• 作用：可以实现数组任意位置的添加、删除、替换

• 返回值：返回由删除的项组成的数组（修改原数组）

3、排序算法

选择排序
从第一项起，每一项都和后面所有项依次比较，如果被比较项比当前项小，则两项交换位置。

冒泡排序
 从第一项起，比较相邻的两个元素，如果前一个比后一个大，则交换位置。
 第一轮的时候最后一个元素应该是最大的一个。每一轮最后一个元素已经是最大的了，所以最后一个元素下一轮不用比较。

4、concat

• 数组.concat(参数, ...)

• 将参数拼接到数组中，参数可以是数组，也可以是项

• 返回拼接后的结果，不影响原数组

5、reverse

• 数组.reverse();

• 作用：反转数组，返回反转以后的数组，并修改原数组

6、indexOf和lastIndexOf

• 数组.indexOf(要查找的项[, 查找的起始位置]);

• 数组.lastIndexOf(要查找的项[, 查找的起始位置]);

• 作用：返回要查找的项在这个数组中的下标，如果没有，返回-1

• IE8及以下不支持

7、slice

• 数组.slice(起始下标, 结束下标);

• 数组截取，不影响原数组，返回截取的新数组

8、数组类型判断

• Array.isArray(参数)

• 作用：判断参数是否是数组，返回布尔值

• 不足：IE8及以下不支持

9、找出数组中的最大值 ，arr = [1,2,3,4,5];

10、字符串倒序 '123456' ---> '654321'

第九天

1、数组的迭代方法

①map

数组.map(function (item, index, array) { });

作用：循环数组，返回每次函数调用的结果组成的一个新数组

②forEach

数组.forEach(function (item, index, array) { });

作用：循环数组（没有返回值），代替for循环

③filter

数组.filter(function (item, index, array) { });

作用：循环数组，返回每次函数调用的结果为true的项组成的一个新数组

④every

数组.every(function (item, index, array) { });

作用：循环数组，如果每次函数调用结果都为true，则返回true

⑤some

数组.some(function (item, index, array) { });

作用：循环数组，函数调用只要有一个为true，则结果为true

⑥find和findlndex

数组.find(function (item, index, array){});

循环数组，调用函数，如果这个函数返回true，则把对应的item返回，否则返回undefined

返回的是满足条件的这一项

---

数组.findIndex(function (item, index, array){});

调用函数，如果这个函数返回true，则把对应的item的下标返回，否则返回-1
 返回的是满足条件的下标

2、正则

①使用正则表达式验证邮箱。

var re = /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/;

②请用 js 去除字符串空格 var str = “ fdf er re545 6565 2fdfd ”

var str = ' fdf   er re545 6565 2fdfd ';
var re = /\s+/g;
var s = str.replace(re, '');
console.log(s);

③判断字符串是否是这样组成的。第一个字符必须是字母，后面可以是字母、数字、下划线，总长度 5-20。

var re = /^[a-zA-Z]\w{4,19}$/;

第十天

DOM操作节点

①创建节点

• 创建标签：document.createElement(标签名);
• 创建文本：document.createTextNode(文本);

②追加节点

• 父元素.appendChild(子元素);
• 子元素添加到父元素中，放到最后

③插入节点

父元素.insertBefore(要插入的节点，参考的节点)

要插入的节点放在参考元素的前面

④删除节点

父元素.removeChild(被删除的元素)

返回被删除的元素

⑤替换节点

• 父元素.replaceChild(新的节点，被替换的节点);

⑥克隆节点

• 被克隆的元素.cloneNode(布尔);

  返回克隆出来的新节点，如果参数为true，则克隆子孙节点，如果为false，则只克隆当前这个标签

第十一天

1、什么是 window 对象? 什么是 document 对象?

window是js中最大的对象，表示窗口，包含document

document文档对象，表示HTML

2、offsetWidth、clientWidth、scrollTop 的区别？

offsetWidth:占位宽  width+padding+border

clientWidth：width+pading  内容可视区域的宽度

scrollTop：对象的最顶部到对象在当前窗口显示的范围内的顶边的距离

3、事件常用对象兼容及常用属性

var ev = ev || event;

ev.type
ev.target || ev.srcElement
ev.clientX ev.clientY
ev.pageX ev.pageY
ev.altKey ev.ctrlKey ev.shiftKey

第十二天

1、事件基础

①事件函数：当事件被触发时调用的函数就是事件函数

②事件对象：当一个事件发生的时候，和这个事件有关的一些详细信息保留在一个对象中，这个对象就是事件对象

2、事件绑定与取消

①事件绑定

• 格式：元素.addEventListener(不要on的事件名, 函数, 是否捕获);

• 格式：元素.attachEvent(要on的事件名, 函数);

②取消事件绑定

标准浏览器

• 格式：元素.addEventListener(不要on的事件名, 函数, 是否捕获);

• 解绑：元素.removeEventListener(不要on的事件名, 函数, 是否捕获);

IE8及以下

• 格式：元素.attachEvent(要on的事件名, 函数);

• 解绑：元素.detachEvent(要on的事件名, 函数);

3、DOM事件流

①事件流

• 事件流：当事件发生的时候，事件会按一定的顺序在根节点和各元素节点之间传播，所经过的节点，都会触发对应的事件。

• 事件流分为三个阶段：

  • 1、捕获阶段：从最外层不具体的元素到具体的元素。document-html-body-box1-box2-box3

  • 2、处于目标阶段：事件到达box3

  • 3、冒泡阶段：从具体的元素到不具体的元素。box3-box2-box1-body-html-document

4、阻止冒泡

• 标准浏览器：event.stopPropagation();

• IE 浏览器：event.cancelBubble = true;