2021JavaScript面试题（最新）不定时更新（2021.11.6更新）

{} 的 valueOf 结果为 {} ，toString 的结果为 "[object Object]"

[] 的 valueOf 结果为 [] ，toString 的结果为 ""
1
2
3

typeof '';               // string 有效
typeof 1;                // number 有效
typeof true;             // boolean 有效
typeof undefined;        // undefined 有效
typeof null;             // object 无效
typeof [] ;              // object 无效
typeof new Function();   // function 有效
typeof new Date();       // object 无效
typeof new RegExp();     // object 无效
1
2
3
4
5
6
7
8
9

console.log(Object.prototype.toString.call(123))          // [object Number]
console.log(Object.prototype.toString.call('123'))        // [object String]
console.log(Object.prototype.toString.call(undefined))    // [object Undefined]
console.log(Object.prototype.toString.call(true))         // [object Boolean]
console.log(Object.prototype.toString.call({}))           // [object Object]
console.log(Object.prototype.toString.call([]))           // [object Array]
console.log(Object.prototype.toString.call(function(){})) // [object Function]
console.log(Object.prototype.toString.call(this));        // [object Window]
1
2
3
4
5
6
7
8

[] instanceof Array; // true
[] instanceof Object; // true
[] instanceof RegExp; // false
new Date instanceof Date; // true
1
2
3
4

0.1 -> 0.0001 1001 1001 1001...(1100循环)
0.2 -> 0.0011 0011 0011 0011...(0011循环)
1
2

var num = 5.56789;
var n=num.toFixed(2);
1
2

5.57
1

// 解除引用避免内存泄露
function closure(){    
    var div = document.getElementById('div');    
    var test = div.innerHTML;
    div.onclick = function () {
        console.log(test);
    };
    div = null;
}
1
2
3
4
5
6
7
8
9

function Person(param) {
    var name = param.name; // 私有属性
    this.age = 18; // 共有属性

    this.sayName = function () {
        console.log(name);
    }
}

const tom = new Person({name: 'tom'});
tom.age += 1; // 共有属性，外部可以更改
tom.sayName(); // tom
tom.name = 'jerry';// 私有属性，外部不可获取、更改
tom.sayName(); // tom
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 节流
var throttle = function(func, delay){
    var timer = null;

    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                func.apply(context, args);
                timer = null;
            },delay);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 防抖
function debounce(fn, delay){
    // 维护一个 timer
    let timer = null;
    
    return function() {
        // 获取函数的作用域和变量
        let context = this;
        let args = arguments;
        
        clearTimeout(timer);// 清除重新计时
        timer = setTimeout(function(){
            fn.apply(context, args);
        }, delay)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
1
2
3
4
5

// 判断变量否为function
const isFunction = (variable) => typeof variable === 'function'
// 定义Promise的三种状态常量
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  constructor(handler) {
    if (!isFunction(handler)) {
      throw new Error('MyPromise must accept a function as a parameter')
    }
    this._status = PENDING
    this._value = undefined
    this.fulfilledCbs = []
    this.rejectedCbs = []
    try {
      handler(this._resolve.bind(this), this._reject.bind(this))
    } catch (error) {
      this._reject(error)
    }
  }
  //resolve的函数
  _resolve(value) {
    setTimeout(() => {
      if (this._status !== PENDING) return
      this.status = FULFILLED
      this.value = value
      this.fulfilledCbs.forEach((callback) => {
        callback(value)
      })
    }, 0)
  }
  //reject的函数
  _reject(err) {
    if (this._status !== PENDING) return
    setTimeout(() => {
      this._status = REJECTED
      this._value = err
      this.rejectedCbs.forEach((callback) => {
        callback(err)
      })
    }, 0)
  }
  // 添加then方法
  then(onFulfilled, onRejected) {
    const { _value, _status } = this
    // 返回一个新的Promise对象
    return new MyPromise((onFulfilledNext, onRejectedNext) => {
      // 封装一个成功时执行的函数
      let fulfilled = (value) => {
        if (!isFunction(onFulfilled)) {
          onFulfilledNext(value)
        } else {
          let res = onFulfilled(value)
          onFulfilledNext(res)
        }
      }
      // 封装一个失败时执行的函数
      let rejected = (error) => {
        if (!isFunction(onRejected)) {
          onRejectedNext(error)
        } else {
          let res = onRejected(error)
          onFulfilledNext(res)
        }
      }
      switch (_status) {
        // 当状态为pending时，将then方法回调函数加入执行队列等待执行
        case PENDING:
          this.fulfilledCbs.push(fulfilled)
          this.rejectedCbs.push(rejected)
          break
        // 当状态已经改变时，立即执行对应的回调函数
        case FULFILLED:
          fulfilled(_value)
          break
        case REJECTED:
          rejected(_value)
          break
      }
    })
  }
  // 添加catch方法
  catch(onRejected) {
    return this.then(undefined, onRejected)
  }
  
}

const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功啦')
    // reject('失败啦')
  }, 1000)
})
  .then((value) => {
    console.log(value)
  })
  .then((v) => {
    console.log('hahah', v)
  })


//定义状态常量
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

class MyPromise {
  //构造方法
  constructor(handle) {
    this.status = PENDING;
    this.value = undefined;
    // 用于保存 resolve 的回调函数
    this.fulfilledCallbacks = [];
    // 用于保存 reject 的回调函数
    this.rejectedCallbacks = [];
    //执行handle
    try {
      handle(this._resolve.bind(this), this._reject.bind(this));
    } catch (error) {
      this._reject(err);
    }
  }
  //resolve的函数
  _resolve(value) {
    setTimeout(() => {
      if (this.status !== PENDING) return;
      this.status = FULFILLED;
      this.value = value;
      this.fulfilledCallbacks.forEach(callback => {
        callback(value)
      })
    }, 0)
  }

  //reject的函数
  _reject(err) {
    setTimeout(() => {
      if (this.status !== PENDING) return;
      this.status = REJECTED;
      this.value = err;
      this.rejectedCallbacks.forEach(callback => {
        callback(err);
      })
    }, 0);
  }

  // then方法
  then(onFulfilled, onRejected) {
    const { value, status } = this;
    // 返回一个新的Promise对象
    return new MyPromise((onFulfilledNext, onRejectedNext) => {
      switch (status) {
        case PENDING:
          this.fulfilledCallbacks.push(onFulfilled);
          this.rejectedCallbacks.push(onRejected);
          break;
        //状态改变，则立即执行对应的回调函数
        case FULFILLED:
          onFulfilled(value)
          break;
        case REJECTED:
          onRejected(value)
          break;
      }
    })
  }
    
  // 添加catch方法
  // 相当于调用 then 方法, 但只传入 Rejected 状态的回调函数
  catch(onRejected) {
    return this.then(undefined, onRejected)
  }
  // 添加静态resolve方法
  static resolve(value) {
    // 如果参数是MyPromise实例，直接返回这个实例
    if (value instanceof MyPromise) return value
    return new MyPromise(resolve => resolve(value))
  }
  // 添加静态reject方法
  static reject(value) {
    return new MyPromise((resolve, reject) => reject(value))
  }
  // 添加静态all方法
  static all(list) {
    return new MyPromise((resolve, reject) => {
      //返回值的集合
      let values = []
      let count = 0
      //entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
	  //迭代对象中数组的索引值作为 key， 数组元素作为 value。
      for (let [i, p] of list.entries()) {
        // 数组参数如果不是MyPromise实例，先调用MyPromise.resolve
        this.resolve(p).then(res => {
          values[i] = res
          count++
          // 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled
          if (count === list.length) resolve(values)
        }, err => {
          // 有一个被rejected时返回的MyPromise状态就变成rejected
          reject(err)
        })
      }
    })
  }
  // 添加静态race方法
  static race(list) {
    return new MyPromise((resolve, reject) => {
      for (let p of list) {
        // 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
        this.resolve(p).then(res => {
          resolve(res)
        }, err => {
          reject(err)
        })
      }
    })
  }
  
  // finally 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作
  //无论成功失败都执行的函数,其实就是给then方法分别传入这个方法。使用resolve将执行后的函数结果进行包装，调用then方法，该return return 该抛出错误该抛出错误
  finally(cb) {
    return this.then(
      value => MyPromise.resolve(cb()).then(() => value),
      reason => MyPromise.resolve(cb()).then(() => { throw reason })
    );
  }  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230

window.color = 'red'; 
let o = { 
 color: 'blue' 
}; 
function sayColor() { 
 console.log(this.color); // this指向windows
} 
sayColor(); // 'red' 
o.sayColor = sayColor; 
o.sayColor();// 'blue'
1
2
3
4
5
6
7
8
9
10

// 1、
function Pig(){
   this.age=99;
   return 'abc';
}
var pig=new Pig();
console.log(pig) 

// 2、
var a=1;
function printA(){
  console.log(this.a);
}
var obj={
  a:2,
  foo:printA,
  bar:function(){
    printA();
  }
}

obj.foo(); 
obj.bar(); 
var foo=obj.foo;
foo(); 

// 3、
var fullName = 'language'
var obj = {
  fullName: 'javascript',
  prop: {
    getFullName: function () {
      return this.fullName
    }
  }
}
console.log(obj.prop.getFullName())
var test = obj.prop.getFullName
console.log(test())

// 4、
var val = 1
var json = {
  val: 10,
  dbl: function () {
    val *= 2
  },
}
json.dbl()
console.log(json.val + val)

// 5、
var num = 10 
var obj = { num: 20 }
obj.fn = (function (num) {
  this.num = num * 3
  num++
  return function (n) {
    this.num += n 
    num++
    console.log(num) 
  }
})(obj.num)
var fn = obj.fn
fn(5)
obj.fn(10)
console.log(num, obj.num)

// 6、
var obj = {
  _name: 'obj',
  func() {
    const arrowFunc = () => {
      console.log(this._name)
    }
    return arrowFunc
  },
}
obj.func()()
var func = obj.func
func()()
obj.func.bind({ _name: 'newObj' })()()
obj.func.bind()()()
obj.func.bind({ _name: 'bindObj' }).apply({ _name: 'applyObj' })()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

setTimeout(() => {
  console.log('真的在300ms后打印吗？')
}, 300)
1
2
3

var observe = new MutationObserver(function(mutations,observer){
})
1
2

Function.prototype._call = function (context = window, ...args) {
  //创建独一无二属性，以免覆盖原属性
  const key = Symbol();
  context[key] = this;
  //通过隐式绑定的方式调用函数
  const result = context[key](...args);
  //删除添加的属性
  delete context[key];
  //返回函数调用的返回值
  return result;
};
1
2
3
4
5
6
7
8
9
10
11

// 第二个参数是数组
Function.prototype._apply = function (context = window, args = []) {
  const key = Symbol();
  context[key] = this;
  //通过隐式绑定的方式调用函数
  const result = context[key](...args);
  //删除添加的属性
  delete context[key];
  //返回函数调用的返回值
  return result;
};
1
2
3
4
5
6
7
8
9
10
11

Function.prototype._bind = function (context, ...args) {
  const fn = this;
  return function newFn(...newArgs) {
    return fn.apply(context, [...args, ...newArgs])
  }
}
1
2
3
4
5
6

let obj = {
  name: 'chenhuan',
  sayName: function () {
    console.log(this.name)
  },
}

let fn = obj.sayName
fn.bind(obj)()
1
2
3
4
5
6
7
8
9

let obj1 = { person: {name: "kobe", age: 41},sports:'basketball' };
let obj2 = Object.assign({}, obj1);
obj2.person.name = "wade";
obj2.sports = 'football'
console.log(obj1); // { person: { name: 'wade', age: 41 }, sports: 'basketball' }
1
2
3
4
5

JSON.parse(JSON.stringify());


let obj1 = {
  name: 'chenhuan',
  age: 18
}

let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj2);
obj2.name = "liuboyi";
console.log(obj1);
//{name: 'chenhuan', age: 18}
1
2
3
4
5
6
7
8
9
10
11
12
13

//递归实现深拷贝
function cloneDeep(obj) {
  if (typeof obj == 'object') {
    let cloneTarget = Array.isArray(obj) ? [] : {};
    //递归拷贝
    for (let key in obj) {
      cloneTarget[key] = cloneDeep(obj[key]);
    }
    //返回递归拷贝后的结果
    return cloneTarget;
  } else {
    //直接返回cuo
    return obj;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//拍平数组
Array.prototype._flat = function (num = 1) {
  //<=0不展开直接返回
  if (num <= 0) {
    return this;
  }
  let arr = [];
  this.forEach((item) => {
    if (Array.isArray(item)) {
      //展开
      arr = arr.concat(item._flat(num - 1));
    } else {
      arr.push(item);
    }
  })
  num--;
  return arr;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Array.prototype._flat = function (num = 1) {
  if (num <= 0) {
    return this;
  }

  let arr = this;
  let res = arr.reduce((sum, cur) => {
    if (Array.isArray(cur)) {
      sum = sum.concat(cur._flat(num - 1));
    } else {
      sum.push(cur);
    }
    return sum
  }, []);
  num--;
  return res;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const arr = ['red', 'green', 'blue'];
for(let v of arr) {
  console.log(v); // red green blue
}
1
2
3
4

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
1

var p = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log('1000')
      resolve()
    }, 1000)
  })
}
var p1 = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log('2000')
      resolve()
    }, 2000)
  })
}
var p2 = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log('3000')
      resolve()
    }, 3000)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

p().then(() => {
  return p1()
}).then(() => {
  return p2()
}).then(() => {
  console.log('end')
})
1
2
3
4
5
6
7

var fn=async function(arr){
    for(let i=0,len=arr.length;i

• 1
• 2
• 3
• 4
• 5
• 6
• 7

封装一个异步类，实现只能有两个Promise在执行，该如何实现？/限制promise的并发数/ JS 请求调度器

思路

1. 类中有max、count、一个quene队列保存超出数量限制待执行的任务

2. 一个addTask方法用来添加任务，该方法返回一个Promise，为了让外面感知，该任务什么时候执行完毕。addTask中获取一个待执行任务的函数，并判断count是否少于max，少于则执行，不少于则放入等待队列。

3. 一个getTask方法用来返回待执行任务的函数，在函数中执行数量+1，随后执行任务，使用finally方法，无论成功失败，执行完后count-1，此时腾出位置，判断等待队列是否有任务，若有任务，则取出执行，并在finally执行完毕之后

   class limitRun {
   constructor(maxNum) {
   this.max = maxNum
   this.count = 0
   this.quene = []
   }
   //添加任务
   addTask(p, …args) {
   // 为什么return Promise 为了让外面感知 这个任务什么时候能执行完毕
   return new Promise((resolve, reject) => {
   //获取待执行任务
   let task = this.getTask(p, args, resolve, reject)
   if (this.count < this.max) {
   console.log(‘run’)
   task()
   } else {
   console.log(‘wait’)
   this.quene.push(task)
   }
   })
   }
   //获取待执行任务的函数 返回一个函数
   getTask(p, args, resolve, reject) {
   return () => {
   //执行数量+1
   this.count++
   p(…args)
   .then(resolve)
   .catch(reject)
   .finally(() => {
   //无论执行成功或失败，执行完毕-1
   this.count–
   // 空位置腾出 如果有排队 重新拿出任务执行
   if (this.quene.length) {
   console.log(‘get from quene’)
   let task = this.quene.shift()
   task()
   }
   })
   }
   }
   }

   let limit = new limitRun(3)

   let p = function (delay) {
   return new Promise((resolve, reject) => {
   setTimeout(() => {
   console.log(delay)
   resolve()
   }, delay)
   })
   }

   for (let i = 1; i <= 5; i++) {
   limit.addTask(p, i * 1000).then(() => {
   console.log(第${i}个任务执行完毕)
   })
   }

最后输出：
run
run
run
wait
wait
1000
第1个任务执行完毕
get from quene
2000
第2个任务执行完毕
get from quene
3000
第3个任务执行完毕
4000
第4个任务执行完毕
5000
第5个任务执行完毕

不用循环，实现abc *5的字符串的一个连接。

function strn(str, n) {
  return str.repeat(n);
}

console.log(strn("abc", 5));//abcabcabcabcabc
1
2
3
4
5

说一下Array的内置的API

增删 push pop shift unshift splice

查找 indexOf lastIndexOf includes find findIndex some every

拷贝 / 连接 concat slice

筛选 /遍历 filter map reduce forEach

其他 join reverse fill Array.isArray Array.from

concat() 连接两个或更多的数组，并返回结果。

copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。

语法

array.copyWithin(target, start, end)
1

参数

参数

描述

target

必需。复制到指定目标索引位置。

start

可选。元素复制的起始位置。

end

可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

实例
复制数组的前面两个元素到后面两个元素上：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
fruits 输出结果：
Banana,Orange,Banana,Orange
1
2
3
4
5
6

entries() 返回数组的可迭代对象。

every() 检测数值元素的每个元素是否都符合条件。

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

• 如果所有元素都满足条件，则返回 true。

  array.every(function(currentValue,index,arr), thisValue)

参数

描述

thisValue

可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”

fill() 使用一个固定值来填充数组。

filter() 检测数值元素，并返回符合条件所有元素的数组。

find() 返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。

• 如果没有符合条件的元素返回 undefined

  array.find(function(currentValue, index, arr),thisValue)

findIndex() 返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 -1

forEach() 数组每个元素都执行一次回调函数。

from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

//类数组对象转换为数组：
let obj = {
  0: 'ch',
  1: 'en',
  2: 'sex',
  'length': 3
}

let arr1 = Array.from(obj);
console.log(arr1);//[ 'ch', 'en', 'sex' ]

//将Set结构的数据转换为真正的数组：
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set))  // [ 12, 45, 97, 9797, 564, 134, 45642 ]

//将字符串转换为数组：
let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

一个类数组对象转换为一个真正的数组，必须具备以下条件：

1、该类数组对象必须具有 length 属性，用于指定数组的长度。如果没有 length 属性，那么转换后的数组是一个空数组。

2、该类数组对象的属性名必须为数值型或字符串型的数字

indexOf() 搜索元素在数组的位置，从前往后查找，返回它所在的位置，没找到返回-1。接收两个参数：查找元素、开始查找位置。

lastIndexOf() 搜索元素在数组的位置，从后往前找，返回它所在的位置，没找到返回-1。接收两个参数：查找元素、开始查找位置。

includes() 判断一个数组是否包含一个指定的值。如果是返回 true，否则false。接收两个参数：查找元素、开始查找位置。

isArray() 判断对象是否为数组。

join() 把数组的所有元素放入一个字符串。

map() 通过指定函数处理数组的每个元素，并返回处理后的数组。

pop() 删除数组的最后一个元素并返回删除的元素。

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

reduce() 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
1

参数

参数

描述

function(total,currentValue, index,arr)

必需。用于执行每个数组元素的函数。 total：必须，初始值，或者计算结束后的返回值。currentValue：必需，当前元素。currentIndex：可选，当前元素的索引。arr：可选，当前元素所属的数组对象。

initialValue

可选。传递给函数的初始值

reduceRight() 和reduce()功能一样，只不过是从右往左。

reverse() 反转数组的元素顺序。

shift() 删除并返回数组的第一个元素。

slice(start,[end]) 选取数组的一部分，并返回一个新数组。

some() 检测数组元素中是否有元素符合指定条件。

• 如果有一个元素满足条件，则表达式返回_true_ , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

sort() 对数组的元素进行排序。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

splice(index,deletenum,additem1,additem2…) 从数组中添加或删除元素。

toString() 把数组转换为字符串，并返回结果，数组中的元素之间用逗号分隔。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

valueOf() 返回数组对象的原始值。

说一下字符串的内置的API

记忆顺序：
查找、转换、拷贝/连接、填充、匹配。其他。
1
2

查找 indexOf lastIndexOf charAt includes

转换 toLowerCase toUpperCase

拷贝 / 连接 concat slice substr substring repeat

填充 padStart(len,str) padEnd(len,str)

其他 split trim

匹配 match search replace

1、查找

str.charAt(index) 获取指定位置的字符

indexOf() 返回某个指定的字符串值在字符串中首次出现的位置

lastIndexOf() 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置

includes() 查找字符串中是否包含指定的子字符串。

startsWith(x,[startindex])以x字符串开头，true/false。第二个参数为开始搜索位置。

endsWith(x,[endindex])以x字符串结尾,true/false。第二个参数表示字符串末尾位置。

2、转换

str.toLowerCase() 所有字符都转成小写

str.toUpperCase() 所有的字符都转成大写

3.字符串连接与截取

concat() 连接两个或更多字符串，并返回新的字符串。

slice(start,end) 提取字符串的片断，并在新的字符串中返回被提取的部分。 可以为负的整数

substr() 从起始索引号提取字符串中指定数目的字符。 非负的整数

substring() 提取字符串中两个指定的索引号之间的字符。 非负的整数

repeat() 复制字符串指定次数，并将它们连接在一起返回。

4、字符串填充

padStart(len,str)复制字符串，小于指定长度，在左边填充字符，直至长度满足，两个参数：长度、填充字符串（默认空格,可多个字符）。

padEnd(len,str)在右边填充

let stringValue = "foo"; 
console.log(stringValue.padStart(6)); // " foo" 
console.log(stringValue.padStart(9, ".")); // "......foo" 
console.log(stringValue.padEnd(6)); // "foo " 
console.log(stringValue.padEnd(9, ".")); // "foo......"

console.log(stringValue.padStart(8, "bar")); // "barbafoo" 
console.log(stringValue.padStart(2)); // "foo"
1
2
3
4
5
6
7
8

5、字符串分割

split() 把字符串分割为字符串数组，接受两个参数，第一个为分隔符/正则，第二个为数组大小。

let colorText = "red,blue,green,yellow"; 
let colors1 = colorText.split(","); // ["red", "blue", "green", "yellow"] 
let colors2 = colorText.split(",", 2); // ["red", "blue"] 
let colors3 = colorText.split(/[^,]+/); // ["", ",", ",", ",", ""]
1
2
3
4

6、其他

trim() 去除字符串前后的空白

valueOf() 返回某个字符串对象的原始值（基本数据类型，如果没有，返回对象本身）。

7、字符串模式匹配

search() 查找与正则表达式相匹配的值，返回第一个匹配的位置索引，没找到返回-1。

match() 查找找到一个或多个正则表达式的匹配，将会把所有的匹配打包成一个数组返回。

replace(字符串/RegExp对象，字符串或函数)

let text = "cat, bat, sat, fat"; 
let result = text.replace("at", "ond"); 
console.log(result); // "cond, bat, sat, fat" 
result = text.replace(/at/g, "ond"); 
console.log(result); // "cond, bond, sond, fond"
1
2
3
4
5

• 第二个参数是字符串的情况下，有几个特殊的字符序列，可以用来插入正则表达式操作的值。

  $n 匹配第 n 个捕获组的字符串。

  let text = "cat, bat, sat, fat"; 
  result = text.replace(/(.at)/g, "word ($1)"); 
  console.log(result); // word (cat), word (bat), word (sat), word (fat)
  1
  2
  3

• replace()的第二个参数可以是一个函数。在只有一个匹配项时，这个函数会收到 3 个参数：与整个模式匹配的字符串、匹配项在字符串中的开始位置，以及整个字符串。在有多个捕获组的情况下，每个匹配捕获组的字符串也会作为参数传给这个函数，但最后两个参数还是与整个模式匹配的开始位置和原始字符串。这个函数应该返回一个字符串，表示应该把匹配项替换成什么。使用函数作为第二个参数可以更细致地控制替换过程

  function htmlEscape(text) { 
       return text.replace(/[<>"&]/g, function(match, pos, originalText) { 
           switch(match) { 
               case "<": 
               	return "<"; 
           	case ">": 
           		return ">"; 
          	 case "&": 
           		return "&"; 
          	 case """: 
          		 return """; 
           } 
       }); 
  } 
  console.log(htmlEscape("
  Hello world!
  ")); 
  // "<p class="greeting">Hello world!
  "
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

8、字符串迭代和解构

[…str]会变成元素为单个字符的数组

事件流

事件流一共由三个阶段分别是：1.捕获阶段 2.目标阶段 3.冒泡阶段

介绍一下事件冒泡和捕获

事件冒泡是指，事件会从最内层的元素开始发生，一直向上传播，直到document对象。

不支持冒泡的事件：blur、focus、mouseenter、mouseleave
1

而事件捕获与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

在进行项目开发的时候，我们可以自行选择事件处理函数在哪一个阶段被调用。addEventListener方法用来素绑定事件处理的函数，它的第三个参数允许我们设置为捕获阶段(true)或冒泡阶段(false)触发，默认冒泡。

事件冒泡和事件捕获过程图：

1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段；

• 如何阻止冒泡

事件代理/委托

事件代理是将事件监听函数加到父元素上，利用事件冒泡来处理多个子元素相同事件的方式。

因为在事件冒泡中，子元素的事件触发会冒泡到父元素中，触发父元素相同的事件。所以我们只需给父元素添加事件监听即可。

如果我们不使用事件代理，那需要遍历父元素下的子元素，挨个进行事件监听。当元素量很大的时候，会影响页面性能。

事件代理/委托有什么作用，主要用于哪些场景

作用：不用给多个子元素添加事件监听函数，只给父元素添加。

应用场景：

• 当要给一组子元素添加相同事件时，可以直接添加给父元素。

最经典的应用就是，一个列表会不断有新的数据的添加，如果每添加一个数据就生成一个li，就需要添加一个新的监听，代码结构就特别不好，这时候使用事件代理就很方便。

如何阻止冒泡

• 给子级加 event.stopPropagation( )/IE8以下 cancelBubble

• 在事件处理函数中返回 false

如何阻止默认事件

• event.preventDefault( )

• return false

触发事件的方法

如果我们是使用on+type的方法添加的事件监听，可以直接使用xx.click()触发。

如果是addEventListener，我们可以使用new Event创建一个事件对象，参数为要触发的事件，然后使用触发对象.dispatchEvent(事件对象)触发。

let event = new Event("click");
elem.dispatchEvent(event);
1
2

说一下鼠标事件和键盘事件有哪些？

鼠标事件
click
dbllick
mousedown
mouseup
mousemove
mouseenter
mouseleave
mouseover
mouseout

键盘事件
keydown
keyup
keypress

对作用域的理解

作用域包括全局作用域、函数作用域、块级作用域。

全局作用域中创建的变量，在任意地方都可以访问。

函数作用域中的变量，只有在函数内部才能访问。

块级作用域中的变量，只能在当前块中进行访问

对作用域链的理解（变量的一个搜索过程）

所谓作用域链，其实就是我们在某个作用域中获取某个变量的值，如果在该函数中没有该变量的定义，则会到创建这个函数的那个域寻找，如果也没有，就会一层一层的向上寻找，直到找到全局作用域还是没有找到，就结束。

这个一层层搜索的过程就是作用域链。

js怎么实现继承，优缺点

一、原型链继承

将父类的实例作为子类的原型，这样根据原型链，子类就可以访问到父类的属性和方法。

function Parent() {
   this.isShow = true
   this.info = {
       name: "yhd",
       age: 18,
   };
}

Parent.prototype.getInfo = function() {
   console.log(this.info);
   console.log(this.isShow); // true
}

function Child() {};
Child.prototype = new Parent();

let Child1 = new Child();
Child1.info.gender = "男";
Child1.getInfo();  // {name: "yhd", age: 18, gender: "男"}

let child2 = new Child();
child2.getInfo();  // {name: "yhd", age: 18, gender: "男"}
child2.isShow = false

console.log(child2.isShow); // false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

优点：

1、父类方法可以复用

缺点：

1. 父类的所有引用属性（info）会被所有子类共享，更改一个子类的引用属性，其他子类也会受影响
2. 子类型实例不能给父类型构造函数传参

二、构造函数继承

通过使用call()或apply()方法，Parent构造函数在为Child的实例创建的新对象的上下文执行了，就相当于新的Child实例对象上运行了Parent()函数中的所有初始化代码，结果就是每个实例都有自己的info属性。

function Parent() {
  this.info = {
    name: "yhd",
    age: 19,
  }
}

function Child() {
    Parent.call(this)
}

let child1 = new Child();
child1.info.gender = "男";
console.log(child1.info); // {name: "yhd", age: 19, gender: "男"};

let child2 = new Child();
console.log(child2.info); // {name: "yhd", age: 19}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相比于原型链继承，构造函数继承可以给父类构造函数传参。

function Parent(name) {
    this.info = { name: name };
}
function Child(name) {
    //继承自Parent，并传参
    Parent.call(this, name);
    
     //实例属性
    this.age = 18
}

let child1 = new Child("yhd");
console.log(child1.info.name); // "yhd"
console.log(child1.age); // 18

let child2 = new Child("wxb");
console.log(child2.info.name); // "wxb"
console.log(child2.age); // 18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

优点:

1. 可以在子类构造函数中向父类传参数
2. 父类的引用属性不会被共享

缺点：

1. 子类不能访问父类原型上的方法（即不能访问Parent.prototype上定义的方法），因此所有方法属性都写在构造函数中，每次创建实例都会初始化

三、组合继承

组合继承综合了原型链继承和构造函数继承，将两者的优点结合了起来。

基本的思路就是使用原型链继承原型上的属性和方法，而通过构造函数继承实例属性，这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性

function Parent(name) {
   this.name = name
   this.colors = ["red", "blue", "yellow"]
}
Parent.prototype.sayName = function () {
   console.log(this.name);
}

function Child(name, age) {
   // 继承父类属性
   Parent.call(this, name)
   this.age = age;
}
// 继承父类方法
Child.prototype = new Parent();

Child.prototype.sayAge = function () {
   console.log(this.age);
}

let child1 = new Child("yhd", 19);
child1.colors.push("pink");
console.log(child1.colors); // ["red", "blue", "yellow", "pink"]
child1.sayAge(); // 19
child1.sayName(); // "yhd"

let child2 = new Child("wxb", 30);
console.log(child2.colors);  // ["red", "blue", "yellow"]
child2.sayAge(); // 30
child2.sayName(); // "wxb"

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

优点：

1. 父类的方法可以复用
2. 可以在Child构造函数中向Parent构造函数中传参
3. 父类构造函数中的引用属性不会被共享

四、原型式继承

一个对象作为创建对象的原型

function object(o) {
  // 创建临时类
  function f() { };
  // 修改类的原型为o, 于是f的实例都将继承o上的方法
  f.prototype = o;
  return new f();
}

let o = {
  name: 'sss',
  friends: ["1", "2", "3"]
}
let a = new object(o);
a.name = "Gss";
a.friends.push("Lihua");

let b = new object(o);
b.name = "SKK";
b.friends.push("HAH");

console.log(o.friends);//[ '1', '2', '3', 'Lihua', 'HAH' ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

缺点：

• 原型链继承多个实例的引用类型属性指向相同，存在篡改的可能。
• 无法传递参数

五、寄生式继承

通过原型式继承的方法创建一个实例，然后为这个实例添加属性和方法，最后返回这个实例。

function createObject(o) {
  let myobj = Object.create(o);
  myobj.sayname = function () {
    console.log(this.name);
  }
  return myobj;
}

let obj = {
  name: '123',
  friends: [1, 2, 3],
  say: function () {
    console.log('hi');
  }
}

let a = createObject(obj);
a.name = 'xixi';
a.friends.push(4);

let b = createObject(obj);
b.name = 'lala';
b.friends.push(5);

b.sayname()//lala
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

五、寄生组合继承

寄生组合式继承在吸取了组合式继承的优点上，避免了在子函数的原型上面创建不必要的、多余的属性

function inherit(child, parent) {
  let prototype = Object.create(parent.prototype); // 创建父类原型对象
  prototype.constructor = child; // 增强对象 
  child.prototype = prototype; // 赋值父类原型对象给子类原型
}

function Father(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
Father.prototype.sayName = function () {
  console.log(this.name);
};
function Child(name, age) {
  Father.call(this, name);
  this.age = age;
}
inherit(Child, Father);
Child.prototype.sayAge = function () {
  console.log(this.age);
};

let s = new Child('ch', 19);
s.sayName()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

六、extends

写代码，输出0-4，每隔一秒输一个

ES6

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i)
  }, 1000 * i)
}
1
2
3
4
5

ES5

// 形成闭包
for (var i = 0; i < 5; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(i)
    }, 1000 * i)
  })(i)
}
1
2
3
4
5
6
7
8

aysnc

let sayNum = function (n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(n);
      resolve();
    }, 1000);
  })
}

async function run() {
  for (let i = 0; i < 5; i++) {
    await sayNum(i);
  }
}

run()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

手写数组的map函数

Array.prototype.myMap = function(callback, context) {
    var arr = this;
    var res = [];
    context = context ? context : window;
    for(let i = 0; i < arr.length; i++) {
        let tem = callback.call(context, arr[i], i, arr);
        res.push(tem); 
    }
    return res;
}



//map是一个函数，接受一个函数作为参数，这个函数又接受一个item index arr
Array.prototype._map = function (fn, context) {
  const res = []
  for (let i = 0; i < this.length; i++) {
    //对每一个执行fn函数后 返回fn的返回值
    res.push(fn.call(context, this[i], i, this))
  }
  return res
}

let arr = [1, 2, 3]
console.log(arr._map((item) => item * 2)) //[ 2, 4, 6 ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

手写数组的reduce函数

//reduce
Array.prototype._reduce = function (fn) {
  //如果没有提供sum，将第一个元素作为sum
  const arr = this;
  let res;
  if (arguments.length < 2 && arr.length == 1) return arr[0];
  if (arguments.length > 1) res = arguments[1];
  else res = arr.shift();
  //累加
  for (let i = 0; i < arr.length; i++) {
    res = fn(res, arr[i], i, arr);
  }
  return res;
}


Array.prototype._reduce = function (fn, initValue) {
  //累加器
  let sum = initValue
  if (!initValue) sum = this.shift()
  //累加
  for (let i = 0; i < this.length; i++) {
    sum = fn(sum, this[i], i, arr)
  }
  return sum
}
let arr = [1, 2, 3]
console.log(
  arr._reduce((sum, item, index, arr) => {
    return sum + item
  })
)
//6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

js是单线程的，为什么js能有异步任务？

JS是单线程的，但是浏览器是多线程的，js运行通常是在浏览器中进行的，像定时器、事件监听都是交给WebAPI处理，有结果后将回调函数放入任务队列等待js去取。

而一个浏览器通常由以下几个常驻的线程：

• 渲染引擎线程：该线程负责页面的渲染
• JS引擎线程：负责JS的解析和执行
• 定时触发器线程：处理定时事件，比如setTimeout, setInterval
• 事件触发线程：处理DOM事件
• 异步http请求线程：处理http请求

虽然JavaScript是单线程的，可是浏览器内部不是单线程的。一些I/O操作、定时器的计时和事件监听（click, keydown…）等都是由浏览器提供的其他线程来完成的。

如何查找一个对象数组

使用find

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 undefined

使用filter

Promise解决了什么问题？存在什么问题和优化？是最终解决方案吗？

解决了回调地域的问题。

问题：

1、Promise内部产生的错误或异常，如果我们不加catch方法，那么这些错误就会被吞掉，后期就不好调试。

2、Promise可以链式调用，是符合我们思考逻辑的，但是脑子还是得额外处理then，处理还是没有完全同步化，目前最优的方法是使用async函数。

async函数

async 函数是 Generator 函数的语法糖，async不再需要执行器，执行async函数，就会自动执行函数内部的逻辑。await后面既可以是promise也可以是任意类型的值，此时等同于同步操作。

async 函数的返回值是 Promise 对象，可以使用then方法添加回调函数

async 和 await原理。

async 函数本质上是generator函数的语法糖，内部有自动的执行器，不用我们手动执行next方法。

假设async函数是个方法，await 类比于 yield，设计思路：

1、async函数接受一个generator函数作为参数，返回一个函数，函数内部生成生成器，返回Promise

2、在 Promise 中有个自动执行的方法 step，step方法负责执行生成器，根据获取到的结果中的done，判断是否执行完成，执行完成，resolve修改Promise状态；没有完成，则等待当前的value执行完成，即Promise改变状态后，再执行step进行自动执行。

3、执行Step

const asyncToGenerator = (generator) => {
  return function () {
    let gen = generator.apply(this, arguments)

    return new Promise((resolve, reject) => {
      function step(key, arg) {
        let result

        try {
          result = gen[key](arg)
        } catch (error) {
          reject(error)
        }

        const { value, done } = result

        if (done) {
          return resolve(value)
        } else {
          //等待value执行完毕
          return Promise.resolve(value).then(
            (v) => {
              step('next', v)
            },
            (e) => {
              step('throw', e)
            }
          )
        }
      }

      step('next')
    })
  }
}

//测试
const getData = () =>
  new Promise((resolve) => setTimeout(() => resolve('data'), 1000))

//async函数调用
async function test() {
  const data = await getData()
  console.log('data: ', data)
  const data2 = await getData()
  console.log('data2: ', data2)
  return 'success'
}

test().then((res) => console.log(res))

//使用我们的generator创建的async函数调用
const test = asyncToGenerator(function* testG() {
  const data = yield getData()
  console.log('data: ', data)
  const data2 = yield getData()
  console.log('data2: ', data2)
  return 'success'
})
test().then((res) => console.log(res))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

Promise,async awit的区别

都是用来解决异步编程的方法，Promise是使用链式调用，而aysnc更为简洁。

Typescript 和 JavaScript的区别是什么

1、Javascript是一个弱类型语言，Typescript他是提供了类型系统，会进行静态检查，如果发现有错误，编译的时候就会报错。

2、TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。

require 和 import 引入依赖的区别

• require 全部引入，Import可以部分引入
• require将文件拷贝过来，Import引用定义
• require运行时加载，import编译时加载

函数柯里化

函数柯里化是指将一次性接受参数的函数变为可以多次接受参数，也就是内部返回接收参数的函数。

用处：
参数复用：公共的参数已经通过柯里化预置了。
例如，我们在一个页面即要校验多个邮箱，又要校验多个手机号码，这时候我们封装了一个校验的方法，接受正则表达式和字符串，我们需要校验多个的时候，需要重复的传入正则表达式，很冗余。
那么这个时候我们就可以通过柯里化，将公共的参数 正则表达式预置了，调用柯里化函数进行校验。

通用柯里化

注：

函数名.length表示的是函数定义的参数的个数。

arguments.length指的是外部调用时传入的形参的个数

//...args 预置公共参数
var curry = function (fn, ...args) {
  return _curry.call(this, fn, fn.length, ...args)
}

function _curry(fn, len, ...args) {
  return function (...params) {
    let allArgs = [...args, ...params]
    if (allArgs.length >= len) {
      return fn.apply(this, allArgs)
    } else {
      return _curry.call(this, fn, len, ...allArgs)
    }
  }
}

//test1
function isNum(reg, str) {
  return reg.test(str)
}

const checkNum = /^[d]{3}$/
const curryNum = curry(isNum, checkNum)

console.log(curryNum('123'))
console.log(curryNum('123s'))
console.log(curryNum('1s23'))
console.log(curryNum('3'))

//test2
var multify = function (a, b, c) {
  return a * b * c;
}
var multi = curry(multify);
console.log(multi(1)(2, 3));//6



//固定长度
function Curry(fn, ...args) {
  let len = fn.length
  //该函数返回一个新函数接受参数
  function _curry(fn, len, ...fnargs) {
    return function (...newargs) {
      let allargs = [...fnargs, ...newargs]
      if (allargs.length === len) {
        //执行
        return fn.apply(this, allargs)
      } else {
        //返回新函数 接受参数
        return _curry.call(this, fn, len, ...allargs)
      }
    }
  }
  return _curry.call(this, fn, len, ...args)
}

let multify = function (a, b, c) {
  return a * b * c
}
let mul = Curry(multify)
console.log(mul(2)(3)(4))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

**缺点：**需要提前知道参数长度

如果要实现一个加法函数，但是不知道传进来的参数有多少，你会怎么做？

使用函数柯里化

function addCurry(...args) {
  let fn = function (...params) {
    let fnArgs = [...args, ...params]
    return addCurry.apply(this, fnArgs)
  }
  fn.toString = function () {
    return args.reduce((sum, num) => {
      return (sum += num)
    })
  }
  return fn
}

console.log(addCurry(1)(2)(3)(4)(5, 5).toString())
1
2
3
4
5
6
7
8
9
10
11
12
13
14

正则表达式

实现一个红绿灯系统，红色2s，黄灯1s，绿灯3s，promise，循环

function red() {
  console.log('red');
}

function green() {
  console.log('green');
}

function yellow() {
  console.log('yellow');
}

var createLight = function (fn, time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      fn();
      resolve();
    }, time);
  })
}

const run = function () {
  Promise.resolve().then(() => {
    return createLight(red, 2000);
  }).then(() => {
    return createLight(yellow, 1000);
  }).then(() => {
    return createLight(green, 3000);
  }).then(() => {
    return run();
  })
}
run()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

数组去重的方法

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

针对以上Arr去重
1、new Set()

console.log(Array.from(new Set(arr)))
1

2、使用sort排序后，遍历一遍，与前一元素相同则删除

function unique(arr) {
  arr.sort((a, b) => a - b)
  for (let i = 0; i < arr.length; i++) {
    if (i && arr[i] === arr[i - 1]) {
      arr.splice(i, 1)
      i--
    }
  }
  return arr
}

console.log(unique(arr))
1
2
3
4
5
6
7
8
9
10
11
12

3、2层for循环，splice删除元素

function unique(arr) {
  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)
	//为什么要-1 因为删除元素后，下一个要拿取的元素就到了当前位置，如果不-1就会跳过。
        j--
      }
    }
  }
  return arr
}

console.log(unique(arr))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4、创建临时空间，使用indexOf去重

function unique(arr) {
  const res = []
  for (let i = 0; i < arr.length; i++) {
    if (res.indexOf(arr[i]) === -1) {
      res.push(arr[i])
    }
  }
  return res
}

console.log(unique(arr))
1
2
3
4
5
6
7
8
9
10
11

5、创建临时空间，使用includes去重
6、使用map去重

let map = new Map()
for (let i = 0; i < arr.length; i++) {
  if (!map.has(arr[i])) {
    map.set(arr[i], 1)
  }
}
console.log(Array.from(map).map((item) => item[0]))
1
2
3
4
5
6
7

BOM 和 DOM的区别

• DOM是文档对象模型，BOM是浏览器对象模型。

• DOM是将页面抽象成了节点，节点组成DOM树。

• BOM提供的API，用于支持访问和操作浏览器的窗口。

引入脚本的方式有哪些

1、行内脚本

2、内部js脚本，可以写async或defer属性。

3、外部脚本，引入脚本文件。

4、动态加载脚本

DOMcontentload 和 load的区别

• DomcontentLoad：HTML文档加载完毕后，不等待其他资源加载，触发。
• Load：所有资源加载完毕后触发。

介绍一下懒加载和预加载。图片懒加载和图片预加载的区别？分别在什么场景下使用？

图片懒加载

核心逻辑：判断当前图片是否到了可视区域。

let imgs = document.querySelectorAll('img[data-src][lazyload]')
let viewHeght = document.documentElement.clientHeight

function LazyLoad() {
  //遍历图片
  for (let img of imgs) {
    //判断是否在可视区
    let imgRect = img.getBoundingClientRect()
    if (imgRect.bottom > 0 ** imgRect.top < viewHeght) {
      let image = new Image()
      image.onload = function () {
        img.src = img.dataset['src']
        img.removeAttribute('data-src')
        img.removeAttribute('lazyload')
      }
    }
  }
}

LazyLoad()

window.addEventListener('scroll', LazyLoad)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

图片预加载

采用异步的方式的方式加载图片，在后面偷偷加载。

• 为什么使用懒加载
• 懒加载的原理
• 为什么使用预加载
• 实现预加载的方法
• 预加载的应用场景
• 预加载器的原理

为什么使用懒加载

1、优化用户体验，如果页面上所有图片都要加载并且数量很大，就需要等待很久，对用户体验不好。

2、减少服务器的压力。

3、防止并发加载图片资源阻塞js的加载。

懒加载的原理

核心逻辑：判断当前图片是否到了可视区域。

1、页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-src属性中

2、页面滚动，需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域

3、如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

    
    
    


  
  
  
  
  
  
  
  
  
  
  
  
  
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

如何判断元素是否进入可视区域

1、监听父级对象的scroll事件，触发图片load

2、通过getBoundingClientRect() 或者Intersection Observer 新API判断元素的可见性。

为什么使用预加载

在页面全部加载完毕之前，对一些主要内容进行加载，先让用户看到，减少用户的等待时间。

有一些资源我们希望浏览器能尽早发现，防止重新渲染。

实现预加载的方法

link标签的prefetch和preload。

prefetch ：利用浏览器空闲时间来下载未来可能访问的资源。（只获取不处理）

preload ：下载未来一定需要的访问的资源。（获取后放到内存中，遇到就执行）

预加载的应用场景

字体提前加载。提升视觉稳定性，尽可能避免字体闪烁。

1

JS垃圾回收机制说一下

JS的垃圾回收机制是，垃圾回收程序会定期找出那些不再继续使用的变量，然后释放其内存。

垃圾回收实现方式主要有两种，标记清除和引用计数。

标记清除：

垃圾回收程序运行的时候，会标记内存中存储的所有变量。然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉。在此之后再被加上标记的变量就是待删除的了，随后垃圾回收程序做一次内存清理，销毁带标记的所有值并收回它们的内存。

引用计数：

引用计数是指每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾回收器下次再运行时，它就会释放那些引用次数为0的值所占用的内存。

如果页面卡顿，你觉得可能是什么原因造成的？有什么办法锁定原因并解决吗？

1、network看请求时间，是不是返数据太慢。（文件体积大，bundle拆分）

2、使用Performance拍照，查看是哪个方法时间长，导致了什么问题

请描述一下 cookies，sessionStorage 和 localStorage 的区别

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。

cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据。

localStorage 、sessionStorage 是 html5 提供的浏览器本地存储的方法，均能存储5M左右数据。

• localStorage：除非手动删除，否则不会失效。
• sessionStorage：关闭当前窗口则失效。

详细的资料可以参考： 《请描述一下 cookies，sessionStorage 和 localStorage 的区别？》 [《浏览器数据库 IndexedDB 入门教程》](

介绍一下你了解的设计模式

单例模式、策略模式、代理模式、发布-订阅模式、观察者模式

单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点。

应用场景：Vuex中的Store、 Mobx的Store

以Mobx为例，我们一般会抽象出一个功能的Store，这个Store在全局Store里实例化，并只能通过全局Store的stores进行访问。

策略模式

不同的参数命中不同的策略。

场景：比如一个结算系统，有A、B、C三类用户，不同用户的折扣不一样，这时候，我们可以使用策略模式来获取用户的优惠后金额。

Demo：获取年终奖。

const strategy = {
  'S': function(salary) {
    return salary * 4
  },
  'A': function(salary) {
    return salary * 3
  },
  'B': function(salary) {
    return salary * 2
  }
}

const calculateBonus = function(level, salary) {
  return strategy[level](salary)
}

calculateBonus('A', 10000) // 30000
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

代理模式

为一个对象提供一个占位符，方便控制。

场景：图片预加载，先通过一张loading图占位，然后通过异步的方式加载图片，等图片onload加载好后，再把完成的图片加载到img标签里面。

const myImage = (function() {
  const imgNode = document.createElement('img')
  document.body.appendChild(imgNode)
  return {
    setSrc: function(src) {
      imgNode.src = src
    }
  }
})()

const proxyImage = (function() {
  const img = new Image()
  img.onload = function() { // http 图片加载完毕后才会执行
    myImage.setSrc(this.src)
  }
  return {
    setSrc: function(src) {
      myImage.setSrc('loading.jpg') // 本地 loading 图片
      img.src = src
    }
  }
})()

proxyImage.setSrc('http://loaded.jpg')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• 图片懒加载原理

观察者模式

定义对象间的一对多的依赖关系，一个对象维持一系列依赖于它的Observer对象，当状态发生变更时，通知一系列 Observer 对象进行更新。

/**
 * describe: 实现一个观察者模式
 */
let data = {
    hero: '凤凰',
};
//用来储存 订阅者 的数组
let subscribers = [];
//订阅 添加订阅者 方法
const addSubscriber = function(fn) {
    subscribers.push(fn)
}
//发布
const deliver = function(name) {
    data.hero = name;
    //当数据发生改变，调用（通知）所有方法（订阅者）
    for(let i = 0; i {
    console.log(data.hero)
})
//改变data，就会自动打印名称
deliver('发条') 
deliver('狐狸')
deliver('卡牌')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

发布-订阅模式

发布-订阅模式是指：

发布对象通过发布主题事件通知订阅该主题的对象。

订阅对象通过自定义事件订阅多个主题

例子：Event Bus就是采用的发布订阅模式实现的。

页面性能优化

1、代码压缩层面
2、关键资源
3、浏览器缓存
4、CDN
5、图片优化
6、防抖节流
7、减少回流与重绘
1
2
3
4
5
6
7

1、代码压缩：css、js代码代码压缩

2、Gzip压缩/Br压缩

3、推迟非关键资源的加载：异步加载的三种方式——async和defer、动态脚本创建

• async属性

  • 在script上边使用async属性，会异步执行引入的JavaScript。
  • 如果是多个脚本，该方法不能保证脚本按顺序执行。

• defer属性

  • 在script上边使用defer属性，会延迟执行引入的JavaScript。
  • 若果是多个脚本，可以确保设置defer属性的脚本按顺序执行。

• 动态创建script标签

  • window.onload方法确保页面加载完毕再将script标签插入到DOM中

4、利用浏览器缓存，减少服务器压力。

5、使用CDN

6、图片优化：懒加载、预加载。

7、针对一些行为进行节流和防抖，防止频繁向服务器发请求。

8、减少回流和重绘。

9、路由懒加载

• async 和 defer 的作用是什么？有什么区别？
• 介绍一下浏览器缓存
• 强缓存是如何实现的
• 协商缓存是如何实现的
• 介绍一下CDN及其基本原理
• 介绍一下CDN回源策略
• 介绍一下节流和防抖
• 介绍一下懒加载的原理
• 介绍一下预加载的原理
• 介绍一下回流和重绘
• 如何减少回流和重绘

首屏渲染优化方式

1、推迟非关键资源的加载：异步加载的三种方式——async和defer、动态脚本创建

2、路由懒加载

3、CDN

4、压缩

5、浏览器缓存

介绍一下预加载的原理

先通过一张loading图占位，然后通过异步的方式加载图片，等图片onload加载好后，再把完成的图片加载到img标签里面。

实现div拖动效果

div {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    margin: auto;
}




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

js和其他语言的区别

1. JS 是弱类型语言，其他语言基本是强类型语言
2. JavaScript 对象是基于原型的，其他语言基本是基于类的
3. JS是单线程的，其他语言基本上是多线程的。

为什么 Js 要设计成弱类型语言

优点：使用简单、灵活，可以专注于逻辑，更少的关心语法。

缺点：没有类型检查，容易出错，不好排查。

为什么js是单线程但是有settimout

js是单线程的，但是浏览器是多线程的，浏览器有很多线程：

• js引擎线程
• 渲染引擎线程
• 定时器线程
• 事件线程
• 请求线程等等

像SetTimeout，遇到的时候，会将其交给浏览器线程进行处理，处理完了之后，将回调放入任务队列中，执行栈执行完过来取。

JS中的数组与其他语言的数组的区别

在 C 或者 Java 等其他语言中，数组大小是固定的且内存地址是连续的，不会进行动态扩容。

而在 JS 中，数组就是对象，JS数组的元素在内存中并不一定是相邻的。

红宝书的目录结构说说

红宝书的目录结构是一个循序渐进的过程，首先他是先介绍一些基础，比如基础数据类型、引用数据类型，然后又围绕这些展开，讲对象、类、面向对象等等。

然后又继续深入的学习ES6的一些内容，Promise、代理等等。

再往后就是介绍一下请求、浏览器存储等等。

对移动端开发有什么了解

常用的移动端适配方案

1、flexble.js+rem

2、vw、wh

前端设计组件的原则

一般按照功能来进行组件的封装，原则

1、低耦合，提高复用能力。尽可能考虑到更加通用的使用场景，而不是满足特定的开发需求。

比如，数据不要写死，通过参数化配置传入；或者发送请求的API通过参数传入等。

2、统一的状态管理。可以把组件中特定功能的逻辑和数据抽离出来，用一个Store进行管理。

3、State或Props不要嵌套太深，3层以内。

4、使用封装组件的组件无感知，所有逻辑处理都在组件内。使用的组件不需要特殊处理。

具体还能结合业务进行考量。

JS 的 sort() 是怎么实现的

是使用插入和快排实现的。在某个长度内使用插入，在大于某个长度时使用快排。

对象去重

var arr = [
  { name: 'uzi', color: 'blue' },
  { name: 'pdd', color: 'white' },
  { name: 'mlxg', color: 'orange' },
  { color: 'blue', name: 'uzi' },
]

function delObj(obj) {
  var uniques = []
  var map = {}
  for (var i = 0; i < obj.length; i++) {
    //获取当前对象的key值 并排序
    var keys = Object.keys(obj[i]).sort()
    var str = ''
    //拼接键值对字符串
    for (var j = 0; j < keys.length; j++) {
      str += JSON.stringify(keys[j]) + JSON.stringify(obj[i][keys[j]])
    }
    if (!map[str]) {
      uniques.push(obj[i])
      map[str] = true
    }
  }
  return uniques
}

console.log(delObj(arr))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

根据对象的id去重

filter+Map

function quchong(arr){
    let map = new Map();
    return arr.filter((item)=>{
        if(!map.has(item.id)){
            map.set(item.id,1)
            return item;
        }
    })
}
1
2
3
4
5
6
7
8
9

两层for循环+辅助空间

手写一下发布-订阅模式

class PubSub {
  constructor() {
    this._listner = new Map()
  }

  //注册订阅行为
  subscribe(type, fn) {
    let hanlder = this._listner.get(type)
    if (!hanlder) {
      handler = []
    }
    this._listner.set(type, [...handler, fn])
  }

  //发布时间
  publish(type, ...args) {
    let handler = this._listner.get(type)
    for (let i = 0; i < handler.length; i++) {
      handler[i].call(this, ...args)
    }
  }

  //取消订阅
  unsubscribe(type, fn) {
    let handler = this._listner.get(type)
    let position = -1
    for (let i = 0; i < handler.length; i++) {
      if (handler[i] === fn) {
        position = i
      }
    }
    if (position !== -1) {
      handler.splice(position, 1)
      this._listner.set(type, hanlder)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

既然React/Vue可以用Event Bus进行组件通信,你可以实现下吗

通过发布-订阅模式实现。首先发布者是要的 emit 方法发布事件，而订阅者则通过addListener 进行订阅。

class EventEmitter {
  constructor() {
    this._events = new Map() //保存type及回调。
  }
}

EventEmitter.prototype.addListener = function (type, fn) {
  //添加监听
  let hanlder = this._events.get(type)
  //如果没有handler
  if (!hanlder) {
    hanlder = []
  }
  //展开放入
  this._events.set(type, [...hanlder, fn])
}

EventEmitter.prototype.removeListener = function (type, fn) {
  const handler = this._events.get(type)
  let position = -1
  //handler为数组，得找到对应的函数
  for (let i = 0; i < handler.length; i++) {
      if (handler[i] === fn) {
          position = i
      }
  }
    if (position !== -1) {
        handler.splice(position, 1)
        //移除后只剩一个，则回归函数状态
        this._events.set(type, handler[0])
    }
}

EventEmitter.prototype.emit = function (type, ...payload) {
  //通过type拿event并触发
  let handler = this._events.get(type)
  //触发多个监听
  for (let i = 0; i < handler.length; i++) {
    handler[i].call(this, ...payload)
  }
}

let emitter = new EventEmitter()
function sayHi(name) {
  console.log(`hi ${name}`)
}

function sayHello(name) {
  console.log(`hello ${name}`)
}
emitter.addListener('sayHi', sayHi)
emitter.addListener('sayHi', sayHello)
emitter.emit('sayHi', 'ch')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

介绍一下AST

AST抽象语法树，本质上就是将源代码抽象为语法结构的树，比如一个函数，可能会被抽象为id为方法名，params参数，body函数体等等。

如何从纯文本获取AST

1、词法分析，扫描scanner。按预定规则合并成标识token，放入tokens列表中。

一个个读取代码，遇到空格、操作符或特殊符号，认为一个短暂的完成。

2、语法分析，解析器。将词法分析的数组转换为树形，同时验证语法。

两个 tab 的页面之间怎么通信？

1、web scoket通信，服务器作为中间介，进行消息转发。

2、使用localStorage进行通信。一个页面修改数据，另一个页面监听localStorage变化，拿到最新数据。

如何获取嵌套对象所有的Keys

1、递归获取：如果Key对应的value是对象，继续递归获取，直到不是对象。（有点类似于实现深拷贝）

var obj = {
  name: 'ch',
  address: {
    city: 'peking',
    small: 'haidian',
  },
}
// 1、递归法
let findKeys = (obj) => {
  //递归出口
  if (typeof obj !== 'object') {
    return obj
  }
  let res = []
  //遍历obj
  for (let key in obj) {
    res.push(key)
    if (typeof obj[key] === 'object') {
      res = res.concat(findKeys(obj[key]))
    }
  }
  return res
}
console.log(findKeys(obj))//['name','address','city','small']
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2、非递归获取：利用一个栈存放对象，如果是对象放入栈中，一直到不是对象 逐个取出。

var obj = {
  name: 'ch',
  address: {
    city: 'peking',
    small: 'haidian',
  },
  data: 'ss',
}

// 1、非递归法，先序遍历
const isObject = (obj) => typeof obj === 'object'
const findKeys = (obj) => {
  const stack = [],
    res = []
  let current = obj
  while (stack.length || isObject(current)) {
    //把current对象的keys全部拿出来，再将为对象的值推入stack中，current 再从stack中取
    for (let key in current) {
      res.push(key)
      if (isObject(current[key])) {
        stack.push(current[key])
      }
    }
    current = stack.pop()
  }
  return res
}

console.log(findKeys(obj))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦