问题总结（一）-CSDN博客

本文链接：https://blog.csdn.net/pet_ch/article/details/106931673

一、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