Fork me on GitHub

IT面试整理(4)——Javascript

网页、屏幕宽度、高度的获取


  • 屏幕分辨率的宽度: window.screen.width
  • 屏幕分辨率的高度: window.screen.height
  • 屏幕可用工作区宽度: window.screen.availWidth
  • 屏幕可用工作区高度: window.screen.availHeight
  • 网页被卷起的高度: document.body.scrollTop
  • 网页被卷起的左边: document.body.scrollLeft
  • 网页正文的全文宽: document.body.scrollWidth
  • 网页正文的全文高: document.body.scrollHeight
  • 网页可见区域宽度: document.body.offsetWidth, document.body.clientWidth;
  • 网页可见区域高度: document.body.offsetHeight, document.body.clientHeight;

元素宽度、高度的获取【参考】


  • clientWidth: 标准盒模型的宽度(包含border)
  • offsetWidth: 对象的宽度(width+padding+border)
  • style.width: 行内式才能获取,包含px, %
  • offsetLeft: 距离上层左边的距离
  • style.left: 可设置

property、attribute的区别


  • 相同之处
    • 标准的DOM properties与attributes是同步。
    • 公认的(非自定义)特性被以属性的形式添加到DOM对象中,如: id, align, style
  • 不同之处
    • 对于有些标准的特性的操作,getAttribute()与点号(.)获取的值存在差异,如href、src、value、style、onclick等
  • property(属性): property的值不会出现在html中,只保存在js中
  • attribute(特性): 只能是字符串,大小写不敏感,出现在innerHTML中

typeof


  • string
  • number
  • boolean
  • undefined
  • function
  • object

Javascript、Nodejs的区别


  • Javascript
    • ECMAScript: 语言基础,如:语法、数据类型结构、内置对象
    • DOM: 操作页面元素的方法
    • BOM: 操作浏览器的方法
  • Nodejs
    • ECMAScript: 语言基础,如:语法、数据类型结构、内置对象
    • os: 操作系统
    • file: 文件系统
    • net: 网络系统
    • database: 数据库

escape、encodeURI、encodeURIComponent


  • escape: 将字符的unicode编码转换成为16进制序列,不编码字符有69个
    • 如: *,+,-,.,/,@,_,0-9,a-z,A-Z
  • encodeURI: 将字符的unicode编码转换成为UTF-8,不编码的字符有82个
    • 如: !,#,$,&,’,(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z
  • encodeURIComponent: 将字符的unicode编码转换成为UTF-8,不编码的字符有71个
    • 如: !, ‘,(,),*,-,.,_,~,0-9,a-z,A-Z

stopropagtion(), stopImmediatePropagation()


  • stopPropagation(): 阻止事件在DOM中继续传播
  • stopImmediatePropagation(): 阻止同一个事件的其他监听函数被调用

DOMContentLoaded事件, readstatechange事件**


  • DOMContentLoaded事件: 比load事件早,文档下载并解析完成(DOM生成),所有外部资源可能还没下载结束
  • readystatechange事件: 发生在Document对象和XMLHttpRequest对象,当其readyState属性发生变化时触发

Javascript前缀命名规范


  • s: 表示字符串。如:sName,sHtml;
  • n: 表示数字。例如:nPage,nTotal;
  • b: 表示逻辑。例如:bChecked,bHasLogin;
  • a: 表示数组。例如:aList,aGroup;
  • r: 表示正则表达式。例如:rDomain,rEmail;
  • f: 表示函数。例如:fGetHtml,fInit;
  • o: 表示以上未涉及到的其他对象,例如:oButton,oDate;
  • g: 表示全局变量,例如:gUserName,gLoginTime;

闭包


  • 原理: 当某个函数调用时会创建一个执行环境以及作用域链,然后根据arguments和其他命名参数初始化形成活动对象。当外部函数调用结束后,其执行环境与作用域链被销毁,但是其活动对象保存在了闭包之中,最后在闭包函数调用结束后才销毁。
  • 实现: 在函数中定义函数,并且内部函数引用了外部函数的变量,最后内部函数被返回
  • 特性
    (1) 函数嵌套函数
    (2) 函数内部可以引用外部的参数和变量
    (3) 参数和变量不会被垃圾回收机制回收

Javascript垃圾回收原理


(1) 如果一个对象不再被引用,那么对象会被GC回收
(2) 如果两个对象相互引用,且不被第三者引用,那么这两个对象会被回收

call、apply


  • 其作用是可以改变其this的指向,其调用方式有所不同。
  • call传递参数;apply传递数组

Javascript数据类型


  • 基本数据类型
    • string
    • number
    • boolean
  • 引用数据类型
    • object
    • array
  • 特殊数据类型
    • null
    • undefined

原型、原型链


原型: 一个普通的对象,自带隐式的proto属性,原型也有自己的原型
原型链: 有一些用来继承和共享属性的对象组成的(有限的)对象链

null、undefined


null: 一个表示“无”的对象,转为数值时为0;
undefined: 一个表示“无”的原始值,转为数值时为NaN

this指针


arguments


ES6新特性【参考】


  • 箭头操作符:=>
  • 类的支持:class
  • 增强的对象字面量:
  • 可以再对象字面量里定义原型
  • 可以直接调用父类方法
  • 定义方法可以不用function关键字
  • 字符串模板:·your name is ${num}·
  • 解构:自动解析数组或对象中的值
  • 默认参数、不定参数、拓展参数
  • let、const关键字
  • for of:值遍历
  • 模块:module
  • Map、Set、WeakMap、WeakSet
  • Proxies
  • Symbols
  • Math、Number、String、Object的新API
  • Promises

Promise


Promise的四种状态
(1) pending: 初始状态,非fulfilled或rejected
(2) fulfilled: 成功的操作
(3) rejected: 失败的操作
(4) settled: Promise已经被fulfilled或rejected,且不是pending

严格模式


  • 目的
    (1) 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为
    (2) 消除代码运行的一些不安全之处,保证代码运行的安全;
    (3) 提高编译器效率,增加运行速度;
    (4) 为未来新版本的Javascript做好铺垫。
  • 缺点
    (1) 与未采用严格模式的文件一起压缩,反而会浪费字节

DOM操作


  • 创建
    createDocumentFragment()
    createElement()
    createTextNode()
  • 添加、移除、替换、插入
    appendChild()
    removeChild()
    replaeChild()
    insertBefor()
  • 查找
    getElementsByTagName()
    getElementsByName()
    getElementById()

document.write、innerHTML的区别


document.write: 只能重绘整个页面
innerHTML: 可以重绘部分页面

Javascript对象创建的几种方式


(1) 工厂模式
(2) 构造函数模式
(3) 原型模式
(4) 混合构造模式和原型模式
(5) 动态原型模式
(6) 寄生构造函数模式
(7) 稳妥构造函数模式

Javascript继承的6中方法


(1) 原型链继承
(2) 借用构造函数继承
(3) 组合继承(原型+借用构造)
(4) 原型式继承
(5) 寄生式继承
(6) 寄生组合式继承

如何获取UA


1
2
3
4
5
6
7
8
<script>
function whatBrowser(){
document.Browser.Name.value = navigator.appName;
document.Browser.Version.value = navigator.appVersion;
document.Browser.Code.value = navigator.appCodeName;
document.Browser.Agent.value = navigator.userAgent;
}
</script>

slice()、substr()、substring()的区别


  • slice(start, [end]):参数可为负
  • substr(start, length)
  • substring(start, [end]): 参数不可为负

Array方法


  • 转换方法
    • valueOf()
    • toString()
    • toLocaleString()
    • join()
  • 堆栈方法
    • push()
    • pop()
  • 队列方法
    • push()
    • shift()
    • unshift(item1, item2, …)
  • 排序方法
    • reverse()
    • sort()
  • 操作方法
    • concat(arr1, arr2, …)
    • slice()
    • splice()
  • 位置方法
    • indexOf()
    • lastIndexOf()
  • 迭代方法
    • every()
    • filter()
    • forEach()
    • map()
    • some()
  • 合并方法
    • reduce()
    • reduceRight()

String方法


  • 字符方法
    • charAt(index): 返回指定位置的字符
    • charCodeAt(): 返回指定位置的字符的unicode编码
  • 操作方法
    • concat()
    • slice()
    • substring()
    • substr()
  • 位置方法
    • indexOf()
    • lastIndexOf()
  • trim方法
    • trim()
    • trimLeft()
    • trimRight()
  • 大小写转换方法
    • toLowerCase()
    • toLocaleLowerCase()
    • toUpperCase()
    • toLocaleUpperCase()
  • 模式匹配方法
    • match(string/reg):
      • string: 返回匹配结果的数组
      • reg(g): 返回所有的匹配子串
      • reg: 返回一个数组:元素0存放的是匹配文本;其余元素存放与正则表达式的子表达式匹配的文本;input属性表示匹配文本的起始字符的位置;input属性表示输入字符串
    • search()
    • replace()
    • split()
  • 其他方法
    • localeCompare()
    • fromCharCode()

正则表达式


  • 定义方法
    • 直接定义: var r = /pattern/flags;
    • 构造函数: var r = new RegExp(‘pattern’, ‘flags’);
  • 元字符: ( ) [ ] { } \ ^ $ | ? * + .
  • 特殊元字符
    • .: 查找单个字符
    • \w: 查找字母数字下划线
    • \W: 查找非字母数字下划线
    • \d: 查找数字
    • \D: 查找非数字字符
    • \s: 查找空白字符
    • \S: 查找非空白字符
    • \b: 匹配单词边界
    • \B: 匹配非单词边界
    • \0: 查找NULL字符
    • \n: 查找换行符
    • \f: 查找换页符
    • \t: 查找回车符
    • \v: 查找垂直制表符
    • \xxx: 查找以8进制xxx规定的字符
    • \xdd: 查找以16进制dd规定的字符
    • \uxxxx: 查找以16进制xxxx规定的unicode字符
    • […]: 匹配括号中的任何一个字符
    • [^…]: 匹配不在括号中的任何一个字符
    • {m,n}: 最少匹配前面表达式m次,最多n次
    • {m,}: 最少匹配前面表达式m次
    • {m}: 正好匹配前面表达式m次
    • ?: 匹配前面表达式0或1次
    • +: 最少匹配前面表达式1次
    • *: 最少匹配前面表达式0次
    • |: 匹配前面表达式或后面表达式
    • (…): 组合项目
    • ^: 匹配字符串的开头
    • $: 匹配字符串的结尾

正则表达式方法


  • test(): 返回一个布尔值,表示传入的 字符串是否匹配(从lastIndex属性指示的地方开始)
  • exec(): 返回一个包含了匹配结果的数组(额外具有两个属性: input表示本次搜索的目标字符串;index表示匹配结果在目标字符串内的位置)

常见的正则表达式


  • 匹配中文: [u4e00-u9fa5]
  • 匹配URL
    • /http(s)?:\/\/([\w-]+.)+[\w-]+(\/[\w-.\/\?%&=]*)?/
  • 匹配Email: /^[\w-]+(.[\w-]+)*@[\w-]+(.[\w-]+)+$/

JS函数调用的方法【参考】


(1) 方法调用模式
(2) 函数调用模式
(3) 构造器调用模式
(4) apply调用模式

setTimeout


随机打乱数组顺序

1
2
3
function randomArr(arr){
arr.sort(function(){ return Math.random() - 0.5; })
}

实现duplicate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function duplicate(obj){
var buf;
if(obj instanceof Array){
buf = [];
var i = obj.length();
while(i--){
buf[i] = duplicate(obj[i]);
}
return buf;
} else if(obj instanceof Object){
buf = {};
for(var k in obj){
buf[k] = duplicate(obj[k]);
}
return buf;
} else {
return obj;
}
}

实现数组去重

1
2
3
4
5
function distinct(arr){
return arr.filter(function (elem, index){
return arr.indexOf(elem, index+1) === -1;
});
}

获取元素到页面顶部和左边的距离

1
2
3
4
5
6
7
8
9
10
11
12
function getDistance(el){
var x = el.offsetLeft;
var y = el.ofsetTop;
while(el = el.offsetParent){
x += el.offsetLeft;
y += el.offsetTop;
}
return {
'x': x,
'y': y
};
}

实现bind方法

1
2
3
4
5
6
Function.prototype.bind = function(context){
self = this;
return function(){
self.apply(context, arguments);
}
}
欣赏此文?求鼓励,求支持!