欢迎来到我的小站

手写打乱数组顺序的方法主要的实现思路就是： 取出数组的第一个元素，随机产生一个索引值，将该第一个元素和这个索引对应的元素进行交换。 第二次取出数据数组第二个元素，随机产生一个除了索引为1的之外的索引值，并将第二个元素与该索引值对应的元素进行交换 按照上面的规律执行，直到遍历完成 123456let arr = [1,2,3,4,5,6,7,8,9,10];for (let i = 0; i < arr.length; i++) {  const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i; [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];}

深拷贝 1234567891011121314151617181920212223242526272829function fn(obj) {// 判断数据是否是复杂类型 if (obj instanceof Object) { //判断数据是否是数组 if (Array.isArray(obj)) { //声明一个空数组来接收拷贝后的数据 let result = [] obj.forEach(item => { // 需要递归深层遍历，否则复制的是地址 result.push(fn(item)) }) // 返回输出这个数组,数组拷贝完成 return result } else { //如果是对象,就声明一个空对象来接收拷贝后的数据 ...

使用Promise封装AJAX请求 创建AJAX请求的步骤： 创建一个 XMLHttpRequest 对象。 在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。 在发起请求前，可以为这个对象添加一些信息和监听函数。比如说可以通过 setRequestHeader 方法来为请求添加头信息。还可以为这个对象添加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发onreadystatechange 事件，可以通过设置监听函数，来处理请求成功后的结果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是 2xx 或者 304 的话则代表返回正常。这个时候就可以通过 response 中的数据来对页面进行更新了。 当对象的属性和监听函数设置完成后，最后调用 sent 方法来向服务器发起请求，可以传入参数作为发送的数据体。 1234567891011121314151617181920212 ...

手写AJAX请求 创建AJAX请求的步骤： 创建一个 XMLHttpRequest 对象。 在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。 在发起请求前，可以为这个对象添加一些信息和监听函数。比如说可以通过 setRequestHeader 方法来为请求添加头信息。还可以为这个对象添加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发onreadystatechange 事件，可以通过设置监听函数，来处理请求成功后的结果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是 2xx 或者 304 的话则代表返回正常。这个时候就可以通过 response 中的数据来对页面进行更新了。 当对象的属性和监听函数设置完成后，最后调用 sent 方法来向服务器发起请求，可以传入参数作为发送的数据体。 123456789101112131415161718192021222324cons ...

函数柯里化 函数柯里化指的是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。： 1234function curry(fn, ...args) { return fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args);}

bind bind 函数的实现步骤： 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。 保存当前函数的引用，获取其余传入参数值。 创建一个函数返回 函数内部使用 apply 来绑定函数调用，需要判断函数作为构造函数的情况，这个时候需要传入当前函数的 this 给 apply 调用，其余情况都传入指定的上下文对象。 12345678910111213141516171819// bind 函数实现Function.prototype.myBind = function(context) {  // 判断调用对象是否为函数  if (typeof this !== "function") {    throw new TypeError("Error"); }  // 获取参数  var args = [...arguments].slice(1),      fn = this;  return function Fn() {    // 根据调用 ...

apply apply 函数的实现步骤： 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。 判断传入上下文对象是否存在，如果不存在，则设置为 window 。 将函数作为上下文对象的一个属性。 判断参数值是否传入 使用上下文对象来调用这个方法，并保存返回结果。 删除刚才新增的属性 返回结果 12345678910111213141516171819202122// apply 函数实现Function.prototype.myApply = function(context) {  // 判断调用对象是否为函数  if (typeof this !== "function") {    throw new TypeError("Error"); }  let result = null;  // 判断 context 是否存在，如果未传入则为 window  context = context || window;  // 将函数设为对象的方法  conte ...

call call 函数的实现步骤： 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。 判断传入上下文对象是否存在，如果不存在，则设置为 window 。 处理传入的参数，截取第一个参数后的所有参数。 将函数作为上下文对象的一个属性。 使用上下文对象来调用这个方法，并保存返回结果。 删除刚才新增的属性。 返回结果。 1234567891011121314151617181920 // call函数实现Function.prototype.myCall = function(context) {  // 判断调用对象  if (typeof this !== "function") {    console.error("type error"); }  // 获取参数  let args = [...arguments].slice(1),      result = null;  // 判断 context 是否传入，如果未传入则设置为 window  c ...

防抖、节流 函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。 123456789101112131415161718192021222324 // //防抖function debounce(fn, date) {  let timer  //声明接收定时器的变量  return function (...arg) {  // 获取参数    timer && clearTimeout(timer)  // 清空定时器    timer = setTimeout(() => {  // 生成新的定时器      //因为箭头函数里的this指向上层作用域的this,所以这里可以直接用this，不需 ...

promise 12345678910111213141516171819202122232425262728293031323334353637383940class MyPromise { constructor(fn){ // 存储 reslove 回调函数列表    this.callbacks = []    const resolve = (value) => { this.data = value // 返回值给后面的 .then      while(this.callbacks.length) { let cb = this.callbacks.shift()        cb(value)     }   }    fn(resolve) }  then(onResolvedCallback) { return new MyPromise((resolve) => { this.callbacks. ...