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 之后，再让 i 的值加上 1
- -- 自减 也有两种情况（跟自增一样的情况）
- --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() 方法
- instanceof
- 转换方法 (数组转换为字符串)
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
- 操作数组的方法
-
截取数组某部分 slice()
数组名.slice(start,end) 截取范围 [start,end)- 使用方法同字符串的 slice() 方法
- 不会改变原数组的值，返回一个数组
-
添加数组元素
- 为数组的开头添加元素： unshift() 队列方法，可以为数组添加任意个项，并返回数组的长度
- 为数组的末尾添加元素： push() 栈方法，接受任意数量的参数，返回数组的长度
- 栈数据结构访问规则
后进先出 （最新添加的最早被移除，在列表的末端添加项，从列表的末端移除项） - 队列数据结构访问规则
先进先出 （最先添加的最早被移除，在列表的末端添加项，从列表的前端移除项）
-
删除数组元素
- 从数组的末尾删除元素： 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
-
数组颠倒顺序
- reverse() 反转数组的顺序
- 示例
var values = [1,2,3,4,5]; values.reverse(); alert(values); // 5,4,3,2,1
-
数组大小比较
- 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
- 操作年月日
- 获取年 月 日
- getFullYear() 获取年份，取值为四位数
- getMonth() 获取月份，取值为 0 (一月)到11 (十二月)之间
- getDate() 获取日数，取值为1～31之间的整数
- 设置年 月 日
- setFullYear() 可以设置年 月 日
- setMonth() 可以设置月 日
- setDate() 可以设置日
- 获取年 月 日
- 操作时分秒
- 获取时 分 秒
- getHours(） 获取小时数，取值为 0 ～ 23 之间的整数
- getMinutes() 获取分钟数，取值为 0～59 之间的整数
- getSeconds()获取秒数，取值为 0～59 之间的整数
- 设置时 分 秒
- setHours() 可以设置时 分 秒 毫秒
- setMinutes() 可以设置分 秒 毫秒
- setSeconds() 可以摄住秒 毫秒
- 获取时 分 秒
- 获取星期几
- getDay() 返回一个数字 ，其中 0 表示星期天，1～6 分别表示星期一～星期六
- 想要将数字变为中文
可以定义一个数组 weekday，用来存储表示星期几的字符串var weekday = ["星期天"，"星期一","星期二","星期三","星期四","星期五","星期六"]； var d = new Date(); var myWeekday = weekday[d.getDay()];
- 示例 获取月份
var date = new Date(); var myMonth = date.getMonth() + 1 //
- 操作年月日
- 数学对象 Math
动画开发、高级编程、算法研究都跟数学对象有关
实际开发中，角度都是以”弧度”为单位的。推荐度数写法：度数*Math.PI/180-
Math 属性 (数学中常使用的”常量“)
- PI 圆周率
- LN2 2 的自然对数
- LN10 10 的自然对数
- LOG2E 以2为底的 e 的对数
- LOG10E 以 10 为底的 e 的对数
- SORT2 2 的平方根
- SORT1_2 2的平方根的倒数
-
Math 方法 (常用)
- max(a,b,···，n)
- min(a,b,···，n)
- sin(x)
- cos(x)
- atan2(x)
- floor(x) 向下取整
- ceil(x) 向上取整
- random() 随机数
-
Math 方法 (不常用)
- abs(x) 返回 x 的绝对值
- sqrt(x) 返回 x 的平方根
- log(x) 返回 x 的自然对数(以 e 底)
- pow(x,y) 返回 x 的 y 次幂
- exp(x) 返回 x 的指数
-
- 字符串对象 String
