JavaScript 基本语法

JavaScript 基本语法

• 1、简介
• • 1.1、概念
  • 1.2、JavaScript的组成部分
  • 1.3、前端三大件
• 2、编写及运行
• 3、关键字（具有特殊作用的字）
• 4、变量
• • 4.1、声明变量的关键字：var
  • 4.2、命名规范
  • 4.3、经典的变量命名法
• 5、运算符
• • 5.1、赋值运算符
  • 5.2、加性运算符
  • 5.3、乘性运算
  • 5.4、一元运算符
  • 5.5、关系运算符:返回的都是布尔值
  • 5.6、等性运算符：返回的都是布尔值
• 6、数据类型及类型转换
• • 6.1、数据类型包括但不限于：
  • 6.2、类型转换
• 7、进制转换
• • 7.1、进制类型
  • 7.2、进制转换的方法

1、简介

1.1、概念

JavaScript是基于对象和事件驱动的客户端脚本语言
名词解释：

• 基于对象，指可以使用现有的对象，也可以自己创建新的对象去使用
• 事件驱动，指我按下了什么按钮，电脑就会执行什么操作
• 客户端，指当前我们自己使用的计算机
• 脚本语言，指无需编译，可直接运行的语言；

1.2、JavaScript的组成部分

• ECMAScript：解释器、翻译，语言本身的语法、类型、关键字、运算符等
• DOM：文档对象模型，及操作与网页有关的部分
• BOM：浏览器对象模型，及操作与浏览器有关的部分

1.3、前端三大件

• HTML：网页结构
• CSS：网页表现
• JavaScript：网页行为

2、编写及运行

JavaScript的三种写法

• 内联法：直接写在html元素上，绑定事件执行JavaScript代码
• 内部法：通过script标签，在该标签内部写JavaScript代码，该代码与html属于同一个页面
• 外部法：通过script标签，指定src属性，引入一个js文件，JavaScript代码写在js文件中，该代码与html不属于同于个页面，企业开发中应用该方法

JavaScript执行顺序：由上到下顺行执行

3、关键字（具有特殊作用的字）

• typeof ：返回数据的类型：alert( typeof( 123 ) )
• var：声明变量
• const：声明常量
• break：跳出循环，执行循环后的代码
• continue：跳出循环中的当前迭代，并继续执行循环中的下一个迭代
• return：函数返回语句，停止执行当前函数
• delete：删除对象属性
• if：条件判断
• else：否则，配合 if 做条件判断
• switch：定义多重判断语句
• case：在switch语句中定义一个分支条件
• while：定义循环
• do：与while配合定义do-while循环
• try：捕获异常
• catch：捕获异常，配合try进行错误判断
• for：定义循环
• in：判断一个对象是否包含某个属性
• this：引用当前对象
• void：执行表达式并返回undefined
• with：创建作用域
• throw：抛出异常
• instanceof：判断一个对象是否是某个类的实例
• function：定义函数
• new：创建一个对象
• toString：将数据类型转换为字符串
• String：将数据类型转换为字符串
• Boolean：将数据类型转换为布尔值
• Number： 将数据类型转换为数字
• parseInt：将数据类型转换为数字，从左到右取整数部分
• parseFloat ：将数据类型转换为数字，从左到右取数字部分
• toFixed(n)：四舍五入，保留n位小数
• Math：数学公式调用，如 Math.pow(x,y)：x的y次方
• Object：对象方法调用
• Array：数组方法调用
• RegExp：正则表达式
• Date：日期函数调用
• NaN：Not a number：这不是一个数
• isNaN：测试是否为数值型
• Infinity： 无穷大
• encodeURL：URL 编码，不对特殊字符编码
• decodeURL：URL 解码，不对特殊字符解码
• encodeURLComponent：URL 编码，对特殊字符编码
• dncodeURLComponent：URL 解码，对特殊字符解码
• eval：将字符串转为js能够解析的公式去运行
• innerHTML：将字符串渲染到页面上
• document.write：在页面上显示
• document.title：在标题栏显示
• console：在网页控制台输出
• debugger：断点调试
• toGMTString：根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果

4、变量

可以发生变化的量，即用一个标记来表示一个正在发生变化的量。

4.1、声明变量的关键字：var

• 变量名称可以自己定义
• 一个var声明多个变量，变量名与变量名之间要有英文逗号分隔
• 变量允许被重定义
• 可以在声明变量时就给该变量一个值，该值通过等号赋给变量
• 变量的值可以是一个公式的结果
• 每一行的结尾处，建议使用分号
• 用等号给某变量赋值时，也可以不写var，但不建议这样做
• JS是区分大小写的，所以A和a指两个不同的变量

4.2、命名规范

• 变量名的第一个字符必须是英文字符或下划线
• 变量名只能是英文、数字、下划线（$除外
• 变量名不能是关键字

4.3、经典的变量命名法

• 小驼峰命名法：首个单词的首字母小写，var userName = "张飞"
• 大驼峰命名法：每个单词的首字母都大写，var UserAge = 18
• 匈牙利命名法：变量名前缀为数据类型（str：字符串；num：数字；bin：布尔值）var strUserTeam = "蜀国"

5、运算符

5.1、赋值运算符

• 普通赋值运算： var a = 10
• 复合赋值运算： var a = 10; a += 10; // a = a+10

5.2、加性运算符

• 加法运算：var a = 10 + 5
• 减法运算： var a = 10 - 5

5.3、乘性运算

• 乘法运算：var a = 10 * 5
• 除法运算： var a = 10 / 5
• 取模运算：a %= 2：a=a/2 的余数 var a = 10 % 5

5.4、一元运算符

• 前增量 ： a++
• 前减量 ：a–
• 后增量 ：++a
• 后减量 ：–a

给某变量赋值时，区别就产生了：

• var b=++a; ——先对a进行加1运算，然后把结果赋给b
• var b=a++; ——先把a的值赋给临时变量tmp，然后对a做加1运算，然后把tmp值赋给b

5.5、关系运算符:返回的都是布尔值

• 小于 ： <
• 小于等于 ： <=
• 大于 ：>
• 大于等于 ： >=

5.6、等性运算符：返回的都是布尔值

• 等号（两个等号）： == ：数据类型不同，则先转换为相同类型再比较
• 非等号 ： ！=： 先准换类型，再比较
• ！== ： 不转换类型，直接比较
• 全等：=== ： 数据类型不同，也没有数据类型转换，直接比较

6、数据类型及类型转换

6.1、数据类型包括但不限于：

• 字符串（string）：var a = "hello"
• 数字（number）：var a = 10
• 布尔（boolean）：var a = true
• 未初始化（undefined）：var a

6.2、类型转换

• 隐式转换：通过数学计算等小技巧对数据类型转换

var a = "5";
var b1 = a * 2; // 把字符串5转为数字5
var b2 = a + 2; // 把数字2转为字符串2
console.log( typeof(b1), b1 );
console.log( typeof(b2), b2 );

• 注意：减乘除模这些运算符都可以隐式转换数据为数字型，而加法不行
• 加法时，加号左右两侧只要有一侧为字符串，就会执行字符串的拼接操作

• 强制转换：通过Js提供的函数，对数据类型进行转换
  • toString：将数据类型转换为字符串

    var a = 56
    a = a.toString(); // 将数字转为字符串
    

  • String：将数据类型转换为字符串

    var a = 56;
    a = String(a); // 将数字转为字符串
    

  • Boolean：将数据类型转换为布尔值（数据转为布尔值时：如果是数字，非0即真；如果是字符串，非空即真）

    var a = Boolean(1);  // 将数字1，转为布尔值
    var a = Boolean(""); // 将空字符串，转为布尔值
    

  • Number： 将数据类型转换为数字

    var a = "123";
    a = Number(a);  // 将字符串转为数字
    

  • parseInt：将数据类型转换为数字，从左到右取整数部分

    var a = "3.14abc345";
    console.log( parseInt(a) );  // 从左到右，截取整数部分
    

  • parseFloat：将数据类型转换为数字，从左到右取数字部分

    var a = "3.14abc345";
    console.log( parseFloat(a) );  // 从左到右，截取数字部分
    

  • eval：将字符串转为js能够解析的公式去运行

    console.log（“1+2”）：直接输出，不计算
    console.log（eval(“1+2”)）：把字符串“1+2”转换为js能够解析的数学上的1+2，执行计算
    

  • NaN：Not a number，这不是一个数，可用于测试是否为数值型（NaN 不等于 NaN；NaN 不等于 任何值）

    var n = Number("abc");
    var n = NaN;
    console.log( typeof(n), n ); 
    typeof(NaN) == "number"
    console.log( NaN == NaN );
    如果数据是NaN，那么返回true，否则返回false
    console.log( isNaN(NaN) );
    

  • 10/0：无穷
  • Math.round(n)：四舍五入，保留整数（ 四舍六入五考虑，五后非零就进一，五后皆零看奇偶，五前为偶应舍去，五前为奇要进一！）

    var n = 13.7234567;
    var a = Math.round(n);  // 四舍五入，保留整数
    

  • toFixed(n)：四舍五入，保留n位小数

    var n = 13.7234567;
    var b = n.toFixed(3);   // 四舍五入，保留3位小数
    

7、进制转换

7.1、进制类型

• 二进制：0、1，逢二进一，比如十进制的2，用二进制表示，结果是10
• 八进制：以0开头，内容为0-7的数字，逢八进一，比如十进制的8，用八进制表示，结果是10
• 十进制：0-9，逢十进一，比如十进制的10，用十进制表示，结果是10
• 十六进制：以0x开头，内容为0-9、a-f的字，0-9、a-f，逢十六进一，比如十进制16，用十六进制表示，结果是10

注意：计算机内部的所有代码都是二进制的，而JS中编写程序是用十进制编写的，十进制的0.1转换为二进制时，结果无限循环了，所以只能在其内部规定保留多少位小数
解决方法：

• 在程序中尽量不要涉及小数计算，0.1+0.2 == 0.3 可以改写成 0.110+0.210 == 0.3*10
• 用约等于的方法求结果， (0.1+0.2).toFixed(1) == “0.3”

7.2、进制转换的方法

• 其他进制转换为二进制

2.toString(2) == "10"     十进制的2，通过toString方法转为二进制，结果为"10" 
8.toString(8) == "10"     十进制的8，通过toString方法转为八进制，结果为"10"
16.toString(16) == "10"   十进制的16，通过toString方法转为十六进制，结果为"10"  

• 其他进制转换为十进制

parseInt("10", 2) == 2    二进制的"10"，通过parseInt方法转为十进制，结果为2
parseInt("10", 8) == 8    八进制的"10"，通过parseInt方法转为十进制，结果为8
parseInt("10", 16) == 16    十六进制的"10"，通过parseInt方法转为十进制，结果为16 

• toString和parseInt除了可以转化数据类型以外，还可以做进制转换
• toString和parseInt的使用方法不一样，toString处理的数据，一前一后；parseInt处理的数据都在后面