JavaScript基础--变量、运算符_21age是否报错-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39218277/article/details/123167230

JavaScript组成

在这里插入图片描述

ECMAScript
ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展,规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
DOM——文档对象模型
文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
BOM——浏览器对象模型
浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

变量命名规范

规则：

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

变量数据类型简介

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

数字型
NaN ，Not a number，代表一个非数值，isNaN 用来判断一个变量是否为非数字的类型，返回 true 或者 false 是数字返回false 不是数字返回true
字符串

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

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112

+ 号总结口诀：数值相加，字符相连

布尔型Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1);  // 2
console.log(false + 1); // 1

Undefined和 Null

一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

获取变量数据类型

获取检测变量的数据类型，typeof 可用来获取检测变量的数据类型

数据类型转换

转换为字符串

在这里插入图片描述
-[1] toString() 和 String() 使用方式不一样。
-[2]三种转换方式，更多第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

转换为数字型（重点）

-[1]注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
-[2] 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

转换为布尔型

-[1] 代表空、否定的值会被转换为 false ，如 “ ”、0、NaN、null、undefined
-[2] 其余值都会被转换为 true

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

解释型语言和编译型语言

在这里插入图片描述

翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
编译器是在代码执行之前进行编译，生成中间代码文件
解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

执行过程

在这里插入图片描述
类似于请客吃饭：

编译语言：首先把所有菜做好，才能上桌吃饭

解释语言：好比吃火锅，边吃边涮，同时进行

算数运算符

在这里插入图片描述
浮点数的精度问题不要直接判断两个浮点数是否相等

递增和递减运算符

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ – ）运算符来完成。在 JavaScript 中，递增（++）和递减（ – ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

注意：递增和递减运算符必须和变量配合使用。

前置递增运算符
++num 前置递增，就是自加1，类似于 num = num + 1
使用口诀：先自加，后返回值
后置递增运算符
num++ 后置递增，就是自加1，类似于 num = num + 1
使用口诀：先返回原值，后自加

var  num = 10;
alert(++num + 10);   // 21
alert(10 + num++);  // 21

比较运算符

比较运算符概述:比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。
在这里插入图片描述
等号比较

逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值
在这里插入图片描述

短路运算（逻辑中断）
逻辑与
语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

 	  console.log( 123 && 456 );        // 456
      console.log( 0 && 456 );          // 0
      console.log( 123 && 456&& 789 );  // 789

逻辑或
语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

   console.log( 123 || 456 );         //  123
   console.log( 0 ||  456 );          //  456
   console.log( 123 || 456 || 789 );  //  123

赋值运算符

在这里插入图片描述

运算符优先级

在这里插入图片描述

流程控制

流程控制概念:在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的
流程控制主要有三种结构：顺序结构、分支结构、循环结构
在这里插入图片描述

分支结构 if 语句、switch 语句、三元表达式
if-else

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

三元表达式表达式1 ? 表达式2 : 表达式3;
执行思路
[1 ] 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
[ 2] 简单理解：就类似于 if else （双分支）的简写
switch分支流程控制

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

循环 for、while、do-while、continue-break
for

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

执行操作表达式，此时第一轮结束。
第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
继续执行操作表达式，第二轮结束。
后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

while循环

while (条件表达式) {
    // 循环体代码 
}

1 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
2 执行循环体代码
3 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

do-while循环

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

1 先执行一次循环体代码
2 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码
注意：先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码

continue、break

for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('这个包子有虫子，扔掉');
         continue; // 跳出本次循环，跳出的是第3次循环 
      }
      console.log('我正在吃第' + i + '个包子呢');
 }