话不多说，直接进入正题。

数组篇

一. 实现Array.isArray

js 复制代码

if (!Array.isArray){
  Array.isArray = function(arg){
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

二. 将类数组转换为数组

借用数组的方法进行转换

js 复制代码

// 1. slice

Array.prototype.slice.call(arguments)


// 2. concat

[].concat.apply([], arguments)

es6的方式转换

js 复制代码

// 1. ...扩展运算符

[...arguments]


// 2. Array.from()

Array.from(arguments)

三. 判断是否为数组

js 复制代码

var a = [];

// 1.基于instanceof

a instanceof Array;

// 2.基于constructor

a.constructor === Array;

// 3.基于Object.prototype.isPrototypeOf

Array.prototype.isPrototypeOf(a);

// 4.基于getPrototypeOf

Object.getPrototypeOf(a) === Array.prototype;

// 5.基于Object.prototype.toString

Object.prototype.toString.call(a) === '[object Array]';

// 6. 通过Array.isArray

Array.isArray(a)

四. 数组方法实现

forEach

js 复制代码

 Array.prototype.myForEach = function(fn, context = window){
    let len = this.length
    for(let i = 0; i < len; i++){
        typeof fn === 'function' && fn.call(context, this[i], i)
    }
}

filter

js 复制代码

Array.prototype.myFilter = function(fn, context = window){
    let len = this.length,
        result = []

    for(let i = 0; i < len; i++){
        if(fn.call(context, this[i], i, this)){
            result.push(this[i])
        }
    }
    return result
}

every

js 复制代码

Array.prototype.myEvery = function(fn, context){
    let result = true,
        len = this.length
    for(let i = 0; i < len; i++){
        result = fn.call(context, this[i], i, this)
        if(!result){
            break
        }
    }
    return result
}

some

js 复制代码

Array.prototype.mySome = function(fn, context){
    let result = false,
        len = this.length
    for(let i = 0; i < len; i++){
        result = fn.call(context, this[i], i, this)
        if(result){
            break
        }
    }
    return result
}

findIndex

js 复制代码

Array.prototype.myFindIndex = function (callback) {
    for (let i = 0; i < this.length; i++) {
        if (callback(this[i], i)) {
            return i
        }
    }
}

Reduce

js 复制代码

Array.prototype.myReduce = function (fn, initialValue) {
    let arr = Array.prototype.call(this)
    let res, startIndex
    res = initialValue ? initialValue : arr[0]
    startIndex = initialValue ? 0 : 1
    for (let i = startIndex; i < arr.length; i++) {
        res = fn.call(null, res, arr[i], i, this)
    }
    return res
}

三. 实现数组扁平化

js 复制代码

let ary = [1, [2, [3, 4, 5]]]

普通递归+concat

js 复制代码

const flatten = function(ary){
    let result = []

    for(let i = 0;i<ary.length;i++){
        if(Array.isArray(ary[i])){
            result = result.concat(flatten(ary[i]))
        } else {
            result.push(ary[i])
        }
    }
    return result
}

reduce+concat

js 复制代码

const flatten = function(ary){
    return ary.reduce((prev, next)=>{
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}

while+concat

js 复制代码

const flatten = function(ary){
    while(ary.some(item=>Array.isArray(item))){
        ary = [].concat(...ary)
    }
    return ary
}

toString+split

js 复制代码

const flatten = function(ary){
    return ary.toString().split(',')
}

flat

js 复制代码

const flatten = function(ary){
    return ary.flat(Infinity)
}

正则

js 复制代码

const flatten6 = function(ary){
    let str = JSON.stringify(ary)
    str = str.replace(/([|])/g, '')
    return JSON.parse(`[${str}]`)
}

四. 去重

利用 ES6 语法（扩展运算符）

js 复制代码

const unique1 = (array) => {
  // return Array.from(new Set(array))
  return [...new Set(array)]
}

利用 forEach() + 对象容器

js 复制代码

const unique2 = (array) => {
  const arr = []
  const obj = {}
  array.forEach(item => {
    if (!obj.hasOwnProperty(item)) {
      obj[item] = true
      arr.push(item)
    }
  })
  return arr
}

利用 forEach 和 indexOf

js 复制代码

const unique3 = (array) => {
  const arr = []
  array.forEach(item => {
    if (arr.indexOf(item) === -1) {
      arr.push(item)
    }
  })
  return arr

}

利用 filter + indexOf

js 复制代码

const unique4 = (array) => {
  return array.filter((item,index) => {
    return array.indexOf(item) === index;
  })
}

利用 forEach 和 includes (本质同3)

js 复制代码

const unique6 = (array) => {
  let result = [];
  array.forEach(item => {
    if(!result.includes(item)){
      result.push(item);
    }
  })
  return result;
 }

利用 sort

js 复制代码

const unique6 = (array) => {
  let result = array.sort(function (a,b) {
    return a - b;
  });

  for(let i = 0;i < result.length;i ++){
    if(result[i] === result[i+1]){
      result.splice(i + 1,1);
      i --;
    }
  }
  return result;
}

双层for循环

js 复制代码

function unique(array) {
    // res用来存储结果
    var res = [];
    for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
        for (var j = 0, resLen = res.length; j < resLen; j++ ) {
            if (array[i] === res[j]) {
                break;
            }
        }

        // 如果array[i]是唯一的，那么执行完循环，j等于resLen

        if (j === resLen) {
            res.push(array[i])
        }
    }

    return res;

}

console.log(unique(array)); // [1, "1"]

五. 排序

冒泡排序

原理：利用数组的前一项与相邻的后一项相比较，判断大/小，交换位置

js 复制代码

const bubbleSort = function(ary){
    for(let i = 0; i < ary.length - 1; i++){
        for(let j = 0; j < ary.length - 1 - i; j++){
            if(ary[j] > ary[j+1]){
                [ary[j], ary[j+1]] = [ary[j+1], ary[j]]
            }
        }
    }

    return ary

}

选择排序

原理：利用数组的某项与后面所有的值相比较，判断大/小，交换位置

js 复制代码

const bubbleSort = function(ary){
    for(let i = 0; i < ary.length - 1; i++){
        for(let j = i + 1; j < ary.length; j++){
            if(ary[i] > ary[j]){
                [ary[i], ary[j]] = [ary[j], ary[i]]
            }
        }
    }
    return ary
}

原生排序

js 复制代码

Array.sort((a, b)=>a-b)

快速排序

原理：取数组的中间值作为基准，判断左右两边的值大或小，添加到相应数组，递归调用，然后将所有的值拼接在一起。

js 复制代码

const quick_sort = function(ary){
    if(ary.length < 1){
        return ary
    }


    let centerIndex = Math.floor(ary.length/2)
    let centerVal = ary.splice(centerIndex, 1)[0]


    let left = []
    let right = []
    ary.forEach(item => {
        item > centerVal ? right.push(item) : left.push(item)
    })

    return [...quick_sort(left), ...[centerVal], ...quick_sort(right)]
}

插入排序

原理：先将数组中的一项添加到新数组中，循环数组每一项与新数组中比较，比较大的值放在后面小的放到新数组的前面。

js 复制代码

 const insertion_sort = function(ary){
    let newAry = ary.splice(0, 1)
    for(let i = 0; i < ary.length; i++){
        let cur = ary[i]
        for(let j = newAry.length - 1; j >= 0;){
            if(cur < newAry[j]){
                j--
                j === -1 && newAry.unshift(cur)
            } else {
                newAry.splice(j + 1, 0, cur)
                j = -1
            }
        }
    }
    return [...newAry]
}

六. 最大值与最小值

假设法

js 复制代码

const maxMin = function(ary){
    let [min, max] = [ary[0], ary[1]]
    ary.forEach(ele => {
        min > ele ? min = ele : null
        max < ele ? max = ele : null
    })
    return [min, max]
}

math.max() + 假设法

js 复制代码

var arr = [6, 4, 1, 8, 2, 11, 23];
var result = arr[0];
for (var i = 1; i < arr.length; i++) {
    result =  Math.max(result, arr[i]);
}

console.log(result);

reduce

js 复制代码

var arr = [6, 4, 1, 8, 2, 11, 23];
function max(prev, next) {
    return Math.max(prev, next);
}

console.log(arr.reduce(max));

排序

js 复制代码

var arr = [6, 4, 1, 8, 2, 11, 23];
arr.sort(function(a,b){return a - b;});
console.log(arr[arr.length - 1])

利用Math.max

js 复制代码

Math.max.apply(null, ary)



// 扩展运算符

Math.max(...arr)



// eval

var max = eval("Math.max(" + arr + ")");

七. 平均值

js 复制代码

const balance = function(ary){
    ary.sort((a, b) => a - b)
    ary.shift()
    ary.pop()
    let num = 0
    ary.forEach(item => {
        num += item
    })
    return (num/ary.length).toFixed(2)
}

八. 数组乱序

js 复制代码

function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
    }
    return a;
}

九. 将数组扁平化并去除其中重复数据，最终得到一个升序且不重复的数

js 复制代码

let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];


Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})

函数篇

一. 判断是否为promise

js 复制代码

const isPromise = function(fn){
    return typeof fn.then === 'function'

}

二. 实现call函数

js 复制代码

Function.prototype.myCall = function(context,...args) {
    context =  (context ?? window) || new Object(context)
    context.fn = this
    const result = context.fn(args)
    delete context.fn
    return result
}

三. 实现apply函数

js 复制代码

Function.prototype.myApply = function(context, arr) {
    context =  (context ?? window) || new Object(context)
    // const args = arguments[1]
    context.fn = this
    const result = arr ? context.fn(...arr) : context.fn()
    delete context.fn
    return result
}

call 的使用场景

1、对象的继承。如下面这个例子：

js 复制代码

function superClass () {
    this.a = 1;
    this.print = function () {
        console.log(this.a);
    }
}

function subClass () {
    superClass.call(this);
    this.print();
}


subClass();// 1

subClass 通过 call 方法，继承了 superClass 的 print 方法和 a 变量。此外，subClass 还可以扩展自己的其他方法。

2、借用方法。还记得刚才的类数组么？如果它想使用 Array 原型链上的方法，可以这样：

js 复制代码

let domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

这样，domNodes 就可以应用 Array 下的所有方法了。

apply 的一些妙用

1、Math.max。用它来获取数组中最大的一项。

js 复制代码

let max = Math.max.apply(null, array);

同理，要获取数组中最小的一项，可以这样：

js 复制代码

let min = Math.min.apply(null, array);

2、实现两个数组合并。在 ES6 的扩展运算符出现之前，我们可以用 Array.prototype.push来实现。

js 复制代码

let arr1 = [1, 2, 3];let arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2);console.log(arr1); // [1, 2, 3, 4, 5, 6]

四. 实现bind函数

bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )

js 复制代码

Function.prototype.myBind = function (context, ...outerArgs) {  // this->func context->obj outerArgs->[10,20]

  let self = this

  // 返回一个函数

  return function F(...innerArgs) { //返回了一个函数，...innerArgs为实际调用时传入的参数

    // 考虑new的方式
    if(self instanceof F) {      
        return new self(...outerArgs, ...innerArgs)    
    }    // 把func执行，并且改变this即可

    return self.apply(context, [...outerArgs, ...innerArgs]) //返回改变了this的函数，参数合并

  }}

五. new关键字

实现逻辑

要创建 Person 函数的新实例，必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下几个步骤：

创建一个新对象（例如p1）
将新对象的__proto__属性指向函数的prototype（即p1.proto === Person.prototype ）
将函数的this指向新创建的对象
返回新对象

4.1. 构造函数没有显式返回值，返回this

4.2. 构造函数有显式返回值，且是基本类型，比如number，string，那么还是返回this

4.3. 构造函数有显式返回值，且是对象类型，比如{a:1}，那么返回这个对象

具体实现

js 复制代码

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


//方法一

function createNew(){
    const obj = new Object();    
    const fnconstructor = [].shift.call(arguments);    
    obj.__proto__ = fnconstructor.prototype;        
    const resultObj = fnconstructor.apply(obj,arguments);    
    return typeof resultObj === 'object'? resultObj : obj
}


//方法二

const createNew = (Con, ...args) => {    
    const obj = {}    
    Object.setPrototypeOf(obj, Con.prototype)    
    let result = Con.apply(obj, args)    
    return result instanceof Object ? result : obj
}


const per1 = createNew(Person,'xiaokong',18)

console.log(per1) //{ name: 'xiaokong', age: 18, sayName: [Function] }

六. 防抖函数

防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行。

js 复制代码

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}

七. 节流函数

降低触发的频率，如果持续触发事件，每隔一段时间，只执行一次事件。

js 复制代码

function throttle(fn, interval) {
  // 记录上一次的开始时间
  let lastTime = 0
 
  // 真正执行的函数
  const throttle = function () {
 
    // 获取当前事件触发时的时间
    const nowTime = new Date().getTime()
 
    // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长时间需要去触发函数
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      fn()
      lastTime = nowTime
    }
  }
 
  return throttle
}

八. each函数（jq）

jQuery 的 each 方法，作为一个通用遍历方法，可用于遍历对象和数组。

语法为：

js 复制代码

jQuery.each(object, [callback])

回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。

js 复制代码

// 遍历数组

$.each( [0,1,2], function(i, n){
    console.log( "Item #" + i + ": " + n );
});

// Item #0: 0

// Item #1: 1

// Item #2: 2

// 遍历对象

$.each({ name: "John", lang: "JS" }, function(i, n) {
    console.log("Name: " + i + ", Value: " + n);
});

// Name: name, Value: John

// Name: lang, Value: JS

js 复制代码

function each(obj, callback) {
    let len, i = 0
    if (Array.isArray(obj)) {
        len = obj.length
        for (; i < len; i++) {
            if (callback.call(obj[i], i, obj[i]) === false) {
                break
            }
        }
    } else {
        for (i in obj) {
            if(callback.call(obj[i], i, obj[i]) === false) {
                break
            }
        }
    }
    return obj
}

对象篇

一. object.create

js 复制代码

Object.create = function( o ) {
    function f(){}
    f.prototype = o;
    return new f;
}

二. 浅拷贝

js 复制代码

var shallowCopy = function(obj) {
    // 只拷贝对象
    if (typeof obj !== 'object') return;
    
    // 根据obj的类型判断是新建一个数组还是对象
    var newObj = obj instanceof Array ? [] : {};

    // 遍历obj，并且判断是obj的属性才拷贝
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

三. 深拷贝

js 复制代码

var deepCopy = function(obj) {
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
}

还在担心手写面试题？一文搞定常见js面试手写题目

数组篇

一. 实现Array.isArray

二. 将类数组转换为数组

借用数组的方法进行转换

es6的方式转换

三. 判断是否为数组

四. 数组方法实现

forEach

filter

every

some

findIndex

三. 实现数组扁平化

普通递归+concat

reduce+concat

while+concat

toString+split

flat

正则

四. 去重

五. 排序

冒泡排序

选择排序

原生排序

快速排序

插入排序

六. 最大值与最小值

假设法

math.max() + 假设法

reduce

排序

利用Math.max

七. 平均值

八. 数组乱序

九. 将数组扁平化并去除其中重复数据，最终得到一个升序且不重复的数

函数篇

一. 判断是否为promise

二. 实现call函数

三. 实现apply函数

call 的使用场景

apply 的一些妙用

四. 实现bind函数

五. new关键字

实现逻辑

具体实现

六. 防抖函数

七. 节流函数

八. each函数（jq）

对象篇

一. object.create

二. 浅拷贝

三. 深拷贝