前端知识点总结(六) JavaScript篇(二)

发表于 | 分类于

一、写在前面的叨叨叨

    前两周整理一些比较核心的Js的基础，这两周又收集了一些问题和知识点，拿到这篇文章来整理回顾下，大部分其实都是一些初级面试经常问的， 可以作为一个题库，等需要面试的时候刷刷也是极好的。这段时间晚上都在追庆余年，之前拿出来学习的时间也少了又少，不过剧终于追完了，也是该更新下博客拉！

二、Js基础梳理

1、创建对象的多种方式
  • 通过”字面量“方式创建。将成员信息写到{}中，并赋值给一个变量，此时这个变量就是一个对象。
  • 通过”构造函数“方式创建。 var obj = new 函数名();
  • 通过object方式创建。通过object构造器new一个对象，再往里丰富成员信息。
2、变量提升(hoisting)
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。变量可以在使用后声明，也就是变量可以先使用再声明。
3、举例说明一个匿名函数的典型用例
自执行函数，用闭包模拟私有变量、特权函数等。
4、DOM事件的绑定的几种方式
  • 在DOM元素中直接绑定。
  • 在JavaScript代码中绑定;
  • 绑定事件监听函数。
5、DOM事件中target和currentTarget的区别
  • target:触发事件的某个具体对象，只会出现在事件流的目标阶段；
  • currentTarget:绑定事件的对象，恒等于this，可能出现在事件流的任意一个阶段中。
6、手写Ajax，XMLHttpRequest

XMLHttpRequest对象的本质：可以发送Http请求，处理Http响应，与服务器之间进行异步交换数据的对象，其核心是Http.
具体实现步骤：1、创建XMLHttpRequest对象。2、指定响应函数。3、打开连接（指定请求）4、发送请求。5、创建响应函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 声明一个变量，用来实例化XMLHttpRequest对象
var xmlhttp=null;
if (window.XMLHttpRequest){
    // 新浏览器直接创建XMLHttpRequest对象
    xmlhttp = new XMLHttpRequest( );
}else if(window.ActiveXObject){
    // IE5或IE6没有XMLHttpRequest对象，而是用的ActiveXObject对象
    Xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

if (xmlhttp !== null) {
    // 指定响应函数为state_Change
    xmlhttp.onreadystatechange=state_Change;
    // 指定请求，这里要访问note.xml文件，true代表的使用的是异步请求
    xmlhttp.open("GET","note.xml",true);
   	xmlhttp.send(null);//发送请求
} else{ alert("你得浏览器不支持XMLHTTP."); }

// 创建具体的响应函数state_Change
function state_Change(){
    if (xmlhttp.readyState === 4){
      	if (xmlhttp.status === 200){
      		// 这里应该是函数具体的逻辑
       	}else{ alert("Problem retrieving XML data") ;}
    }
}

7、JS原生对象、内置对象、宿主对象。

     原生（Naitve）对象： 独立于宿主环境的 ECMAScript实现提供的对象，包含：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError，简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。
     内置（Build-in）对象： 由 ECMAScript实现提供的、独立于宿主环境的所有对象，在 ECMAScript程序开始执行时出现，而ECMA-262 只定义了两个内置对象，即 Global 和 Math，内置对象是原生对象的一种。
     宿主（host）对象： 所有非本地对象都是宿主对象，所有的BOM和DOM都是宿主对象，ECMAScript官方未定义的对象都属于宿主对象。

8、document load 和 document DOMContentLoaded 两个事件的区别
load是页面所有资源全部加载完成后（DOM文档树，css文件，js文件，图片资源等）;
DOMContentLoaded：当页面文档加载并解析完毕之后会马上出发 DOMContentLoaded 事件，而不会等待样式文件、图片文件和子框架页面的加载。
9、什么是“use strict”,好处和坏处

use strict: 意味着代码按照严格模式解析，这种模式使得Javascript在更严格的条件下运行。
好处: 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为，消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；
坏处: 同样代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。

10、JS如何实现重载和多态
  • 根据arguments个数实现重载, arguments检测传参个数，执行不同的方式。
  • JavaScript中大多是通过子类重写父类方法的方式实现多态。
11、浅拷贝(Shallow Copy)和深拷贝(Deep Copy)

浅拷贝： 复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
浅拷贝实现方式： 1、简单地复制语句。 2、Object.assign() (ES6)
深拷贝： 创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。实现方式：

  • 1、用 JSON.stringify 把对象转成字符串，再用 JSON.parse 把字符串转成新的对象。
  • 2、Object.create()。
  • 3、递归拷贝（注意避免互相引用导致死循环）
12、CSSOM视图模式(CSSOM View Module)
  • Window视图属性
    • innerWidth 和 innerHeight：window窗体的内部宽度(高度)不包括窗框。
    • outerWidth 和 outerHeight: 表示整个浏览器窗体的大小，包括任务栏。
    • pageXOffset 和 pageYOffset: 整个页面滚动的像素值(水平方向和垂直方向的)。
    • screenX 和 screenY: 浏览器窗口在显示器中的位置(screenX水平screenY垂直)。
  • Screen视图属性
    • availWidth 和 availHeight: 显示器可用宽高，不包括任务栏等。
    • colorDepth: 表示显示器的颜色深度。
    • width和height: 表示显示器屏幕的宽高。
  • 文档(DocumentView)视图属性
    • elementFromPoint: 返回给定坐标处所在的元素。
    • getBoundingClientRect: 得到矩形元素的界线，返回的是一个对象，包含 top, left, right, 和 bottom四个属性值，大小都是相对于文档视图左上角计算而来。
    • scrollIntoView: 让元素滚动到可视区域。
  • 元素(DocumentView)视图属性
    • clientLeft 和 clientTop: 表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。
    • clientWidth 和 clientHeight: 表示内容区域的高度和宽度，包括padding大小，但是不包括边框和滚动条。
    • offsetLeft 和 offsetTop: 表示相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值。
    • offsetWidth 和 offsetHeight: 整个元素的尺寸（包括边框）。
    • scrollLeft 和 scrollTop: 表示元素滚动的像素大小。
    • scrollWidth 和 scrollHeight: 表示整个内容区域的宽高，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候，scrollHeight应该等用于scrollTop + clientHeight。
  • 鼠标位置(Mouse position)属性
    • clientX 和 clientY: 鼠标相对于window的偏移。
    • pageX, pageY: 鼠标相对于document的坐标。
    • screenX, screenY: 鼠标相对于显示器屏幕的偏移坐标。
13、常用的数组api，字符串api，Math对象，Date日期对象
  • 数组API
    • unshift(): 数组开头增加一个或多个元素，返回数组长度，原数组改变。
    • shift(): 删除数组第一个元素，返回被删除内的容，原数组改变。
    • push(): 数组末尾增加一个或多个元素，返回数组长度，原数组改变。
    • pop(): 删除数组末尾一项，返回被删除的内容，原数组改变。
    • concat(): 数组拼接，不改变原数组，返回被连接数组副本。不传参数可实现数组克隆。
    • splice(index, howmany, item1, ...itemx): 根据参数实现数组的删除，增加，替换。
      例: splice（index,0，item1，item2…)从索引index开始增加，增加的内容插入到索引index前面。
    • splice(index, n) 从索引index开始删除n个，如果只有一个参数splice(index)，就是从索引index开始后面的内容全部删除。
    • Splice(index,n，item1，item2..）从索引index开始替换n个,替换的内容为item1, item2….。
    • slice(n，m): 从索引 n 截取到索引 m 但不包括 m ,原数组不发生改变。
    • reverse(): 数组翻转,返回反转后新数组，原数组发生改变。
    • sort(): 数组排序,使用方法一般sort（function（a，b）{return a-b }）从小到大排。
    • toString(): 把数组转成以逗号分隔的字符串。
    • join（拼接形式）: 把数组拼接成以其他形式分割的字符串。
  • 字符串API
    • charAt(index): 通过索引找到该索引对应字符，包含空格。
    • charCodeAt(index): 通过索引找到该索引字符对应的Unicode编码(0-65535的整数）。
    • indexOf( ): 从前往后找，找到返回内容的索引，找不到返回-1。
    • lastIndexOf( ): 从后往前找，找到返回内容的索引，找不到返回-1。
    • slice(n，m): 从索引n 查找到索引m ,但不包括m，slice可以取负值。
    • substring(n，m): 从索引n 查找到索引m ，但不包括m， 不可以取负值。
    • substr（n，m): 从索引n开始截取m 个
    • split（切割形式）: 把一个字符串分割成字符串数组。
    • toUpperCase（） :转大写字母
    • toLowerCase（） :转小写字母
  • Math 对象API
    • Math.floor( ): 向下取整
    • Math.ceil( ): 向上取整
    • Math.round( ): 四舍五入
    • Math.random( ): 取0-1之间的随机小数
    • Math.pow(x,y): x的y次幂
    • Math.abs( ): 取绝对值 Math.sqrt( )开平方
    • Math.max/min( ): 取最大/小值
  • Date日期对象API
    • new Date( ): 创建一个日期对象
    • getFullYear() 返回年份
    • getMonth( ): 返回月份数（0-11）, 想要得到几月，需要加一
    • getDay( ): 返回一周的第几天（0-6），想要得到星期几，需要加一。
    • getDate( ): 返回日(号)
    • getMinutes(): 返回分
    • getSeconds(): 返回秒
    • getTime( ): 返回从1970年1月1日00：00到现在的毫秒数，也就是时间戳。
    • setFullYear(yearInt): 设置年份4位数
    • setMonth(monthInt): 设置月份(0-11)
    • setDate(dateInt): 设置日(1-31)
    • setHours(hourInt): 设置小时数(0-23)
    • setMinutes(minInt): 设置分钟数(0-59)
    • setSeconds(secInt): 设置秒数(0-59)
14、正则表达式
  • 正则表达式的创建
    • 调用RegExp对象的构造函数var reg = new RegExp('^[a-z]+[0-9]$', 'gi')其中第一个参数是匹配模式，第二个参数是可选参数(g, i, m),分别用于指定全局匹配、区分大小写的匹配和多行匹配。
    • 使用正则表达式字面值(var reg = /^[a-z]+[0-9]$/gi)
  • 正则表达式的组成
    • 元字符: .匹配除了换行符(n)以外的所有字符,w匹配字母，数字，或者汉字,W匹配除了字母，数字，汉字以外的其他字符,d匹配数字,D匹配除了数字以外的其他字符, s匹配任意的空白符(f, n, r, t, v), S匹配空白符以外的任意字符, b匹配单词的开始或者结束, B匹配单词的非开始或者结束, ^匹配行首, $匹配行尾。
    • 转义字符(\): * + ? | { [ ( ) ] }^ $ . # 和空白需要转义。
    • 限定符: *匹配零次至多次，+匹配一次至多次，？匹配零次或一次{2,}至少匹配两次，{10}匹配10次，{2, 8}至少匹配两次至多匹配八次。
  • 正则表达式的方法
    • test： 检索字符串中的指定子串，返回布尔值。
    • exec: 返回一个数组，数组中的第一个条目是第一个匹配。
    • search: 返回子串的开始位置
    • match: 返回匹配到的子串
    • replace: 替换匹配到的子串
    • split: 将字符串分割成数组 // 'a12b2334c34'.split(/\d{4}/) ["a12b", "c34"]
15、js 处理异常，调试方法

处理异常： try catch
调试方法： 1、打印到控制台。2、记录到当前页面。3、抛出错误

三、写在后面的叨叨叨

     不知不觉又到了深夜，渐渐的喜欢上了夜深人静的时候整理代码的感觉，这次比自己想象的整理的要多一些，除了正则花费了些功夫重新整理梳理了外，其他内容大多都是一些API文档，自己从头又过了下，虽然很多东西都过时了，例如indeOf早已可以用Es6的includes 方法去替代，语义和用法都好用很多，但是过一遍基础api也没啥坏处，明天周一，不过下周还是比较爽的元旦周三，上两天又休息了，美滋滋，加油!