一. 认识JavaScript
1. 什么是JavaScript
JavaScript是t一门轻量级的客户端脚本编程语言，运行在客户端，运行在浏览器上的语言，编程语言，都是面向对象来开发的。既可以用来实现页面交互效果, 也可以通过后台服务器更改数据,前端的数据也会随之更改.
2. JavaScript的引入方式
1) 写在HTML文档中<script></script>的标签内
<script> // 在这里写你的JS代码 </script>
2) 引入JS文件
<script src="myscript.js"></script>
3. JS的组成
1) ECMAScript(定义了JS的基本语法,命名规范,操作语句,变量,数据类型等最基础最核心的知识).
2) DOM(document object model 文档对象模型) 提供了JS操作页面上元素的常用属性和方法.
3) BOM(browser object model 浏览器对象模型) 提供了JS操作浏览器的常用属性和方法.
二. JavaScript的基本语法
1. 书写规范
每个语句以 " ; " 结束, 语句块用{…}表示. 但是，JavaScript并不强制要求在每个语句的结尾加 " ; " , 浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上.
2. 注释
// 表示单行注释; /*...*/表示多行注释.
// 单行注释 /*多 行 注 释*/
3. JS的变量命名规则
1) JavaScript的变量名可以使用_, 数字, 字母, $组成, 不能以数字开头.
2) 声明变量使用 " var 变量名; " 的格式来进行声明.
3) 不能使用关键字做变量名
4) 推荐使用驼峰式命名规则
5) 区分大小写
var a = 'jack';
4. JS的输出方式
1、alert(要输出的内容): 在浏览器中弹出一个框，在框中有我们要输出的内容（不管最后输出什么内容，输出的都是字符串内容） 2、confirm：在浏览器中弹出一个提示确认框（confirm("确定要删除吗?")） 3、console.log(要输出的内容); 按F12在控制台中的console页卡中显示（一般用于调试，不会影响页面中的内容） 4、console.dir：比.log输出的内容更加详细一些 5、console.table：把需要查看的数据在控制台中以一个表格的形式展示出来 6、document.write(输出的内容); 直接显示在页面中，不停的输出 7、innerHTML/innerText 动态的向指定的元素中添加内容
三. JavaScript的数据类型
typeof 操作符(是一个一元运算符（就像++，--，！，- 等一元运算符）)：用于检测给定变量的数据类型。
对变量或值调用 typeof 运算符将返回下列值之一：
undefined - 如果变量是 Undefined 类型的.
boolean - 如果变量是 Boolean 类型的.
number - 如果变量是 Number 类型的.
string - 如果变量是 String 类型的.
object - 如果变量是一种引用类型或 Null 类型的.
1. 数值 : number
JavaScript不区分整数和浮点数, 统一用Number表示. 还有一种NaN,表示不是一个数字(Not a Number),但是是number类型.
2. 字符串 : string
字符串是以单引号'或双引号"括起来的任意文本,拼接字符串用"+".
字符串的常用方法:
| 方法 | 说明 |
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
3. 布尔型 : boolean
true和false都是小写
var a = true var b = false
4. undefind
在使用var声明变量但未初始化时, 变量的值默认是undefined.还有就是函数无明确的返回值时,返回的也是undefined.
四. 对象 : object
JavaScript 中的所有事物都是对象 : 字符串、数值、数组、函数...此外, JavaScript 允许自定义对象. JavaScript 提供多个内建对象, 比如 String、Date、Array 等等. 对象只是带有属性和方法的特殊数据类型.
1. null
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null, null值表示一个空对象指针，使用typeof操作符检测null值会返回“object”
2. 数组 : Array
JavaScript的Array可以包含任意数据类型, 并通过索引来访问每个元素. 类似于Python中的列表.
var a = [123, "ABC"]; console.log(a[1]); // 输出"ABC"
遍历数组
var a = [10, 20, 30, 40]; for (var i=0;i<a.length;i++) { console.log(a[i]); } /* 10 20 30 40*/
数组的常用方法 :
| 方法 | 说明 |
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
1) length()
直接给Array的length赋一个新的值会导致Array大小发生变化：
var arr = ['a', 'b', 'c'] console.log(arr.length); // 3 arr.length = 5 console.log(arr) // ["a", "b", "c", undefined,undefined] 数组组的值和长度发生改变 console.log(arr.length) // 5
Array可以通过索引把对应的元素修改为新的值, 当索引超过了范围，会引起Array大小的变化：
// 通过索引改值 var arr = ['a', 'b', 'c'] arr[2] = 'C' console.log(arr) // ["a", "b", "C"] // 索引超过了范围 var arr = ['a', 'b', 'c'] arr[5] = 'd' console.log(arr) // ["a", "b", "c",undefined, undefined, "d"]
许多编程语言不允许直接改变数组的大小，越界访问索引会报错, 但是, JavaScript修改Array却不会有任何错误。
2 ) sort()
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序
arr = ['b', 'c', 'd', 'a'] arr.sort() // ["a", "b", "c", "d"]
function sortNumber(a,b){ return a - b } var arr1 = [11, 100, 22, 55, 33, 44] arr1.sort(sortNumber) // [11, 22, 33, 44, 55, 100]
3) concat()
concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array
arr1 = ['a','b','c'] arr2 = ['1','2','3'] ret = arr1.concat(arr2) ret // ["a", "b", "c", "1", "2", "3"]
4) join()
把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串
arr = ['a', 'b', 'c', 'd']; arr.join('-'); // "a-b-c-d"
5) forEach()
语法 : forEach(function(currentValue, index, arr), thisValue)
参数：
| 参数 | 描述 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 函数参数:
|
||||||||
| thisValue | 可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值 |
6) splice()
语法 : splice(index,howmany,item1,.....,itemX)
// 删除元素 两个参数 arr = ['a', 'b', 'c', 'd'] ret = arr.splice(0,2) // 从索引为0的项开始删,删除两个. console.log(ret) // ['a', 'b'] console.log(arr) // ['c'. 'd'] // 替换元素 三个参数 arr = ['a', 'b', 'c', 'd'] ret = arr.splice(1,2,'B','C','D') // 从索引为1的项开始删,删除两个后再从删除的位置添加三项'B','C','D' console.log(ret) // ["b", "c"] console.log(arr) // ["a", "B", "C", "D", "d"] // 插入元素 三个参数 arr = ['a', 'b', 'c', 'd'] ret = arr.splice(3,0,'B','C') // 从索引为3的项开始删,删除0个后,从索引为3的位置添加两项'B','C' console.log(ret) // [] console.log(arr) // ["a", "b", "c", "B", "C", "d"]
7) map()
语法 : map(function(currentValue,index,arr), thisValue)
参数：
| 参数 | 描述 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| function(currentValue, index,arr) | 必须。函数，数组中的每个元素都会执行这个函数 函数参数:
|
||||||||
| thisValue | 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined" |
五. 运算符
1. 算术运算符 : + - * / % ++ --
2. 比较运算符 : > >= < <= != == === !==
弱等于 == 比较，会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
强等于 === 比较，不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
相等比较时最好用强等于 : = = =
false == 0 // true false === 0 // false
但NaN是个特殊的Number与所有其他值都不相等，包括它自己. 唯一能判断NaN的方法是通过isNaN()函数：
NaN === NaN; // false isNaN(NaN); // true
浮点数的相等比较, 由于计算机内部以二进制保存，所以十进制的有限位的小数，在计算机内部会是一个无限位的小数. 浮点数在运算过程中会产生误差.
1/3 ===(1-2/3); // false 1.1 + 2.2 // 3.3000000000000003 存在误差
(1-2/3) - 1/3 < 0.0000001 // true
3. 逻辑运算符 : && || !
4. 赋值运算符 : = += -= *= /=
六. 条件判断
1. if ... else
var a = 10; if (a > 5){ console.log("yes"); }else { console.log("no"); }
2. if ... else if ... else
var a = 10; if (a > 5){ console.log("a > 5"); }else if (a < 5) { console.log("a < 5"); }else { console.log("a = 5"); }
3. switc ... case break
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
var day = new Date().getDay(); // 获取星期几 switch (day) { case 0: // 若day为0则执行case 0 : 下面的语句 console.log("Sunday"); break; // 跳出 case 1: // 若day为1则执行case 1 : 下面的语句 console.log("Monday"); break; default: // 不满足case 0 和case 1 条件时执行 console.log("...") }
4. 三元运算
var a = 1; var b = 2; var c = a > b ? a : b // 判断a是否大于b, a>b则c=a, 否则c=b 最后返回c
七. 循环
1. for
for (var i=0;i<10;i++) { console.log(i); }
for循环的3个条件都是可以省略的，如果没有退出循环的判断条件，就必须使用break语句退出循环，否则就是死循环：
var x = 0; for (;;) { // 将无限循环下去 console.log('无限循环') } var x = 0; for (;;) { // 将无限循环下去 if (x > 10) { break; // 通过if判断来退出循环 } x ++; }
for ... in
var dic = { name: 'Jack', age: 20, city: 'Beijing' }; for (var key in dic) { console.log(key); } /* name age city */
2. while
var i = 0; while (i < 10) { console.log(i); i++; }
do ... while循环 : 它和while循环的唯一区别在于，不是在每次循环开始的时候判断条件，而是先执行循环体,再去判断条件.
var n = 0; do { n = n + 1; } while (n < 10); n; // 10
八. 函数
1. 函数定义
/* 普通函数定义function指出这是一个函数定义,
f1是函数名,
()内可以写参数
{}内是函数体 */ function f1() { console.log("Hello world!"); } // 带参数的函数 function f2(a, b) { console.log(arguments); // 内置的arguments对象 console.log(arguments.length); console.log(a, b); } // 带返回值的函数 function sum(a, b){ return a + b; } sum(1, 2); // 调用函数 // 匿名函数方式 var sum = function(a, b){ return a + b; } sum(1, 2); // 立即执行函数 (function(a, b){ return a + b; })(1, 2);
2. 函数的调用
// 没有参数的函数 function f1(){ console.log('hello,world') } f1() // hello,world //有参数的函数 function f2(num1,num2){ return num1 } f2(5) // 5 传入的参数比定义的少也没有问题
3. 函数中的arguments参数
JavaScript还有一个关键字arguments,它只在函数内部起作用, 并且永远指向当前函数的调用者传入的所有参数. arguments类似Array但它不是一个Array：
function add(a,b){ console.log(a+b); // 3 console.log(arguments.length) // 3 } add(1,2,3)
4. 全局变量和局部变量
// 局部变量： 在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。 // 全局变量： 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。 // 变量生存周期： JavaScript变量的生命期从它们被声明的时间开始。 局部变量会在函数运行以后被删除。 全局变量会在页面关闭后被删除。
5. 作用域
函数体内部申明一个变量，则该变量的作用域为整个函数体，在函数体外不可引用该变量.
两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响
函数嵌套时, 内部函数可以访问外部函数定义的变量,反过来则不行.
6. 词法分析
JavaScript中在调用函数的那一瞬间，会先进行词法分析。
词法分析的过程：
当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：
1) 函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2) 函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3) 函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。
var age = 18; function foo(){ console.log(age); var age = 22; console.log(age); } foo(); // 22 var age = 18; function foo(){ console.log(age); var age = 22; console.log(age); function age(){ console.log("呵呵"); } console.log(age); } foo(); // 22 // 22
九. 内置对象和方法
JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。我们在学习基本数据类型的时候已经带大家了解了，JavaScript中的Number对象、String对象、Array对象等。注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --> string而 typeof s2 --> Object
| 类型 | 内置对象 | 介绍 |
| 数据类型 | Number | 数字对象 |
| String | 字符串对象 | |
| Boolean | 布尔值对象 | |
| 组合对象 | Arry | 数组对象 |
| Math | 数学对象 | |
| Date | 日期对象 | |
| 高级对象 | Object | 自定义对象 |
| Error | 错误对象 | |
| Function | 函数对象 | |
| RegExp | 正则表达式 | |
| Global | 全局对象 |
1. 自定义对象
JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。
var a = {"name": "jack", "age": 18}; console.log(a.name); console.log(a["age"]);
创建对象 :
var person=new Object(); // 创建一个person对象 person.name="Alex"; // person对象的name属性 person.age=18; // person对象的age属性
2. Date对象
1) 创建Date对象
//方法1：不指定参数 var d1 = new Date(); console.log(d1.toLocaleString()); //方法2：参数为日期字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString()); var d3 = new Date("04/03/20 11:12"); console.log(d3.toLocaleString()); //方法3：参数为毫秒数 var d3 = new Date(5000); console.log(d3.toLocaleString()); console.log(d3.toUTCString()); //方法4：参数为年月日小时分钟秒毫秒 var d4 = new Date(2004,2,20,11,12,0,300); console.log(d4.toLocaleString()); //毫秒并不直接显示
2) Date对象的方法
var d = new Date(); //getDate() 获取日 //getDay () 获取星期 //getMonth () 获取月（0-11） //getFullYear () 获取完整年份 //getYear () 获取年 //getHours () 获取小时 //getMinutes () 获取分钟 //getSeconds () 获取秒 //getMilliseconds () 获取毫秒 //getTime () 返回累计毫秒数(从1970/1/1午夜)
3. JSON对象
var str1 = '{"name": "jack'", "age": 18}'; var obj1 = {"name": "jack", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);
4. RegExp对象
//RegExp对象 //创建正则对象方式1 // 参数1 正则表达式(不能有空格) // 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写) // 用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。 // 创建RegExp对象方式（逗号后面不要加空格） var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配响应的字符串 var s1 = "bc123"; //RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。 reg1.test(s1); // true // 创建方式2 // /填写正则表达式/匹配模式（逗号后面不要加空格） var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; reg2.test(s1); // true // String对象与正则结合的4个方法 var s2 = "hello world"; s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正则 的内容 s2.search(/h/g); // 0 查找字符串中符合正则表达式的内容位置 s2.split(/o/g); // ["hell", " w", "rld"] 按照正则表达式对字符串进行切割 s2.replace(/o/g, "s"); // "hells wsrld" 对字符串按照正则进行替换 // 关于匹配模式：g和i的简单示例 var s1 = "name:jack Age:18"; s1.replace(/j/, "哈哈哈"); // "name:哈哈哈ack Age:18" s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:j哈哈哈ck Age:18" 全局匹配 s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:j哈哈哈ck 哈哈哈ge:18" 不区分大小写 // 注意事项1： // 如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。 // 该属性值默认为0，所以第一次仍然是从字符串的开头查找。 // 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。 // 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。 // 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。 // 如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。 var reg3 = /foo/g; // 此时 regex.lastIndex=0 reg3.test('foo'); // 返回true // 此时 regex.lastIndex=3 reg3.test('xxxfoo'); // 还是返回true // 所以我们在使用test()方法校验一个字符串是否完全匹配时，一定要加上^和$符号。 // 注意事项2(说出来你可能不信系列)： // 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。 var reg4 = /^undefined$/; reg4.test(); // 返回true reg4.test(undefined); // 返回true reg4.test("undefined"); // 返回true
5. Math对象
abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x) 对数进行下舍入。 log(x) 返回数的自然对数（底为e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。