js基础知识(部分)

js的书写位置

1. 可以将js代码编写到外部js文件中，然后通过script标签引入，写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制（推荐使用的方式）

2. script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略，如果需要则可以创建一个新的script标签用于编写内部代码

   <script type="text/javascript" src="js/script.js"></script>
   <script type="text/javascript">
       alert('我是内部的js代码')
   </script>
   

3. 可以将js代码编写到标签的onclick属性中，当我们点击按钮时，js代码才会执行，虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护（不推荐使用）

   <button onclick="alert('讨厌，你点我干嘛~~')">点我一下</button>
   

4. 可以将js代码写在超链接的href属性中，这样当点击超链接时会执行js代码

   <a href="javascript:alert('让你点你就点')">你也点我一下</a>
   

js编写规范

1. js中严格区分大小写，js中每一条语句以（;）结尾
   - 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发中分号必须写(但是在vue项目中Eslint校验代码下加 ’ ; ’ 会报错)
2. js中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

js的数据类型

数据类型指的就是字面量的类型，在js中一共有六种数据类型，分别是string、number、boolean、null、undefined、object

1. String 字符串
   - typeof 检查字符串时，会返回string

2. Number 数字
   - typeof 检查数值时，会返回number

3. Boolean 布尔值
   - 布尔值只有两个，主要用来做逻辑判断
   - true 表示真
   - false 表示假

4. Null 空值
   - NaN是一个特殊的数字，表示Not A Number
   - 使用typeof检查一个NaN也会返回number

5. undefined 未定义

6. Object 对象

• 其中string、number、boolean、null、undefined属于基本数据类型，object属于引用数据类型
• typeof 判断变量的数据类型

将其他数据类型转换成String/Number/Boolean

将其他数据类型转换成String

1. 方式一：toString()
   调用被转换数据类型的 toString() 方法
   该方法不会影响到原变量，它会将转换的结果返回
   但是注意：null 和 undefined这两个值没有 toString() 方法
   如果调用他们的方法会报错

2. 方式二：string()
   调用 string() 函数，并将被转换的数据作为参数传递给函数
   使用 string() 函数做强制类型转换时，
   对于 number 和 boolean 实际上就是调用的 toString() 方法
   但是对于 null 和 undefined,就不会调用 toString 方法
   它会将 null 直接转换为 ‘null’
   它会将 undefined 直接转换为 ‘undefined’

3. 注意
   - 如果对非 String 使用 parseInt() 或 parseFloat(), 它会先将其转换为String然后再操作
   - a = true； a = parseInt(a)； console.log(typeof a)； console.log(a)；
   - 调用 parseInt() 函数将a转换为 Number，parseInt() 可以将一个字符串中的有效的正数内容获取出来，然后转换为Number

   a = parseInt(a)
   console.log(typeof a)
   console.log(a)
   

将其他数据类型转换成Number（使用Number()函数）

1. 字符串转数字
   - 如果是纯数字的字符串，则直接将其转换为数字
   - 如果字符串中有非数字的内容，则转换为NaN
   - 如果字符串是一个空串或者是一个全是空格的字符 0
   - 例：var a=‘123’，调用 number() 函数来将 a 转换成 Number 类型，a = Number(a)
2. 布尔转数字
   - true 转成1
   - false 转成0
3. null
   - 0
4. undefined
   - NaN

将其他的数据类型转换为Boolean

1. 数字转布尔
   - 除了0和NaN，其余都是true
2. 字符串转布尔
   - 除了空串，其余都是true
3. null 和 undefined 都会转换为false
4. 对象也会转换为true

运算

1. 在js中整数的运算基本可以保证精确’
   var c=892839+920191
2. 如果使用js计算浮点元素，可能得到一个不精确的结果
   var c=0.1+0.2
3. Number.MAX_VALUE
   如果使用number表示的数字超过了最大值，则会返回一个
   infinity 表示正无穷
   -infinity 表示负无穷

转义字符

在字符串中我们可以使用\作为转义字符，当表示一些特殊符号是可以使用\进行转义

1. " 表示“
2. \’表示‘
3. \n 表示换行
4. \t表示制表符
5. \\表示\

其他进制的数字

在js中，如果需要16进制的数字，则需要以0x开头
如果需要8进制的数字，则需要以0开头
如果需要2进制的数字，则需要以0b开头

// 十六进制
a = 0xff
a = 0xCafe
a = 0x10
// 八进制数字
a = 070
// 二进制数字
a = 0b10
// 像“070”这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
a = "070"
// 可以在parseInt() 中传递一个第二个参数，来制定数字的进制
a = parseInt(a, 10)
console.log(typeof a)
console.log(a)

运算符

算术运算符
- 当对非Number类型的值进行运算时，会将这些值转换为Number，任何值和NaN做运算时都得NaN

+）可以对两个值进行加法运算，并将结果返回

• 如果对两个字符串进行加法运算，则会做拼串，会将两个字符串拼接为一个字符串，并返回
• 任何的值和字符串做加法运算，都会先转换为字符串，然后再运算

-） 可以对两个值进行减法运算，并将结果返回
*） 可以对两个值进行乘法运算，并将结果返回
/） 可以对两个值进行除法运算，并将结果返回

自增与自减

1. 自增
   - 通过自增可以使变量在自身的基础上增加1
   - 对于一个变量自增以后，原变量的值会立即自增1

自增分成两种：后++（a++）和前++（++a）

1. 无论是a++ 还是++a，都会立即使原变量的值自增1
2. 不同的是a++ 和++a 的值不同
   • a++ 的值等于原变量的值（自增前的值）
   • a++ 的值等于原变量的值（自增前的值）

2. 自减
   - 通过自减可以让变量在自身的基础上减1

自减分成两种：后–(a–)和前–（–a）

1. 无论是a-- 还是–a 都会立即使原变量的值自减1
2. 不同的是a-- 和–a 的值不同
   • a-- 是变量的原值（自减前的值）
   • –a 是变量的新值（自减以后的值）

逻辑运算符

js为我们提供了三种逻辑运算符

1. ！非

   - ！可以用来对一个值进行非运算
   - 所谓的非运算就是只对一个布尔值进行取反操作
   - true 变false，false变true
   - 如果对一个值进行两次取反，它不会变化
   - 如果对非布尔值进行运算，则会将其转换为布尔值，然后再取反，所以我们可以利用该特点，来讲一个其他的数据类型转换为布尔类型，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样
   

2. || 或

   - || 可以对符号两侧的值进行或运算并返回结果
   - 运算规则：
   - 两个值中只要有一个为true，就返回true
   - 如果两个值都为false，才返回false
   - js中的’或‘属于短路的或
   - 如果第一个值为true，则不会检查第二个值
   

3. && 与

   - && 可以对符号两侧的值进行与运算并返回结果
   - 运算规则：
   - 两个值中只要有一个值为false就返回false
   - 只有两个值都为true时，才会返回true
   - js中的‘与’属于短路的与
   - 如果第一个值为false,则不会看第二个值
   - 即如果两个值中有false，则返回靠前的false
   - 如果两个值都为true，则返回后面的
   

4. && || 非布尔值的情况

   - 对于非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，并且返回原值
   - 与运算：
   - 如果第一个值为true，则必然返回第二个值
   - 如果第一个值为false，则直接返回第一个值
   - 或运算：
   - 如果第一个值为true，则直接返回第一个值
   - 如果第一个值为false，则返回第二个值
   

关系运算符

通过关系运算符可以比较两个值之间的大小关系，如果关系成立它会返回true,如果关系不成立则返回false

1. 大于号 >
   判断符号左侧的值是否大于右侧的值
   如果关系成立，返回true，如果关系不成立则返回false
   

2. 大于等于 >= 
   判断符号左侧的值是否大于等于右侧的值
   

3. 小于号 < 
   

4. 小于等于  <=
   

   console.log(1>true)//false
   console.log(1>=true)//true
   console.log(1>'0')//true
   console.log(10>null) //true=>10>0
   任何值和NaN做任何比较都是false
   console.log(10<='hello') //false
   console.log(true>false) //true
   
   console.log('1'<'5') //true
   console.log('11'<5) //true
   
   比较两个字符串时，比较的是字符串的字符编码
   console.log('a'<'b')  //true
   比较字符编码就是一位一位进行比较
   如果两位一样，则比较下一位，所以借用这来对英文进行排序
   console.log('abc'<'bcd') //true
   比较中文时没有任何意义
   console.log('戒'>'我') //true
   
   如果比较的是两个字符串型的数字，可能会得到不可预期的结果
   注意：再比较两个字符串型的数字时，一定一定一定要转型
   console.log('56789'<+'5') //false
   
   

Unicode编码

1. 在字符串中使用转义字符输入Unicode编码

   - \u 四位编码
   - console.log('\u2620')
   

2. 在网页中使用Unicode编码

   - &#编码；这里的编码需要的是10进制
   

   <h1 style="font-size: 200px">&#9760;</h1>
   

相等运算符

相等运算符用来比较两个值是否相等，如果相等会返回true，否则返回false

使用 == 来做相等运算

• 当使用 == 来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较

不相等 !=

• 不相等用来判断两个值是否不相等，如果不相等就返回true，否则返回false
• 使用 != 来做不相等运算
  -不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

=== 全等

• 用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值得类型不同，直接返回false

!== 不全等

• 用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

undefined 衍生自null，所以这两个值做相等判断时，会返回true
NaN 不和任何值相等，包括它本身
//判断b的值是否是NaN
console.log (b == NaN)
可以通过isNaN()函数来判断一个值是否是NaN,如果该值是NaN则返回true,否则返回false

条件运算符

语法：条件表达式 ？ 语句1 ：语句2

• 执行的流程：
• 条件运算符在执行时，首先对条件表达式进行求值，如果该值为true，则执行语句1，并返回执行结果；如果该值为false，则执行语句2，并返回执行结果
• 如果条件表达式的求值结果是一个非布尔值，会将其转换为布尔值然后再运算

//false? alert('语句1'):alert('语句2')
var a =300
var b = 123
var c = 40
//a>b?alert('a大'):alert('b大')
获取a和b的最大值
var max = a > b ? a : b
获取a、b、c的最大值
max = max > c : max : c
这种写法不推荐使用，不方便阅读
var max = a > b ? (a > c ? a : c) : (b > c ? b : c) 

语句的分类

js中的程序是从上到下一行一行执行的，通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行

语句的分类：
1.条件判断语句
2.条件分支语句
3.循环语句

1.条件判断语句：
使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行

if语句
语法：

• if(条件表达式){ 语句…}
  if语句在执行时，会先对条件表达式进行求值判断，如果条件表达式为true，则执行if后的语句，如果条件表达式的值为false，则不会执行if后的语句
  if语句只能控制紧随其后的那个语句，如果希望if语句可以控制多条语句，可以将这些代码统一放到代码块中，if语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句

var a = 10
if(a > 10) {
  alert('a比10大~~~')
  alert('谁也管不了我~~~')
}

我们的程序是由一条一条语句构成的，语句是按照自上而下的顺序一条一条执行的
在js中可以使用{}来为语句进行分组
同一个{}中的语句我们称之为一组语句
他们要么都执行，要么都不执行，一个{}中的语句我们也称为叫一个代码块，在代码块的后面就不用再编写；了
js中的代码块，只具有分组的作用，没有其他的用途，代码块中的内容，在外部是完全可见的

{
   var a = 10
   alert('hello')
   console.log(''你好)
   document.write('语句')
}
console.log('a=' + a)

2.switch语句（条件分支语句）

条件分支语句也叫switch语句
语法：
switch(条件表达式){
case 表达式：
语句…
break;
case 表达式：
语句…
break;
default:
语句…
break;
}
执行流程：
switch…case语句
在执行时会依次将case后的表达式的值何switch后的条件表达式的值进行全等比较
如果比较结果为true，则从当前case处开始执行代码
当前case后的所有代码都会执行，我们可以在case的后边跟着一个break的关键字，这样可以确保只会执行当前case后的语句，而不会执行其他的case
如果比较为false，则继续向下比较
如果所有的比较结果都为false，则只执行default后的语句

num = 1
switch(num){
 case 1:
        console.log('一')
       //使用break可以来退出switch语句
        break;
 case 2:
        console.log('二’)
 case 3: 
         console.log('三')
}

3.循环语句

if(条件表达式){
语句…
}else if(条件表达式){
语句…
}else if(条件表达式){
语句…
}else{
语句…
}
if…else if…else
当该语句执行时，会从上到下依次对条件表达式进行求值判断，
如果值为true，则执行当前语句；
如果值为false，则继续向下判断
如果所有的条件都不满足，则执行最后一个else后的语句
该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句

age = 70
if(age > 17 && age <= 30){
 alert('你已经成年了')
}else if(age > 30 && age <= 60){
 alert('你已经中年了')
}else if(age > 60){
 alert('你已经退休了')
}else{
 alert('你岁数挺大了')
}

Practice：

1、编写程序，由键盘输入三个整数分别存入变量num1,num2,num3，对他们进行排序，并且从小到大输出

//获取用户输入的三个数
//prompt()函数的返回值是string类型的
var num1 = +prompt('请输入第一个数')
var num2 = +prompt('请输入第二个数')
var num3 = +prompt('请输入第三个数')
//找到三个数中最小的数
if(num1 < num2 && num1 < num3){
  //num1最小，比较num2和num3
  if(num2 < num3){
   alert(num1 +','+ num2 + ',' +num3)
  }else {
   alert (num1 +','+ num3 +','+ num2)
  }
}else if(num2 < num1 && num2 <num3){
 //num2最小,比较num1和num3
 if(num1 < num3){
  alert(num2 +','+ num1 +','+num3)
 }else{
  alert(num2 +','+ num3 +','+ num1 )
 }
}


2、大家都知道，男大当婚，女大当嫁，那么女方家长要嫁女儿，当然要提出一些条件：
高： 180cm以上；富：1000万以上；帅：500以上；
如果这三个条件同时满足，则：‘我一定要嫁给他’
如果这三个条件有为真的情况，则：‘嫁吧，比上不足，比下有余’
如果这三个条件都不满足，则：‘不嫁’

//如果这三个条件同时满足，则我一定要嫁给他
if(height > 180 && money > 1000 && face > 500){
 alert('我一定要嫁给他~~')
}else if(height > 180 || money >1000 || face > 500){
 //如果这三个条件有为真的情况，则：嫁吧，比上不足，比下有余
}else {
 //如果三个条件都不满足，则不嫁
 alert('不嫁')
}


3、从键盘输入小明的期末成绩：
当成绩为100时，‘奖励一台宝马’
当成绩为【80-99】时，‘奖励一台手机’
当成绩为【60-80】时，‘奖励一本参考书’
其他时，什么奖励也没有
prompt()可以弹出一个提示框，该提示框中会有一个文本框，用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串会作为提示框的提示文字
用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容

var score = prompt('请输入小明的期末成绩（0-100）')
//判断是否合法
if(score > 100 || score  < 0 || isNaN(score)){
 alert('拖出去斩了')
}else{
  //根据score的值来决定给小明什么奖励
if(score == 100){
 //奖励一台宝马
 alert('宝马，拿去~~')   
 }else if(score > 80){
  //奖励一部手机
  alert('手机，拿去玩~~')
 }else if(score >= 60){
  //奖励一本参考书
  alert('参考书，拿去看~~~')
 }else{
  alert('棍子一根~~')
 }
}

js的优先级

就和数学中一样，在js中运算符也有优先级，比如先乘除后加减
在js中有一个运算符优先级的表，优先级越高越优先计算
如果优先级一样，则从左往右计算
但是这个表我们不需要记忆，如果遇到优先级不清楚，可以使用（）来改变优先级

var result = 1 + 2 + 3
如果 || 的优先级高，或者两个一样高，则应该返回3
如果与的优先级高，则应该返回1
var result = (1 || 2) && 3
console.log('result='+result) // result = 3 

循环

while语句 循环语句：通过循环语句可以反复执行一段代码多次

// 语法：
while (条件表达式) {
     语句....
}

// 像这种将条件表达式写死为true的循环，叫做死循环
    // 该循环不会停止，除非浏览器关闭，死循环在开发中慎用
    // 可以使用break，来终止循环
    var n = 1
    while (true) {
        alert(n++)

        // 退出循环
        break;
    }

// 实际上这两个语句功能类似，不同的是while是先判断后执行，而do...while会先执行后判断
do...while可以保证循环体至少执行一次，而while不能
   // var i = 11
    // while (i <= 10) {
    //     document.write(i++ +'</br>')
    // }


    // do {
    //     document.write(i++ +'<br/>')
    // } while (i <= 10)

// 执行流程：
do..while 语句在执行时，会先执行循环体，循环体执行完毕后，再对while后的条件表达式进行判断
如果结果为true，则继续执行循环体，执行完毕继续判断以此类推，如果结果为false，则终止循环