三个前端实际应用场景问题总结

求真实ip

拆分真实地址为IP地址，将一个无符号32位整数拆分为4*8位无符号整数，然后拼成一个ip地址
题目分析： 32位无符号整数，这里可以理解为32位的二进制数，将其转换为ip，一个ip由4个8位二进制组成，再将二进制转换为十进制即可。

function getIp (num) {
	let ipRes = '';
	for (let i = 0; i < 4; i++) {
    let res = num.toString().substring(i*8, i*8+8);
	    // 二进制转换为十进制，同时根据index添加‘.’
        let ip = parseInt(res, 2).toString() + ((i === 0 || i < 3) ? '.' : '');
        ipRes += ip;
    }
    return ipRes;
}
// 使用bigInt数据类型
let ips = 11111111111111111111111111111111n;
let result = getIps(ips);

获取标签种类数量

获取当前文档中标签种类的数量
题目分析： 先通过dom操作，获取所有的标签名，然后进行去重，填放目标数组，获得最终长度

function getElementType () {
	let res = document.querySelectorAll('*');
    let box = [];
    for (let i = 0; i < res.length; i ++) {
        let filter = res[i].nodeName.toString().split('.')[0];
        if (box.indexOf(filter) < 0) {
            box.push(filter);
        }
    }
    return box.length;
}
let eleRes = getElementType();

面向对象场景题

打车的时候，普通的车一小时花1块钱，快车一小时5块钱，每个车都有各自的车牌号，在车辆起步的时候提示车辆信息，在车辆到达目标地点时提示花费信息，如20公里花费20元
题目解析： 使用es6或者es5面向对象思想实现

es6方式

class Cars {
	constructor (number, money) {
		this.number = number;
		this.money = money;
		this.getInfo();
	}
	getInfor () {
		console.log('车牌号为：'+ this.number + '每公里' + this.money + '元');
	}
	getLast (miles) {
		return '总消费为：' + this.money * miles;
	}
}
let car = new Cars('AE86', 5);
let getLast = car.getLast(50);

es5方式

function Cars (number, money) {
	this.number = number;
    this.money = money;
    this.getInfo();
}
Cars.prototype.getInfo = function() {
	console.log('车牌号为：'+ this.number + '每公里' + this.money + '元');
}
Cars.prototype.getLast = function(miles) {
	return '总消费为：' + this.money * miles;
}
let car = new Cars('AE86', 2);
let getLast = car.getLast(50);

注：以上代码可能并非最优解，仅根据最简单逻辑直观实现