每天进步一点点：3.31

大家好，我是梅巴哥er。

---

多写，加深记忆和理解。开始吧。

---

1，问：js的事件机制，DOM0, DOM2

答：

• 事件就是用户或浏览器自身的某种操作，如click, load等
• 事件流：事件在目标节点和根节点之间的传播。分为3个阶段，捕获阶段，目标阶段，冒泡阶段
• DOM0：
  • DOM0事件没有设置事件执行阶段的参数，只能在冒泡阶段执行
  • 同一个元素绑定两次相同的事件，则只会执行后面的绑定事件
  • DOM0有两种写法：
    • 1，在标签内写οnclick=“”
    • 2，在script标签内写元素.onclick = function() {…}
  • DOM0解除事件：元素.onclick = null
• DOM2：
  • 可以通过设置绑定函数的参数来决定事件是在哪个阶段执行
  • 元素.addEventListener(‘click’, function(){}, 参数)
  • 当参数为false时，事件在冒泡阶段执行，默认是false。当参数是true时，事件在捕获阶段执行。
  • 给同一个元素绑定两次相同的事件，两次事件不会覆盖，而是先后执行。

---

2，问：js的继承实现方法

答：

• 原型继承

function Star(age) {
    this.name = 'dilireba'
    this.art = ['sing', 'dance']
    this.age = age 
}
Star.prototype.getName = function() {
    console.log(this.name)
}
function Dili() {

}
// 优点3：只调用了一次父类
Dili.prototype = new Star('18') // 子类的原型指向父类的实例
var dili1 = new Dili() // 缺点1： 创建子类实例时不能给父类加参数
var dili2 = new Dili()
dili1.getName() // 优点1：可以调用父类原型上的属性和方法
dili1.art.push('show')
console.log(dili1.art)
console.log(dili2.art) // 缺点2：子类实例调用父类引用类型的数据是共享的
console.log(dili1 instanceof Star) // 优点2： 子类的实例也是父类的实例

• call继承（基本继承）

function Star(age) {
    this.name = 'dilireba'
    this.art = ['sing', 'dance']
    this.age = age 
}
Star.prototype.getName = function() {
    console.log(this.name)
}
function Dili(age) {
    Star.call(this, age) // 优点3：只调用一次父类
}
var dili1 = new Dili('18') //优点1：子类实例可以给父类带入参数
var dili2 = new Dili('20')
console.log(dili1.age)
console.log(dili2.age)
dili1.getName() // 缺点1： 子类实例不能调用父类原型上的属性和方法
dili1.art.push('show')
console.log(dili1.art)
console.log(dili2.art) // 优点2： 子类实例调用父类引用类型的数据不再共享
console.log(dili1 instanceof Star) // 缺点2：子类实例不是父类的实例

• 原型 + call 的组合继承

function Star(age) {
    this.name = 'dilireba'
    this.art = ['sing', 'dance']
    this.age = age 
}
Star.prototype.getName = function() {
    console.log(this.name)
}
function Dili(age) {
    Star.call(this, age) // 缺点1：需要调用两次父类
}
Dili.prototype = new Star()
var dili1 = new Dili('18') //优点1：子类实例可以给父类带入参数
var dili2 = new Dili('20')
console.log(dili1.age)
console.log(dili2.age)
dili1.getName() // 优点2： 子类实例能调用父类原型上的属性和方法
dili1.art.push('show')
console.log(dili1.art)
console.log(dili2.art) // 优点3： 子类实例调用父类引用类型的数据不再共享
console.log(dili1 instanceof Star) // 优点4：子类实例不是父类的实例

• 寄生继承
• 寄生组合继承
• ES6的class类继承

3，问：promise, async, generator的区别

答：

• promise和generator是ES6出现的概念，async是ES7推出的
• promise有3种状态，pendding , fulfilled, rejected。promise一旦建立，就会立即执行，无法取消promise。当处于pendding状态时，无法得知目前运行状态是刚刚还是已经完成。promise有两个参数，resolve和reject，对应链式结构的then和catch。
• generator是*和yield结构
• async是generator的语法糖，同时又是基于promise实现的
• async中，await后面跟的是一个promise对象，最终返回的是一个promise对象
• async/await代码更简洁，try/ catch可以同时处理同步和异步错误。

---

4，问：css工程化

5，问：前端代理

答：

• 项目中用到过两种代理方法：
  • 在package.json里配置：

  "proxy":url
  

  • 在webpack-dev-server里配置proxy：

  devServer: {
      proxy: {
          '/api': {
              // 接口访问的地址
              target: url,
              secure: false,  // 如果是https接口，需要配置这个参数
              pathRewrite: { '^/api': '' }, // 访问接口前面需要拼接的部分
              changeOrigin: true, // 是否跨域
              // 关键部分
              cookieDomainRewrite: {
                  '*': 'localhost' 
                  // 把相应的 cookie 域都设置成 localhost，
                  // 也可以配置成自己电脑的ip，或者指定的域名
              }
          },
      }
  },
  
  

6，问：数组有哪些方法

答：

// 判断数组
console.log(Array.isArray([])) // true

// 数组长度（元素个数）
var arr = [1, 2]
console.log(arr.length) // 2

// 数组增加元素 push, unshift
var arr = [1, 2]
arr.push(3) // 在末尾增加 
console.log(arr) // [ 1, 2, 3 ]
arr.unshift(4) // 在最前面增加
console.log(arr) // [ 4, 1, 2, 3 ]

// 数组删除元素 pop, shift
var arr = [1, 2, 3, 4]
arr.pop() // 删除最后一个元素
console.log(arr) // [ 1, 2, 3 ]
arr.shift() // 删除第一个元素
console.log(arr) // [ 2, 3 ]

// 删除和增加元素 splice
var arr = [1, 2, 3, 4, 5]
// arr.splice(index, num, ele)
// 从下标为index的元素开始，删除num个元素，并把ele添加到被删除的位置
// 会改变原数组 返回的是被删除的元素
console.log(arr.splice(1, 3, 'hello')) // [ 2, 3, 4 ]
console.log(arr) // [ 1, 'hello', 5 ]

// 截取数组元素 slice
var arr = [1, 2, 3, 4]
// arr.slice(index1, index2)
// 截取从下标为index1的元素到下标为index2的元素，但不包含index2
// 如果index2不写，表示从下标为index1的元素截取到数组末尾
// 截取不会改变原数组
console.log(arr.slice(0, 2)) // [ 1, 2 ]
console.log(arr) // [ 1, 2, 3, 4 ]
console.log(arr.slice(2)) // [ 3, 4 ]

// 把字符串变成数组 Array.from(), Array.of(), split
var str = 'hello'
console.log(Array.from(str)) // [ 'h', 'e', 'l', 'l', 'o' ]
console.log(Array.of(str)) // [ 'hello' ]
console.log(str.split()) // [ 'hello' ]
console.log(str.split('')) // [ 'h', 'e', 'l', 'l', 'o' ]
var str1 = 'name=dili&age=18&hobby=sleep'
var arr = str1.split('&') 
console.log(arr) // [ 'name=dili', 'age=18', 'hobby=sleep' ]

// 把数组变成字符串 join
var arr = ['q', 'w', 'e', 'r']
console.log(arr.join('')) // qwer

// 遍历数组 for, map, forEach
var arr = [1, 2, 3, 4]
arr.map((v, k) => {
    console.log(v, k)
})
arr.forEach((v, k) => console.log(v, k))

// 筛选或判断数组中符合条件的元素filter, some, includes, indexOf, find
var arr = [1, 2, 3, 4]
console.log(arr.filter((v, k) => {
    return v >= 3 // 数组中哪些元素是大于等于3的，输出一下
})) // [ 3, 4 ]
console.log(arr.some((v, k) => {
    return v >= 3 // 数组中有大于等于3的值吗？有就输出true，没有就false
})) // true
console.log(arr.includes(2)) // true
console.log(arr.includes(5)) // false
console.log(arr.indexOf(2)) // 1
console.log(arr.indexOf(5)) // -1
var arr = [1, 2, 3, 4, 1]
console.log(arr.find(v => {
    return v === 1
})) // 1

// 数组反转 reverse
var arr = [1, 2, 3, 4]
console.log(arr.reverse()) // [ 4, 3, 2, 1 ]

// 数组排序 sort
var arr = [1, 3, 4, 11, 6]
// 由小到大
console.log(arr.sort((a, b) => a - b)) // [ 1, 3, 4, 6, 11 ]
// 由大到小
console.log(arr.sort((a, b) => b - a)) // [ 11, 6, 4, 3, 1 ]

// 数组累加 reduce
var arr = [1, 3, 4, 6, 11]
console.log(arr.reduce((a, b) => a + b)) // 25

// 拉平数组 flat
// arr.flat(num)
// num表示去掉arr里面num个中括号[]
// 如果num是Infinity，就代表把arr拉平成一层
var arr = [1, [2, 3, [4, 5, [6, 7, [8, 9]]]]]
console.log(arr.flat(Infinity))
// [1, 2, 3, 4, 5,6, 7, 8, 9]
console.log(arr.flat(2))
// [ 1, 2, 3, 4, 5, [ 6, 7, [ 8, 9 ] ] ]

---

7，问：前端缓存机制

---

以上