JavaScript基础知识介绍

JavaScript基础语法知识介绍

重新系统开始系统学习JavaScript, 如果笔记中有错误的地方，望提出。

1、概况

• JavaScript是解释型语句，不用编译，写完了就可以直接运行。
• JavaScript包含三个部分，ECMAScript、DOM和BOM。ECMAScript是js的标准，DOM是文档操作对象，BOM是浏览器操作对象。
• 一个网页就是一个文档，document是文档对象，使用在script标签中编写js语句，type属性为text/javascript。

2、JavaScript代码的位置

• 在标签的属性中

  <button onclick="alert('点到我了')">点我一下</button>
  

• 在a标签的href中

  <a href="javascript:alert('又是你');">点我两下</a>
  <a href="javascript:;">我是没反应的a标签</a>
  <!-- 
  	写在a标签中的href属性中，a标签不跳转。
  	我们经常使用href:"javascript:;"让a标签不跳转
  -->
  

• 在script标签中

  <script type="text/javascript">
  	// 代码写在这里
  	alert("不要再点我了");
  </script>
  

• 使用script引入外部文件

  <script src="js/01script.js"></script>
  

3、JavaScript数据类型

3.1 字面量和变量

• 字面量

  字面量是不可变的值，常量，比如1 2 3 4 ，都是可以直接使用的。但是我们很少直接使用字面量。

• 变量

  变量是可以改变的，可以用来保存字面量的值，比如x=123。在js中使用var关键字来声明变量。

3.2 标识符

在JS中所有由我们自主命名的都可以是标识符，比如变量名、函数名、属性名等等。使用标识符需要使用以下规则：

• 标识符中可以含有字母、数字、_ 、$；
• 标识符不能使用数字开头；
• 标识符不能使用功能ECMAScript的关键字和保留字；
• 标识符一般使用驼峰命名法，首字母小写，每个单词的开头字母都大写，其余小写，比如hibernateTest

在JS底层保存标识符实际上采用的是Unicode编码，所以所有的utf-8含有的内容也可以作为标识符，中文也可以作为标识符，但是我们一般都不会使用的。

3.3 数据类型

数据类型指的是字面量的类型，JS中包含有String（字符串）、Number（数字）、Boolean（布尔类型）、NULL（空值）、Undefined（未定义）、Object（对象）六种类型。其中前面五种属于基本数据类型，最后一种属于引用数据类型。

我们使用typeof 来检查一个变量的数据类型。

var a = "1233";
console.log(typeof a);

3.4 String字符串

• 使用单引号或者双引号包含字符串，比如var str = “string”; 只能在双引号中放单引号。
• 使用转义字符进行转化，\n 表示换行

3.5 Number数值

数值类型包括整数和浮点数，不区分int和double 以及 float，就只是Number类型的。Number中有MAX_VALUE属性，表示js能表示的最大值。

其中有两个特殊的值，一个Infinity，表示超出了js表示的最大值之后的字面量；一个是NaN，表示not a number ，例如使用document.write(“abc” * “bcd”); 返回的结果就是NAN。

使用js可以完成基本的算术运算。浮点数运算可能不会很精确。

3.6 Boolean值

用来进行逻辑判断，只有true和false值，很简单的进行判断真和假。

3.7 Null值

专门用来表示一个空的对象，注意使用typeof检查的时候返回的是一个Object对象

3.8 Undefined值

当声明一个变量，当并不给变量赋值的时候，就是undefined。使用typeof返回的是undefined。

3.9 强制类型转化

将一个类型强制转化为其他数据类型，一般都是讲其他数据类型转化为String Number Boolean类型。

• 转化成String

  • 方式一：调用被转化类型的tostring方法，该方法不会影响原变量，但是会返回的结果会是String类型。但是null和undefined这两种数据类型没有toString方法。
  • 方式二：调用String()函数，所有的数据类型都可以使用String()转化成String类型，将要改变的值放入到String函数的参数里面。

• 转化成Number

  • 方式一：使用Number()函数。存在以下三种情况：

    1）如果是纯数字的字符串，就直接转化成数字

    2）如果字符串中有非数字的内容，则转化为NaN

    3）如果字符串是一个空格或者很多个空格，那么转化成0

    4）如果是布尔类型转换成数值，true是1，false是0

    5）如果是NUll转换成数值，就是0

  • 方式二：只适用于字符串转换成数值类，调用parseInt函数

    parseInt()可以将一个字符串里面的有效的整数内容取出来，然后转换成Number类型。

    对应的，适用parseFloat() 取出字符串里面有效的浮点数

  // 得到的结果是123
  var c = "1223pc";
  var cc = parseInt(c);
  document.write(cc);
  
  //得到的结果是123456
  var d = "123456.326";
  console.log(parseInt(d));
  

• 转化成Boolean类型

  使用Boolean()函数就可以了，除了0和NaN、空串、null和undefined，转化之后都是false之外，其他的都是true。另外还有一个隐式转换，为任意数字做两次非运算，就可以转化为布尔值。

3.10 运算符

• 算术运算符：使用±*/进行运算，其中当对非Number类型的进行运算时，会先将他们转换成Number类型之后再运算。需要注意的是，当使用+号对两个字符串进行运算，会得到两个字符串的拼接，不会转换成Number类型。任何值和字符串相加都会转换成字符串。

• 自增自减：++ --，以下自增自减都一样的。

  • a++ 和 ++a的区别：这两个都是表达式，他们都会让a加1，但是不同的是，a++是a自增前的值，++a是a自增后的值。

    var a = 1;
    // a++的值是1
    // console.log(a++);
    // console.log("a:" + a);
    
    // ++a的值是2
    console.log(++a);
    console.log("a:" + a);
    

  • 一个小测试

    var d = 20;
    var result = d++ + ++d + d;
    //d++是20，但是此时的d已经是21，所以++d是22了，此时的d也是22啊，所以得到result的值是64
    

• 逻辑运算符

  使用！、&&、|| 进行取反、和、或 进行逻辑操作。需要注意的是js中的&&和||都是短路的，如果判断第一个条件可以确定真假就不会判断第二个值了。

  当非布尔值进行逻辑与运算的时候，会先将其转换为布尔值，然后再运算，并且返回其原值。

  • 如果两个值都是true，则返回后面的值
  • 如果两个中有一个是false，则返回前面的false值

  //返回的是2
  var e = 1 && 2;
  console.log("e::"+ e);
  

  当非布尔值进行逻辑或运算的时候，如果第一个值是true，则直接返回第一个值；如果第一个值是false，则返回第二个值。

• 赋值运算符

  其实就是+=、-=、*=之类的运算，比如a+=5 相当于 a = a + 5;

• 关系运算符

  使用大于等于小于等于这些符号进行运算，但是任何值跟NaN比较都是false；比较两个字符串的时候，比较的是他们的字符编码，如果有多位就一位一位进行比较；比较字符串类型的数字一定要转型，不要结果可能不会是我们想象的。

• 条件运算符（三元运算符）

  条件表达式？语句1：语句2。执行过程：先执行条件表达式，如果该值为true，则执行语句1，并返回执行结果；如果为false，则执行语句2，并返回执行结果。

4、流程控制语句

4.1 条件判断语句（if语句）

if（表达式）{ 语句1；语句2；} 如果表达式为真，执行括号里面的语句。跟else 和 else if 配合使用，进行条件判断。

4.2条件分支语句（switch语句）

/**
* switch(表达式){
*  case 表达式1 ： 
*                  语句1 ；
*                  break；
*  case 表达式2 ： 
*                  语句2 ；
*                  break；
*  default ：
*                  语句3；
*                  break；
* }
* 
* 在执行时会将case后面的表达式以及switch后面的表达式依次进行比较
* default就是上面的case表达式都没有匹配的时候，使用default，然后break退出
* 
* 
* */

var num = 1;
switch(num){
    case 1: alert("我是1"); break;
    case 2: alert("我是2"); break;
    case 3: alert("我是3"); break;
    default : break;
};
        

4.3 循环控制语句（while语句）

while(条件表达式){
    //当条件为true的时候，执行语句；
	语句；
}

do{
    语句；
} while（表达式）
//先执行语句，在进行判断，如果条件为true，则继续循环，否则退出。

4.4 循环控制语句（for语句）

for(初始化表达式; 条件表达式; 更新表达式){
    语句；
}
//初始化表达式只执行一次
for(var i = 0; i < 10; i++){
    alert(i);
}

4.5 break和continue关键字

break：跳转循环，全部跳出；

continue：跳转当前循环，进行下一次循环；