javaScript基础学习笔记(1) 数据类型总结

基本数据类型：
一 ，基本类型：

1 数字 number
2 字符串 string
3 布尔 boolean
4 空对象指针 null
5 未定义 undefined
6 ES6新增的唯一值类型 symbol

二，引用数据类型

 1 对象数据类型 object
 2 普通对象 {}
 3 数组对象 []
 4 正则对象 /^$/
 5 日期对象 new Date
 6 数学函数对象 Math

三， 函数数据类型 function

数字类型Number:

• 把字符串转换为数字：一但字符串中出现非有效数字字符，则结果为NaN，只有都是有效数字字符，才能转换为具体的数字，空字符串会转换为0
• 把布尔转换为数字：true转换为1 false转换为0
• 把空转换为数字：null转换为0 undefined转换为NaN
• 不能把Symbol类型转换为数字，否则会报错
• 对象转换为数字：先把对象转换为字符串，再把字符串转为数字
• 普通对象
• 数组对象
• 其余对象格式基本上都会变为数字NaN
• 函数转换为数字：结果都是NaN

     console.log(Number('12')); //=>12
	 console.log(Number('12.5')); //=>12.5
	 console.log(Number('12px')); //=>NaN
	 console.log(Number('12.5.0')); //=>NaN
	 console.log(Number(true)); //=>1
	 console.log(Number(false)); //=>0
	 console.log(Number(null)); //=>0
	 console.log(Number(undefined)); //=>NaN
	 console.log(Number(Symbol(13))); //=>Cannot convert a Symbol  value to a number
	 console.log(Number(function func() {}));
	 * //1.先把obj转化为字符串 "[object Object]"
	 * //2.把字符串转换为数字 Number("[object Object]") 
	 *
	let obj={x:100};
	 console.log(Number(obj)); //=>NaN
	 * 1.先把ARR转换为字符串： "10"
	 * 2.在把"10"转换为数字：10
	     let arr = ["10"];
	     console.log(Number(arr)); //=>10
	     
	 * 1.先把ARR转换为字符串： "10,20"
	 * 2.在把"10,20"转换为数字：NaN
	      arr = ["10", "20"];
	 console.log(Number(arr)); //=>NaN
	 console.log(Number([])); //=>  []->''  Number('')->0
	console.log(Number(['AA'])); //=> ['AA']->'AA'  Number('AA')->NaN

parseInt 和parseFloat：也是把其它数据类型转换为number类型的，处理原理和Number不一样，他们是把字符串转换为数字类型（如果处理的值不是字符串，需要先转换为字符串然后在去转换为number类型的） =>从字符串最左边开始查找，把找到的有效数字字符转换为数字，一直遇到一个非有效数字字符为止，则结束查找。

         console.log(Number('12px')); //=>NaN
		 console.log(parseInt('12px')); //=>12
		 console.log(parseInt('12px24')); //=>12
		 console.log(parseInt('width:12px')); //=>NaN
		 console.log(parseInt('12.5px')); //=>12
		 console.log(parseFloat('12.5px')); //=>12.5  parseFloat比parseInt多识别一个小数点
		 console.log(Number(true)); //=>1
		 console.log(parseInt(true)); //=>先把TRUE转换为字符串"TRUE"  parseInt('true') =>NaN
		 console.log(parseInt(NaN)); //=>NaN
		 console.log(Number(null)); //=>0
	     console.log(parseInt(null)); //=> parseInt('null') =>NaN
		 console.log(isNaN(Number(parseInt("0.8")))); //=>parseInt("0.8")->0   Number(0)->0  isNaN(0)->false
		 console.log(Number('')); //=>0
		 console.log(parseInt('')); //=>NaN
		 toFixed：保留小数点后面N位（最后的结果是一个字符串）
		 let n = 3.1415926;
		 console.log(n.toFixed(2)); //=>"3.14"
		 console.log(Number.MAX_SAFE_INTEGER); //=>9007199254740991 最大安全数*（JS能够有效识别的最大整数）
	     console.log(9007199254740992 == 9007199254740993); //=>true  应该是不一样的，但是超过了最大数值，JS无法精准计算
ES6中提供了一个新的数据类型 BigInt：管理超过安全数值的数字
      console.log(BigInt(9007199254740992), BigInt(9007199254740993));*
	 * 基本数据类型
	 *   number string boolean null undefined symbol  => BigInt新增的基本数据类

String类型：

        console.log(3 - "3px"); //=>NaN
		console.log(3 + "3px"); //=>"33px"  字符串拼接
		console.log(1 + "1"); //=>"11" 字符串拼接
		console.log(1 + {}); //=>"1[object Object]"  在把{}转换为数字过程中，先把他转换为字符串"[object Object]"，此时右侧出现了字符串，则不再是数学运算，而是字符串拼接了
		console.log(1 + []); //=>'1'
		console.log([10] + true); //=>"10true"  在转换[10]到数字的过程中，先把其转换为字符串"10"，此时操作变为字符串拼接(和数学运算没关系了)
		console.log(true + [10]); //=>"true10"
		console.log(1 + true); //=>2 
          %（膜）取余数:
		console.log(4 / 2); //=>除  2
		console.log(7 / 3); //=>除  2.3333333333333335
		console.log(7 % 3); //=>取余  1
		console.log(10 - null); //=>10
		console.log(3 * undefined); //=>NaN
		console.log(true - "12"); //=>1-12 =>-11
		console.log(100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false);
		 /*100 + true => 101
		 101 + 21.2 => 122.2
		 122.2 + null => 122.2
		 122.2 + undefined => NaN 
		 NaN + "Tencent" => "NaNTencent"  字符串拼接（以后都是字符串拼接）
		 "NaNTencent" + [] => "NaNTencent"
		 "NaNTencent" + null => "NaNTencentnull"
		 "NaNTencentnull" + 9 => "NaNTencentnull9"
		 "NaNTencentnull9" + false => "NaNTencentnull9false"
		 */

常见使用Demo:

完成字符串拼接处理：2020年03月03日 12:00:00
		let year = '2020';
		let month = '03';
		let day = '03';
		let hours = '12';
		let minutes = '00';
		let seconds = '00';

方法一：
      ES6中的**模板字符串**就是为了解决传统字符串拼接中的问题（反引号 TAB上面的撇）
      **${}**中存放变量或者其它的JS表达式即可，很简单的完成字符串拼接
		let result = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
		console.log(result);

		let str='<div class="box" id="box">';
		str+='<h2 class="title">哈哈</h2>';
		str+='<ul class="item">';
		str+='<li></li>';
		// ....
  或者
		let str = `<div class="box" id="box">
			<h2 class="title">哈哈</h2>
			<ul class="item">
				${[10,20,30].map(item=>{
					return `<li>${item}</li>`;
				}).join('')}
			</ul>
		</div>`;
		console.log(str); 
方法二：传统的拼接方式，我们需要在字符串中基于 "++" 或者 '++' 的方式把变量拼接到字符串中（这种方式涉及很多恶心的规则，一不留神就容易拼错）
		let result = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds;
		let result = "" + year + "年" + month + "月日 ::";
		console.log(result);

Boolean类型：
0 ，NaN ， null ， undefined ， 空字符串 返回为false,其余都是true。

        console.log(!!1); //=>true
		console.log(!1); //=>false
		console.log(!!-1); //=>true
		console.log(!!0); //=>false
		console.log(!!undefined); //=>false
		console.log(!!Number('12px')); //=>Number('12px')->NaN  false
		console.log(!![]); //=>true
		console.log(!!''); //=>false
		console.log(!!{}); //=>true

		 条件判断中，每一个条件最后一定是true/false */
		if (1 == 1) {}
		if (1) {
			//=>写一个值，也是要把这个值转换为布尔，然后校验程序的真假
		}
		if (3 + '3px') {} //=>3 + '3px' =>'33px'  真
		if (3 - '3px') {} //=>3 - '3px' =>NaN   假