初学者前端开发笔记指南

Javascript的介绍:

Javascript是什么?

编程语言.
Javascript(简称"JS")是一种运行在客户端的脚步语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能.
浏览器就是一种运行JS脚本语言的客户端,JS的解释器被称之为JS引擎,是浏览器的一部分.

JS的组成（面试题难度:1）

由ECMAScript 和DOM 和BOM 三者共同组成 .
ES：定义了 JS的语法规范，描述了语言的基本语法和数据类型

简单来说：JS怎么写，需要根据ES 的规定

DOM （文档对象模型）有一套成熟的操作DOM节点的API通过DOM可以操作页面中的元素（其实就是标签）

比如：增加一个DIV；删除一个 span或者修改一个h1标签的内容

BOM （浏览器对象模型）有一套成熟的操作 BOM 的API

比如：弹出框浏览器跳转获取浏览器的相关信息获取浏览器尺寸

JS的三种书写方式：

分别是：【行内样式】【内嵌样式】【外链样式】

一.行内式(了解即可)

<input type="button" value="点击我" onclick="alert('Hello World')">

注意事项:

可以将单行或少量JS代码写在HTML标签的事件属性中(以on 开头的属性)，如:onclick。
注意单双引号的使用:在HTML中我们推荐使用双引号,JS 中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读代码不易维护
引号易错，引号多层嵌套匹配时，非常容易弄混;
特殊情况下使用

二.内嵌式(学习阶段使用)

<script> alert("我是内嵌的js") </script>

注意事项:

可以将多行JS代码写到script标签中
内嵌JS是学习时常使用的方式

三.外链式(公司项目量大正在使用中...)

<script src="02测试.js"></script>

注意事项:

利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观也方便文件级别的复用
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况

JS输入输出语句：

为了方便信息的输入输出，JS中提供了一些常用的输入输出语句如下：

<script>
//window.prompt  浏览器弹出输入框，用户可以输入信息
prompt('请输入您的年龄')
//window.alert   浏览器弹出警示框
alert('计算的结果是--')
//console.log 浏览器控制台输出 是给程序员测试自己看的
console.log('我是程序员能看到的')
</script>

JS中的变量：

变量的概念：

变量是计算机中储存数据的一个标识符，通过这个标识符可以找到内存中储存的数据。
变量就相当于是一个容器，内部可以存储任意类型的值，使用变量的时候，用的是内部存储的数据。

变量的使用：

变量在使用时分为两步：1.声明变量 2.赋值
一，声明变量：

语法：var 变量名

<script>
//声明变量：
var age; //声明一个名称为age的变量
</script>

-var，是一个JS关键字用来声明变量（variable 变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管;
age ，是程序员自己定义的变量名，我们要通过变量名来访问内存中分配的空间

二，赋值：

语法：变量名=值 *备注：JS中一个等号叫做赋值号

<script>
//赋值：
age = 18；//把18这个值存入变量名叫age中
</script>

JS中一个=叫做赋值号；用来把右边的值赋给左边的变量空间中此处代表赋值的意思； 变量值是程序员保存到变量空间的值

三，打印结果：

<script>
//打印变量：
var age = 18;
console.log(age)；//声明了一个名叫age的变量；给age赋值18；此时控制台打印出来的结果也是18.
</script>

四，变量的初始化：

声明一个变量并赋值，我们称之为：变量的初始化

<script>
var age = 18;//声明变量同时赋值为18；
console.log(age)；
</script>

五，语法扩展：

更新变量：

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

<script>
var myname = "哈温国丽"
console.log(myname)//此时浏览器输出的结果是: ‘哈温国丽’
myname = "国丽"
console.log(myname)//最后浏览器输出的结果是: ‘国丽’因为 ‘哈温国丽’被覆盖了。
</script>

同时声明多个变量：

声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

<script>
/*var age = 18;
  var address = '北京市海淀区';
  var salary = 10000;
*/
var age = 18;
    address = '北京市海淀区';
    salary = 10000;
</script>

变量的命名规则与规范：（面试可能会问）

一，变量的命名规则：（必须遵守的，不遵守会报错）

书写变量名的时候，只能由字母（a-Z）数字（0-9）下划线(-) $符号（英文的）组成，并且不能以数字开头

<script>
//符合命名规则：
     var age = 18;
     var a =100
     var a1=200
     var a1-=100
     var a1-$ = 100
</script>

书写变量名的时候，不能以数字开头

<script>
//不符合命名规则：
 var 6qwha=111  // 这种想法开头是数字，不符合变量命名的规范 所以会报错；
</script>

书写时严格区分大小写

<script>
//变量命名区分大小写,大写和小写是有区别的
   var a = 100
   var A = 200
   console.log(a)  // 100
   console.log(A)  //200
</script>

书写变量时，不能使用关键字或者保留字作为变量名

关键字：在JS 中具有特殊含义的 字母组成 var   if   for  function  while 
<script>
//不符合命名规则：
var var = 100;//错误示范
var for = 200;//错误示范
var if = 3300;//错误示范
</script>

保留字：在JS中目前没有特殊含义，但在将来的某个版本可能会遇见，所以此时也不能使用；
在ES6还没出现之前具有的保留字：let  const   promise
<script>
//不符合命名规则：
var let = 100;   //错误示范
var const = 200; //错误示范
var promise = 10;//错误示范
</script>

name 既不是关键字也不是保留字，但是不要使用；
<script>
//不符合命名规则：
var name = 100;   //错误示范,会报错
</script>

二，变量的命名规范：（建议遵循，如果不遵守也不会报错）

变量名具有含义，符合见明之意

目的：你写的命名在工作交互时要让同事看见你的命名之后知道你所表达的意思，不要让对方去猜测；
<script>
//正确示范：
  var name = ‘哈温国丽’ 
  var age = 18;
  var address = '北京市海淀区';
  var salary = 10000;
  //直接明了的能明白名字叫哈温国丽，年龄18，住址是北京市海淀区，薪资是一万
</script>

建议直接使用英文单词，非必要不要去使用拼音
<script>
//错误示范：
  var mingzi = ‘哈温国丽’ 
  var nl = 18;
  var zz = '北京市海淀区';
  var xzi = 10000;
  //如果项目小组没有要求用拼音，程序员开发时不要使用拼音；
</script>

2.书写多个单词组合名时，使用驼峰命名法

多个单词拼接时，后一个单词首字母大写
<script>
//正确示范：
var myFirstName = 200;//后一个单词首字母大写

//错误示范：
var myfirstname = ‘哈温国丽’
</script>

三，课堂练习（交换效果）

<script>
需求：变换下面两个变量的值：
      var a = 100  //a:100
      var b = 200  //b:200
实现思路：使用一个临时变量用来做中间存储
//正确示范：
      var a = 100  //a:100
      var b = 200  //b:200
      var c = a//定义一个临时变量c，将变量a的值赋予c,所以此时a=100=c；
      var a = b //将变量b的值赋予给变量a上，所以此时b= 200= a;
      b = c
      console.log(a)  //200
      console.log(b)  //100
      
</script>

JS的数据类型:

一，基本数据类型：(Number,String,Boolean,Undefined,Null)
一道面试题： JS 中基本数据类型有哪些？

Number数字类型:

例如： 100  200  1.1  0  -6   -9999.986 都是数字，不区分整数浮点数；
<script>
       var num = 100
       var Π = 3.1415926
       var neg = -6
</script>

String字符串类型：

只要是引号包裹的内容，就是字符串类型（引号不区分单引号双引号）；
<script>
        var str1 ="你好"
        var str3 = '18'
        var str2 = "wer"
</script>

2-1:字符串的长度：

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度

检验获取字符串的长度length：
<script>
var strMsg = "我是漂亮多金的程序员！"；
alert(strMsg.length);//提示框会显示 11 表示字符串的长度是11；
</script>

2-2：字符串拼接：

多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型 = 拼接之后的新字符串
拼接前会把与字符串加的任何类型转成字符串，再拼接成一个新的字符串

只要有字符串和其他类型相拼接 最终的结果是新的字符串类型
+号口诀：数值相加，字符相连
<script>
console.log('主线任务：'+'赚钱')//字符串类型的：‘主线任务：赚钱’
console.log('年龄：'+18)//‘年龄：18’
console.log('pink'+true)//'pinktrue'
console.log(12+12)//24
console.log('12'+12)//'1212'
</script>

3.undefined类型:

undefined 是一个数据 表明未定义；变量只定义不赋值的时候，默认的值就是 undefined 表明未定义
<script>
var un = undefined // 定义一个变量，变量名为un，并且给它赋值为undefined;
var z //定义一个变量，变量名为z 没有赋值操作，所以变量默认的值为undefined
console.log(un)//undefined 
console.log(z) //undefined 
console.log(un + 1)//NaN undefined 和数字相加 最后结果是NaN
</script>

4.Boolean 类型(后续更多的使用在判断上）

只有两个值  一个是 true (真或者正确）一个是 false （假或者错误）
true在参与数学运算时 相当于1
false在参与数学运算时 相当于0
<script>
 var boo1 = true  //定义一个变量，名为boo1，值为布尔值，true
 console.log( boo1 + 1)//2  true在参与数学运算时 相当于1来看
 var boo2 = false //定义一个变量，名为boo2，值为布尔值，false
 console.log( boo1 + 1)//1 false在参与数学运算时 相当于0来看
 
</script>

5.Null 类型

本身是一种数据类型，只不过代表是 空值（啥也没有）
<script>
var un = null//定义一个变量，名为un，并且给她赋予一个null值；代表空值
console.log(un)
console.log(un + 1)//1 输出值是1  因为un是空值  空值+1 = 1
</script>

二，复杂数据类型：（object）
在代码运行时，变量的数据类型时由JS引擎根据=右边变量值数据类型来判断的，运行完毕之后，变量就确定了数据类型。
JS拥有动态类型，同时要意味着相同的变量可用作不同的类型

JS 的数据类型检测：

语法：typeof(要检测的数据类型的值)
一道面试题： typeof 能正确检测所有数据类型的值吗？答案：不能，因为它没有办法准确的检测 null 的类型是什么
typeof 的问题：不能正确检测出 null这个类型的实际类型，检测null类型的打印结果是abject；

<script>
    var str1 = "true"
    console.log(typeof(str1)) //string
    
    var str2 = 200
    console.log(typeof(str2)) //number
    
    var str3 = true
    console.log(typeof(str3)) //boolean
    
    var str4 = false
    console.log(typeof(str3)) //boolean
    
    var str5
    console.log(typeof(str5)) //undefined
    
    var str6 = null 
    console.log(typeof(str6)) //打印结果是：abject 因为 null 代表的含义是 空，也就是空对象，所以typeof 会把它当做一个对象去输出
    
</script>

JS的数据类型转换:

使用表单,prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型,通俗来说,就是把一种数据类型的变量转换成另外一种数据类型.

其他类型转换为数字类型:

Number (数据)可以用于任何数据类型，将其转换为数据类型----- 强制转换
:将string类型转换为数值型

总结:

如果转换的字符串是纯数字组成的，那么直接转换为数字
如果转换的字符串是空字符串或者空白字符串，那么直接转换为数字0
其他类型的字符串是（不是空----空白---纯数字的字符串），那么直接转换为NaN;
NaN：表示的是一个number的数字，但是没有办法通过常规的数字表明它，所以只能使用NaN来代替（坏掉的数字）

<script>
console.log(typeof(Number('100')), Number('100')) //number 100 
//会将字符串“100” 转换为数字，然后打印到控制台
console.log(typeof(Number('')), Number(''))// number 0
console.log(typeof(Number(' ')), Number(' '))// number 0
console.log(typeof(Number('abc')), Number('abc'))// number NaN
</script>

1-2: 布尔值转数字:

总结:

true 转换为1;
false 转换位0;

<script>
 console.log(typeof(Number(true)),Number(true)) //number  1
 console.log(typeof(Number(false)),Number(false)) //number 0
</script>

1-3:undefined 转数字:

总结:

会直接转换为NaN

<script>
console.log(typeof(Number(undefined)),Number(undefined))//number NaN
</script>

1-4:null 转数字

总结:会直接转化为0

<script>
console.log(typeof(Number(null)),Number(null))//number 0
</script>

2.parseInt(数据):将string类型转换成整数数值型

总结:

parseInt 会将数据转换为 number 类型，并且值是整数（会直接忽略掉小数点以后的值，并不是四舍五入）
parseInt 在转换的时候，如果数据是纯数字字符串或者是数字开头的字符串，那么会转化为数字，否则就是转化为NaN

<script>
console.log(typeof(parseInt("100.123")),parseInt("100.123"))    //number 100
console.log(typeof(parseInt("100")),parseInt("100"))            //number 100
console.log(typeof(parseInt("100abc")),parseInt("100abc"))      //number 100
console.log(typeof(parseInt("999abc")),parseInt("999abc"))      //number 999
console.log(typeof(parseInt("abc")),parseInt("abc"))            //number NaN
console.log(typeof(parseInt("abc666")),parseInt("abc666"))      //number NaN
console.log(typeof(parseInt("")),parseInt(""))                  //number NaN
console.log(typeof(parseInt(" ")),parseInt(" "))                //number NaN 
console.log(typeof(parseInt("true")),parseInt("true"))          //number NaN
console.log(typeof(parseInt("false")),parseInt("false"))        //number NaN
console.log(typeof(parseInt("undefined")),parseInt("undefined"))//number NaN
console.log(typeof(parseInt("null")),parseInt("null"))          //number NaN
</script>

parseFloat (数据): 将string类型转换成转换为小数(浮点数)

总结:

转换结果于 parseInt 类型相似，但是在转换小数的时候会保留小数点后的数字

<script> 
console.log(typeof(parseFloat("100.123456")),parseFloat("100.123456"))//number 100.123456
console.log(typeof(parseFloat("100")),parseFloat("100"))            //number 100
console.log(typeof(parseFloat("100abc")),parseFloat("100abc"))      //number 100
console.log(typeof(parseFloat("999abc")),parseFloat("999abc"))      //number 999
console.log(typeof(parseFloat("abc")),parseFloat("abc"))            //number NaN
console.log(typeof(parseFloat("abc666")),parseFloat("abc666"))      //number NaN
console.log(typeof(parseFloat("")),parseFloat(""))                  //number NaN
console.log(typeof(parseFloat(" ")),parseFloat(" "))                //number NaN
console.log(typeof(parseFloat("true")),parseFloat("true"))          //number NaN
console.log(typeof(parseFloat("false")),parseFloat("false"))        //number NaN
console.log(typeof(parseFloat("undefined")),parseFloat("undefined"))//number NaN
console.log(typeof(parseFloat("null")),parseFloat("null"))          //number NaN
</script>

4.JS隐形转换(- * /)利用算术运算隐式转换为数值型

<script> 
console.log(typeof("100"),"100")               //string 100
console.log(typeof("100" - 0),"100" - 0)       //number 100
console.log(typeof("100.99" - 0),"100.99" - 0) //number 100.99
console.log(typeof("123" - 0),"123" - "120")   //number 3
<script>

案例1:计算年龄

需求:在页面中弹出一个输入框,需要输入我们的出生年份后,要求能够计算出我们的年龄

逻辑思路:
1:先弹出一个输入框(prompt),让用户输入年份
2:把用户输入的值用变量保存起来,然后用今年的年份减去变量值,结果就是现在的年龄
3:弹出警示框(alert),计算的结果输出
<script> 
var year = prompt('请输入您的出生年份')
var result = 2018 - year //year取过来的是字符串型型,但是这里刚好用的是减法  自动有隐式转换
alert('您今年已经:'+ result + '岁啦')
</script>

案例2:简单加法器

需求:计算两个数的值,用户输入第一个值后,继续弹出第二个输入框并且输入第二个值,最后通过弹出窗口显示出两次输入值相加的和的结果

逻辑思路:
1:先弹出第一个输入框,用户输入第一次的值,保存起来
2:再弹出第二个输入框,用户进行二次输入值,保存起来
3:把这两个值进行相加,并将结果赋值给新的变量(注意数据类型的转化)
4:弹出警示框(alert),把计算结果输出
<script> 
var num1 = prompt("请您输入第一个值")
var num2 = prompt("请您输入第二个值")
var result = parseFloat(num1) + parseFloat(num2)
alert("您的结果是:" + result)
</script>

其他类型转换为字符串类型:

变量.toString():

注意:

undefined 类型和 null 不能使用toString这种方法因为JS 没有给我们提供
toString的 S 是大写的

<script> 
var str1 = 100
console.log(typeof(str1.toString()),str1.toString())//String '100'
var str2 = true
console.log(typeof(str2.toString()),str2.toString())//String 'true'
var str3 = false
console.log(typeof(str3.toString()),str3.toString())//String 'false'

var str4 = undefined
console.log(typeof(str1.toString()),str1.toString())//出现报错 因为undefined  不能使用toString
var str5 = null 
console.log(typeof(str1.toString()),str1.toString())//出现报错 因为null  不能使用toString
</script>

String（变量强制转换方法:

注意:

什么类型的都可以转换为字符串类型的，包括undefined 和null 类型
注意String的 S 是大写的

<script> 
var str1 = 100
console.log(typeof(String(str1)),String(str1))//String '100'
var str2 = true
console.log(typeof(String(str2)),String(str2))//String 'true'
var str3 = false
console.log(typeof(String(str3)),String(str3))//String 'false'
var str4 = undefined
console.log(typeof(String(str4)),String(str4))//String 'undefined'
var str5 = null 
console.log(typeof(String(str5)),String(str5))//String 'null'
</script>

+号拼接方法:

注意:

转换结果于String 类似，写法上更加简单一些，所以非常推荐使用
变量+ “” （暂时先不考虑原理）

<script> 
var str1 = 100
console.log(typeof(str1 + ""),str1 + "")//String '100'
var str2 = true
console.log(typeof(str2 + ""),str2 + "")//String 'true'
var str3 = false
console.log(typeof(str3 + ""),str3 + "")//String 'false'
var str4 = undefined
console.log(typeof(str4 + ""),str4 + "")//String 'undefined'
var str5 = null 
console.log(typeof(str5 + ""),str5 + "")//String 'null'
</script>

其他类型转换为布尔类型:

BooLean(变量) 将其他数据类型，转换为布尔值（也就是转换为true 或者faLse）

1.数字转换布尔值，只有0会转换为false  其他数字都会转换为true,（非0即为真）
<script> 
        var num1 = 100
        console.log(num1, '-->', Boolean(num1)) //100---->true
        var num2 = 0
        console.log(num2, '-->', Boolean(num2)) //0---->faLse
        var num3 = -1
        console.log(num3, '-->', Boolean(num3)) //1---->true
</script>

2.字符串转换为布尔值，只有空字符串会转换为faLse  其他字符串都会转换为true
<script> 
        var str1 = ''
        console.log(str1, '-->', Boolean(str1)) //""---->faLse
        var str2 = ' '
        console.log(str2, '-->', Boolean(str2)) //" 这里边有值是空格"---->true
        var str3 = 'abc'
        console.log(str3, '-->', Boolean(str3)) //"abc"---->true
        var str4 = "0"
        console.log(str4, '-->', Boolean(str4)) //"0"---->true
</script>

3.undefined 和 null 转换为布尔值的时候，就是faLse （重点,以后会经常使用）
<script>
        var und = undefined
        console.log(und, '-->', Boolean(und)) //undefined----->'faLse'
        var nul = null 
        console.log(nul, '-->', Boolean(nul)) //null----->'faLse'
</script>

JS的运算符:

1.算术运算符 2.赋值运算符 3.比较运算符 4.逻辑运算符 5.自增自减运算符

1.算术运算符:("+" "-" "*" "/" "%"（取余求余数）)

注意事项:

"+"运算符，相加时如果两边都是数字，那么会运算数字的相加操作;相加时如果两边有一个不是数字，比如有其中一个是字符串，那么运算的不是在相加，而是拼接操作.
拼接操作只有" + "运算时会出现，其他符号不出现.
其他运算符在遇见两边有非数字类型时，会将其转换为数字（这一步就叫做隐式转换），然后再运算.

加法运算:
<script>
   console.log(1 + 1)//先将小括号内的运算完毕，然后再打印在控制台
   console.log(1 + 1)
   console.log(3 + 4)
   console.log(5 + 0)
   console.log(5 + "0")//数字5 + 字符串"0" --->因为加号两边出现一个非数字类型的字符串，所以会运行两个值的拼接---> 50
</script>

减法运算:
<script>
   console.log(1 - 1) //0
   console.log(1 - 1)
   console.log(3 - 4)
   console.log(5 - 0)
   console.log(5 - "0")//5
   //减号两边出现了一个字符串"0"，JS会帮助我们将它的类型先转为数字，然后再运算减法
   //也就是先计算 数字5 再把“0”字符串转换为数字0 进行相减
</script>

乘法运算:
<script>
   console.log(1 * 1)  //1
   console.log(3 * 4)  //12
   console.log(5 * 0)  //0
   console.log(5 * "0")//0
   //乘号两边出现了一个字符串"0"，JS会帮助我们将它的类型先转为数字，然后在运算乘法
   // 也就是先计算   数字5 再把字符串“0”转换为数字0 进行乘法运算
</script>

除法运算:
<script>
   console.log(5 / 1)  //5
   console.log(12 / 3) //4
   console.log(6 / 2)  //3
   console.log(8 / "2")//4
   //除号两边出现一个字符串类型的“2" JS也会帮助我们将它的类型转换为数字，然后再运算除法
</script>

取余运算:
<script>
   console.log(5 % 1)//计算5/1的余数     余数为0 
   console.log(10 % 3)//计算10/3的余数   余数为1
   console.log(6 % 2)//计算6/3的余数     余数为0
   console.log(8 % "2")//计算8/2的余数   余数为0
   //  % 两边出现一个字符串类型的“2”,JS会帮助我们将它的类型先转化为数字，然后再运算取余
   //也就是 会把"2"字符串先转化为 数字 2  再运算
</script>

2.赋值运算符:(判断: "=" "+=" "-=" "*=" "/=" "%=" )

注意事项:

= 赋值
+=相当于是 "我自身" 加上一个新值, 就可以用这个 += 来优化.
-= *= /= %= 运算逻辑与 += 是完全相同

=赋值运算:
<script>
        var a = 1
        console.log(a)  // 1
        var b = 2
        console.log(b)  // 2
</script>

+=运算:
<script>
        var a = 1       // a === 1
        a = a + 10      // 将 变量 a 重新赋值为 变量a + 10      a = a + 10  --->  a = 1 + 10 ---> a = 11
        console.log(a)  // 11
        
        var a = 1
        a += 10 // a += 10  ---> a = a + 10 ---> a = 1 + 10 --> a = 11
        console.log(a) // 11
</script>

-=运算:
<script>
        var a = 5
        a -= 5  // 将变量 a 重新赋值为 变量a - 5    a = a - 5   --> a = 5 - 5   --> a = 0
        console.log(a)  // 0
</script>

*=运算:
<script>
       var a = 2
        a *= 5  // a *= 5   ---> a = a * 5  ---> a = 2 * 5  ---> a = 10
        console.log(a)  // 10
</script>

/=运算:
<script>
        var a = 4
        a /= 2  // a /= 2   ---> a = a / 2  ---> a = 4 / 2  --->    a = 2
        console.log(a)  // 2
</script>

%=运算:
<script>
       var a = 10
        a %= 3  // a %= 3   --->   a = a % 3    --->    a = 10 % 3  ---> a = 1
        console.log(a)  // 1
</script>

3.比较运算符:(判断:">" "<" ">=" "<=" "==" "===" "!=" "!==")

概念: 就是比较运算符两边的值之后, 返回一个布尔值, 也就是要么返回一个true要么返回一个false

判断:  >  <   >=    <=
<script>
        console.log(3 > 4)  // 打印时先看 3 是否大于 4, 因为3小于4, 不满足大于4的条件, 所以返回的是 false
        console.log(4 > 3)  // 打印时 先看 4 是否大于 3, 因为 4大于3, 满足条件, 所以返回的是 true
        
        console.log(5 < 6)  // 因为 5 < 6 满足条件, 所以返回的是 true
        console.log(6 < 5)  // 因为 6 < 5 不满足条件, 所以返回的是 false
        
        console.log(1 > 1)  // 因为 1 > 1 不满足条件, 所以返回的是 false
        console.log(1 >= 1) // 判断 1 是否 大于或等于 1,此时满足第二个条件 也就是 1 等于 1,所以会返回 true
        
        console.log(1 < 1)  // 因为 1 < 1 不满足条件, 所以返回的是 false
        console.log(1 <= 1) // 判断 1 是否 小于或等于1, 此时满足第二个条件 也就是 1 等于 1  所以会返回 true
</script>

判断:相等 ==  ===
注意:两个等号与 三个等号的区别   (面试可能会问)
==  在JS中判断时会做隐式转换, 也就是说只会对比值是否相等, 不会对比数据类型
=== 在 JS 中也叫做全等, 在判断的时候不会做隐式转换,也就是说,在对比时除了会对比值是否相等之外, 还会判断数据类型
<script>
        console.log(1 == 1)    // 判断符号两边的值是否相等  true
        console.log(99 === 99) // 判断符号两边的值是否相等  true
        console.log(1 == '1')  //判断符号两边的值是否相等(这里不会对比数据类型) true
        console.log(1 === '1') // 判断符号两边的值是否相等(这里会对比数据的类型)  false   因为数据类型不同!
    
</script>

判断:不相等 !=  !==
注意:!=与!==  
共同点: 判断符号两边的值是否不相等, 不相等时返回 true 相等时返回 false
不同点:  != 不会对比数据类型
         !== 会对比数据类型
<script>
        console.log(3 != 4)     // 判断符号两边是否不相等  因为不相等所以返回 true
        console.log(9 !== 20)   // 判断符号两边是否不相等  因为不相等所以返回 true
        console.log(3 != '3')   // 判断符号两边是否不相等  且不会对比数据类型, 所以他认为 3和'3' 是相等的   所以会返回 false
        console.log(3 !== '3')  // 判断符号两边是否不相等 且会对比数据类型!!!, 所以他认为 3 和 '3' 是不相等的   所以会返回 true
</script>

4.逻辑运算符:( 判断: "&&" "||" "!" )

三种运算符的特性分别是:

逻辑与"&&"运算符的特性: 符号左边的值如果为真(也就是转为布尔值后为true), 那么会返回符号右边的值;如果为假(也就是转为布尔值后为 false), 那么会将自身返回出去
逻辑或"||"运算符的特性: 符号左边的值如果为真, 那么会将自身返回出去;如果为假, 那么会将符号右侧的值返回出去
逻辑非"!"运算符的特性: 将值先转换为布尔值之后, 再做一个取反的操作, 也就是 true 改变false, false改变为 true

逻辑与:&&的运算:(相对于并且的意思)
<script>
        console.log("-1" && 100)          // 根据 逻辑与运算符的特性, 返回的是 100
        console.log(0 && 99)              // 根据 逻辑与运算符的特性, 返回的是 0
        console.log(true && 'qwer')       // qwer
        console.log(false && 'undefined') // false
</script>

逻辑或:||的运算:(相对于或者的意思)
<script>
        console.log(1 || 100)   // 根据 逻辑或的特性, 返回的是 1
        console.log(0 || 99)    // 根据 逻辑或的特性, 返回的是 99
</script>

逻辑非:!的运算:(也叫做取反运算)
<script>
        console.log(!99)    // !99  ---> !true  ---> false
        console.log(!0)     // !0   ---> !false(非0即为真) ---> true
        console.log(!true)  // false
</script>

5.自增自减运算符:( 判断: "++" "--" )

自增运算符语法: 1.++值 2.值++
自增运算符能力: 就是将自身的值 +1
自增运算符规律:

++ 在前, 会先将自身的值 +1 然后参与其它的运算 (先自加1,后返回值)
++ 在后, 会先参与周围的运算,然后将自身的值 +1 (先返回原值,后自加1)

自减运算符语法: 1. - -值 2.值- -
自减运算符能力: 就是将自身的值 -1
自减运算符规律: 1. -- 在前, 会先将自身的值 -1 然后参与其它的运算 2.-- 在后, 那么会先参与周围的运算,然后将自身的值 -1

自增运算符: ++值:
口诀:先自加,后返回值
<script>
       var a = 1
       console.log(++a)// 如果 ++ 在前, 那么会先将自身的值 +1;然后打印到控制台, 所以控制台输出打印的值为 2
</script>

自增运算符: 值++:
口诀:先返回原值,再自加1
<script>
       var b = 1
       console.log(b++)//1 
       //如果 ++ 在后, 那么会先将目前的值(1)打印到控制台, 所以此时控制台输出的值为 1
       //然后在开始下一轮代码运行开始时再将自身的值 +1.
       console.log(a, b) // 2, 2
       //也就是说这行运行完毕后, 变量b的值才变为 2
</script>

自减运算符: --值:
口诀:先自减,后返回值
<script>
       var a = 1
       console.log(--a)// 如果 -- 在前, 那么会先将自身的值 -1;然后打印到控制台, 所以控制台输出打印的值为 0
</script>

自减运算符: 值--:
口诀:先返回原,值再自减1
<script>
       var b = 1
       console.log(b--)//1
       //如果 -- 在后, 那么会先将目前的值(1)打印到控制台, 所以此时控制台输出的值为 1
       //然后在开始下一轮代码运行开始时再将自身的值 -1.
       console.log(a, b) // 0, 0
       //也就是说这行运行完毕后, 变量b的值才变为 0
</script>

运算符的优先级:

同一级别时遵循从左到右依次计算的顺序,不同级别时遵循以下顺序:

小括号优先级最高
一元运算符 ++ -- !
算术运算符先 * / % 后 + -
比较运算符 (大于小于) > >= < <=
比较运算符:(等于不等于) == != === !==
逻辑运算符先&& 后 ||
赋值运算符 = += -= /= *= %=

什么是分支语句:

由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果

if 分支语句:

语法结构与返回值:

if(条件表达式){
条件成立的时候执行的代码, 不成立时这里的代码永远不执行
}
返回值:
      条件最终会返回一个布尔值.
      如果为真(true), 那么会执行对应的代码
      如果为假(false), 那么不会执行此行代码 则会继续执行后边的代码

if 分支语句的基本书写:

if 分支语句的基本写法:
<script>
         var a = 2
        // if (条件) {要执行的代码}
        if (a === 1) {  // 如果 a === 1 这个条件成立, 那么会执行打印 1
            console.log(1)
        }
        if (a === 2) {  // 如果 a === 2 这个条件成立, 那么会执行打印 2
            console.log(2)
        }

</script>

if ... else 语句的基本书写:

if...else... 的基本写法:
<script>
        var num = 1
        if (num === 1) {
            console.log("num满足条件时我执行")
        }  else{
            console.log("num不等于前边所有的值时我执行");
        }
</script>

if 嵌套语句的基本书写:

if...else... 的嵌套写法:
<script>
        var a = 2
        if (a === 1) {
            console.log(1)
        } else if (a === 2) {
            console.log(2)
        } else if (a === 3) {
            console.log(3)
        } else if (a === 4){
            console.log(4)
        } else{
            console.log("a不等于前边所有的值");
        }
运行流程:
        首先判断 a 是否等于 1, 如果满足条件, 直接打印1 ,并结束这个分支
        如果不满足, 会进入下一个分支的判断, 判断a 是否等于 2, 如果满足条件, 直接打印 2, 并结束这个分支
        最后结尾的 else 分支 只会在前边所有的条件都不满足的时候才会执行, 前边如果有一个条件成立, 那么 else 就不会执行
</script>

个人练习:
<script>
       var b = 88
       if(b === 1){
        console.log(1)
       } else if(b === 2){
        console.log(2)
       } else if (b ===3){
        console.log(3)
       } else if (b == 4){
        console.log(4)
       } else if(b === 5){
        console.log(5)
       }else{
        console.log("b不满足前边所有代码时 我执行")
       }
 //此时控制台打印的结果是:  "b不满足前边所有代码时 我执行"
</script>

switch 分支语句:

语法结构:

switch分支语句与 if 分支语句相似 都可以实现多选一的效果
switch的语法结构如下:
switch(要判断的变量){
              case 情况1：
                   情况1要执行的代码
                   break;
              case 情况2：
                   情况2要执行的代码
                  break;
                  }

switch 分支语句的基本书写:

判断逻辑:
判断的变量是否 全等===  case上说明的情况;
注意事项:
switch...case 在判断时，执行时 === 所以数据类型不同时，也不会正确执行;
<script>
   var a = 100
   switch(a){
      case 1:
          console.log("如果我执行，说明 a ===1")
          break;
      case 10:
          console.log("如果我执行，说明 a ===10")
          break;
      case 100:
          console.log("如果我执行，说明 a ===100")
          break;
      case "100":
          console.log("如果我执行，说明 a === 字符串 100")
          break;
      default:
          console.log("上述情况都不满足的时候，我会执行")
   }
</script>

switch 穿透语句的基本书写:

穿透现象的出现： switch 在书写的时候如果不写 break 就会出现穿透现象;

穿透现象执行顺序:
               找到第一个满足的 case 的时候，开始执行代码
               执行完毕如果没有 break 会继续执行下一个 case
               直到 遇到一个 break 或者分支语句全部执行完毕
<script>
        var a = 22
        switch (a) {
            case 1:
                console.log('case 1 我执行')
            case 10:
                console.log('case 10 我执行')
            case 22:
                console.log('case 22 我执行')
                break
            case 30:
                console.log('case 30 我执行')
            case 40:
                console.log('case 40 我执行')
            case 100:
                console.log('case 100 我执行')
            default:
                console.log('上述情况都不满足的时候, 我执行')
        }
       //此时浏览器输出的是:case 22 我执行
</script>

穿透现状的简写练习案例:
<script>
// 需求:根据月份，输出对应的天数 （2月按照28天）
          var month = 5  //控制台输出5月有？？天
          switch(month) {
            case 1:
              console.log("如果我执行，说明1月 === 31天")
            case 3:
              console.log("如果我执行，说明3月 === 31天")
            case 5:
              console.log("如果我执行，说明5月 === 31天")
            case 7:
              console.log("如果我执行，说明7月 === 31天")
            case 8:
              console.log("如果我执行，说明8月 === 31天")
            case 10:
              console.log("如果我执行，说明10月 === 31天")
            case 12:
              console.log("如果我执行，说明12月 === 31天")
            default:
              console.log("上述情况都不满足的时候，我会执行")//此时控制台输出的是:如果我执行，说明5月 === 31天
            case 4:
              console.log("如果我执行，说明4月 === 30天")
            case 6:
              console.log("如果我执行，说明6月 === 30天")
            case 9:
              console.log("如果我执行，说明9月 === 30天")
            case 11:
              console.log("如果我执行，说明11月 === 30天")
              break
            case 2:
              console.log("如果我执行，说明2月 === 28天")
              break
          }
简写:
    /** 简化的写法：
          var month = 2  // 在控制台输出5月有?天
          switch (month) {
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                    console.log('有31天')
                    break

            case 4:
            case 6:
            case 9:
            case 11:
                   console.log('有30天')
                   break

            case 2:
                console.log('有28天')
                break
        }
</script>

三元表达式:(三目表达式三目运算符三目问号冒号表达式)

语法: 条件？条件为真时执行的代码；：条件为假时执行的代码;
注意： 不管条件是真还是假,代码都只能写一行;
意义： 对 if 分支语句做一个简化操作; 利用三元表达式给变量赋值;

三元的基本写法:
<script>
   var a = 100
   a > 1000? console.log("如果我输出了,说明a 的值 大于1000") : console.log("如果我输出了,说明a 的值 小于1000")
</script>

利用三元表达式给变量赋值:
<script>
  var num = 2
  //约定, 如果 num === 1 那么代表为男性  num不等于 1 的时候代表为女性
  //var gender = num === 1 ? "男" ： "女"
  console.log(gender)//女
</script>

写给 Javascript 初级学者的第 1 份笔记持续更新中~~~