盤點js學習中，遇到的各種疑問

查看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"一定要有，主要是根據後臺的需求上傳