首页 > 代码库 > js 入门级常见问题
js 入门级常见问题
写在前面：以下是个人总结的关于js常见的入门级的问题一些总结。
js是有 ECMAScript Dom Bom 三部分组成。
1,undefined,NaN，Null,infinity
1) undefined 是undefined 类型
var a; //声明变量后不赋值
typeof 类型判断方法
console.log(typeof(a)) //undefined
2) NaN 是 number 型 表示不是一个数字
var a=123;
var b="abc";
a-b 得到NaN
console.log(typeof(a-b)) number
3) Null 面向对象的概念 表示该对象为空
4)infinity 是number 类型 表示无穷大 除数为0可得
2，js精度问题
js在运算时会存在精度问题：
1）可以先乘以100 1000 ....先化成整数在100 1000
2）number.toFixed(参数) 设置保留小数位数 1.528.toFixed(2) =1.53
3，Math 对象常用几个函数
1）天花板函数 ceil Math.ceil(1.23)=2 向上返回最小的整数
2）地板函数 floor Math.floor(1.23)=1 向下返回最小的整数
3）随机数
Math.random() 返回0-1 的随机数
Math.floor(Math.random()*10) 返回0-9 的随机数
4) Math.max() Math.min() 返回最大最小的值
5）Math.abs(x)返回一个绝对值
6）Math.round(x) 四舍五入
4,数据类型转换
1）隐式转换 变量在运算过程中发生的类型转换
!! console.log(!!"abc")
2）显示（强制）转换:
转字符串：a,（String）变量 b,变量.toString()
转数字型：a,Number(变量) b,parseInt(变量) c,parseFloat(变量)
转布尔型：Boolean(变量)
几种转换为false的 undefined NaN Null 0 false ""
5，逻辑运算符的短路操作：当操作数不是bool值时
1）隐式转换
2）从左往右
3) 哪个操作数可以决定结果，就返回这个原操作数
"100"&&0;//true&&false
6,数组检测方式
var arr=[]
1）Array.isArray(arr) 有兼容性问题
2）arr instanceof Array 推荐使用
3) Object.prototype.toString.Call(arr) 可检测任意类型
7，函数的arguments 和 es6 rest 用法
1)arguments只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数 类似数组
2）rest参数只能写在最后，前面用...标识
function foo(a, b, ...rest) {
console.log(‘a = ‘ + a);
console.log(‘b = ‘ + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
8，函数变量提升：
先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部
‘use strict‘;
function foo() {
var x = ‘Hello, ‘ + y;
alert(x);
var y = ‘Bob‘;
}
foo();
虽然是strict模式，但语句var x = ‘Hello, ‘ + y;并不报错，原因是变量y在稍后申明了。
但是alert显示Hello, undefined，说明变量y的值为undefined。
这正是因为JavaScript引擎自动提升了变量y的声明，但不会提升变量y的赋值。
............................................................................................
变量提升后代码：
function foo() {
var y; // 提升变量y的申明
var x = ‘Hello, ‘ + y;
alert(x);
y = ‘Bob‘;
}
注意：函数内变量的怪异声明模式
function fun(){
num=10 //没写var 就相当于全局变量
}
fun()
console.log(num) //10
9，this 指向问题
1 ‘use strict‘; 2 var obj={ 3 name:"test", 4 printName:function(){ 5 console.log(this.name) 6 } 7 } 8 obj.printName(); //显示 test this 指的就是obj 9 10 var obj={ 11 name:"test", 12 printName:function(){ 13 function showName (){ 14 console.log(this.name) 15 } 16 return showName() 17 } 18 } 19 obj.printName(); //this 指向 undefined （在非严格模式下指向Windows） 20 21 解决方法： var obj={ 22 name:"test", 23 printName:function(){ 24 var self=this //在函数外捕获this 25 function showName (){ 26 console.log(self.name) 27 } 28 return showName() 29 } 30 }
10，sort 排序的坑
1）Array的sort()方法默认把所有元素先转换为String再排序，如果直接排序数字你就踩坑了
2）默认根据ASCII码进行排序
3）sort 是一个高阶函数，sort（function(){
//写具体的实现逻辑
}）
// 升序
sort(function(a,b){
return a-b
})
//降序
sort(function(a,b){
return b-a
})
11，获取样式
getComputedStyle(el,null).width ie 不支持
document.getElementById("btn").currentStyle.width ie提供的
function getStyle(tag, attr) { return tag.currentStyle ? tag.currentStyle[attr] : getComputedStyle(tag, null)[attr]; }
12，拼接字符串的问题
在ie7以下存在性能问题，可用数组替换
ie7以上不存在该问题
13,数组的几个方法
1）arr.slice(start,end) 拷贝数组中的一段数据，返回拷贝的数组
2）splice(start,length) 返回截取数组的部分元素，修改原数组
splice 的参数超过2个会将剩下的参数添加到被截取的数组位置上
arr.splice(1,2,"a","b")
14,清空数组：
1)arr.length=0
2)arr=[] //推荐使用
3)arr.splice(0,arr.length)
15,避免事件被覆盖的方法（ie9 以下不支持）
标签.addEventListener(enventType,fn，flase) false默认冒泡 true 捕获
function fun(){
alert("你好")
}
eg:btn.addEventListener("click",fun)
移除事件监听(参数必须一致)
btn.removeEventListener("click",fun)
ie-6-10(enventType 加on)
标签.attachEvent(enventType,fn)
标签.detachEvent(enventType,fn)
16,事件冒泡，和事件捕获
事件冒泡：从里向外执行，遇到相同的事件及执行
事件捕获：执行顺序与冒泡相反（不推荐使用，因为ie使用attachEvent 没有第三个参数）
阻止事件冒泡
e.stopPropagation()
ie 中阻止事件传播 cancelBubble=true
17，事件的对象作用：记录当前事件触发时的一些信息
btn.onclick=function(event){}
event.target真正触发事件的元素
event.type="click"
event.clinetX/clinetY
ie 低版本不兼容
var tar=e.target||e.srcElement
18,Json 串的2方法
1）object-->string JSON.stringify()
2) string--> obj JSON.parse()
js 入门级常见问题