盘点js学习中，遇到的各种疑问

最新推荐文章于 2020-12-05 21:50:12 发布

lidix

最新推荐文章于 2020-12-05 21:50:12 发布

阅读量230

点赞数

分类专栏： web 文章标签： JS

本文链接：https://blog.csdn.net/m0_37613019/article/details/102994767

版权

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

查看JS方法的兼容性

网址：https://caniuse.com/

一、关于data-xxx

1）命名不要包含大写字母

第一种：（可行）
<div id="test" data-user-id="99"></div>
<script type="text/javascript">
	$(function(){
		console.log($('#test').data('userId')) // 99
        console.log($('#test').data('user-id')) // 99
	})
</script>

第二种：（不可行）,data-xxx中不要包含大写字母
<div id="test" data-userId="99"></div>
<script type="text/javascript">
	$(function(){
		console.log($('#test').data('userId')) // undefined
        console.log($('#test').arrt('data-userId')) // 99
	})
</script>

2）会变动的data-xxx，data(name)不能改变页面上显示的值，请使用attr('data-xxx')进行改变。需要注意的是，如果获取的值是数字，attr('data-xxx')获取的值是String类型，data(name)获取的值是Number类型。

<div id="test" data-userid="99"></div>
<button id="btn">改变</button>

<script type="text/javascript">
	$(function(){
		$('#btn').click(function(){
			$('#test').data('userid',88) //页面上的值仍是不变的
			console.log($('#test').data('userid')) // 88
			console.log($('#test').attr('data-userid')) // 99
		})
	})
-----------------------------------------------------------------------------
    $(function(){
		$('#btn').click(function(){
			$('#test').attr('data-userid',88) // 能改变页面上的值
			console.log($('#test').data('userid')) // 88
			console.log($('#test').attr('data-userid')) // 88
		})
	})
</script>

二、JSON.parse()

使用此方法将字符串转为JSON对象时，必须保证字符串严格符合JSON格式（'{a:20}'，不能通过a没有加双引号）

三、数组与类数组

如使用document.getElementsByClassName获取的元素数组，是一个类数组。

1）类数组没有数组的方法。

2）不要使用for in去遍历类数组，会遍历出多余的数据。

四、在for中绑定事件

这样会导致每个按钮的输出值都为3，因为它使用了for中的i，i在循环后的值就是3，可以使用闭包解决此问题。

参考地址：https://blog.csdn.net/u011320646/article/details/17048647

var btn = document.getElementsByClassName('test')
for(var i = 0; i < 3; i++) {
	btn[i].onclick = function(){
		console.log(i)
	}
}

五、获取元素样式

1）style：读取的只是元素的内联样式，即写在元素的 style 属性上的样式，既支持读也支持写。

2）getComputedStyle和currentStyle：读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式，仅支持读并不支持写入。

function getStyle(ele, sty) { //ele是元素，sty是样式
	var style = null;
	if(window.getComputedStyle) {
	//如果属性名是变量需要把"."换成"[]"
		style = window.getComputedStyle(ele)[sty]; //标准浏览器支持
	} else {
		style = ele.currentStyle[sty]; //低版本ie只支持这种方式
	}
	return style;
}

六、js进行浮点数运算存在精度问题

1）使用math.js插件。

2）使用以下代码解决。参考地址找不到了....

/**
 * js浮点数精确计算,正负计算数值小于
 * Math.abs(Math.pow(2, 53))2的53次方,还不是很了解，粗略说明
 * accAdd(num1, num2)--加
 * accSub(num1, num2)--减
 * accDiv(num1, num2)--除
 * accMul(num1, num2)--乘
 */
(function(window) {
	'use strict'

	function ExactCalc() {
		return ExactCalc.prototype.init();
	}
	ExactCalc.prototype = {
		constructor: ExactCalc,
		init: function() {

		},
		accAdd: function(num1, num2) { //加
			num1 = Number(num1);
			num2 = Number(num2);
			var dec1, dec2, times;
			try {
				dec1 = this.countDecimals(num1) + 1;
			} catch (e) {
				dec1 = 0;
			}
			try {
				dec2 = this.countDecimals(num2) + 1;
			} catch (e) {
				dec2 = 0;
			}
			times = Math.pow(10, Math.max(dec1, dec2));
			// var result = (num1 * times + num2 * times) / times;
			var result = (this.accMul(num1, times) + this.accMul(num2, times)) / times;
			return this.getCorrectResult("add", num1, num2, result);
			// return result;
		},
		accSub: function(num1, num2) { //减
			num1 = Number(num1);
			num2 = Number(num2);
			var dec1, dec2, times;
			try {
				dec1 = this.countDecimals(num1) + 1;
			} catch (e) {
				dec1 = 0;
			}
			try {
				dec2 = this.countDecimals(num2) + 1;
			} catch (e) {
				dec2 = 0;
			}
			times = Math.pow(10, Math.max(dec1, dec2));
			// var result = Number(((num1 * times - num2 * times) / times);
			var result = Number((this.accMul(num1, times) - this.accMul(num2, times)) / times);
			return this.getCorrectResult("sub", num1, num2, result);
			// return result;
		},
		accDiv: function(num1, num2) { //除
			num1 = Number(num1);
			num2 = Number(num2);
			var t1 = 0,
				t2 = 0,
				dec1, dec2;
			try {
				t1 = this.countDecimals(num1);
			} catch (e) {}
			try {
				t2 = this.countDecimals(num2);
			} catch (e) {}
			dec1 = this.convertToInt(num1);
			dec2 = this.convertToInt(num2);
			var result = this.accMul((dec1 / dec2), Math.pow(10, t2 - t1));
			return this.getCorrectResult("div", num1, num2, result);
			// return result;
		},
		accMul: function(num1, num2) { //乘
			num1 = Number(num1);
			num2 = Number(num2);
			var times = 0,
				s1 = num1.toString(),
				s2 = num2.toString();
			try {
				times += this.countDecimals(s1);
			} catch (e) {}
			try {
				times += this.countDecimals(s2);
			} catch (e) {}
			var result = this.convertToInt(s1) * this.convertToInt(s2) / Math.pow(10, times);
			return this.getCorrectResult("mul", num1, num2, result);
			// return result;
		},
		countDecimals: function(num) {
			var len = 0;
			try {
				num = Number(num);
				var str = num.toString().toUpperCase();
				if (str.split('E').length === 2) { // scientific notation
					var isDecimal = false;
					if (str.split('.').length === 2) {
						str = str.split('.')[1];
						if (parseInt(str.split('E')[0]) !== 0) {
							isDecimal = true;
						}
					}
					var x = str.split('E');
					if (isDecimal) {
						len = x[0].length;
					}
					len -= parseInt(x[1]);
				} else if (str.split('.').length === 2) { // decimal
					if (parseInt(str.split('.')[1]) !== 0) {
						len = str.split('.')[1].length;
					}
				}
			} catch (e) {
				throw e;
			} finally {
				if (isNaN(len) || len < 0) {
					len = 0;
				}
				return len;
			}
		},
		convertToInt: function(num) {
			num = Number(num);
			var newNum = num;
			var times = this.countDecimals(num);
			var temp_num = num.toString().toUpperCase();
			if (temp_num.split('E').length === 2) {
				newNum = Math.round(num * Math.pow(10, times));
			} else {
				newNum = Number(temp_num.replace(".", ""));
			}
			return newNum;
		},
		getCorrectResult: function(type, num1, num2, result) {
			var temp_result = 0;
			switch (type) {
				case "add":
					temp_result = num1 + num2;
					break;
				case "sub":
					temp_result = num1 - num2;
					break;
				case "div":
					temp_result = num1 / num2;
					break;
				case "mul":
					temp_result = num1 * num2;
					break;
			}
			if (Math.abs(result - temp_result) > 1) {
				return temp_result;
			}
			return result;
		}
	},
	ExactCalc.prototype.init.prototype = ExactCalc.prototype;
	window.ExactCalc = ExactCalc;

})(window);

七、关联数组

1）关联数组的长度为0.

2）关联数组的下标如果是数字，那么他的长度是根据下标取值的。

var a = [];
a['99'] = 123
console.log(a) // [emptyx99, 123], a.length = 100

八、使用formData上传文件

<form enctype="multipart/form-data" id="excelfile">
<div class="col-md-6">
    <input type="file" name="excelfile" >
</div>
<div class="col-md-6">
    <span class="btn btn-default" id="uploadFile">上传文件</span>
</div>
</form>

$("#uploadFile").click(function () {
    var aab = new FormData($("#excelfile")[0]);
    $.ajax({
        type:"post",
        url:"/admin/questpermit/importUser",
        cache: false,
        data: aab,
        processData: false,
        contentType: false,
        success:function (res) {
            console.log("上送考试数据")
            console.log(res)
        }
    })
})
本例子中name="excelfile"一定要有，主要是根据后台的需求上传

lidix

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盘点js学习中，遇到的各种疑问

查看JS方法的兼容性网址：https://caniuse.com/一、关于data-xxx1）命名不要包含大写字母第一种：（可行）<div id="test" data-user-id="99"></div><script type="text/javascript"> $(function(){ console.log($('...
复制链接

扫一扫

专栏目录