自检：前端知识清单——语法和API

前言

题目来自ConardLi的blog
写的是自己的题解，水平有限，所以仅供参考
代码会整合在github，觉得有帮助就给个star吧~

正文

一、Javascript基础

语法和API

1、理解ECMAScript和JavaScript的关系

ECMAScript是JavaScript的规范，JavaScript是ECMAscript的体现

2、熟练运用es5、es6提供的语法规范

ES6:

• spread展开符
• 类
• 模块化
• 箭头函数
• 函数参数默认值
• 模板字符串
• 解构赋值
• 对象属性简写
• Promise
• let const
  • const声明一个对象，能不能修改对象的属性？
    答案是可以的，因为用const只是保证对象的指针不可以改变，只想地址的内容是可以改变的。
  • 如果要让const声明对象的属性也不可修改，怎么实现？
    要实现真正的不可被修改的对象常量，首先我们要实现三个点：
    1、对象属性不能被修改
    2、对象属性不能增加
    3、对象属性不能被删除

不能被增加，我们可以用Object.preventExtensions来实现
不能被增加和删除，我们可以用Object.seal来实现
不能被修改，我们可以用Object.freeze来实现，但是Object.freeze只能作用一层，我们需要通过递归调用

ES7:
Array.prototype.includes()

const arry = ['xiaoMing','xiaoHong','xiaoLan']
arry.includes('xiaoMing')   //true

指数操作符
**

console.log(Math.pow(2,10))  //1024
console.log(2**10)  //1024

ES8:

• async await
• Object.values()

const values=Object.values(obj1);
console.log(values);//[1, 2, 3]

• Object.entries()

for(let [key,value] of Object.entries(obj1)){
    console.log(`key: ${key} value:${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:3

• Object.getOwnPropertyDescriptors()
  返回obj对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。

const obj = {
    name: 'Jine',
    get age() { return '18' }
};
Object.getOwnPropertyDescriptors(obj)

3.熟练掌握JavaScript提供的全局对象（例如Date、Math）、全局函数（例如decodeURI、isNaN）、全局属性（例如Infinity、undefined）

全局对象：

• Array
• Boolean
• Math
• Number
• String
• RegExp

全局函数：

• decodeURI()
• decodeURIComponent()
• encodeURI()
• encodeURIComponent()
• escape()
• eval()
• isFinite()
• isNaN()
• Number()
• parseFloat()
• parseInt()
• String()
• unescape()

全局属性：

• NaN
• undefined
• Infinity

4、熟练应用map、reduce、filter 等高阶函数解决问题

• map
  map返回一个数组，接受两个参数，第一个是回调函数，第二个是执行回调函数时用的this值，map遍历数组的每个值来做一些改变，再返回整个数组。

map实现

const arr = [1, 2, 3, 4]

arr.push(5)

Array.prototype.selfMap = function (callback, context) {
    let arry = Array.prototype.slice.call(this)
    let mapArry = Array()
    for (let i = 0; i < arry.length; i++) {
        if (!arry.hasOwnProperty(i)) {
            continue
        }
        mapArry[i] = callback.call(context, arry[i], i, this)
    }
    return mapArry
}

const result = arr.selfMap(value => value + 1)

• filter
  filter返回一个数组，接受的参数是一个回调函数，filter遍历数组的每一个值，当数组的值在你在filter里面的规则对应为true时，返回该数组上的值，否则不返回。

const arry = [1, 2, 3, 4]

arry.push(5)

Array.prototype.selfFilter = function (callback, context) {
    let filterArry = Array()
    let arry = Array.prototype.slice.call(this)
    for (let i = 0; i < arry.length; i++) {
        if (!arry.hasOwnProperty(i)) {
            continue
        } else {
            callback.call(context, arry[i], i, this) ? filterArry.push(arry[i]) : filterArry.push()
        }
    }
    return filterArry
}

const result = arry.selfFilter(value => value % 2 === 0)

• reduce

reduce接受两个参数，一个是回调函数，另一个是初始值。

const finalVal = oldArray.reduce((accumulator, currentValue, currentIndex, array) => {
  ...
}, initalValue)

reduce实现

const arry = [1, 2, 3, 4]

Array.prototype.selfReduce = function (callback, initialValue) {
    let arr = Array.prototype.slice.call(this)
    let res
    let startIndex
    if (initialValue === undefined) {
        for (let i = 0; i < arr.length; i++) {
            if (!arr.hasOwnProperty(i)) {
                continue
            } else {
                startIndex = i
                res = arr[i]
                break
            }
        }
    } else {
        res = initialValue
    }
    for (let i = ++startIndex || 0; i < arr.length; i++) {
        if (!arr.hasOwnProperty(i)) {
            continue
        } else {
            res = fn.call(null, res, arr[i], i, this)
        }
        return res
    }
}

5、setInterval需要注意的点，使用setTimeout实现setInterval

• setTimeout()：当方法执行完成定时器就立即停止(但是定时器还在,只不过没用了);
• setInterval()：当方法执行完成,定时器并没有停止,以后每隔[interval]这么长的时间都会重新的执行对应的方法[function],直到我们手动清除定时器为止

关于setInterval容易造成内存泄漏的说法，是由于使用者没有清除计时器造成的，setInterval不背这个锅。

实现setInterval

const mySetInterval = (cb, time) => {
    const fn = () => {
        cb() // 执行传入的回调函数
        setTimeout(() => {
            fn() // 递归调用自己
        }, time)
    }
    setTimeout(fn, time)
}

mySetInterval(() => {
    console.log(new Date())
}, 1000)

6、JavaScript提供的正则表达式API、可以使用正则表达式（邮箱校验、URL解析、去重等）解决常见问题

API：

• String search
  输出index值

• String match
  输出一个数组，包括匹配的参数，匹配的index值，以及输入的字符串
  当正则没有g时，使用match返回的信息比较多。但是有g后，就没有关键的信息index了。

• String replace
  把"2,3,5"，变成"5=2+3"：

const result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2")
console.log(result)

• String split
  它可以有第二个参数，表示结果数组的最大长度
  正则使用分组时，结果数组中是包含分隔符的

• RegExp test
  返回true false

• RegExp exec
  输出一个数组，包括匹配的参数，匹配的index值，以及输入的字符串
  exec方法能接着上一次匹配后继续匹配

解决常见问题：
暂时不会

7、JavaScript异常处理的方式，统一的异常处理方案

• try catch
• promise catch
• window.onerror
• window.onunhandledrejection
  window.onunhandledrejection 与 window.onerror 类似，在一个JavaScript Promise 被 reject 但是没有 catch 来捕捉这个 reject时触发。并且同时捕获到一些关于异常的信息。
• window.rejectionhandled
  因为 Promise 可以延后调用 catch 方法，若在抛出 reject 时未调用 catch 进行捕捉，但稍后再次调用 catch，此时会触发 rejectionhandled 事件。

统一异常处理：
toast，alert