新 API
最新的 url 参数获取的 API？
URLSearchParams
// 有如下一个url: http://localhost?a=1&b=2
function getUrlParam(name) {
let paramStr = location.search.substr(1)
let params = new URLSearchParams(paramStr)
return params.get(name)
}
console.log(getUrlParam('a')) // 1
数组
实现数组去重？
现在有如下一个数组：
let arr = [1, 1, 'true', 'true', true, true, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]
- 使用 ES6 的 Set 方法
利用 Set 数据类型的特性，集合内部不会有重复的元素 不能过滤对象
Array.from(new Set(arr));
// 等于
[...new Set(arr)];
- 使用对象键值唯一的特性
不能过滤对象
function unique(arr) {
let obj = {}
return arr.filter((item) => {
let key = typeof item + item
return obj.hasOwnProperty(key) ? false : (obj[key] = true)
})
}
因为对象的 key 是 string 类型，无论你传入什么他都会解析成字符串，所以就导致了数字 1 和字符串 1，在对象中的 key 是相同的。 所以会把它们当成相同的数据过滤掉，所以可以使用 typeof 简单判断下数据类型
- 使用 Map
function unique(arr) {
let map = new Map()
return arr.filter((item) => {
return map.has(item) ? false : map.set(item, true)
})
}
- indexOf 或 includes
不能过滤对象、NaN
function unique(arr) {
let list = []
if (!Array.isArray(arr)) {
throw new Error('type error')
}
for (let i = 0, l = arr.length; i < l; i++) {
let item = arr[i]
if (list.indexOf(item) === -1) {
list.push(item)
}
}
return list
}
- 双层 for 循环
不能过滤对象、NaN
function unique(arr) {
// let l = arr.length
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1)
j--
}
}
}
return arr
}
实现扁平数组（降维数组）
- 重写 concat 方法
只能处理二维数组
let arr = [[1, 2], [3, 4]]
Array.prototype.concat.apply([], arr) // [1, 2, 3, 4]
- 使用 flat 方法
可以处理多维数组
let arr = [[1, 2], [3, 4]]
arr.flat(Infinity) // [1, 2, 3, 4]
- 使用 toString + split
这种方法有些局限性，扁平化后的数组的每一项会变成字符串
let arr = [[1, 2], [3, 4]]
arr.toString().split(',') // [1, 2, 3, 4]
- 递归
let source = [[1, 2], [3, 4]]
let arr = []
function flatFn(source) {
source.forEach(v => {
if(Array.isArray(v)){
flatFn(v)
} else {
arr.push(v)
}
})
}
flatFn(source)
console.log(arr) // [1,2,3,4]
实现取数组的最大值？
Math.max.apply(null, [4, 1, 2, 3])Math.max(...[4, 1, 2, 3])
实现一个Flat？
let source = [[1, 2], [3, 4, [5, 6]]]
function flatFn(source, depth=1){
return source.reduce((pre,cur) => {
return Array.isArray(cur) && depth > 0 ? [...pre, ...flatFn(cur, depth-1)] : [...pre, cur]
}, [])
}
console.log(flatFn(source, 1)) // [1, 2, 3, 4, Array(2)]
console.log(flatFn(source, 2)) // [1, 2, 3, 4, 5, 6]
工具类
实现深拷贝?
有如下的一个数据：
let obj = {
a: undefined,
b: 1.7976931348623157e10308,
c: -1.7976931348623157e10308,
d: new Date(),
e: new RegExp('\\w+'),
f: function () {
console.log(1)
}
}
-
使用
JSON.parse(JSON.stringify(obj))
弊端如下：- 如果 obj 里面有时间对象，时间将只是字符串的形式。而不是时间对象
- 如果 obj 里有 RegExp、Error 对象，则序列化的结果将只得到空对象
- 如果 obj 里有函数，undefined，则序列化的结果会把函数或 undefined 丢失
- 如果 obj 里有 NaN、Infinity(正无穷大)和-Infinity(负无穷大)，则序列化的结果会变成 null
- 如果 obj 中的对象是有构造函数生成的，会丢弃对象的 constructor
-
手写迭代拷贝
function deepClone(source) {
if (!source || typeof source !== 'object') {
return source
}
if (source instanceof Date) {
return new Date().setTime(source.getTime())
}
let newObj = Array.isArray(source) ? [] : {}
for (let key in source) {
if (source[key] && typeof source[key] === 'object') {
newObj[key] = deepClone(source)
} else {
newObj[key] = source[key]
}
}
return newObj
}
排序算法
手写冒泡
名字的由来： 越大（或越小）的元素经过交换慢慢浮到数列的顶端。就如同饮料中的气泡最终会上浮到顶端一样，故名叫“冒泡排序”
规则如下：
- 外层循环和内层循环只需要循环
length - 1
两两比较，最后的两个数只需要比较一次就能确定两者的位置 比如 [2, 1, 3, 4, 5]，2 和 1 只需要比较一次就能确定位置了[1, 2, 3, 4, 5]
- 内层循环在
length - 1的基础上减去i，也就是length - 1 - i
每当外层 for 成功循环一次之后，内层 for 就可以少循环一次，这里注意是当外层 for 循环完毕之后
- 内层循环：用当前的值 a（arr[j]）和下一个值 b（arr[j + 1]）比较大小，如果 a 大于 b，则交换两数的位置，最终的目的是将最大的数移到数组最后面
let arr = [5, 4, 3, 2, 1]
function bubbleSort(arr) {
let len = arr.length
for (let i = 0; i < len - 1; i++) {
for (let j = 0; j < len - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
let temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
}
bubbleSort(arr)
快排
规则如下：
- 在数组中，找到一个元素作为“基准”（pivot）
- 小于基准的元素，就移到“基准”的左边；大于“基准”的元素，就移到“基准”的右边
- 对“基准”左右两边的集合，进行递归，不断重复第一步和第二步，直到所有子元素只剩一个元素为止
function quickSort(arr) {
if (arr.length === 0) return arr
const pivotInx = Math.floor(arr.length / 2)
const pivot = arr.splice(pivotInx, 1)[0]
const left = []
const right = []
for (let i = 0; i < arr.length; i++) {
const item = arr[i]
if (item < pivot) {
left.push(item)
} else {
right.push(item)
}
}
return quickSort(left).concat([pivot]).concat(quickSort(right))
}
看代码
看以下代码会输出什么？
let a = { name: 'Jone' }
let b = a
a = { name: 'Sasa' }
console.log(b)
解答：
输出：{ name: 'Jone' }
这道题主要是考引用数据类型的特性 当 b = a 时，a 和 b 指向同一个堆地址。 当 a = {name: 'Sasa'} a 被重新赋值，所以 a 指向新的堆地址，b 仍然是原来的堆地址
看以下代码会输出什么？
let a = 1
b = a
b = 2
console.log(a)
解答：
这道题主要是考基本数据类型的特性
其他
let a = null 有什么作用？
let a = null 一般用作手动释放该变量的内存，而不是等到离开作用域后被自动回收
如何阻止冒泡事件
function stopBubble(e) {
if (e && e.stopPropagation) {
// 非IE浏览器
e.stopPropagation()
} else {
//IE浏览器
window.event.cancelBubble = true
}
}
如何阻止浏览器默认事件
function stopDefault(e) {
//标准浏览器
if (e && e.preventDefault) {
e.preventDefault()
}
//个别IE
else {
window.event.returnValue = fale
return false
}
}
获取非行间样式
function getCss(curEle, attr) {
var val = null
try {
val = window.getComputedStyle(curEle, null)[attr]
} catch (e) {
val = curEle.currentStyle[attr]
}
return val
}
getCss(div, 'width')