JavaScript
1. JavaScript
- HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
- 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
- 推荐放在body体底部，由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
<!-- 方式一：导入js文件 -->
<script type="text/javascript" src="JS文件"></script>
<!-- 方式二：js代码放到body底部 -->
<script type="text/javascript">
Js代码内容
</script>
2.注释
我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
单行注释以 // 开头。
// 输出标题： document.getElementById("myH1").innerHTML="欢迎来到我的主页"; // 输出段落： document.getElementById("myP").innerHTML="这是我的第一个段落。";
多行注释以 /* 开始，以 */ 结尾。
/* 下面的这些代码会输出 一个标题和一个段落 并将代表主页的开始 */
3. 变量
- JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
- JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
// 方式1：先声明变量
var 变量名;
// 方式2：声明并赋值 var 变量名 = 变量值;
// 方式3：一行可以声明多个变量，并且可以是不同类型 var name = "jack", age = 20;
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
JavaScript 语句和 JavaScript 变量都对大小写敏感。
<script type="text/javascript">
// 全局变量
name = 'seven';
function func(){
// 局部变量
var age = 18;
// 全局变量
gender = "男"
}
</script>
4. 数据类型
JavaScript 中的数据类型分为原始类型和对象类型：
- 原始类型
- 数字
- 字符串
- 布尔值
- 对象类型
- 数组
- 对象
- ...
4.1 数字
JavaScript中不区分整数值和浮点数值都是number，JavaScript中所有数字均用浮点数值表示。
转换：
- parseInt(..) 将某值转换成数字，不成功则NaN
- parseFloat(..) 将某值转换成浮点数，不成功则NaN
- Number() 将某值转换成数值
特殊值：
- NaN，非数字。可使用 isNaN(num) 来判断。
- Infinity，无穷大。可使用 isFinite(num) 来判断。
var x = 5; var y = 3.1415; // console.log(变量) 打印，在浏览器检查中的Console中查看 // typeof 打印数据类型 console.log(x,typeof x); // 5 'number' console.log(y,typeof y); // 3.1415 'number' console.log(parseInt("5")); // 把数据转换成整数 结果：5 console.log(parseInt("aa")); // 结果：NaN console.log(parseFloat("3.1415")); // 把数据转换成浮点数 结果：3.1415 console.log(parseFloat("bbb")); // 结果：NaN
4.2 字符串
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常见功能：
.length 获取当前字符串长度 .trim() 移除空白 .trimLeft() .trimRight) .charAt(n) 返回字符串中的第n个字符 .concat(value, ...) 拼接 .indexOf(substring,start) 子序列位置 .lastIndexOf(substring,start) 子序列位置 .substring(from, to) 根据索引获取子序列---起始位置，结束位置 .slice(start, end) 切片 .toLowerCase() 大写 .toUpperCase() 小写
.toString() 转换成字符串 .split(delimiter, limit) 分割 .search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效) .match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。 .replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本 $$：直接量$符号
例子：
var obj=" Singing to wine, life geometry "; // console.log(变量) 打印，在浏览器检查中的Console中查看 console.log(obj); console.log(obj.length); // 字符串长度 console.log(obj.trim()); // 移除左右空白 console.log(obj.charAt(2)); // 返回下标为2的字符 console.log(obj.concat("a "," b")); // 拼接 console.log(obj.substring(3,34)); // 根据索引获取子序列 console.log(obj.indexOf("to")); // 返回to的下标 console.log(obj.slice(3,-1)); // 切片 console.log(obj.split(" ")); console.log(obj.split(" ",4)); // 空格分割限制返回的个数，4个
4.3 布尔类型
布尔类型仅包含真假，与Python不同的是其首字母小写。
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !== 不等于
- || 或
- && 且
布尔类型转换：
- Boolean(1) // 转换成布尔类型
console.log(true); console.log(false); console.log(typeof true); console.log(true === 1); console.log(true == 1); console.log(true + 1); console.log(false + 1);
4.4 空值(null和undefined)
- null表示变量的值是空。
- undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。
4.5 类型查询
typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number"
4.6 数组
JavaScript中的数组类似于Python中的列表。
// 创建方式1: var arrname = [元素0,元素1,….]; // 创建方式2: var arrname = new Array(元素0,元素1,….);
常见功能：
var aa = [123,"aa"] console.log(aa); // 打印数组 // length 数组的长度 console.log(aa.length) // push 尾部追加元素 aa.push("jack") console.log(aa) // pop 删除最后一个元素作为返回值 console.log(aa.pop()) // unshift 头部插入元素 console.log(aa.unshift("Tom")) console.log(aa) // shift 移除数组的第一个元素 console.log(aa.shift()) console.log(aa) // splice(操作位置的下标, 删除操作的成员长度, 替换或者添加的值1, 替换或者添加的值2,...) 插入、删除或替换数组的元素 // 指定位置插入元素 aa.splice(0,0,"替换值") console.log(aa) // 指定位置替换元素 aa.splice(0,0,"替换值1") console.log(aa) // 指定位置删除元素 aa.splice(0,1) console.log(aa) // slice(start, end) 切片 aa.slice(0, 1) console.log(aa) // reverse 反转 console.log(aa.reverse()) // join 拼接，将数组元素连接起来以构建一个字符串 console.log(aa.join("*")) // split() 分割字符串 var str = "广东-深圳-南山"; var res = str.split("-"); console.log( res ); // ["广东", "深圳", "南山"]; // concat() 把2个或者多个数组合并 var a2 = [6,7,8] aa.concat(a2) console.log(aa) // sort 对数组元素进行排序 aa.sort( ) // forEach() // 将数组的每个元素传递给回调函数 aa.forEach( // value：遍历的当前元素，index：当前索引, array：正在操作的数组 function (value, index, array){ console.log(value,index,array) } ) // map() // 返回一个数组元素调用函数处理后的值的新数组 // 遍历数组 for (var i in aa){ console.log(i,aa[i]) }
4.7 object 对象
JavaScript中的对象类似于Python中的字典。
语法：
// 方法1： var 变量名 = new Object(); // 方法2： var 变量名= {key:value, key:value, ....};
例子：
// 方法1：创建对象 var aa = new Object(); // 添加值 aa.name = "jack" // 打印值 console.log(aa.name) // 方法2：创建对象 var a2 = {name:"Tom",age:18} // 打印值 console.log(a2.name,a2.age)
5. 运算符
1. 算术运算符
- ++ 和 -- 在变量前和后面使用的区别。
- num++ ，在变量后面，会先执行程序，在自加或自减1
- ++num ，在变量前面，会先自加或自减1，在执行程序
// + 相加 console.log(2+1) // - 相减 console.log(2-1) // / 相除 console.log(2/2) // * 相乘 console.log(2*2) // % 取余数 console.log(3%2) // ** 求幂
console.log(2**4)
// ++ 自加一 var add = 1; console.log(add++) // 结果：1 。因为先输出add变量，在自加1 console.log(++add) // 结果：3 。上一行add加1后结果为2，自己加1后在输出。 // -- 自减一 var subtract = 4; console.log(subtract--) // 结果：4 。因为先输出subtract变量，在自减1 console.log(--subtract) // 结果：2 。上一行subtract减1后结果为3，自己减1后在输出。
2. 比较运算符
// > < >= <= == != === !==
// == 判断是否相等 console.log(2=="2") // 结果：true 会把数字转换成字符串，在判断是否相等 // === 判断值是否相等，还判断类型是否相等 console.log(2==="2") // 结果：false 直接判断是否相等 // != 判断是否不相等 console.log("2"!=2) // 结果：false 会把数字转换成字符串，在判断是否不相等 console.log("2"!==2) // 结果：true 直接判断是否不相等 // > 大于 console.log("10" > "2") // 结果：false 判断字符串第一个字符的ASCII码表的大小。 console.log("10" > 2) // 结果：true 先转换数字，在判断大于 // >= 大于等关于 console.log("10" >= "2") // 结果：false 判断字符串第一个字符的ASCII码表的大小。 console.log("2" >= 2) // 结果：true 先转换数字，在判断大于 // <= 大于等关于 console.log("10" <= "2") // 结果：true 判断字符串第一个字符的ASCII码表的大小。 console.log("2" <= 2) // 结果：true 先转换数字，在判断大于 // + 相加 console.log("1"+2) // 数字和字符串相见时，会把两个字符拼接在一起。
3. 逻辑运算符
// && || ! var a = 10 var b = 8 var c = 6 // && 并且 左右两边的表达式都为true,结果就为true,否则结果为false console.log(a > c && b > c) // true console.log(a > c && b > a) // false // || 或者 左右两边的表达式有一个true,结果就为true。都为false，则结果为false. console.log(a > c || b > a) // true console.log(c > a || c > b) // false // ! 非 表达式为true,结果为false。表达式为false,结果为true。 console.log(!(c < a)) // false , console.log(!(c > a)) // true
4. 赋值运算符
// = += -= *= /= %= **= // = 赋值 var num = 10 console.log(num) // 结果：10 // += 加等于 console.log(num+=2) // 结果：12 // -= 减等于 console.log(num-=4) // 结果：8 // *= 乘等于 console.log(num*=2) // 结果：16 // /= 除等于 console.log(num/=4) // 结果：4
5.逗号运算
// , 逗号运算 // (a,b,c) 先做a的运算，在做b的运算，最后做c的运算，在返回c运算后的结果。 function foo(){ var num = 1; return (num++,num+=10,y=num+1) } console.log(foo())
6. 流程控制
6.1 if判断
语法：
if (条件){ // 条件为true时,执行的代码 }else { // 条件为false时,执行的代码 }
例子：
// 条件判断 var a = 10; if (a > 5){ console.log("大于5"); }else { console.log("小于5"); } // 多条件判断 var a = 10; if (a < 5){ console.log("a < 5"); }else if (a < 10) { console.log("a < 10"); }else { console.log("a：",a); }
6.2 switch
语法：
switch(条件){ case 结果1: 当条件的结果是结果1时,执行这里的代码 break; case 结果2: 当条件的结果是结果2时,执行这里的代码 break; ..... default: 条件和上述所有结果都不相等时,则执行这里的代码 }
例子：
var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") } // switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
6.3 for循环
语法：
// 循环三要素 for(1.声明循环的开始; 2.条件; 3. 循环的计数){ // 循环条件为true的时候,会执行这里的代码 } for(循环的成员下标 in 被循环的数据){ // 当被循环的数据一直没有执行到最后下标,都会不断执行这里的代码 }
例子：
// 方式1：循环 for (var i = 0; i<10; i++){ console.log(i); } // 方式2：循环 var names = ["kaer", "tony", "rain"]; for(var i=0;i<names.length;i++){ console.log(i,names[i]); }
6.4 while循环
语法：
while(循环条件){ // 循环条件为true的时候,会执行这里的代码 }
例子：
var i =0; while (i<10) { console.log(i); i++; }
6.5 三目(元)运算
// 三目(元)运算 表达式?值1:值2 var a=2; var b=1; // 表达式为true返回值1，表达式为false返回值2 var c = a > b ? "值1" : "值2" var d = a < b ? "值1" : "值2" console.log(c) console.log(d)
json：JavaScript 对象表示法（JavaScript Object Notation），是一种轻量级的数据交换格式
- json是一种数据格式，语法一般是{}或者[]包含起来
- 内部成员以英文逗号隔开，最后一个成员不能使用逗号!
- 可以是键值对，也可以是列表成员
- json中的成员如果是键值对，则键名必须是字符串.而json中的字符串必须使用双引号圈起来
- json数据也可以保存到文件中，一般以".json"结尾.
- 前端项目中，一般使用json作为配置文件.
序列化和反序列化的方法：
// js对象,因为这种声明的对象格式很像json,所以也叫json对象 var data = { name: "jack", age: 22, say: function(){ alert(123); } }; // 把json对象转换成json字符串 var ret = JSON.stringify(data); console.log(ret ); // {"name":"jack","age":22} // 把json字符串转换成json对象 var str = `{"name":"jack","age":22}`; var ret = JSON.parse(str); console.log(ret);
//方法1：不指定参数 var nowd1=new Date(); console.log(nowd1.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 d4=new Date(5000); console.log(d4.toLocaleString( )); console.log(d4.toUTCString()); //方法4：参数为年月日小时分钟秒毫秒 var d5=new Date(2004,2,20,11,12,0,300); console.log(d5.toLocaleString( ));//毫秒并不直接显示
获取时间信息：
获取日期和时间 getDate() 获取日 getDay () 获取星期 getMonth () 获取月（0-11） getFullYear () 获取完整年份 getYear () 获取年 getHours () 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜)
日期和时间的转换：
日期和时间的转换: // 返回国际标准时间字符串 toUTCString() // 返回本地格式时间字符串 toLocalString() // 返回累计毫秒数(从1970/1/1午夜到本地时间) Date.parse(x) // 返回累计毫秒数(从1970/1/1午夜到国际时间) Date.UTC(x)
练习：
function getCurrentDate(){ //1. 创建Date对象 var date = new Date(); //没有填入任何参数那么就是当前时间 //2. 获得当前年份 var year = date.getFullYear(); //3. 获得当前月份 js中月份是从0到11. var month = date.getMonth()+1; //4. 获得当前日 var day = date.getDate(); //5. 获得当前小时 var hour = date.getHours(); //6. 获得当前分钟 var min = date.getMinutes(); //7. 获得当前秒 var sec = date.getSeconds(); //8. 获得当前星期 var week = date.getDay(); //没有getWeek // 2014年06月18日 15:40:30 星期三 return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week); } //解决 自动补齐成两位数字的方法 function changeNum(num){ if(num < 10){ return "0"+num; }else{ return num; } } //将数字 0~6 转换成 星期日到星期六 function parseWeek(week){ var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; // 0 1 2 3 ............. return arr[week]; } console.log(getCurrentDate());
9. Math对象
// Number对象的内置方法 // toFixed(x) 保留小数位 var num = 100.3; var ret = num.toFixed(2); console.log(num); // 100.3 console.log(ret); // 100.30 // Math对象的内置方法 // abs(x) 返回数值的绝对值 // var num = -10; console.log( Math.abs(num) ); // 10 // ceil(x) 向上取整 var num = 10.3; console.log( Math.ceil(num) ); // 11 // floor(x) 向下取整 var num = 10.3; console.log( Math.floor(num) ); // 10 // max(x,y,z,...,n) console.log( Math.max(3,56,3) ); // 56 // min(x,y,z,...,n) // pow(x,y) console.log(Math.pow(3, 2)); // 相等于 3**2 console.log( 3**2 ); // 使用这个,上面废弃 // random() 生成0-1随机数 console.log( Math.random() ); // 生成0-10之间的数值 console.log( Math.random() * 10 ); // round(x) 四舍五入 // 生成0-10之间的整数 console.log( Math.round( Math.random() * 10 ) );
例子：
var num=Math.random(); num=num*100; num=Math.round(num); console.log(num)
10. function函数
10.1 函数的声明与调用
函数的定义：
function 函数名 (参数){ 函数体; return 返回值; } // 调用函数 函数名()
-
预编译：会先检测代码的语法错误，进行变量、函数的声明。
-
例子：
// 普通函数定义 function f1() { console.log("Hello world!"); } f1(); // 调用函数 // 带参数的函数 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);
ES6中允许使用 箭头(=>) 定义函数。
var f = v => v; // 等同于 var f = function(v){ return v; }
如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：
var f = () => 5; // 等同于 var f = function(){return 5}; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2){ return num1 + num2; }
10.2 arguments参数
arguments参数相当于python中的*args
function add(a,b){ console.log(a+b); console.log(arguments.length) } add(1,2)
10.3 作用域
- 局部变量,是在函数内部声明,它的生命周期在当前函数被调用的时候, 当函数调用完毕以后,则内存中自动销毁当前变量
- 全局变量,是在函数外部声明,它的生命周期在当前文件中被声明以后就保存在内存中,直到当前文件执行完毕以后,才会被内存销毁掉
- 首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。
几个例子：
// 例子1： var city = "北京"; // 全局变量 function f() { var city = "上海"; // 局部变量 function inner(){ var city = "深圳"; // 局部变量 console.log(city); // inner()函数中有city变量，所以会先使用自己的变量，结果为：深圳 } inner(); } f(); // 例子2： var city = "北京"; function Bar() { console.log(city); // Bar自己内部没有city变量，使用全局变量city } function f() { var city = "上海"; return Bar; } var ret = f(); ret(); // 打印结果是？ // 例子3： var city = "北京"; function f(){ var city = "上海"; function inner(){ console.log(city); // inner()函数自己没有city变量，会去上层f()函数中找city变量 } return inner; } var ret = f(); ret();
11. 词法分析
JavaScript中在调用函数的那一瞬间，会先进行词法分析。
词法分析的过程：
当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：
- 函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
- 函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
- 函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。
函数内部无论是使用参数还是使用局部变量都到AO上找。
看两个例子：
// 例子1： var age = 18; function foo(){ console.log(age); var age = 22; console.log(age); } foo(); // 问：执行foo()之后的结果是？ // 例子2： var age = 18; function foo(){ console.log(age); var age = 22; console.log(age); function age(){ console.log("呵呵"); } console.log(age); } foo(); // 执行后的结果是？
词法分析过程： 1、分析参数，有一个参数，形成一个 AO.age=undefine; 2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理 3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...}; 最终，AO上的属性只有一个age，并且值为一个函数声明 执行过程： 注意：执行过程中所有的值都是从AO对象上去寻找 1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数 2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 2 3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了
浙公网安备 33010602011771号