[Summary]: Hand-tear code is often tested in large factory interviews - JavaScript implementation effect

---

1. Js implements dragging elements

const div = document.getElementsByTagName('div')[0]

//是否按下
let isDown = false
//鼠标至边框
let numX = 0
let numY = 0

//鼠标点下
div.onmousedown = (e) => {
    
    
    //计算鼠标至边框
    numX = e.clientX - div.offsetLeft
    numY = e.clientY - div.offsetTop
    isDown = true
}

//鼠标移动
window.onmousemove = (e) => {
    
    
    if(isDown) {
    
    
        //移动后的左，上，偏移量
        let nl = e.clientX - numX
        let nt = e.clientY - numY
        div.style.left = nl + 'px'
        div.style.top = nt + 'px'
    }
}

//鼠标弹起
div.onmouseup = () => {
    
    
    isDown = false
}

2. Js realizes once effect

let fn = function () {
    
     console.log(1) }

function onece(fn) {
    
    
    let isFirst = true
    return function() {
    
    
        if(isFirst) {
    
    
            fn.apply(null,arguments)
            isFirst = false
        } else {
    
    
            return undefined
        }
    }
}
let b = onece(fn)
b()	//1
b()	//undefined

3. Js realizes deep copy

1. General approach

//方法一：通用方法
function deepClone(obj) {
    
    
/*注意typeof无法判断null具体数据类型(会判断为object)，因此这里用call方法*/
  if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean' || typeof obj === 'undefined' || Object.prototype.toString.call(null) === '[object Null]') {
    
    
    return obj
  } else if (Array.isArray(obj)) {
    
    
    let newArr = []
    /*切记不能直接用这种方式：以免数组里又有对象 （无法“深度克隆”）
      obj.forEach((item) => {
      	newArr.push(item)
      })
      */
    for (let i in obj) {
    
    
      newArr.push(deepClone(obj[i]))
    }  
    return newArr
  } else {
    
    
    let newOjb = {
    
    }
    for (let i in obj) {
    
    
      newOjb[i] = deepClone(obj[i])
    }
    return newOjb
  }
}

2. Objects, arrays

//方法二：JSON.stringify（针对于对象）
let obj = ['haha','lala']
let str = JSON.stringify(obj)
let newObj = JSON.parse(str)
obj[0] = '试试'
console.log(obj,newObj);

/*
1.可用于深度克隆：对象、数组
2.遇到对象里嵌套对象，可以“深度克隆”！！
3.注意：使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined ， function， RegExp 等等类型的
*/ 

//方法三：Object.assign() 
var obj = {
    
    
  a:1,
  b:2
}
var newObj = Object.assign({
    
    },obj)
obj.a = 0
console.log(obj,newObj);
//只用于对象或数组
//遇到对象里嵌套对象，无法“深度克隆”

3. Arrays

//ES6 三点运算符
let arr = [1,2,3,4]
let newArr = [...arr]
arr[0] = 0
console.log(arr,newArr);

Fourth, implement fetch (Promise encapsulates Ajax)

//封装Ajax
function myAjax(method, url, data) {
    
    
    return new Promise((resolve, reject) => {
    
    
        let xhr = new XMLHttpRequest();
        let method = method || 'GET' //为了防止无参，这里设置默认
        let data = data || null
        //规定请求
        xhr.open(method, url, true)
        xhr.send(data)

        //当 readyState 属性发生变化时被调用的函数
        xhr.onreadystatechange = () => {
    
    
            if (xhr.status === 200 && xhr.readyState === 4) resolve(xhr.responseText)
            else reject(xhr.responseText)
        }

    })
}

myAjax("GET", "/some/url.json", null)
    .then(res => console.log(res))