IT面试整理(4)——Javascript

发表于 更新于 分类于 Waline：

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

  • 屏幕分辨率的宽度: 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

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');
  • 元字符: ( ) [ ] { }  ^ $ | ? * + .
  • 特殊元字符
    • .: 查找单个字符
    • : 查找字母数字下划线
    • : 查找非字母数字下划线
    • 查找数字
    • : 查找非数字字符
    • : 查找空白字符
    • : 查找非空白字符
    • 匹配单词边界
    • : 匹配非单词边界
    • \0: 查找NULL字符
    • : 查找换行符
    • 查找换页符
    • 查找回车符
    • 查找垂直制表符
    • : 查找以8进制xxx规定的字符
    • : 查找以16进制dd规定的字符
    • : 查找以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)?://([-]+.)+[-]+(/[-./?%&=]*)?/
  • 匹配Email: /1+(.[-]+)*@[-]+(.[-]+)+$/

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

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

随机打乱数组顺序

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);    
    }
}