JavaScript基础01（变量，数据类型及其转换，运算符）

一、JS基础

1.js的组成

核心（ECMAScript)、DOM、BOM

2.js的引入及写法

1.在head里插入script标签，引入外部js代码

这里的js无法调用body里的标签和代码（因为HTML是从上向下的同步解释性文档）

2.在body标签最末尾引入script标签，直接在html内部书写js代码

在html标签后引入script，浏览器会自动修正,将script标签引入回body标签里（一般不这么引用，当页面需要植入内容时使用，但是会增加浏览器消耗）

几点注意：

变量污染：载入的js文件里变量或函数相同时，会覆盖

src地址里./代表当前文件夹，../代表上一级目录，引用外部js不要使用绝对路径，可以使用网址

head标签里的script有async defer(后面学习)

body里的js会污染head里引入的js，但是可以调用head里js的函数

3.标签里的javascript

    <button onclick="console.log('aaaaa');" id='bn'>按钮</button>
    <!-- 标签中行内JavaScript执行 -->
    <button onclick="clickHandler()">按钮</button>
    <a href="javascript:console.log('aaaaa')">超链接</a>
    <!-- 不跳转 -->
    <a href="javascript:void(0)">超链接</a>   /*src没有这种用法*/
    <script>
        function clickHandler(){
            console.log("aaaaa");
        }
    </script>

3.js注释和调试

注释可以让不用的代码不执行

注释可以用来解释代码的作用

1. ctrl+/ 行注释，注释一行的代码

2.shift+alt+a 块状注释

块状注释可以用来注释一行中的部分内容

块状注释可以用来注释掉一个函数和大量代码块

块状注释对于函数的注释说明在函数部分讲解

3.ctrl+shift+i控制面板里可以调试代码：

elements可查看html和css并修改，有断点，事件侦听，属性继承链（Properties，可查看一个标签有哪些属性）

console控制台

sources代码源，帮助排错，可设置断点

network是本地应用缓存

performance相当于录屏，网页崩溃时（内存泄漏）看看有哪些操作导致了

memory当前快照，当前页面系统内存占有

二、常用方法属性和变量

对象有两种模式，一种是属性，属性使用=赋值，一种是方法，方法需要()执行

1.方法

alert("你好");//将字符串以弹窗弹出，并且暂停到当前行

alert(message?:any):void

提示 message 参数名称 ?可以不写值 :any 这个参数的类型可以是任意的， :void 不返回任何值

var a=confirm("是否继续？");//弹出确定取消框
var s=prompt("你今年多大了?","20");//弹出输入框

document.write("10","20","30");*//文档中写入字符
document.write("<a href='#'>超链接</a>")

2.属性

document.body.innerHTML="你好";
document.body.innerHTML="<div></div>";

注意：document.write和innerHTML的区别

write仅属于document的方法，可以给整个文档中增加内容

innerHTML是所有body内（含body）标签的属性，可以给这些标签内局部增加内容和标签

3.变量

1.变量的赋值

a=b=3;
//连等，先赋值给=号最左边的元素，再逐级向右
// =号左侧是变量名称，=号右侧是值
// 不需要定义，随手写，不需要类型（弱类型）
// =号赋值也是有返回值
console.log(a=3);//结果为3
a=b=3; 相当于 a=(b=3);  //代码遵从从左至右的执行方式
b=1;    
console.log(a=b++); //结果为1

2.变量的命名规则

1、变量必须驼峰式命名法

2、临时变量必须使用_起头，后面接驼峰式命名,

有时候也会在函数的参数中使用临时变量命名

var _a=3;

3、变量不可以使用关键词和保留字

var if=3;
var public=10;//保留字
var static=20;

4、全局的变量名不能与window下的属性和方法同名

var alert=10;
console.log(alert);
alert("aaaa");
var status=10;
console.log(status);//返回字符型10，而非数字型
console.log(var a=3);//一旦使用var是不可以返回的
console.log(a=3); 没有使用var会被赋值的结果返回3

3.常量

const 常量是一旦定义值就不能改变值了 常量定义是名称必须全部大写，并且使用_区分单词 使用常量目的是不会被别人修改或者变量污染改变

const EVENT_ID="changes";

三、数据类型

1.字符型string

所有使用 '' "" ``都是字符型 string

var a="a";
var b='1';
var c=`true`;
var d='你好这个非常"不错"';
console.log(a,b,c,d);
console.log(typeof a);
console.log(typeof(a));

2.数值型number

var a=3;
var b=3.1;
var c=-5;
var d=-5.6;
var e=0xFF;//16进制
var f=065;//8进制
var g=3.1e+5;//科学计数法 3.1*10(5)5次幂
var h=3.5e-5;//科学计数法 3.5*10(-5) -5次幂
console.log(typeof g,g);
定义的不一定和打印的结果完全相同，全部都会转换为10进制

3.布尔型boolean

<style>
  div{
      100px;
     height: 100px;
  }
</style>
<div id="div0"></div>
<script>
var div0=document.getElementById("div0");
var bool=true;//这就是布尔值;
div0.onclick=function(){
    bool=!bool;//将bool取反，因为这个bool值的值域只有true和false
    div0.style.backgroundColor=bool ? "red" : blue";
} 
</script>

4.未定义undefined

var a;//仅定义变量未设置值
var b=undefined; //定义变量并且设置值为undefined;
   值是相同的但是形态不同
   
console.log(a===b);//true
​
var arr=[1,2,,undefined,3];
​
var a; // 用于全局定义，然后根据需要时赋值，初始是没有值的
​
var b=undefined  //用于初始值必须是undefined，或者将原有有值的变量修改为undefined
var x=10;
x=undefined;

5.空值null

var a=null;
console.log(typeof a); //object对象类型
console.log(a===undefined);//false
//空值是将所有引用地址标记清空，用于清理内存 垃圾回收
var obj={a:1};
obj=null;
//字符类型，数值类型，布尔类型，未定义型都不需要null清除

6.对象类型object

var obj={};//空对象
obj=null;//将obj引用地址清空
var d="names";
obj={
   // key:value关键词和值，对象不能出现重复的key，key不需要加""
    a:1,
    b:"ab",
    "c":true, //变量作为key必须在外层增加[]
    [d]:"xietian"
 }
 console.log(obj.a);//1
 console.log(obj.b);//ab
 console.log(obj.names);//xietian
 console.log(obj[d]);//xietian
 console.log(obj["a"]);//1
 // 获取对象中key的值时有两种方法
 // 一种是点语法，点语法使用范畴仅限于key属性固定，并且明确
 // 另一种是[]语法，如果是固定的key，就使用字符串方式来设定，
 // 如果不固定，直接[变量]就可以

　　

四、数据类型转换

1.数值转字符串

String(a)、a.toString(16)、a.toFixed(2)、a.toExponential()、a.toPrecision()

var a=15.452;
var b=String(a);//类型强制转换
a=String(a);将a转换为字符串覆盖原有变量a
a=a+"";//利用隐式转换方式，没有强制转换，根据运算特征自动转换为字符串，隐式转换
        // 隐式转换所使用的的转换方法是自动执行String(a);
        // toString()实际上是Object对象的方法，因此，万物皆对象，任何类型都可以调用这个方法
a=a.toString(16);//参数必须是2-36之间，否则报错,转换为指定的进制数
console.log(a);
var color=0x0000FFFF;
var div0=document.getElementById('div0');
div0.style.color="#"+(color<<8).toString(16);
//toFixed(小数点位数)  转换为字符串，并且保留小数点位数，自动四舍五入
a=a.toFixed(2);
console.log(a);
a.toExponential();
a.toPrecision();

2.数值转换为布尔值

Boolean(a)

除了0以外所有的数值转换为布尔值都是true
0转换为布尔值是false
var  a=0;
a=Boolean(a);
console.log(a);

3.数值转换为对象

Object(a)

var a=0;
a=Object(a);//数值型对象，存储在堆中
console.log(typeof a);

4.字符串转换为数值

Number(a)、parseInt(a,16)、parseFloat(a)

var a="a";
var a="3.2"
a=Number(a);//强制转换为数值类型
​
a=parseInt(a);//转换为整数
a=parseFloat(a);//转换为浮点数
        
var a="101";
a=parseInt(a,2);//将字符串转换为2进制
var color="FF0000";
color=parseInt(color,16);
console.log(color);
        
a=parseFloat();//不能转换进制
​
var b="32 1";
var b="32 "
b=Number(b);
b=parseInt(b);
b=parseFloat(b);
console.log(b);
//NaN  数值类型中的非数值
// 隐式转换遵从Number()转换方法

5.字符串转换为布尔值

Boolean(a)

// 仅空字符串转换为布尔值时，是false，除此之外全部是true
var str="";
str=Boolean(str);
console.log(str);

6.字符串转换为对象

Object(a)

var str="aaa";
str=Object(str);
//转换为字符串对象
console.log(str);
​
var str=" a a  ";
str=str.trim();//清除字符串前后空格
console.log(str);

7.布尔转换为数值

Number(a)

//true转换为1，false转换为0
var b=true;
b=Number(b);
console.log(b);

8.布尔转换为字符

转换后就是字符串true和false

9.布尔转换为对象

转换后就是布尔值对象

10.任何类型转换为布尔值

var a="";
var b=0;
var c=NaN;
var d=false;
var e=null;
var f=undefined;
//以上6种转换布尔值是false，其他都是true
​
var a="32a";
if(Number(a)){
​
}
​
//undefined null转换为字符串和数值
var a;
var b=null;
a=String(a);
b=String(b);
console.log(b);
​
a=Number(a);//转换为数值是NaN
b=Number(b);//转换为数值是0
        
a=parseInt(a);//NaN
b=parseInt(b);//NaN
console.log(a,b);
​
var a,b,c;
var a1=3,
    b1=4,
    c1="a",
    d1=true;
​
var a=b=3;//尽量不要使用连等赋值

五、算术运算符

+ - * / %(取模运算符)

var a=3;
var b=5;
var s=a+b;
var s=a-b;
var s=a*b;
var s=a/b;
var s=b%a;
// 运算浮点数运算是会有误差
console.log(0.1+0.2); //0.300000004 用slice不能用toFixed

var bn0=document.getElementById("bn0");
var sum=1;
bn0.onclick=function(){
    sum=sum+1;//先计算=号右边，完成后的结果赋值给等候左边
    if(sum%2){
         bn0.innerHTML="开";
    }else{
         bn0.innerHTML="关";
    }
 }
​
// 如果在算术运算符中前后出现字符串，并且使用+
// 必须使用字符串首尾相连的方式将内容连接
String()  Number() Boolean() Object();
var a=3;//因为a不是字符串，所以就会隐式转换为字符串
var a="bbb";
var a=true;
var a;
var a=null;
var b="a";
console.log(a+b);
​
// 如果运算过程中没有使用字符串，使用+符号，
// 其他类型都会转换为数值，并且相加
var a=3;
var b=true;
var b;
var b=null;
        
var a;
var b=null;
var a=true;
var b=null;
console.log(a+b);//1
​
// 所有类型遇到 - * / %都会隐式转换为数值，然后运算的
var a="5";
var b=2;
console.log(a*b);//10

六、一元运算符和赋值运算符

var a=3;
var b=4;
var s=0;
console.log(s=a+b);//7
​
var a=3;
a+=7;//a=a+7;   7就是步长 step
console.log(a+=7);//17
​
var a=3;
a+="";
console.log(a);//字符串类型的3
//利用隐式转换完成字符串转换
​
var a=3;
a-=2;
console.log(a);//1
​
var a=3;
a*=2;//6
a/=2;//3
a%=2;//1
a+=a+1;//3
// 赋值运算符的优先级最低
var b=a+3+(a+=4)
console.log(b);//13
​
var a=3;
a<<=2;
console.log(a);//12
​
var a=1;
for(var i=0;i<5;i++){
    a<<=1;
    console.log(a);//2 4 8 16 32
}
​
var a=5;
a>>=1;
console.log(a);//2
​
// 一元运算符
var a=3;
a++;//3下一次运算才为4
a=a+1;//4
a+=1;//4
​
var a=3;
var b= (a=a+1) *3;//12
var b=(a++)*3;//先把a返回 9
var b=(++a)*3;//把a运算的结果返回  12
​
var s=1;
var d=s=s+1;
console.log(d);//2
​
a++;++a;  对于a来说，这两个公式运算结果都是相同
var a=1;
a++;
++a;
console.log(a);//2;
​
// 如果将a++或者++a作为返回值参与运算或者赋值时
// ++a 是+1以后的结果先参与运算或者赋值
// a++ 是将a先参与运算或者赋值
​
var a="3";
var b=a++;
// 对于++ 和 -- 通常都会直接使用算术运算来处理，
// 也就是说我们会将内容先隐式转换为数值，然后再运算
console.log(b);//数值型3
​
var a=3;
var b=a++ + a++ +a + a++ + a + a;//29
//3+8+16
var b=a+++(a+=a)+a++*2;
console.log(b,a);//27,9

七、关系运算符

// 关系运算是返回布尔值的一种运算表达式
var a=3;
var b=4;
var c=10;
console.log(a<b);
console.log(c+(a<b));//11
c+=a<b;
console.log(c);//11
var c=a>b ? 0 : 1; //1
var c=Number(a>b);  //0
​
// 运算符   <   >  <=  >=
// == 判断值是否相等   === 判断值和类型是否相等
//以后所有代码必须使用===
​
var a=3;
var b="3";
console.log(a==b);//自动隐式转换
​
// 优先隐式转换为数值，并且比较
console.log(""==false);//true
console.log(0=="");//true
console.log(0==false);/true
​
console.log(undefined==null);//因为两者都不是数据true
​
console.log(NaN==NaN);//false
​
var a="3a"; //isNaN 将这个字符串转换为数值后判断是否是NaN非数值
if(isNaN(a)){
   console.log(123);//123
}
​
var a=0;
if(a==false){
    console.log("aa");
    // a->  0  false  ""
}
​
if(a===false){
     console.log("aa");
     // a-->false
}
if(!a){
     console.log("aa");
     // a-->0 null undefined false "" NaN
}
​
if(a==null){
    // a-->undefined  null
}
if(a===undefined){
    //a-->undefined
}
// !=   !==

八、逻辑运算符

// &&   ||   !
​
var a=3;
var b=4;
console.log(a>0 && b<5);//true
​
// true && true = (第二个值)
// true && false = （第二个值）
// false && true = （第一个值）
// false && false = （第一个值）
​
console.log(3 && 0);//0
console.log(3 && 4);//4
console.log(0 && 4);//0
console.log(0 && "");//0
​
var a=1;
a=a-- && a++;
console.log(a);//0
​​
//  true || true = (第一个值)
// true || false = （第一个值）
// false || true = （第二个值）
// false || false = （第二个值）
​
var obj={a:2};
// 如果obj转换为布尔值是true，直接熔断
// 如果是false，取第二个值
obj=obj || {a:1};
console.log(obj);
​
class Box{
       static _instance;
       static getInstance(){
          return Box._instance || (Box._instance=new Box());
       }
}
​
var  a=3;
var b=a===3 || 0;
console.log(b); //true
​
// !  取反
var bool=false;
var bn=document.getElementById("bn");
bn.onclick=function(){
   bool=!bool;//取反运算
   bn.innerHTML=bool ? "开" : "关";
}
​
var a;
if(!a){
  console.log(123);//123
}

​