JavaScript基本语法

1、变量

(1).标识符
程序开发中，经常需要自定义一些符号来标记一些名称，并赋予其特定的用途，如变量名、函数名等，这些符号都被称为标识符。

标识符定义规则
由大小写字母、数字、下划线和美元符号（$）组成。
不能以数字开头。
严格区分大小写。
不能使用JavaScript中的关键字命名。
要尽量要做到“见其名知其意”。

当标识符中需要多个单词进行表示时，常见的表示方式有下划线法（如user_name）、驼峰法（如userName）和帕斯卡法（如UserName）。读者可根据开发需求统一规范命名的方式，如下划线方式通常应用于变量的命名，驼峰法通常应用于函数名的命名等

(2).关键字
保留关键字：是指在JavaScript语言中被事先定义好并赋予特殊含义的单词。

关键字不能作为变量名和函数名使用，否则会使JavaScript在载入过程中出现语法错误。

未来保留关键字：是指预留的，未来可能会成为保留关键字的单词。

标识符在定义时，建议不要用未来保留关键字，避免将来转换为关键字时出现错误。

(3)变量的使用
变量可以看作是存储数据的容器。
JavaScript中变量通常利用var、let关键字声明，并且变量名的命名规则与标识符相同。

<script>
  var sales;
  var hits, hot, NEWS;
  var room_101, room102;
  var $name, $age;
</script>

未赋初始值的变量，默认值会被设定为undefined。
行末的分号表示语句结束。
变量与变量之间的逗号（,）操作符，可实现一条语句同时完成多个变量的声明。

(4).变量的赋值

<script>
  var unit, room;                   // 声明变量
  unit = 3;                         // 为变量赋值
  room = 1001;                      // 为变量赋值
  var fname = 'Tom', age = 12;      // 声明变量的同时赋值
</script>

(5).常量
ES6中新增了const关键字，用于实现常量的定义

<script>
  var r = 6;
  const PI = 3.14;
  const P = 2 * PI * r;
  console.log('P=' + P);            // 输出结果：P=37.68
</script>

常量一旦被赋值就不能被改变。
常量在声明时必须为其指定某个值

2、数据类型

(1).布尔型
JavaScript中较常用的数据类型之一，通常用于逻辑判断。
只有true和false，表示事物的“真”和“假”，严格遵循大小写，因此true和false值只有全部为小写时才表示布尔型。

<script>
  var flag1 = true;         // 为变量flag1赋一个布尔类型的值true
  var flag2 = false;        // 为变量flag2赋一个布尔类型的值false
</script>

(2).数值型
JavaScript中的数值型并不区分整数和浮点数，所有数字都是数值型。

<script>
  var oct = 032;            // 八进制数表示的26
  var dec = 26;             // 十进制数26
  var hex = 0x1a;           // 十六进制数表示的26
  var fnum1 = 7.26;         // 标准格式
  var fnum2 = -6.24;        // 标准格式
  var fnum3 = 3.14E6;       // 科学计数法格式3.14*10^6
  var fnum4 = 8.96E-3;      // 科学计数法格式8.96*10^-3
</script>

NaN非数值
NaN 是一个全局对象的属性，它的初始值就是NaN。
与数值型中的特殊值NaN一样，都表示非数字（Not a Number）。
可用于表示某个数据是否属于数值型。
NaN没有一个确切的值，仅表示非数值型的一个范围。
例如，NaN与NaN进行比较时，结果不一定为真（true），这是由于被操作的数据可能是布尔型、字符型、空型、未定义型和对象型中的任意一种类型。

(3).字符型
字符型（String）是由Unicode字符、数字等组成的字符序列，这个字符序列我们一般将其称为字符串。

<script>
  var slogan = 'Knowledge';         // 单引号，存放一个单词
  var str = "the sky is blue.";     // 双引号，存放一个句子
  var color = '"red"blue';          // 单引号中包含双引号
  var food = "'pizza'bread";        // 双引号中包含单引号
  var num = '', total = "";         // 定义空字符串
</script>

<script>
//在单引号中使用单引号，或在双引号中使用双引号:利用转义字符“\”进行转义
  var say1 = 'I\'m is ...';          // 在控制台的输出结果：I'm is ...
  var say2 = "\"Tom\"";              // 在控制台的输出结果："Tom"
</script>

由单引号定界的字符串中可以包含双引号。
由双引号定界的字符串中也可以包含单引号。

(4).空型
空型（Null）只有一个特殊的null值。
空型用于表示一个不存在的或无效的对象与地址。
JavaScript中大小写敏感，因此变量值只有是小写的null时才表示空型（Null）。

(5).未定义型
未定义型（Undefined）也只有一个特殊的undefined值。
未定义型用于声明的变量还未被初始化时，变量的默认值为undefined。
与null不同的是，undefined表示没有为变量设置值，而null则表示变量（对象或地址）不存在或无效。
注意：
null和undefined与空字符串（‘’）和0都不相等。

(6).数据类型检测：1、typeof操作符；2、Object.prototype.toString.call()

<script>
  var num1 = 12, num2 = '34', sum = 0;     // 声明变量并赋值
  sum = num1 + num2;                       // 变量进行相加运算
  console.log(typeof num1);                // 输出结果：number
  console.log(typeof num2);                // 输出结果：string
  console.log(typeof sum);                 // 输出结果：string
  console.log(typeof num2 == 'number');    // 判断num2是否为number类型
</script>

<script>
  var data = null;           // 待判断的数据
  var type = 'Null';         // 数据类型，开始字母要大写，如Boolean、String、Number、Undefined等
  // 检测数据类型的表达式，若是指定的type型，则返回true，否则返回false
  var result = Object.prototype.toString.call(data) == '[object ' + type + ']';
  // 输出比较结果
  console.log(result);
  // 输出检测结果
  console.log(Object.prototype.toString.call(data));
</script>

(7).数据类型转换
转布尔型：Boolean()函数
Boolean()函数会将任何非空字符串和非零的数值转换为true，将空字符串、0、NaN、undefined和null转换为false。

<script>
  var con = prompt();           // 保存用户的输出内容
  if (Boolean(con)) {
    document.write('已输入内容');
  } else {
    document.write('无输入内容');
  }
  console.log(Boolean(con));    // 用户单击“取消”按钮，则结果为false
  console.log(Boolean(con));    // 用户未输入，单击“确定”按钮，则结果为false
  console.log(Boolean(con));    // 用户输入“哈哈”，单击“确定”按钮，则结果为true
</script>

转数值型：Number()函数、parseInt()函数或parseFloat()函数

<script>
  // 获取用户的输入，完成自动求和
  var num1 = prompt('请输入求和的第1个数据：'); // 假设当前用户输入：123abc
  var num2 = prompt('请输入求和的第2个数据：'); // 假设当前用户输入：456
  // 未处理，直接进行相加运算
  console.log(num1 + num2);                     // 输出结果：123abc456
  console.log(parseInt(num1) + parseInt(num2)); // 输出结果：579
</script>

<script>
  console.log(parseInt('123abc'));              // 输出结果：123
  console.log(parseInt('F', 16));               // 输出结果：15
</script>

转数值型的函数在使用时有一定的区别：

注意：
a、所有函数在转换纯数字时会忽略前导零，如“0123”字符串会被转换为123。
b、parseFloat()函数会将数据转换为浮点数（可以理解为小数）。
c、parseInt()函数会直接省略小数部分，返回数据的整数部分，并可通过第2个参数设置转换的进制数。
isNaN()函数
对转换后的结果是否是NaN进行判断，只有不是NaN时，才能够进行运算。当给定值为undefined、NaN和{}（对象）时返回true，否则返回false。

<script>
  // 获取用户的输入，完成自动求和
  var num1 = prompt('请输入求和的第1个数据：');          // 假设当前用户输入：abc
  var num2 = prompt('请输入求和的第2个数据：');          // 假设当前用户输入：123
  var num1 = parseInt(num1), num2 = parseInt(num2);      // 转数值型
  if (isNaN(num1) || isNaN(num2)) {                      // 判断是否是NaN
    console.log('非法数字');
  } else {
    console.log(num1 + num2);
  }
</script>

转字符型：String()函数和toString()方法。
实现方式的区别： String()函数可以将任意类型转换为字符型；除了null和undefined没有toString()方法外，其他数据类型都可以完成字符的转换。

<script>
  var num1 = num2 = num3 = 4, num4 = 26;
  console.log(String(12));                          // 输出结果：12
  console.log(num1 + num2 + num3.toString());       // 输出结果：84
  console.log(num4.toString(2));                    // 输出结果：11010
</script>

注意：
toString()方法在进行数据类型转换时，可通过参数设置，将数值转换为指定进制的字符串，例如num4.toString(2)，表示首先将十进制26转为二进制11010，然后再转为字符型数据。

3、表达式

概念：表达式可以是各种类型的数据、变量和运算符的集合。
最简单的表达式可以是一个变量。

<script>
  var x, y, z;           // 声明变量
  x = 1;                 // 将表达式“1”的值赋给变量x
  y = 2 + 3;             // 将表达式“2 + 3”的值赋给变量y
  z = y = x;             // 将表达式“y = x”的值赋给变量z
  console.log(z);        // 将表达式“z”的值作为参数传给console.log()方法
  console.log(x + y);    // 将表达式“x + y”的值作为参数传给console.log()方法
</script>

4、运算符

(1).算术运算符
对数值类型的变量及常量进行算数运算。

注意：
a、四则混合运算，遵循 “先乘除后加减”的原则。
b、取模运算结果的正负取决于被模数（%左边的数）的符号。
c、尽量避免利用小数进行运算，有时可能因JavaScript的精度导致结果的偏差。
d、“+”和“-”在算术运算时还可以表示正数或负数。
e、运算符（++或–）放在操作数前面，先进行自增或自减运算，再进行其他运算。若运算符放在操作数后面，则先进行其他运算，再进行自增或自减运算。
f、递增和递减运算符仅对数值型和布尔型数据操作，会将布尔值true当做1，false当做0。

(2).字符串运算符
JavaScript中，“+”操作的两个数据中只要有一个是字符型，则“+”就表示字符串运算符，用于返回两个数据拼接后的字符串。

<script>
  var color = 'blue';
  var str = 'The sky is '+color;
  var tel = 110 + '120';
  console.log(str);                          // 输出结果为：The sky is blue
  console.log(tel);                          // 输出结果为：110120
  console.log(typeof str, typeof tel);       // 输出结果：string string
</script>

注意：
利用字符串运算符“+”的特性，可以将布尔型、整型、浮点型或为null的数据，与空字符串进行拼接，就会完成字符型的自动转换。

(3).赋值运算符
是一个二元运算符，即它有两个操作数，它将运算符右边的值赋给左边的变量。

<script>
  var a = b = c = 8;          // 为三个变量同时赋值
  // 分析：
// ①将8赋值给变量c
// ②再把变量c的值赋值给变量b
// ③把变量b的值赋值变量a，表达式赋值完成
</script>

<script>
  var num1 = 2, num2 = '2';
  num1 += 3;// 等价于： num1 = num1 + 3;
  num2 += 3;// 等价于： num2 = num2 + 3;
  console.log(num1, num2);   // 输出结果为：5 "23" 
</script>

注意：
a、“=”是赋值运算符，而非数学意义上的相等的关系。
b、一条赋值语句可以对多个变量进行赋值。
c、赋值运算符的结合性为“从右向左”。

(4).比较运算符
用来对两个数值或变量进行比较。其结果是布尔类型的true或false。

注意：
a、不相同类型的数据进行比较时，首先会自动将其转换成相同类型的数据后再进行比较。
b、运算符“"和“!=”运算符在比较时，只比较值是否相等。
c、运算符“=”与“!==”要比较数值和其数据类型是否相等。

(5).逻辑运算符
是在程序开发中用于逻辑判断的符号。其返回值类型是布尔类型。

注意：
a、逻辑运算符的结合性是从左到右。
b、当使用“&&”连接两个表达式时，如果左边表达式的值为false，则右边的表达式不会执行，逻辑运算结果为false。（短路）
c、当使用“||”连接两个表达式时，如果左边表达式的值为true，则右边的表达式不会执行，逻辑运算结果为true。（短路）
d、逻辑运算符可针对结果为布尔值的表达式进行运算。

<script>
    // 非0 非空字符串为true
    console.log( 5 && 4 );//当结果为真时，返回第二个为真的值4 
    console.log( 0 && 4 );//当结果为假时，返回第一个为假的值0 
    console.log( 5 || 4 );//当结果为真时，返回第一个为真的值5 
    console.log( 0 || 0 );//当结果为假时，返回第二个为假的值0 
    console.log((3||2)&&(5||0));//5 
    console.log(!5);//false 
</script>

(6).三元运算符

条件表达式 ? 表达式1 : 表达式2

先求条件表达式的值。
如果为true，则返回表达式1的执行结果。
如果条件表达式的值为false，则返回表达式2的执行结果。

<script>
  var age = prompt('请输入需要判断的年龄：');
  var status = age >= 18 ? '已成年' : '未成年';
  console.log(status);
</script>

(7).位运算符
是针对二进制数的每一位进行运算的符号。它专门针对数字0和1进行操作。

注意：
JavaScript中位运算符仅能对数值型的数据进行运算。在对数字进行位运算之前，程序会将所有的操作数转换成二进制数，然后再逐位运算。

<!-- 位运算符
    &   二进制 都是1 结果是1，否则是0
    |          有一个是1 结果是1
    ~   只针对一个操作数，0取1 ，1 取0；
    ^   相同取0   不同取1
    <<  左移  右边空位补0，左边移走部分舍去
    >>  右移  左边空位 负数补1  正数 补0
 -->

(8).运算符的优先级


注意：
a、同一单元格的运算符具有相同的优先级。
b、左结合方向表示同级运算符的执行顺序为从左到右。
c、右结合方向则表示执行顺序为从右到左。
d、圆括号()优先级别最高。例如， 4 + 3 * 2的 输出结果为10，(4 + 3) * 2的输出结果为14。

案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>计算圆的周长和面积</title>
  </head>
  <body>
    <div>
      <p>圆的半径：<input id="r" type="text"></p>
      <p>圆的周长：<input id="cir" type="text"></p>
      <p>圆的面积：<input id="area" type="text"></p>
    </div>
    <script>
      var r = prompt('请输入圆的半径');
      r = parseFloat(r) && Number(r);   // 获取输入的纯数字，其余情况皆转为NaN
      if (!isNaN(r)) {                  // 判断用户的输入是否是数值
        var cir = 2 * Math.PI * r;
        var area = Math.PI * r * r;
        document.getElementById('r').value = r; // 给r赋值
        document.getElementById('cir').value = cir.toFixed(2);
        document.getElementById('area').value = area.toFixed(2);
      } else {
        alert('请输入正确的数字');
      }
    </script>
  </body>
</html>

5、流程控制

JavaScript三大流程控制语句：顺序结构、选择结构、循环结构

(1).选择结构
选择结构语句需要根据给出的条件进行判断来决定执行对应的代码。

if单分支语句
if条件判断语句也被称为单分支语句，当满足某种条件时，就进行某种处理。

//举例：只有年龄大于等于18周岁，才输出已成年，否则无输出。
<script>
  var age = 0;
  if (age >= 18) {
    console.log('已成年');
  }
</script>

if…else双分支语句
if…else语句也称为双分支语句，当满足某种条件时，就进行某种处理，否则进行另一种处理。

//举例：判断一个学生的年龄，大于等于18岁则是成年人，否则是未成年人。
<script>
  var age = 0;
  if (age >= 18) {
    console.log('已成年');
  } else {
    console.log('未成年');
  }
</script>

if…else if…else多分支语句
if…else if…else语句也称为多分支语句，可针对不同情况进行不同的处理。

//举例：对一个学生的考试成绩进行等级的划分，分数在90~100分为优秀，分数在80~90分为优秀为良好，分数在70~80分为中等，分数在60~70分为及格，分数小于60则为不及格。

<script>
  var score = 0;
  if (score >= 90) {
    console.log('优秀');
  } else if (score >= 80){
    console.log('良好');
  } else if (score >= 70){
    console.log('中等');
  } else if (score >= 60){
    console.log('及格');
  } else {
    console.log('不及格');
  }
</script>

switch多分支语句
switch语句也是多分支语句，功能与if系列条件语句相同，不同的是它只能针对某个表达式的值作出判断，从而决定执行哪一段代码。

//举例：根据学生成绩score进行评比（满分为100分）。
<script>
  var score = 100;
  switch ( parseInt(score/10) ) {
    case 10:  // 90~100为优
    case 9:  console.log('优');  break;
    case 8:  console.log('良');  break;
    default: console.log('差');
  }
</script>

(2).循环结构
所谓循环语句就是可以实现一段代码的重复执行。

while循环语句
while循环语句是根据循环条件来判断是否重复执行一段代码。

<script>
        // 控制台打印 1-5
        var num=1;
        while(num<=5){
            console.log(num);
            num++;
        }
    </script>

do…while循环语句
do…while循环语句的功能与while循环语句类似，唯一的区别在于，while是先判断条件后执行循环体，而do…while会无条件执行一次循环体后再判断条件。

<script>
  var num = 1;
  do {
    console.log(num);   
    num++;
  } while (num <= 5);
</script>

for循环语句
for循环语句是最常用的循环语句，它适合循环次数已知的情况。

<script>
        var num = 5;
        for(var i=0;i<=num;++i){
            console.log(i);
        }
</script>

注意：死循环
a、若循环条件永远为true时，则会出现死循环，因此在开发中应根据实际需要，在循环体中设置循环出口，即循环结束的条件。
b、for循环语句小括号“()”内的每个表达式都可以为空，但是必须保留分号分割符。当每个表达式都为空时，表示该for循环语句的循环条件永远满足，会进入无限循环的状态，此时如果要结束无限循环，可在for语句循环体中用跳转语句进行控制。

(3).跳转语句：break和continue语句
跳转语句用于实现程序执行过程中的流程跳转。
break与continue的区别：break语句可应用在switch和循环语句中，其作用是终止当前语句的执行，跳出switch选择结构或循环语句，执行后面的代码。而continue语句用于结束本次循环的执行，开始下一轮循环的执行操作。

<script>
  for (var i = 1; i <= 5; ++i) {
    console.log('i=' + i);
    if (i == 3) {
      break;
    }
    console.log('ending');
  }
</script>

其他功能：break和continue语句还可跳转到指定的标签语句处，实现嵌套语句的多层次跳转。

<script>
  outerloop:
  for (var i = 0; i < 10; ++i) {
    for (var j = 0; j < 1; ++j) {
      if (i == 3) {
        break outerloop;
      }
      console.log('i=' + i + ' j=' + j);
    }
  }
</script>

案例：

<!--打印金字塔-->
<script>
  var level = prompt('请设置金字塔的层数');
  // 获取输入的纯数字，其余情况皆转为NaN
  level = parseFloat(level) && Number(level);
  // 判断用户输入的数据是否合法
  if (isNaN(level)) {
    alert('金字塔的层数必须是纯数字');
  }
  // 循环遍历金字塔的层数
  for(var i = 1; i <= level; ++i){  
     // 输出星星前的空格
    var blank = level - i;
    for(var k=0; k < blank; ++k){
      document.write('&nbsp;');
    }
    // 打印星星 
    var star = i*2 - 1;
    for(var j = 0; j < star; ++j){
      document.write('*');
    }
     // 换行
    document.write('<br>');
  }
</script>