JavaScript 基础知识总结(一)

2018-01-22 本文已影响205人工具速递

JavaScript

JavaScript 简介

1. 前端技术的三大核心

HTML、CSS 和 JavaScript。HTML 控制着网页的结构，CSS 控制网页的外观，JavaScript 控制着网页的行为。

2. 常见的问题

JavaScript 与 Java 有什么关系？

虽然名字相似，但是本质上是不同的

JavaScript 常常在网页中使用，而 Java 可以在软件、网页、手机 APP 等各个领域使用。

从本质上讲，Java 是一门面向对象的语言，而 JavaScript 更像是一门函数式编程语言。

静态网页和动态网页的区别

是否与服务器进行数据交互（是否用到后端技术如PHP、JSP、ASP.NET）。

并不是会动的页面就是动态页面

学习 JavaScript 好的建议

学完 JavaScript 基础知识，不要急于去学习 JavaScript 高级知识，而是应该学习 jQuery ，通过它可以让我们对 JavaScript 有更深层次的理解。等学完 jQuery 再去学习 JavaScript 的高级内容

对于初学者，不必要搞清楚每一个细节，遇到实在不懂的地方，直接跳过，等到学习的更深入的时候，自然就理解了。

JavaScript 引入方式

1. 外部 JavaScript

指的是把 HTML 和 JavaScript 代码分别放在不同的文件中

引入方式：使用 script 标签的 src 属性指向 javaScript 文件的文件路径。

外部 JavaScript 文件不仅可以放在 head 中引入，还可以在 body 标签中引入。但考虑到网站的加载速度和代码的执行顺序，一般将 JavaScript 外部文件放在 body 标签的 </body> 前。

2. 内部 JavaScript

指的是把 HTML 和 JavaScript 代码放在同一个文件中

引入方式：将 JavaScript 代码放在 <script></script> 标签中。

内部 JavaScript 文件不仅可以在 head 中引入，还可以在 body 中引入。一般情况下在 head 中引入

3. 元素事件中调用 JavaScript

值的是在元素的事件属性中直接编写 JavaScript 或调用函数。

这里的事件作为元素的属性

JavaScript 基本语法

1. 语法简介

学习任何一门语言都得学习这门语言的词汇、语法和结构等。同样学习一门编程语言，也需要学习类似的东西。只不过，这些在编程语言里不叫词汇、语法、结构，而是变量、表达式、运算符等。

2. 变量

变量：在JavaScript 中即可以改变的量。也就是说在程序执行的过程中，变量的值是可以改变的。

变量的命名原则

变量由字母、下划线、$或数字组成，并且第一个字母必须是字母、下划线或者$

变量不能是系统关键字和保留字。

系统的关键字指 JavaScript 本身已经使用的名字。

保留字指 JavaScript 本身还没有使用的名字，虽然没有使用，但是它们有可能在将来会被使用。

变量的声明

在 ES5 中，变量使用 var 来声明

变量的赋值

变量可以先声明后赋值，比如 var a;a = 10;

变量可以直接赋值，比如 var a = 10;

一个 var 也可以同时声明多个变量名，其中变量名之间必须用英文逗号隔开，比如 var a = 10 , b = 30 , c = 50;

3. 常量

指的是：一个不能改变的值，生命周期是从一个程序开始到一个程序结束。一般情况下，常量名全部大写，比如 var ADD = 1;

4. 数据类型

类型识别

typeof 操作符返回一个字符串

可以识别基本数据类型（Null 除外，Null 类型返回 “object”）
不能识别具体的对象（object）类型（function除外）
语法
typeof operand
operand 是一个表达式，表示对象或原始值，其类型将被返回。

示例

              //Numbers
              typeof 37 === 'number';
              typeof 3.14 === 'number';
              typeof Math.LN2 === 'number';
              typeof Infinity === 'number';
              typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写
             
             // Strings
             typeof "" === 'string';
             typeof "bla" === 'string';
             typeof (typeof 1) === 'string'; // typeof总是返回一个字符串
             typeof String("abc") === 'string'; // 但不要使用这种形式!

             // Booleans
             typeof true === 'boolean';
             typeof false === 'boolean';
             typeof Boolean(true) === 'boolean'; // 但不要使用这种形式!

             // Symbols
             typeof Symbol() === 'symbol';
             typeof Symbol('foo') === 'symbol';
             typeof Symbol.iterator === 'symbol';
             // Undefined
             typeof undefined === 'undefined';
             typeof declaredButUndefinedVariable === 'undefined';
             typeof undeclaredVariable === 'undefined';

             // Objects
             typeof {a:1} === 'object';

             // 使用Array.isArray 或者 Object.prototype.toString.call
             // 区分数组,普通对象
             typeof [1, 2, 4] === 'object';
             typeof new Date() === 'object';

             // 下面的容易令人迷惑，不要使用！
             typeof new Boolean(true) === 'object';
             typeof new Number(1) === 'object';
             typeof new String("abc") === 'object';

             // 函数
             typeof function(){} === 'function';
             typeof class C{} === 'function'
             typeof Math.sin === 'function';
             typeof new Function() === 'function';

             //null
             typeof null === 'object'; // 从一开始出现JavaScript就是这样的

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
- 判别内置对象类型和自定义对象类型
- 不能判别原始类型
- 语法
  object instanceof constructor
constructor
- 识别标准类型（Undefined 和 Null 除外）
- 识别内置对象类型
- 识别自定义对象类型
object.prototype.toString
- 可以识别标准类型以及内置对象类型
- 不可以识别自定义类型

基本数据类型：Undefined 、Null、Boolean 、Number、String

Undefined 类型（未定义的值）

未初始化的变量
未声明的变量

Null 类型

如果一个变量的值是 null ，则表示系统没有为这个变量分配内存空间
从逻辑角度来来说，null 值表示空对象指针

Boolean 类型（布尔值）

布尔值只有两个：true 和 false
最大用途，用于条件的判断

Number 类型（数字）

在 JavaScript 中不区分整形和浮点型
对于极大或者极小的数值，可以用科学计数法表示
NaN 非数值
- 任何涉及 NaN 的操作（例如 NaN/10）都会返回 NaN
- NaN 与任何值都不相等，包括 NaN 本身
- isNaN() 函数接受任何类型，isNaN() 在接受一个参数时，会尝试将这个值转换为数值，判断参数是否 “不是数值”。

String 类型（字符串）

使用英文单引号或者双引号括起来的内容
在单引号中不可以包含单引号，但可以包含双引号

在双引号中不可以包含双引号，但可以包含单引号

         var str = "This ia a string";
         var str = '这是一个字符串';
         var str = 'This is a "string"';
         var str = "这是一个'字符串'";

5. 运算符

算数运算符

" + " 加法
- 数字 + 数字 = 数字
- 字符串 + 字符串 = 字符串
- 字符串 + 数字 = 字符串
" - " 减法
" * " 乘法
" / " 除法
% 求余 10 % 4 = 2
++ 自增
- i++ 指的是在使用 i 之后，再让 i 的值加上 1
  i = 1;j = i++
  上面的代码等价于 i = 1; j = 1; i = i+1; //最终结果 j = 1 , i = 2
- ++i 值得是在使用 i 之前，先让 i 的值加上1
  i = 1; j = ++i;
  上面的等价于 i = 1; i = i + 1; j = i; // 最终结果为 j = 2 , i = 2
-- 自减也有两种情况（跟自增一样的情况）
- --i
- i--

赋值运算符

=
+=
var a += b 等价于 var = a + b
-=
var a -= b 等价于 var a = a - b
*=
var a *= b 等价于 var a = a * b
/=
var a /= b 等价于 var a = a / b

比较运算符（结果为 true 或者 false）

    >
    <
    >=
    <=
    ==
    !=

逻辑运算符

&&
运算符 && 两边，只要有一个不为真就返回 false
||
运算符 || 两边只要有一个为真就返回 true
!
取反，返回布尔值

条件运算符
条件运算符（也叫三目运算符）。var a = 条件？表达式1 : 表达式2

当条件为 true 时，a = 表达式1
但条件为 false 时， a = 表达式2

6. 表达式与语句

一个表达式包含“操作数”和“操作符”。比如 a = b +2
语句就是用英文分号分开的代码，一个分号就对应一条语句
var a = 1 +2; // 这是一条语句，其中 a = 1 +2 是一个表达式

7. 类型转换

String 类型转换为 Number类型

Number()
可以将任何“数字型字符串转换成”数字
parseInt() 、parseFloat()
提取“首字符为数字的任意字符串”中的数字，parseInt() 提取的是整数部分，parseFloat() 提取的不仅是整数部分，还提取小数部分，如果第一个字符不是数字（“+”“-” 字符除外），则返回 NAN。

数字转换为空字符串

与空字符串相加 (隐式类型转换法)
toString() 方法 (显示类型转换法)
在实际的开发中，如果想要将数字转换为字符串，很少使用 toString() 方法，而更多的是使用隐式类型转换法

转义字符
注释

单行注释
- // 单行注释
多行注释
- /* 多行注释 */

流程控制
在 JavaScript 中，有{} 括起来的程序，我们称之为“语句块”。语句块常用于选择结构，循环结构以及函数体中，JavaScript 把一个语句块看成是一个整体来执行。

顺序结构

单向选择 if···
多向选择 if ··· else ···
双向选择 if ··· else if ··· else ···
if 语句的嵌套

选择结构

if 语句

switch 语句 (switch 在实际开发中非常重要)

switch (判断值) {
          case 取值 1:
                  语句块 1; break;
          case 取值 2:
                  语句块 2; break;
          ······
          case 取值 n:
                  语句块 n; break;
          default:
                  语句块 n+1;
          }

循环结构

while 语句
while (expression) statement
示例

     var i = 0;
      while (i < 10) {
      i += 2;
      }

do-while 语句
do {
statement
} while (expression)
示例

      var i = 0;
      do {
            i += 2;
         } while (i < 10);

for 语句
总结
while 语句和 do-while 语句是可以相互转换的
while 语句是“先判断后执行”，do-while 语句是“先循环后判断”，因此 do-while 语句会无条件执行一次
在实际开发中，一般都是使用 while 语句

函数

为了减轻重复编码的负担，JavaScript 引入了函数的概念

函数分类

自定义函数
内置函数
JavaScript 内部已经定义好的函数，我们不需要自己写函数体，直接调用即可
- parseInt() 提取字符串中的数字，只提取整数部分
- parseFloat() 提取字符串中的数字，可以提取小数
- isFinite() 判断某一个数是否是一个有限数
- isNaN() 判断一个数是否是 NaN 值
- escape() 对字符串进行编码
- unescape() 对字符串进行解码
- eval() 把一个字符串当作一个表达式去执行

函数一般在以下两中情况中使用

需要重复使用
特定功能

在 JavaScript 中，如果想要使用函数（内置函数除外），一般只需两步

定义函数
调用函数

函数的定义

没有返回值的函数
有返回值的函数：执行完以后，会返回一个值，这个值可以供我们使用

总结

有返回值的函数，相对没有返回值的函数来说，只多了一个 return 语句。return 语句就是用来返回一个结果
一般情况下，如果后面的程序需要用到函数的计算结果，就要用 return 语句返回
如果一个函数仅仅被定义而没有被调用，则函数本身不会执行。
JavaScript 自上而下执行代码，遇到函数定义部分会直接跳过（忽略掉），只有遇到函数调用才会返回来去执行定义部分。
一般情况下，函数值可以返回一个值或者变量，若想要返回多个值，可以返回一个数组。

函数的调用方式

直接调用（一般用于“没有返回值的函数”）
在表达式中调用（一般用于“有返回值的函数”）
在超链接中调用
在事件中调用

嵌套函数

引用类型

在 ECMAScript 中，引用类型是一种数据结构，用于将数据和功能结合起来，引用类型的值（对象）是引用类型的一个实例

Object 类型
Array 类型
Date 类型
RegExp 类型
Function 类型
基本包装类型
- Boolean 类型
- Number 类型
- String 类型

对象简介

一组数据和功能的集合
对象可以通过 new 操作符后跟要创建的对象类型(构造函数)的名称来创建
创建 Object 类型的实例并为其添加属性或方法，就可以创建自定义对象

对象分类

内置对象 (常用)
- 字符串对象 String
  - 属性
    - 获取字符串的长度
    - 语法：字符串名.length
    - 在实际开发中，获取字符串的长度用的非常多
  - 方法
    - 获取单个字符 charAt() , charCodeAt() 以字符编码的形式返回
    - 语法: 字符串名.charAt() , 字符串名.charCodeAt()
    - 方括号语法取得单个字符 字符串名[i]
  - 字符串的操作方法
    - 连接字符
      - concat() 用于将一个或多个字符串拼接起来，返回拼接得到的新字符串
      - 在实际的开发中，拼接字符串更多的是使用，加号操作符。
    - 截取字符 slice()、substr()、sunstring()
      - 返回被截取的字符串，接受一个或两个参数。
      - 取值范围 [start,end)
      - 不会修改原字符串的值，只会返回一个基本类型的字符串的值
      - substr() 的第一个参数表示截取的开始位置，第二个参数表示返回的字符个数
      - slice() 和 substring() 的第一个参数表示截取的开始位置，第二个参数表示截取的结束位置
      - 如果没有给这些方法传递第二个参数，则将字符串的末尾作为结束位置
      - 示例
        
        var stringValue = "Hello world"; stringValue.slice(3) // "lo world" stringValue.substring(3) // "lo world" stringValue.substr(3) // "lo world" stringValue.slice(3,7) // "lo w" stringValue.substring(3,7) // "lo w" stringValue.substr(3,7) // "lo worl"
      - 参数为负值的情况
        
        slice() 将所有的负值与字符串的长度相加
        
        substring() 将所有的负值变为 0 ，这个方法会将较小的数作为开始位置，将较大的数作为结束位置
        
        substr() 将第一个参数的负值与字符串的长度相加后的值作为第一个参数，第二个参数的负值变为 0
        
        示例
        var stringValue = "Hello world"; stringValue.slice(-3) // 等价于 stringValue(-3+11) "rld" stringValue.substring(-3) // 等价于 stringValue(0) "Hello world" stringValue.substr(-3) // 等价于 stringValue(-3+11) "rld" stringValue.slice(3,-4) // 等价于 stringValue(3,7) "lo w" stringValue.substring(3,-4) // 等价于 stringValue(0,3) "Hel" stringValue.substr(3,-4) // 等价于 stringValue(3,0) "空字符串"
    - 检索字符串的位置
      - indexOf() 从字符串的开头开始搜索
      - lastIndexOf() 从字符串的结尾开始搜索
        这两个方法都是从一个字符串中搜索给定的字符串，并返回字符串的位置，如果没有找到，则返回 -1
      - 示例
        var stringValue = "hello world"; sringValue.indexOf("o"); // 4 stringValue.lastIndexOf("o"); // 7
      - 可以接受第二个参数，表示从字符串的那个位置开始搜索
        
        示例
        var stringValue = "hello world"; stringValue.indexOf("o",6) // 7 stringValue.lastIndexOf("o",6); // 4
    - 分割字符 split()
      把一个字符串分割成一个数组，这个数组存放的是原来字符串的所有字符片段
      - 语法 字符串名.split(“分隔符”)
        
        分隔符可以是一个字符、多个字符或一个正则表达式。分隔符并不作为返回数组元素的一部分
        
        示例
        var stringValue = "HTML,CSS,JavaScript"; var arr; arr = stringValue.split(","); console.log(arr[0]); // HTML console.logg(arr[1]) // CSS console.log(arr[3]) // JavaScript
    - 替换字符 replace() ，返回新的字符串
      用一个字符串替换另一个字符串的某一部分，
      - 语法：字符串名.replace(原字符串/正则表达式，替换字符串)
      - 示例
        var str = "I love javascript"; str_new = str.replace("javascript","vue.js"); console.log(str_new); // "I love vue.js"
    - 大小写转换
      toLowerCase() 大写转小写
      toUpperCase() 小写转大写
- 数组对象 Array
  - 数组的创建
    - 使用 new 关键字来创建
```
var arr = new Array ();
var arr = new Array(20); // 创建 length 值为 20 的数组
var arr = new Array("red","blue","green"); // 创建一个包含 3 个字符串的数组
```
    - 数组字面量
```
var arr = ["red","blue","green"];
var arr = []; // 创建一个空数组
```
- 属性 length
- 检测数组方法
  - instanceof
    if (value instanceof Arrary) { //执行某操作}
  - isArray() 方法
- 转换方法 (数组转换为字符串)
  - toLocaleString()、toString()、valueOf()
  - 调用 valueOf() 返回的是数组本身
  - 调用 toString() 和 toLocaleString() 方法，返回数组中由每个值的字符串形式，拼接而成的一个以逗号分隔开的字符串
  - 示例
```
var colors = ["red","blue","green"]';
concole.log(colors.toString()); // red,blue,green
console.log(colors.toLocaleString()) // red,blue,green
console.log(colors.valueOf()) // red,blue,green
```
  - join() 方法
    调用数组的 join() 方法，可以使用不同的分隔符返回字符串
    示例
```
var colors = ["red","blue","green"]';
console.log(colors.join("|")) // red | blue | sgreen
```
- 操作数组的方法
  1. 截取数组某部分 slice()
    数组名.slice(start,end) 截取范围 [start,end)
    - 使用方法同字符串的 slice() 方法
    - 不会改变原数组的值，返回一个数组
  2. 添加数组元素
    - 为数组的开头添加元素： unshift() 队列方法，可以为数组添加任意个项，并返回数组的长度
    - 为数组的末尾添加元素： push() 栈方法，接受任意数量的参数，返回数组的长度
    - 栈数据结构访问规则
      后进先出（最新添加的最早被移除，在列表的末端添加项，从列表的末端移除项）
    - 队列数据结构访问规则
      先进先出（最先添加的最早被移除，在列表的末端添加项，从列表的前端移除项）
  3. 删除数组元素
    - 从数组的末尾删除元素： pop() 栈方法，从数组的末尾移除最后一项，减少数组的 length 值，返回移除的项
    - 从数组的开头删除元素： shifft() 队列方法，从数组的开头移除一项，减少数组的 length 值，返回移除的项
    - 示例 push() 、pop()
```
var colors = ["red","black"];
var count = colors.push("green")
console.log(colors[2]); // black
cosole.log(count); // 3
var item = colors.pop(); // 栈方法，最后添加的先被移除
console.log(item); // green
console.log(count); // 2
```
    - 示例 shift() 、 push()
```
var colors = ["red","black"]；
var count = colors.push("green");
console.log(count); // 3
var item = colors.shift(); // 队列方法，先添加的先被移除
console.log(item); // red
console.log(count); // 2
```
  4. 数组颠倒顺序
    - reverse() 反转数组的顺序
    - 示例
```
var values = [1,2,3,4,5];
values.reverse();
alert(values); // 5,4,3,2,1
```
  5. 数组大小比较
    - sort() 按升序排列数组项，在排序时，sort() 方法会调用数组项的 toString() 转型方法，然后比较得到的字符串
    - 示例
```
  var values = [0,1,5,10,15];
  values.sort();
  alert(values); // 0,1,10,15,5 由于调用了 toSstring() 方法，故“10” < "5"
```
    - sort() 还可以接受一个比较函数作为参数，返回负数则 value1 > value2；返回正数或者 0 ，则 value1 < value2；
```
function compare (value1,value2) {
return value1 - value2;
}
var values = [0,1,5,10,15];
alert(values.sort(compare)); // 0,1,5,10,15
```
- 时间对象 Date
  1. 操作年月日
    - 获取年月日
      - getFullYear() 获取年份，取值为四位数
      - getMonth() 获取月份，取值为 0 (一月)到11 (十二月)之间
      - getDate() 获取日数，取值为1～31之间的整数
    - 设置年月日
      - setFullYear() 可以设置年月日
      - setMonth() 可以设置月日
      - setDate() 可以设置日
  2. 操作时分秒
    - 获取时分秒
      - getHours(）获取小时数，取值为 0 ～ 23 之间的整数
      - getMinutes() 获取分钟数，取值为 0～59 之间的整数
      - getSeconds()获取秒数，取值为 0～59 之间的整数
    - 设置时分秒
      - setHours() 可以设置时分秒毫秒
      - setMinutes() 可以设置分秒毫秒
      - setSeconds() 可以摄住秒毫秒
  3. 获取星期几
    - getDay() 返回一个数字，其中 0 表示星期天，1～6 分别表示星期一～星期六
    - 想要将数字变为中文
      可以定义一个数组 weekday，用来存储表示星期几的字符串
```
var weekday = ["星期天"，"星期一","星期二","星期三","星期四","星期五","星期六"]；
var d = new Date();
var myWeekday = weekday[d.getDay()];
```
  4. 示例获取月份
```
var date = new Date();
var myMonth = date.getMonth() + 1 //
```
- 数学对象 Math
  动画开发、高级编程、算法研究都跟数学对象有关
  实际开发中，角度都是以”弧度”为单位的。推荐度数写法：度数*Math.PI/180
  1. Math 属性 (数学中常使用的”常量“)
    - PI 圆周率
    - LN2 2 的自然对数
    - LN10 10 的自然对数
    - LOG2E 以2为底的 e 的对数
    - LOG10E 以 10 为底的 e 的对数
    - SORT2 2 的平方根
    - SORT1_2 2的平方根的倒数
  2. Math 方法 (常用)
    - max(a,b,···，n)
    - min(a,b,···，n)
    - sin(x)
    - cos(x)
    - atan2(x)
    - floor(x) 向下取整
    - ceil(x) 向上取整
    - random() 随机数
  3. Math 方法 (不常用)
    - abs(x) 返回 x 的绝对值
    - sqrt(x) 返回 x 的平方根
    - log(x) 返回 x 的自然对数(以 e 底)
    - pow(x,y) 返回 x 的 y 次幂
    - exp(x) 返回 x 的指数