JS各种手写

187 阅读2分钟

1、随机验证码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0px;
		}

		.codeBox {
			box-sizing: border-box;
			user-select: none;
			margin: 20px;
			width: 100px;
			height: 40px;
			line-height:40px;
			text-align: center;
			border: 1px solid #ddd;
			cursor: pointer;
			font-size: 20px;
			letter-spacing: 5px;
		}
	</style>
</head>

<body>
	<div class="codeBox" id="codeBox"></div>
	<script>
		var aa = (function(){
			function createCode(){
				let codeBox = document.getElementById("codeBox");
				let area = '0123456789QWERTYUIOPASDFGHJKLZXCVBNMwertyuiopasdfghjklzxcvbnm';
				let codeText = '';
				while(codeText.length<4){
					let ran = Math.round(Math.random() * (61 - 0) + 0);
					let	char = area.charAt(ran);
					if(!codeText.toLocaleUpperCase().includes(char.toLocaleUpperCase())){
						codeText += char;
					}
				}
				console.log(codeText);
				codeBox.innerHTML = codeText;
			}
			return {
				createCode
			};
		})();
		aa.createCode();
		codeBox.onclick = aa.createCode;
	</script>
</body>

</html>

冒泡排序

 /**冒泡排序的思想
            让数组中的当前项和后一项进行比较,如果当前项比后一项大,则两项交换位置(让大的靠后)
        **/
       let ary = [53,45,23,46,37,25,12,10,20,30,40,50]
        
        function bubble(ary){
            var temp = null;
            //外层循环i控制比较的轮数
            for(let i = 0; i < ary.length-1;i++){
               var cur =  ary[i];
               //里层循环控制每一轮比较的次数
               for(let j=0;j<ary.length-1-i;j++){
                    if(ary[j] > ary[j+1]){
                        //当前项大于后一项
                        temp= ary[j];
                        ary[j] =ary[j+1];
                        ary[j+1] =temp
                    }
               }

            }
            return ary;
        }
        console.log(bubble(ary));

数组去重

Array.prototype.myUnique = function myUnique (){
var obj = {};
var arr = this.slice(0);
for(var i = 0; i<arr.length; i++){
	var cur = arr[i];
	if(typeof obj[cur] !== "undefined"){
		arr[i] = arr[arr.length-1];
		arr.length--;
		i--;
		continue;
	}
	obj[cur] = cur;
}
obj = null;
return arr;
}

let ary = [12,23,12,13,13,12,23,14,8];
let newarr = ary.myUnique().sort((a,b)=>a -b);
console.log(newarr);
console.log(ary);

// 原型上添加 支持链式调用
Array.prototype.myUnique = function(){
            var obj = {};
            for(let i = 0; i < this.length; i++){
                var cur = this[i];
                if(typeof obj[cur] !== 'undefined'){
                    this[i] = this[this.length-1];
                    this.length--;
                    i--;
                    continue;
                }
                obj[cur] = cur;
            }
            obj = null;
            return this;

        };

任意数求和

function sum (){
			var total = null;
			for(var i =0;i< arguments.length;i++){
				var item = Number(arguments[i]);
				if(isNaN(item))continue;
				total+=item;
			}
			return total;
		}
        let total = sum(10, 20, 30, '40', 'AA');
        console.log(total);

url截取参数

<script>
        function queryURLParams(url) {
            //创建A标签(A元素对象)来获取到问号参数和哈希值
            let link = document.createElement("a");
            link.href = url;
			console.log(link)
            let askText = link.search.substr(1),
                polText = link.hash.substr(1),
                obj = {};
            polText ? obj['HASH'] = polText : null;
            if(askText){
                let arr = askText.split(/(?:&|=)/g);
				console.log(arr);
                for(let i = 0; i<arr.length;i+=2){
                   obj[arr[i]] = arr[i+1]; 
                }
            }
            return obj;
        }
        let result = queryURLParams('http://zhufengpeixun.cn/?lx=1&name=js&from=baidu#video');
        console.log(result);
		
		const url = 'http://example.com/index.html?a=1&b=2&c=3&d';
    </script>

手写深拷贝

/**
 * 深拷贝
 */

const obj1 = {
    age: 20,
    name: 'xxx',
    address: {
        city: 'beijing'
    },
    arr: ['a', 'b', 'c']
}

const obj2 = deepClone(obj1)
obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
console.log(obj1.address.city)
console.log(obj1.arr[0])

/**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 */
function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ,或者不是对象和数组,直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用!!!
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result
}