jym大家好,如果以下代码大家觉得有问题或者不懂,欢迎jym在评论区评论!第一次更文,可能文章格式各方面布局的不是很好,还请各位海涵,谢谢!

数组去重很多方法都差不多,但我还是写出来了,主要是想练习一下数组遍历方法.

写这篇文章的原因,是想把js中一些常见的手写题目分享给大家,当然还有很多没写,后续如果有jy需要的话,我也会写出来,分享给大家,谢谢!

1.数组的冒泡排序

const arr = [1, 9, 8, 5, 2, 98, 6, 3, 486, 25, 585, 56, 2, 6]
for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
        if (arr[j] > arr[j + 1]) {
            let a = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = a
        }
    }
}
console.log(arr)

2.数组的简单排序

const arr = [1, 9, 8, 5, 2, 98, 6, 3, 486, 25, 585, 56, 2, 6, 4]
for (let i = 0; i < arr.length - 1; i++) {
    for (let j = i + 1; j < arr.length; j++) {
        if (arr[i] > arr[j]) {
            let a = arr[i]
            arr[i] = arr[j]
            arr[j] = a
        }
    }
}
console.log(arr)

3.数组的快速排序

const arr = [1, 9, 8, 5, 2, 98, 6, 3, 486, 25, 585, 56, 2, 6, 4]

function fn(arr) {
    if (arr.length <= 1) {
        return arr
    }
    let index = Math.floor(arr.length / 2)
    let flag = arr.splice(index, 1)[0]
    let left = []
    let right = []
    for (let i = 0; i < arr.length; i++) {
        if(arr[i]>flag){
            right.push(arr[i])
        }else{
            left.push(arr[i])
        }
    }
    return fn(left).concat(flag,fn(right))
}
const newArr = fn(arr)
console.log(newArr)

4.手写防抖

<input type="text">
const ipt = document.querySelector('input')

function handler(a,b) {
    console.log('手写防抖')
    console.log(this,a,b)
}


function debounce(fn, time) {
    let timerId = 0
    return function () {
        clearTimeout(timerId)
        timerId = setTimeout(() => {
            fn()
        }, time)
    }
}
ipt.addEventListener('keyup', debounce(handler.bind(ipt,10,20), 3000))

5.手写节流,标记法

<input type="text">
const ipt = document.querySelector('input')

function handler(a,b) {
    console.log('手写节流呀')
    console.log(this,a,b)
}

function throttle(fn, time) {
    let flag = true
    return function () {
        if (flag) {
            flag = false
            setTimeout(() => {
                fn()
                flag = true
            }, time);
        }
    }
}
ipt.addEventListener('keyup', throttle(handler.bind(ipt,10,20), 3000))

6.手写节流,时间戳法

<input type="text"> 
const ipt = document.querySelector('input')

function handler(a,b) {
    console.log('手写节流')
    console.log(this,a,b)
}

function throttle(fn, time) {
    let prevDate = new Date()
    return function () {
        let nowDate = new Date()
        if (nowDate - prevDate > time) {
            fn()
            prevDate = new Date()
        }
    }
}
ipt.addEventListener('keyup', throttle(handler.bind(ipt,10,20), 3000))

7.手写实现new关键字功能

function Person(name, age) {
    this.name = name
    this.age = age
    return null
}
Person.prototype.study = function () {
    console.log('好好学习,天天向上')
}

function myNew(constructor, name, age) {
    // 1.在堆结构里面开辟一块空间
    const obj = {}
    // 2.将构造函数中的this指向这块空间
    const re = constructor.call(obj, name, age)
    console.log(re)
    // 3.将Person的显示原型指向的这块空间赋值给obj的隐式原型
    obj.__proto__ = Person.prototype
    // 4.判断构造函数的返回值
    if (typeof re === 'object' && re !== null || typeof re === 'function') {
        return re
    }
    return obj
}
const p = myNew(Person, '小花', 18)
console.log(p)

7.手写实现call方法

function Person(name,age){
    this.name = name
    this.age = age
    console.log(this)
}
const obj = {
    name:"小花"
}
Function.prototype.myCall = function(context,...rest){
    if(context === null || context === undefined){
        context = window
    }
    if(typeof context !== 'object' || typeof context !== 'function'){
        context = Object(context)
    }
    const sym = Symbol()
    // 1.修改Person中的this指向为obj
    context[sym] = this
    // 2.调用函数Person
    let re = context[sym](...rest)
    delete context[sym]
    // 3.返回函数的返回值
    return re
}
const p = Person.myCall(obj,'小李',18)
console.log(p)

8.手写实现apply方法

function Person(arg){
    this.name = arg[0]
    this.age = arg[1]
    console.log(this)
}
const obj = {
    name:"小花"
}
Function.prototype.myApply = function(context,arg){
    if(context === 'null' || context === 'undefined'){
        context = window
    }
    if(typeof context !== 'object' || typeof context !== 'function'){
        context = Object(context)
    }
    let sym = Symbol()
    context[sym] = this
    let re = context[sym](arg)
    delete context[sym]
    return re
}
const p = Person.myApply(obj,['小李',18])
console.log(p)

9.数组对象的递归深拷贝

let arr = [1, 9, 3, 5, [9, 6, 4, [96, 8, 3, 14, 2], 56, 3, 4]]

function deepCopy(arr) {
    if (typeof arr !== 'object') {
        return 
    }
    let newArr = arr instanceof Array ? [] : {}
    for (let i in arr) {
        if (arr.hasOwnProperty(i)) {
            newArr[i] = arr[i] instanceof Array ? deepCopy(arr[i]) : arr[i]
        }
    }
    return newArr
}
const newArr = deepCopy(arr)
newArr[4][1] = 100
newArr[3] = 13
console.log(arr)
console.log(newArr)

10.数组去重 原生方法 计数法

var arr = [1, 3, 7, 6, 3, 8, 9, 8, 7, 3, 9, 8, 9, 8, 3]
var newArr = []
for (var i = 0; i < arr.length; i++) {
    var num = 0
    for (var j = i + 1; j < arr.length; j++) {
        if (arr[i] == arr[j]) {
            num++
        }
    }
    if (num < 1) {
        newArr[newArr.length] = arr[i]
    }
}
console.log(newArr)

11.数组去重 原生方法 标记法

var arr = [1, 3, 7, 6, 3, 8, 9, 8, 7, 3, 9, 8, 9, 8, 3]
var newArr = []
for (var i = 0; i < arr.length; i++) {
    var flag = true
    for (var j = i + 1; j < arr.length; j++) {
        if (arr[i] == arr[j]) {
            flag = false
        }
    }
    if (flag) {
        newArr[newArr.length] = arr[i]
    }
}
console.log(newArr)

12.数组去重 indexof 方法

// 利用数组的 indexof 方法 原始 for 循环遍历
// 原理 返回值 下标,找不到返回-1
var arr = [1, 3, 7, 6, 3, 8, 9, 8, 7, 3, 9, 8, 9, 8, 3]
var newArr = []
for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) == -1) {
        newArr.push(arr[i])
    }
}
console.log(newArr)

13.数组去重 includes 方法

// 利用数组的 includes 方法 原始 for 循环遍历
// 原理 返回值 存在返回true 不存在返回false
var arr = [1, 3, 7, 6, 3, 8, 9, 8, 7, 3, 9, 8, 9, 8, 3]
var newArr = []
for (var i = 0; i < arr.length; i++) {
    if (!newArr.includes(arr[i])) {
        newArr.push(arr[i])
    }
}
console.log(newArr)

14.数组去重 indexof 方法 原始 for in 循环遍历

// 利用数组的 indexof 方法 原始 for in 循环遍历
// 原理 返回值 下标,找不到返回-1
var arr = [1, 3, 7, 6, 3, 8, 9, 8, 7, 3, 9, 8, 9, 8, 3]
var newArr = []
for (var i in arr) {
    if (newArr.indexOf(arr[i]) == -1) {
        newArr.push(arr[i])
    }
}
console.log(newArr)

15.数组去重 includes 方法 原始 for in 循环遍历

// 利用数组的 includes 方法 原始 for in 循环遍历
// 原理 返回值 存在返回true 不存在返回false
var arr = [1, 3, 7, 6, 3, 8, 9, 8, 7, 3, 9, 8, 9, 8, 3]
var newArr = []
for (var i in arr) {
    if (!newArr.includes(arr[i])) {
        newArr.push(arr[i])
    }
}
console.log(newArr)

16.数组去重 indexof 方法 数组方法 forEach 遍历

// 利用数组的 indexof 方法 数组方法 forEach 遍历
// 原理 返回值 下标,找不到返回-1
var arr = [1, 3, 7, 6, 3, 8, 9, 8, 7, 3, 9, 8, 9, 8, 3]
var newArr = []
arr.forEach(function (item) {
    if (newArr.indexOf(item) == -1) {
        newArr.push(item)
    }
})
console.log(newArr)

17.数组去重 includes 方法 数组方法 forEach 遍历

// 利用数组的 includes 方法 数组方法 forEach 遍历
// 原理 返回值 存在返回true 不存在返回false
var arr = [1, 3, 7, 6, 3, 8, 9, 8, 7, 3, 9, 8, 9, 8, 3]
var newArr = []
arr.forEach(function (item) {
    if (!newArr.includes(item)) {
        newArr.push(item)
    }
})
console.log(newArr)

18.数组去重 ES6 中的扩展运算符和 Set 构造函数

// 利用ES6 中的扩展运算符和 Set 构造函数
var arr = [1, 3, 7, 6, 3, 8, 9, 8, 7, 3, 9, 8, 9, 8, 3]
console.log([...new Set(arr)])

19.数组扁平化 flat 方法

// 数组扁平化 将多维数组转化为一维数组
// ES6 中的 flat 方法
var arr = [[1],[2,3,5],[[2,9,7,6]],[9,8,75,6],[[[[8,9,63,8]]]]]
var newArr = arr.flat(Infinity)
console.log(newArr)

20.数组扁平化 递归

// concat 合并数组 递归
var arr = [[1],[2,3,5],[[2,9,7,6]],[9,8,75,6],[[[[8,9,63,8]]]]]
function fn(arr){
    var newArr = []
    arr.forEach(function(el){
        if(Array.isArray(el)){
            newArr = newArr.concat(fn(el))
        }else{
            newArr.push(el)
        }
    })
    return newArr
}
var newArr = fn(arr)
console.log(newArr)

21.数组扁平化 扩展运算符

// 扩展运算符
// 实现原理 先判断是否是数组，如果是数组，则进行解构赋值

var arr = [[1],[2,3,5],[[2,9,7,6]],[9,8,75,6],[[[[8,9,63,8]]]]]
function fn(arr) {
    while (arr.some(
            function (item) {
                return Array.isArray(item)
            }
        )) {
        arr = [].concat(...arr)
    }
    return arr
}
var Arr = fn(arr)
console.log(Arr)