JS初识
一、JS (JavaScript) 引入方式
1、Script 标签内写代码
<script> // 在这里写JS代码 </script>
2、引入额外的JS文件
<script src="myscript.js"></script>
二、JavaScript语言规范
1、注释
// 这是单行注释 /* 这是 多行 注释 */
2、结束符
在JavaScript 中的语句要以分号 ( ; ) 为结束符。
三、JavaScript语言基础
变量声明
1、变量名可以使用字母、数字、_、$组成，不能以数字开头。
2、声明变量使用 var 变量名; 的格式来进行声明。
var name = "alex"; var age = 18;
注意：变量名是区分大小写的。 推荐使用驼峰式命名规则。
四、JavaScript 数据类型
1、JavaScript 拥有动态类型
var x; // 此时x是undefined var x = 1; // 此时x是数字 var x = "alex" // 此时x是字符串
2、数字类型
JavaScript 不区分整型和浮点型，就只有一种数字类型。
var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123
常用方法：
parseInt("123"); // 返回123
parseInt("ABC"); // 返回NaN,NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字
parseFloat("123.456"); // 返回123.456
3、字符串
var a = "Hello"; var b = "word"; var c = a + b; console.log(c); // 结果是 Helloword
常用方法：
| 方法 | 说明 |
| obj.length | 返回长度 |
| obj.trim() | 移除空白 |
| obj.trimLeft() | 移除左边的空白 |
| obj.trimRight() | 移除右边的空白 |
| obj.charAt(n) | 返回第n个字符 |
| obj.concat(value,........) | 拼接 |
| obj.indexOf(变量名，开始位置) | 子序列位置 |
| obj.substring(from, to) | 根据索引获取子序列 |
| obj.slice(start, end) | 切片 |
| obj.toLowerCase() | 小写 |
| obj.toUpperCase() | 大写 |
| obj.split(delimiter, limit) | 分割 |
拼接字符串一般使用 “+” 。
4、布尔类型
区别于Python，true 和 false都是小写。
var a = true; var b = false;
5、数组
类似于Python中的列表。
var a = [123,"ABC"]; console.log(a); // 输出"ABC"
常用方法：
| 方法 | 说明 |
| obj.length | 数组的大小 |
| obj.push(ele) | 尾部追加元素 |
| obj.pop() | 获取尾部元素 |
| obj.unshift(ele) | 头部插入元素 |
| obj.shift() | 头部移除元素 |
| obj.slice() | 切片 |
| obj.reverse() | 反转 |
| obj.join(seq) | 将数组元素链接成字符串 |
| obj.concat(value, .........) | 连接数组 |
| obj.sort() | 排序 |
遍历数组中的元素：
var a = [10, 20, 30, 40]; for (var i = 0; i<a.length; i++) { console.log(i); // 结果是 0 1 2 3 遍历的是数组的下标 console.log(a[i]); // 结果是 0 10 1 20 2 30 3 40 遍历的是整个数组，且是类似键值对的对应输出 }
6、null 和 undefined
- undefined 表示的是当声明的变量未初始化时，该变量的默认值是 undefined 。还有就是函数无明确的返回值时，返回的也是 undefined。
- null 表示值不存在。
undefined 表示什么了变量，但是还没有赋值。null 声明了变量且变量值为空。
7、类型查询
typeof "abc"; // "string" typeof null; // "object" typeof true; // "boolean" typeof 123; // "number"
typeof 是一个一元运算符 （就像 ++，！，-等一元运算符），不是一个函数，也不是一个语句。
五、运算符
1、算数运算符
+ - * / % ++ --
2、比较运算符
> < >= <= != == === !==
注意：
1 =="1"; // true 1 === "1"; // false
3、逻辑运算符
&& // 逻辑与 || // 逻辑或 ! // 逻辑非
4、赋值运算符
= += -= *= /=
六、流程控制
1、if-else
var a = 10; if (a > 5) { console.log("yes"); }else { console.log("no"); } // 结果是 yes
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"); } // 结果是 a > 5
3、switch
var day = new Date().getDay(); switch (day) { case 0:console.log("星期日");break; case 1:console.log("星期一");break; case 2:console.log("星期二");break; case 3:console.log("星期三");break; case 4:console.log("星期四");break; case 5:console.log("星期五");break; case 6:console.log("星期六");break; }
4、for
for (var i = 0;i < 10;i++) { console.log(i); } // 结果是 0 1 2 3 4 5 6 7 8 9
5、while
var i = 0; while (i < 10) { console.log(i); i++; } // 结果是 0 1 2 3 4 5 6 7 8 9
6、三元运算
// 条件 ? 值1 : 值2 如果条件为真，则结果为 值1，否则结果是 值2 var a = 1; var b = 2; var c = a > b ? a : b console.log(c); // 结果是 2
七、函数
1、函数定义
// 普通函数定义 function f1(){ console.log("Hello world!"); } f1(); // 结果是 Hello world! // 带参数的函数 function f2(arg1,arg2) { console.log(arg1, arg2); } f2("alex", "特斯拉"); // 结果是 alex 特斯拉 // 带返回值的函数 function f3(rag1,rag2) { return rag1 + rag2; } f3(1,3); // 结果是 4 // 匿名函数 var sum = function (a, b) { return a + b; } sum(2,3); // 结果是 5 // 立执行函数 (function f4(a,b) { return a + b; })(2,4); // 结果是 6
2、函数的全局变量和局部变量
局部变量：
在JavaScript 函数内部声明的变量（使用 var）是局部变量，所有只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期：
JavaScript 变量的生命周期从它们被声明的时间开始。
局部变量会在函数运行完之后被删除。
全局变量会在页面关闭之后被删除。
3、作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。
例子：
1、
var city = "beijing"; function f5() { var city = "shanghai"; function inner() { var city = "shenzhen"; console.log(city); } inner(); } f5(); // 结果是 shenzhen
2、
var city = "beijing"; function bar() { console.log(city); } function f6() { var city = "shanghai"; return bar; } var ret = f6(); ret(); // 结果是 beijing
3、闭包
var city = "beijing"; function f7() { var city = "shanghai"; function inner() { console.log(city); } return inner; } var ret = f7(); ret(); // 结果是 shanghai
八、内置对象和方法
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期等。在JavaScript 中，对象是拥有属性和方法的数据。
1、自定义对象
类似于（某方面类似）Python中的字典数据类型
var a = {"name":"alex", "age":18}; console.log(a.name); // 结果是 alex console.log(a["age"]); // 结果是 18
遍历对象中的内容：
var a = {"name":"alex", "age":18}; for (var i in a ) { console.log(i); } // 结果是 name age 此时遍历的只是对象中的各个键
创建对象：
var p = new Object(); // 创建一个 p 对象 p.name = "alex"; // p 对象的name属性 p.age = 18; // p 对象的age属性
扩展：
// 父类构造函数 var fatherClass = function (loc) { this.loc = loc; }; // 父类方法 fatherClass.prototype.move = function() { this.loc ++; }; // 子类构造函数 var childClass = function (loc) { childClass(this,loc); }; // 继承父类的方法 childClass.prototype = Object.create(fatherClass.prototype); // 修复 constructor childClass.prototype.constructor = fatherClass; // 扩展方法 childClass.prototype.grab = function () { /*............*/ };
2、Date对象
创建Date对象
// 方法1：不指定参数 var d1 = new Date(); console.log(d1.toLocaleString()); // 结果是 2017/12/28 下午3:44:48 // 方法2：参数为日期字符串 var d2 = new Date("2018/1/1 11:11:11"); console.log(d2.toLocaleString()); // 结果是 2018/1/1 上午11:11:11 var d3 = new Date("17/01/01 11:12:12"); console.log(d3.toLocaleString()); // 结果是 Invalid Date // 方法3：参数为毫秒数 var d4 = new Date(5000000000000); console.log(d4.toLocaleString()); // 结果是 2128/6/11 下午4:53:20 console.log(d4.toUTCString()); // 这是UTC时间 结果是 Fri, 11 Jun 2128 08:53:20 GMT // 方法4：参数为年月日小时分钟秒毫秒 var d5 = new Date(2018,1,1,11,11,11,11); console.log(d5.toLocaleString()); // 毫秒并不直接显示 结果是 2018/2/1 上午11:11:11
Date对象的方法：
var d = new Date(); // getDate() 获取日 // getDay() 获取星期 // getMonth() 获取月( 0-11 ) // getFullYear() 获取完整年份 // getYear() 获取年( 从1900年开始 ) // getHours() 获取小时 // getMinutes() 获取分钟 // getSeconds() 获取秒 // getMilliseconds() 获取毫秒 // getTime() 返回累计毫秒数( 从1979/1/1 午夜开始 )
练习：编写代码，将当前日期按“2017-12-18 11:11 星期三” 格式输出
//将当前日期输出为“2017-12-27 11:11 星期三”格式 function getNow() { var d = new Date(); var dYear = d.getFullYear(); var dMonth = d.getMonth(); var dDay = d.getDate(); var dHour = d.getHours(); var dminute = d.getMinutes(); var dweek = d.getDay(); switch (dweek) { case 0:dweek = "星期日";break; case 1:dweek = "星期一";break; case 2:dweek = "星期二";break; case 3:dweek = "星期三";break; case 4:dweek = "星期四";break; case 5:dweek = "星期五";break; case 6:dweek = "星期六";break; } if (dminute<10) { dminute = "0" + dminute; } return (dYear + "-" + (dMonth+1) + "-" + dDay + " " + dHour + ":" + dminute + dweek); } ret = getNow(); console.log(ret);
3、JSON 对象
JSON能够实现序列化和反序列化
var a = {"name":"alex","age":38}; // 序列化 var s = JSON.stringify(a); console.log(a, typeof(a)); // 结果是 {name: "alex", age: 38} "object" console.log(s, typeof(s)); // 结果是 {"name":"alex","age":38} string // 反序列化 var obj = JSON.parse(s); console.log(obj, typeof(obj)); // 结果是 {name: "alex", age: 38} "object"
4、RegExp 对象
与正则表达式相关
// 定义方式1:"第一个参数：正则表达式","第二个参数：匹配模式g(全局匹配)或i(忽略大小写)" var r1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g"); var s1 = "alex123"; var s2 = "123alex"; console.log(r1.test(s1)); // 结果是 true console.log(r1.test(s2)); // 结果是 false // 定义方式2：/第一个参数：正则表达式/第二个参数：匹配模式g(全局匹配)或i(忽略大小写) var r2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g; console.log(r2.test(s1)); // 结果是 true console.log(r2.test(s2)); // 结果是 false
注意：在使用 g 的时候是全局匹配，但是如果连续两次对同一个变量使用 test 时，第一次 test 是从索引为0 的地方开始匹配的，但是第二次使用 test 的时候就是从索引为1的地方开始对变量进行正则匹配的。
5、Math 对象
// asb(x) 返回 x 的绝对值 // exp(x) 返回e的指数(返回的其实就是e的x次方的值) // floor(x) 对 x 进行下舍入(向下取整) // log(x) 返回 x 的自然对数（低为e） // max(x,y) 返回 x 和 y 中的最高值 // min(x,y) 返回 x 和 y 中的最小值 // pow(x,y) 返回 x 的 y 次幂 // random() 返回0-1之间的随机数 // round(x) 把 x 四舍五入为最接近的整数 // sin(x) 返回 x 的正弦 // sqrt(x) 返回 x 的平方根 // tan(x) 返回角 x 的正切
