JavaScript Notes

Posted 2021-02-04 mzyan

javascript Notes

了解

1. 区分大小写、变量是弱类型、行结尾加分号、括号表明代码块
2. 注释：单行// 块注释 /*
3. 特殊字符: +特殊字符

---

常量/变量

1. 没有常量概念，通常在代码中给定值

   var a = 3.1415926；
   var b = "hello"；

2. 变量-保存程序中的临时值，可被后面的脚本使用，弱类型
3. 同时声明多个变量（不建议）
4. 变量命名
   • 以字母、下划线或美元符开头
   • 余下字符可以是下划线、美元符或任何字母数字
   • 最长255字符
   • 不能有空格、大小写敏感
   • 不能使用JavaScript的关键字或保留字命名

---

数据类型

1. typeof操作符：检测变量的数据类型
2. 五种原始类型
   • undefined-未定义类型
   • Null-空类型
   • boolean-布尔类型（true/false）True/False是错误的
   • Number-数字类型：整型（十进制、八进制、十六进制）、浮点型（必须包含小数点）

     var box = 4.12e9; //即4120000000
     var box = 0.00000000412 //即4.12e-9

   • String-字符串类型：表示由零或多个16位Unicode字符组成的字符序列

     var box = ‘Lee‘;
     var box = "Lee";

3. 一种复杂类型：Object

   对象起始就是一组数据和功能的集合
   使用new操作符，后跟要创建的对象类型的名称来创建对象
   Object()里可以任意传参，可以穿数值、字符串、布尔值等
   还可以进行相应的计算

   ---

   使用new Object()来表示一个对象，也可以使用这种new这种操作符来创建其他类型的对象
   var box = new Number(5);//new String(‘Lee‘)、new Boolean(true)
   alert(typeof box);

4. NaN，即非数值（Not a Number）是一个特殊的值

   用于表示一个本来要换回数值的操作数未返回数值的情况（这样就不会抛出错误了）

5. 转义字符

   换行
   制表
    空格
   回车
   f 进纸
   \ 斜杠
   ‘ 单引号
   " 双引号
   xnn 以十六进制代码nn表示一个字符（0~F）。eg：x41
   unnn 以十六进制代码nnn表示的一个Unicode字符（0~F）。eg：u03a3

6. 类型转换

   JavaScript是弱类型语言，变量的类型对应于其值的类型
   可以对不同类型的变量执行运算，解释器强制装换数据类型，然后进行处理

   • 字符串->数值：
     • parseInt(var)
     • parseFloat(var)
     • Number(var)
   • 值->字符串
     • toString()
   • Number()函数：转型函数，可以用于任何数据类型

---

运算符

1. 赋值运算符：=、+=、-=、*=、/=
2. 算术运算符：+、-、* 、/、%、++、--、-
3. 关系运算符：==、!=、>、<、>=、<=
4. 等同运算符：===（严格意义上的等同）
5. 逻辑运算符：&&、||、!
6. 条件运算符：

   status = (age >= 18) ? "adult" : "minor"

7. 位运算符：
   1. 有符号数：<<、>>
   2. 无符号数：<<<、>>>
8. 优先级：略

---

流程控制

1. 选择语句：if、if-else、if-else if、switch
2. 循环语句：for、while、do-while、for-in、break、continue
3. 异常处理语句：try-catch、try-catch-finally、throw

---

函数

JavaScript的函数属于Function对象，因此可以使用Function对象的构造函数来创建函数；
可以使用function关键字以普通的形式来定义一个函数;

1. 普通定义方式（使用function）

   ···javascript
   function 函数名 ([参数1,[参数2,[参数N]]])
   {
   [语句组]；
   [return [表达式]]；
   }
   ···

2. 函数变量定义方式：实质是创建一个函数对象

   var 变量名 = new Function([参数1,[参数2,[参数N]]],[函数体])；

3. arguments对象--函数可以接受任意个数的参数，通过arguments来访问

   arguments对象代表正在执行的函数和调用它的参数
   函数对象的length属性说明函数定义时指定的参数个数
   arguments对象的length属性说明调用函数时实际传递的参数个数
   作用：验证所传递的参数是否符合函数要求

4. 函数返回类型
   1. 值类型使用的是值传递方式，即传递数据的副本（一般情况下）
   2. 引用类型返回的是数据的地址，而不是数据本身

      引用传递的优点是速度快，但系统会为维护数据而付出额外的开销

5. 函数调用
   1. 普通调用：带参数调用、无参数调用
   2. 链接调用：用户点击链接后，即调用该函数

      <a href="javascript: 函数">
      ...
      </a>

   3. 事件触发调用
   4. 其他内部函数:
      1. Number()、parseInt()、parseFloat();
      2. isNaN();
      3. eval()-把字符串当做JavaScript表达式来执行；
6. 函数嵌套：函数内部定义另外一个函数；
7. 函数的作用域：公有函数、私有函数

---

数组

JavaScript数组元素的数据类型可以不相同，可以是任意有效的JavaScript数据类型

1. 数组对象：一组变量的有序集合，通过数组索引来使用一个变量
2. 创建数组：
   1. 创建一个空数组：

      var Obj = new Array();

   2. 通过指定数组长度创建数组：

      var Obj = new Array(Size);

   3. 通过指定数组元素创建数组：

      var Obj = new Array(元素1, 元素2, ... , 元素N)；

   4. 直接创建数组：

      var Obj = [元素1, 元素2, 元素3, ... , 元素N]；

3. 数组使用：无区别
4. 数组元素的基本操作
   1. 添加数组元素：
      • push()-将新元素添加到数组的尾部
      • unshift()-将指定个数的新元素插入数组的开始位置，形成新的数组

        var students = new Array();
        students.push("Lily");

      • 如果指定的下标超过数组的长度，数组将扩展为新下标指定的长度；
   2. 删除数组元素：
      • delete 数组名[下标];
      • 如果需要删除全部元素只需要删除数组对象即可

      var names = Array("李莉", "杨洋");
      delete names[0];

   3. 数组元素的个数：

      var Obj = new Array(1, 2, 3);
      var count = Obj.length;

5. Array对象的常用方法
   • toString-返回Array中的元素转为由逗号分隔的字符串
   • join-数组所有元素连接，间隔符由参数指定（省略参数则由逗号分隔）
   • concat-数组组合
   • pop-移除最后一个元素并返回该元素
   • push-增加新元素，并返回新长度
   • shift-移除第一个元素并返回该元素
   • slice-返回一个新数组，为原数组中的一段
   • reverse-返回一个新数组，由原数组反转而成
   • sort-返回一个排序后的数组

---

JavaScript对象

对象：一种类型（引用类型——一种数据结构，用于将数据和功能组织在一起），而对象的值就是引用类型的实例。

1. 对象成员：属性（properties）和方法（methods）
2. 对象创建
   1. 使用new运算符

      var box = new Object(); //使用new运算符创建Object
      box.name = ‘张三‘;
      box.age = 28;
      var box = Object(); //省略new关键字

   2. 字面量表示法

      var box = { name : ‘张三‘, age : 28 };
      var box = {‘name‘: ‘张三‘, ‘age‘: 28};

   3. 输出方式

      alert(box.age);
      alert(box[‘age‘]);

   4. 创建方法：

      var box = {
      run : function(){
      return ‘运行‘;
      }
      }
      alert(box.run());

   5. 删除对象属性

      delete box.name;

3. with语句——将代码作用域设置到一个特定的对象中
   • 在with语句体内，任何对变量的引用都被认为是这个对象的属性

   var box = {‘name‘:‘tom‘,‘age‘:28,‘height‘:178};

   var n = box.name;
   var a = box.age;
   var h = box.height;
   以上改写成：
   with(box){
   var n = name;
   var a = age;
   var h = height;
   }

4. 对象废除
   • 不必专门销毁对象来释放内存
   • 当没有针对该对象的引用时，自动废除
   • 把对象的引用设置为null也可以废除
5. JavaScript内部对象
   1. 常用内部对象
      • Array
      • Global
      • Date
        • toGMTString-使用格林威治标准时间数据格式将Date对象转成字符串
        • toLocaleString-使用当地时间格式将Date转成字符串
        • Date.parse(datestring)-用日期字符串表示自1970年1月1日以来的毫秒数
        • Date.UTC(year,month,day,hours,min,secs)-Date对象中自1970年1月1日以来的毫秒数
      • Math
        • abs(x)
        • ceil(x):大于等于x的最小整数
        • exp(x)
        • floor(x)：小于等于x的最大整数
        • round(x)：四舍五入
        • sqrt(x)
        • random(x)
      • String
        • charAt(i):返回指定索引位置处的字符
        • charCodeAt(i):
        • concat(str):连接字符串
        • indexOf(str)
        • lastIndexOf(str)
        • replace(str1, str2):返回将str1替换为str2后的字符串
        • slice(start,end):返回字符串中起始位置为start结束位置为end的子字符串
        • split(separator,limit):以separator为分隔符以数组返回limit个元素
        • substr(start,length)
        • substring(start,end):不包括end
        • toLowerCase
        • toUpperCase
      • Number
        • MAX_VALUE
        • MIN_VALUE
      • Boolean
        • toString()
        • valueOf()

---

正则表达式

正则表达式（regular expression）是一个描述字符模式的对象
String和RegExp都定义了使用正则表达式进行模式匹配和文本检索与替换的函数
正则表达式主要用来验证客户端的输入数据

1. 创建正则表达式
   1. new运算符

      var box = new RegExp(‘box‘);
      var box = new RegExp(‘box‘,‘ig‘); //para1：字符串,para2：可选模式修饰符

   2. 字面量方式

      var box = /box/; //直接用两个反斜杠
      var box = /box/ig; //反斜杠后加上模式修饰符

   3. 参数：i->忽略大小写, g->全局匹配, m->多行匹配
2. RegExp对象
   1. 方法
      • test：在字符串中测试模式匹配，返回true或false
      • exec：在字符串中执行匹配搜索，返回第一个匹配值
   2. 静态属性
      • input
      • lastMatch
      • lastParen
      • leftContext
      • multiline
      • rightContext
   3. 实例属性
      • global
      • ignoreCase
      • lastIndex
      • multiline
      • Source
3. String对象中的正则表达式方法
   • match(pattern)
   • replace(pattern,replacement)
   • search(pattern)
   • split(pattern)
4. 元字符

   包含特殊含义的字符，可以控制匹配模式的方式

   1. 字符类：单个字符和数字
      • . 匹配除换行符外的任意字符
      • [a-z0-9] 匹配括号中的字符集中的任意字符
      • [^a-z0-9] 匹配不在括号中的任意字符
      • d 匹配数字
      • D 匹配非数字
      • w 匹配字母和数字及_
      • W 匹配非字母和数字及_
   2. 字符类：空白字符
      • 匹配null字符
      •  匹配空格字符
      • f 匹配进纸字符
      • 匹配换行符
      • 匹配回车字符
      • 匹配制表符
      • s 匹配空白字符、空格、制表和换行符
      • S 匹配非空白字符
   3. 字符类：重复字符
      • x？ 0或1个x
      • x* 0个或任意多个x
      • x+ 至少一个x
      • (xyz)+ 至少一个xyz
      • x{m,n} m-n个x
   4. 字符类：替代字符
      • this|where|logo 匹配this或where或logo中任意一个
   5. 字符类：锚字符
      • ^ 行首匹配
      • $ 行尾匹配
      • A 只匹配字符串开始处
      •  匹配单词便捷，词在[]内时无效
      • B 匹配非单词边界
      • G 匹配当前搜索的开始位置
      •  匹配字符串结束处或行尾
      • z 只匹配字符串结束处
   6. 字符类：记录字符
      • (string) 用于反向引用的分组
      • 1或$1 匹配第一个分组中的内容
      • 2或$2 匹配第二个分组中的内容
      • 3或$3 匹配第三个分组中的内容
5. 常用的正则
   • 检查邮政编码：

     var pattern = /[1-9][0-9]{5}/; //共6位数字，第1位不能为0

   • 检查文件压缩包：

     var pattern = /[w]+.zip|rar|gz/; //w表示所有数字和字母加下划线

   • 删除多余空格：

     var pattern = /s/g; //g必须全局，才能全部匹配

   • 删除首尾空格：

     var pattern = /^s+/; //强制首
     var str = ‘ goo gle ‘;
     var result = str.replace(pattern,‘‘);
     var pattern = /s+$/; //强制尾
     result = result.replace(pattern,‘‘);
     alert(‘|‘+result+‘|‘);

     var pattern = /^s*(.+?)s*$/; //使用了非贪婪捕获
     var str = ‘ google ‘;
     alert(‘|‘+pattern.exec(str)[1]+‘|‘);

     var pattern = /^s*(.+?)s*$/;
     var str = ‘ google ‘;
     alert(‘|‘+str.replace(pattern,‘$1‘)+‘|‘);

   • 简单的电子邮件验证：

     var pattern = /^([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+).([a-zA-Z]{2-4})$/;

     var pattern = /^([w.-]+)@([w.-]+).([w]{2-4})$/;