一、css2与css3的垂直居中与水平居中
css2
1.水平居中
--对于行内元素,设置text-align:center;
--对于块级元素,给元素设置宽度,并设置 margin:0 auto;左右居中;
2.垂直居中
--对于单行文本,给父元素设置heigth和line-heigth,设为相同的值,可实现文本垂直居中;
--对于块级元素,给元素设置高度,并设置 margin:auto 0;上下居中;
--给容器内元素设置相同的上下padding值,可实现垂直居中;
css3
1.水平居中
--给元素设置display:flex,再通过justify-content:center; 实现水平居中;
2.垂直居中
--给元素设置display:flex,再通过align-items:center; 实现垂直居中;
二、js 显性数据转换和隐形数据转换
1、显性数据转换
也称强制性数据转换,是通过String()、Number()和Boolean()等构造方
法手动转换成对应的字符串、数字和布尔值。即分为:
将其他类型转为字符串,将其他类型转为数值,将其他类型转为布尔值
--其他类型转为字符串: 转换后的数据类型均为 string
console.log(String(111));"111"
console.log(String(true));"true"
console.log(String(false));"false"
console.log(String(null));"null"
console.log(String(undefined));"undefined"
--其他类型转为数值: 转换后的数据类型均为 number
console.log(Number('111'));//111
console.log(Number('111a'));//NaN
console.log(Number(""));//0
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(undefined));//NaN
console.log(Number(null));//0
console.log(Number(' \t\n 3.23322\t ')); //输出3.23322
//Number可以自动去掉,包括空白符、换行符、Tab
特殊的,注意number与parseInt区别
console.log(Number('111a222'));//NaN
console.log(parseInt('111a222'));//111
--其他类型转为数值: 转换后的数据类型均为 boolean
console.log(Boolean(0));//false
console.log(Boolean(-0));//false
console.log(Boolean(+0));//false
console.log(Boolean(''));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean(NaN));//false
0,+0,-0,"",null,undefined,NaN 转换为boolean类型均为false,其余转换均为true
2、隐性类型转换
又称自动类型转换,即js会自动将类型转换为需要的类型
数据比较:js中的不同的数据类型之间的比较转换规则
参考:cnblogs.com/chenmeng0818/p/5954215.html
比较对象 | 规则 |
---|---|
对象—字符串 | 对象转换为字符串 |
对象—数值 | 对象先转换为字符串,再转换为数值 |
对象—布尔 | 对象先转换为字符串,再转换为数值,布尔转换为数值 |
字符串—数值 | 字符串转换为数值 |
字符串—布尔 | 字符串转换为数值,布尔转换为数值 |
布尔—数值 | 布尔转换为数值 |
特殊的
console.log(undefined==undefined);//true
console.log(undefined==null);//true
console.log(null==null);//true
console.log(NaN==NaN);//false
- 在加减乘除运算的地方,JS会自动将变量转换为number类型
console.log("1"-"2");//-1
console.log("1"*{});//NaN
//对于+加号比较特殊,+两边有任意一个运算数为字符串,+作为拼接运算符运算
console.log("1"+"2");//12
console.log(1+"2");//12
console.log("1"+true);//1true
- "+"两边有任意一个运算数为字符串时,js将另一个运算数也转换为string类型,+作为拼接运算符运算
console.log('1'+'2');//12
console.log('1'+'a');//1a
console.log('1'+1);//11
console.log('a'+null);//anull
console.log('1'+undefined);//1undefined
console.log('a'+{});//a[object Object]
console.log('a'+true);//atrue
- 在if条件、三元运算符下,系统都会自动调用Boolean()构造函数将值转换为Boolean类型,同样,0,+0,-0,"",null,undefined,NaN
转换为boolean类型均为false,其余转换均为true。
三、判断数据类型的方法
1、typeof
//typeof检测基本数据类型,String,Number,Boolean,Null,undefined
console.log(typeof 0); //number
console.log(typeof '0'); //string
console.log(typeof true); //boolean
console.log(typeof null); //object js遗留的bug,typeof null返回object
console.log(typeof undefined); //undefined
console.log(typeof NaN); //number NaN检测是否为非数,返回number
//typeof检测引用数据类型,function返回function,其余返回的为object
2、instanceof—不能用来检测基本数据类型,可准确检测引用类型Object(Array、Function、Array、Date、RegExp), A instanceof B,A为实例,B为对象类型
function method(){}
var date = new Date();
var reg = /^\d+$/;
console.log([] instanceof Array); //true
console.log(method instanceof Function); //true
console.log(date instanceof Date); //true
console.log(reg instanceof RegExp); //true
3、Object.prototype.toString.call()—可以准确检测所有数据类型
console.log(Object.prototype.toString.call(1)); //[object Number]
console.log(Object.prototype.toString.call("1")); //[object String]
console.log(Object.prototype.toString.call(true)); //[object Boolean]
console.log(Object.prototype.toString.call(null)); //[object Null]
console.log(Object.prototype.toString.call(undefined));// [object Undefined]
console.log(Object.prototype.toString.call([])); //[object Array]
console.log(Object.prototype.toString.call({})); //[object Object]
console.log(Object.prototype.toString.call(method)); //[object Function]
console.log(Object.prototype.toString.call(date));// [object Date]
console.log(Object.prototype.toString.call(reg)); //[object RegExp]
4.jquery.type()—可以准确检查所有数据类型
console.log($.type(1)); //number
console.log($.type("111")); // string
console.log($.type(true)); // boolean
console.log($.type(null)); // null
console.log($.type(undefined)); // undefined
console.log($.type([])); // array
console.log($.type({})); // object
console.log($.type(date)); // date
console.log($.type(reg)); // regexp
console.log($.type(method)); // function
四、js闭包
function hd(){
var n=1;
function add(){
console.log(++n);
}
add();
}
//hd()每执行完一次,其环境随即被销毁,再次执行,重新开辟新的空间,n=1,++n后,输出均为2
hd(); //2
hd(); //2
hd(); //2
要想实现累计的效果,则需要保存hd()每次执行完的结果,即hd()的环境不能被摧毁,对以上代码进行修改
function hd(){
var n=1;
return function add() {
console.log(++n);
}
}
var a = hd(); //a=add();
//执行完a(),返回的add()函数中引用了其父级函数hd()的环境变量,导致hd()的环境无法释放不被摧毁,以此实现累加
a(); //2 //执行add函数
a(); //3
a(); //4
var b= hd(); //b= add()
b(); //2
b(); //3
总结:闭包就是一个引用了父环境的对象,并且从父环境中返回到更高层的环境中的一个对象,也可以说如果一个函数引用了父环境中的对象,并且在这个函数中把这个对象返回到了更高层的环境中,那么,这个函数就是闭包。
对于上述例子,add()函数引用了父环境fd()中的对象(n),并且add()将这个对象返回给了更高层的环境(全局),所以add()函数就是闭包。
参考:jb51.net/article/126565.htm